/* ============================================================
   ATLAS STUDIO — Liquid Glass Design System
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand blues */
  --blue-50:  #EEF4FF;
  --blue-100: #DCE8FF;
  --blue-200: #B9D1FF;
  --blue-300: #8AB3FF;
  --blue-400: #5B92FF;
  --blue-500: #2F6BFF;
  --blue-600: #1B4FDB;
  --blue-700: #133AA6;
  --blue-900: #0A1F5C;

  --aqua-300: #7FE3F0;
  --aqua-400: #46CFE4;
  --aqua-500: #16B6D4;

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-liquid: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t: .35s;
  --t-slow: .7s;

  /* Layout */
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --nav-h: 92px;

  /* Fonts */
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
}

/* ---------- Light theme (default) ---------- */
:root,
[data-theme="light"] {
  --bg: #F5F9FF;
  --bg-top: #FFFFFF;
  --bg-deep: #E7EFFC;
  --text: #0B1729;
  --text-2: #43536E;
  --text-3: #77869E;
  --accent: var(--blue-500);
  --accent-soft: var(--blue-400);
  --accent-2: var(--aqua-400);
  --accent-text: var(--accent);
  --accent-ink: #FFFFFF;
  --btn-from: var(--blue-400);
  --btn-to: var(--blue-600);
  --accent-rgb: 47, 107, 255;
  --btn-a: .90;                 /* how solid the glass buttons sit */
  --btn-b: .74;
  --btn-text: #FFFFFF;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-bg-soft: rgba(255, 255, 255, .34);
  --glass-brd: rgba(255, 255, 255, .78);
  --glass-brd-2: rgba(13, 40, 90, .07);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-shadow: 0 18px 45px -18px rgba(12, 38, 84, .22), 0 2px 8px -2px rgba(12, 38, 84, .08);
  --glass-shadow-lg: 0 42px 90px -34px rgba(12, 38, 84, .40), 0 6px 20px -8px rgba(12, 38, 84, .14);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .35);

  --blob-1: rgba(72, 139, 255, .30);
  --blob-2: rgba(120, 220, 238, .26);
  --blob-3: rgba(150, 180, 255, .28);
  --blob-4: rgba(255, 255, 255, .92);

  --grid-line: rgba(24, 60, 120, .055);
  --water: 47, 107, 255;
  --menu-bg: rgba(255, 255, 255, .94);
  --nav-bg: rgba(255, 255, 255, .34);
  --nav-bg-scrolled: rgba(255, 255, 255, .52);
  --nav-brd: rgba(255, 255, 255, .60);
  --logo-filter: none;          /* house blue: the file as it is */
  --nav-pill: rgba(255, 255, 255, .62);
  --nav-pill-hover: rgba(255, 255, 255, .26);
  --nav-pill-brd: rgba(255, 255, 255, .95);
  --scheme: light;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg: #05080F;
  --bg-top: #080D1A;
  --bg-deep: #020409;
  --text: #FFFFFF;
  --text-2: #D3E0F2;
  --text-3: #9FB3CC;
  --accent: #5B92FF;
  --accent-soft: #7FE3F0;
  --accent-2: var(--aqua-300);
  --accent-text: var(--accent);
  --accent-ink: #04122E;
  --btn-from: var(--blue-400);
  --btn-to: var(--blue-600);
  --accent-rgb: 91, 146, 255;
  --btn-a: .72;
  --btn-b: .46;

  --glass-bg: rgba(255, 255, 255, .055);
  --glass-bg-strong: rgba(255, 255, 255, .10);
  --glass-bg-soft: rgba(255, 255, 255, .028);
  --glass-brd: rgba(255, 255, 255, .13);
  --glass-brd-2: rgba(255, 255, 255, .07);
  --glass-hi: rgba(255, 255, 255, .35);
  --glass-shadow: 0 20px 50px -22px rgba(0, 0, 0, .85), 0 2px 10px -4px rgba(0, 0, 0, .6);
  --glass-shadow-lg: 0 50px 110px -40px rgba(0, 0, 0, .9), 0 8px 26px -12px rgba(0, 0, 0, .7);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04);

  --blob-1: rgba(43, 96, 220, .60);
  --blob-2: rgba(16, 150, 190, .42);
  --blob-3: rgba(90, 60, 210, .40);
  --blob-4: rgba(10, 30, 80, .70);

  --grid-line: rgba(180, 210, 255, .05);
  --water: 130, 190, 255;
  --menu-bg: rgba(8, 14, 28, .95);
  --nav-bg: rgba(255, 255, 255, .045);
  --nav-bg-scrolled: rgba(255, 255, 255, .085);
  --nav-brd: rgba(255, 255, 255, .14);
  --nav-pill: rgba(255, 255, 255, .16);
  --nav-pill-hover: rgba(255, 255, 255, .08);
  --nav-pill-brd: rgba(255, 255, 255, .30);
  --scheme: dark;
}


/* ============================================================
   BRAND REALMS — one colour territory per business line.
   Home and contacts keep the house blue; each service page
   repaints accents, background and glow.
   ============================================================ */

/* ---------- 1. Premium stock — old-world Italy: verde antico, brass, travertine ---------- */
[data-realm="premium"] {
  --accent: #A8283C;            /* Ruby */
  --accent-text: #8C1F31;
  --accent-soft: #7B2130;       /* Rich */
  --accent-2: #7B2130;
  --accent-ink: #FBF7F3;        /* Warm white */
  --btn-from: #B02B3D;
  --btn-to: #7B2130;
  --accent-rgb: 168, 40, 60;
  --btn-text: #FDF7F2;          /* warm white on ruby */

  --bg-top: #FFFCF6;
  --bg: #F7EFE2;                /* warm beige */
  --bg-deep: #EFE1CE;
  --blob-1: rgba(168, 40, 60, .24);
  --blob-2: rgba(237, 217, 220, .40);   /* powder rose */
  --blob-3: rgba(123, 33, 48, .18);
  --blob-4: rgba(247, 236, 214, .92);   /* sand, not white */
  --grid-line: rgba(123, 33, 48, .07);
  --water: 168, 40, 60;
  --logo-filter: hue-rotate(152deg) saturate(.95) brightness(.94);
}
[data-theme="dark"][data-realm="premium"] {
  --accent: #E0576E;
  --accent-text: #F08D9F;
  --accent-soft: #EDD9DC;
  --accent-2: #EDD9DC;          /* powder rose */
  --accent-ink: #2A0A12;
  --btn-from: #B02B3D;
  --btn-to: #7B2130;
  --accent-rgb: 224, 87, 110;

  --bg-top: #3A0E18;
  --bg: #290A12;                /* dark wine */
  --bg-deep: #160408;
  --blob-1: rgba(168, 40, 60, .62);
  --blob-2: rgba(237, 217, 220, .16);
  --blob-3: rgba(123, 33, 48, .50);
  --blob-4: rgba(41, 10, 18, .82);
  --grid-line: rgba(237, 217, 220, .07);
  --water: 224, 87, 110;
  --logo-filter: hue-rotate(152deg) saturate(.9) brightness(1.04);
}

/* ---------- 2. AI datasets — electric violet ---------- */
[data-realm="dataset"] {
  --accent: #7C3AED;            /* Electric Violet */
  --accent-text: #6D28D9;
  --accent-soft: #A855F7;
  --accent-2: #A855F7;
  --accent-ink: #FFFFFF;
  --btn-from: #8B5CF6;
  --btn-to: #6021D0;
  --accent-rgb: 124, 58, 237;
  --btn-a: .90;
  --btn-b: .74;
  --btn-text: #FFFFFF;

  --bg-top: #FFFFFF;
  --bg: #F5F1FF;
  --bg-deep: #E6DDFF;
  --blob-1: rgba(124, 58, 237, .22);
  --blob-2: rgba(168, 85, 247, .18);
  --blob-3: rgba(196, 181, 253, .34);
  --blob-4: rgba(255, 255, 255, .92);
  --grid-line: rgba(60, 20, 120, .07);
  --water: 124, 58, 237;
  --logo-filter: hue-rotate(26deg) saturate(.85) brightness(1.0);
}
[data-theme="dark"][data-realm="dataset"] {
  --accent: #B794FF;
  --accent-text: #C4A9FF;
  --accent-soft: #E9D5FF;
  --accent-2: #E9D5FF;
  --accent-ink: #14082E;
  --btn-from: #8B5CF6;
  --btn-to: #5B21B6;
  --accent-rgb: 183, 148, 255;
  --btn-a: .74;
  --btn-b: .48;

  --bg-top: #1B1040;
  --bg: #120A2E;                /* Void */
  --bg-deep: #080418;
  --blob-1: rgba(124, 58, 237, .70);
  --blob-2: rgba(168, 85, 247, .42);
  --blob-3: rgba(196, 181, 253, .16);
  --blob-4: rgba(18, 10, 46, .82);
  --grid-line: rgba(196, 181, 253, .07);
  --water: 183, 148, 255;
  --logo-filter: hue-rotate(26deg) saturate(.82) brightness(1.08);
}

/* ---------- 3. Brand & e-commerce — marketplace orange over deep navy ---------- */
[data-realm="commerce"] {
  /* rich green on white */
  --accent: #0E7C52;            /* Rich Emerald */
  --accent-text: #0A6242;
  --accent-soft: #17A66C;
  --accent-2: #17A66C;          /* Fresh Green */
  --accent-ink: #FFFFFF;
  --btn-from: #17A66C;
  --btn-to: #0A5E3E;
  --accent-rgb: 14, 124, 82;
  --btn-a: .95;                 /* solid emerald: the CTA carries the page */
  --btn-b: .80;
  --btn-text: #FFFFFF;
  --cell-a: .80;
  --cell-b: .56;

  --bg-top: #FFFFFF;
  --bg: #F4FBF7;                /* white with a green breath */
  --bg-deep: #DFF2E8;
  --blob-1: rgba(14, 124, 82, .26);
  --blob-2: rgba(23, 166, 108, .24);
  --blob-3: rgba(201, 235, 217, .58);
  --blob-4: rgba(255, 255, 255, .90);
  --grid-line: rgba(6, 69, 46, .07);
  --water: 14, 124, 82;
  --logo-filter: hue-rotate(300deg) saturate(.85) brightness(1.0);
}
[data-theme="dark"][data-realm="commerce"] {
  --accent: #3FC98E;
  --accent-text: #6FE0AC;
  --accent-soft: #C9EBD9;
  --accent-2: #C9EBD9;
  --accent-ink: #04241A;
  --btn-from: #17A66C;
  --btn-to: #0A5E3E;
  --accent-rgb: 63, 201, 142;
  --btn-a: .78;
  --btn-b: .50;
  --cell-a: .60;
  --cell-b: .36;

  --bg-top: #0A3324;
  --bg: #052A1C;                /* deep forest */
  --bg-deep: #02140E;
  --blob-1: rgba(14, 124, 82, .68);
  --blob-2: rgba(23, 166, 108, .30);
  --blob-3: rgba(201, 235, 217, .12);
  --blob-4: rgba(5, 42, 28, .82);
  --grid-line: rgba(201, 235, 217, .07);
  --water: 63, 201, 142;
  --logo-filter: hue-rotate(300deg) saturate(.8) brightness(1.12);
}

/* territory swatches used on the home page cards */
.realm-dots { display: flex; gap: 6px; }
.realm-dots i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 2px 6px rgba(12, 38, 84, .18);
}

/* home-page cards borrow their territory's colours */
.pillar--premium {
  --accent: #A8283C; --accent-text: #8C1F31; --accent-2: #7B2130; --accent-soft: #7B2130;
  --btn-from: #B02B3D; --btn-to: #7B2130; --accent-ink: #FBF7F3; --btn-text: #FDF7F2;
  --accent-rgb: 168, 40, 60;
}
[data-theme="dark"] .pillar--premium {
  --accent: #E0576E; --accent-text: #F08D9F; --accent-2: #EDD9DC;
  --btn-from: #B02B3D; --btn-to: #7B2130; --accent-ink: #2A0A12; --accent-rgb: 224, 87, 110;
}
.pillar--data {
  --accent: #7C3AED; --accent-text: #6D28D9; --accent-2: #A855F7; --accent-soft: #A855F7;
  --btn-from: #8B5CF6; --btn-to: #6021D0; --accent-ink: #FFFFFF;
  --accent-rgb: 124, 58, 237;
}
[data-theme="dark"] .pillar--data {
  --accent: #B794FF; --accent-text: #C4A9FF; --accent-2: #E9D5FF;
  --btn-from: #8B5CF6; --btn-to: #5B21B6; --accent-ink: #14082E; --accent-rgb: 183, 148, 255;
}
.pillar--brand {
  --accent: #0E7C52; --accent-text: #0A6242; --accent-2: #17A66C; --accent-soft: #17A66C;
  --btn-from: #17A66C; --btn-to: #0A5E3E; --accent-ink: #FFFFFF; --btn-text: #FFFFFF;
  --accent-rgb: 14, 124, 82; --btn-a: .95; --btn-b: .80;
}
[data-theme="dark"] .pillar--brand {
  --accent: #3FC98E; --accent-text: #6FE0AC; --accent-2: #C9EBD9;
  --btn-from: #17A66C; --btn-to: #0A5E3E; --accent-ink: #04241A; --accent-rgb: 63, 201, 142;
  --btn-a: .78; --btn-b: .50;
}
.pillar--premium .pillar-glow,
.pillar--data .pillar-glow,
.pillar--brand .pillar-glow { background: radial-gradient(circle, var(--accent), transparent 65%); }

/* The three direction buttons on the home page. They stay inside the house
   blue-to-aqua ramp — the home page runs the house palette, not a territory
   colour — and only the depth of the shade separates them. */
.btn--brand   { --accent-rgb: 47, 107, 255; }
.btn--data    { --accent-rgb: 27, 79, 219; }
.btn--premium { --accent-rgb: 11, 128, 152; }
[data-theme="dark"] .btn--brand   { --accent-rgb: 99, 146, 255; }
[data-theme="dark"] .btn--data    { --accent-rgb: 60, 110, 245; }
[data-theme="dark"] .btn--premium { --accent-rgb: 64, 200, 224; }

/* The three direction buttons, drawn the way iOS draws a widget: a deeply
   frosted slab, a bright hairline along the top edge, a wide diffuse shadow
   and only a breath of the territory's colour inside. */
.btn-glass.btn--brand,
.btn-glass.btn--data,
.btn-glass.btn--premium {
  position: relative;
  color: rgb(var(--accent-rgb));
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .55);
  /* barely any fill: the page shows through and the blur does the work */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .02));
  backdrop-filter: blur(40px) saturate(215%);
  -webkit-backdrop-filter: blur(40px) saturate(215%);
  box-shadow:
    0 18px 38px -22px rgba(20, 30, 60, .34),
    0 3px 8px -4px rgba(20, 30, 60, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(var(--accent-rgb), .10);
}
/* the specular sheen across the top half, the way light sits on glass */
.btn-glass.btn--brand::after,
.btn-glass.btn--data::after,
.btn-glass.btn--premium::after {
  content: "";
  position: absolute;
  inset: 1px 1px 45% 1px;
  border-radius: 25px 25px 60% 60% / 25px 25px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}
.btn-glass.btn--brand:hover,
.btn-glass.btn--data:hover,
.btn-glass.btn--premium:hover {
  border-color: rgba(255, 255, 255, .82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .14)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .05));
  box-shadow:
    0 26px 48px -22px rgba(var(--accent-rgb), .45),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
[data-theme="dark"] .btn-glass.btn--brand,
[data-theme="dark"] .btn-glass.btn--data,
[data-theme="dark"] .btn-glass.btn--premium {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .04));
  box-shadow:
    0 20px 40px -24px rgba(0, 0, 0, .70),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(var(--accent-rgb), .20);
}
[data-theme="dark"] .btn-glass.btn--brand::after,
[data-theme="dark"] .btn-glass.btn--data::after,
[data-theme="dark"] .btn-glass.btn--premium::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}
[data-theme="dark"] .btn-glass.btn--brand:hover,
[data-theme="dark"] .btn-glass.btn--data:hover,
[data-theme="dark"] .btn-glass.btn--premium:hover {
  border-color: rgba(255, 255, 255, .38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .07));
  box-shadow:
    0 28px 52px -24px rgba(var(--accent-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}

/* three pillars sit tighter than two */
.pillars { display: grid; gap: clamp(16px, 2vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pillars { grid-template-columns: 1fr; } }
.pillars .pillar { min-height: 0; }
.pillars .pillar h3 {
  font-size: clamp(1.22rem, 1.7vw, 1.55rem);
  min-height: 2.2em;             /* room for two lines, so the text below lines up */
  display: flex;
  align-items: flex-start;
}
.pillars .pillar > p { min-height: 7.4em; }   /* lists start on one line too */
.pillars .pillar ul { margin-bottom: 6px; }
.pillars .pillar li { font-size: .88rem; }
@media (max-width: 1080px) {
  .pillars .pillar h3,
  .pillars .pillar > p { min-height: 0; }
}

/* rows shared across the three cards: icon, swatches, title, text, list, button.
   Every line then matches in any language, without guessing at heights. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .pillars { grid-template-rows: repeat(6, auto); }
    .pillars .pillar {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
    }
    .pillars .pillar h3,
    .pillars .pillar > p { min-height: 0; }
    .pillars .pillar h3 { align-items: center; }
    .pillars .pillar .btn { margin-top: 0; align-self: end; }
  }
}

/* territory swatches used on the home page cards */
.realm-dots { display: flex; gap: 6px; }
.realm-dots i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 2px 6px rgba(12, 38, 84, .18);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  color-scheme: var(--scheme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--t-slow) var(--ease), color var(--t) var(--ease);
}

body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(var(--accent-rgb), .22); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* ---------- 3. Background: liquid environment ---------- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 38%, var(--bg-deep) 100%);
}

.bg-stage::after {
  /* fine grid, like a technical sheet under the glass */
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .82;
  will-change: transform;
  animation: drift 26s var(--ease) infinite alternate;
}
.blob.b1 { width: 46vw; height: 46vw; left: -8vw;  top: -12vw; background: var(--blob-1); }
.blob.b2 { width: 40vw; height: 40vw; right: -6vw; top: 4vw;   background: var(--blob-2); animation-duration: 32s; animation-delay: -6s; }
.blob.b3 { width: 52vw; height: 52vw; left: 22vw;  top: 52vh;  background: var(--blob-3); animation-duration: 38s; animation-delay: -14s; }
.blob.b4 { width: 34vw; height: 34vw; right: 8vw;  bottom: -10vw; background: var(--blob-4); animation-duration: 30s; animation-delay: -20s; filter: blur(90px); }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, 5vh, 0) scale(1.12); }
  100% { transform: translate3d(-3vw, -4vh, 0) scale(.94); }
}

/* Fountain canvas — global pointer water */
#water-canvas,
#camera-canvas,
#firework-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}
#camera-canvas { z-index: 9997; }
/* under the toast (9999) so "Copied" stays readable through the sparks */
#firework-canvas { z-index: 9996; }

/* ---------- 4. Glass primitives ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), var(--inner-hi);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  isolation: isolate;
}

/* specular sweep along the top edge */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
      var(--glass-hi) 0%, transparent 32%, transparent 66%, rgba(255, 255, 255, .28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.glass-soft { background: var(--glass-bg-soft); }
.glass-strong { background: var(--glass-bg-strong); }

/* liquid sheen that follows the cursor (set via JS --mx/--my) */
.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, .30), transparent 62%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.sheen:hover::after { opacity: 1; }
[data-theme="dark"] .sheen::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
      rgba(120, 180, 255, .16), transparent 62%);
}

/* ---------- 5. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

section { position: relative; }
.section { padding-block: clamp(46px, 6vw, 88px); }
.section-sm { padding-block: clamp(30px, 4vw, 54px); }

.stack   { display: grid; gap: 18px; }
.stack-l { display: grid; gap: 32px; }
.center  { text-align: center; justify-items: center; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. Typography scale ---------- */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.9vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.02;
}
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.028em; }
.h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 750; letter-spacing: -.024em; }
.h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.014em; }
.h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--text-2);
  line-height: 1.6;
  /* A lead follows the window instead of standing at a fixed width: it runs the
     full width of whatever it sits in until that is 600px wide, and past that it
     keeps a growing margin on the right (half of the extra width, at most 400px),
     so its edge moves with the page at every size without a jump. */
  max-width: calc(100% - clamp(0px, (100% - 600px) * .5, 400px));
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Headline halves carry the colour of the page they point to:
   commerce = rich emerald, datasets = electric violet. Values are the
   realm accents copied literally, since the home page runs the house blue. */
.grad-commerce,
.grad-dataset,
.grad-premium {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-commerce { background-image: linear-gradient(100deg, #0E7C52 0%, #17A66C 55%, #0E7C52 100%); }
.grad-dataset  { background-image: linear-gradient(100deg, #7C3AED 0%, #A855F7 55%, #7C3AED 100%); }
.grad-premium  { background-image: linear-gradient(100deg, #A8283C 0%, #CC4A5F 55%, #A8283C 100%); }
[data-theme="dark"] .grad-commerce { background-image: linear-gradient(100deg, #3FC98E 0%, #9BEDC6 55%, #3FC98E 100%); }
[data-theme="dark"] .grad-dataset  { background-image: linear-gradient(100deg, #B794FF 0%, #E9D5FF 55%, #B794FF 100%); }
[data-theme="dark"] .grad-premium  { background-image: linear-gradient(100deg, #E0576E 0%, #F7B3BF 55%, #E0576E 100%); }

/* ---------- 7. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--t) var(--ease-liquid),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the CTA is glass too: tinted, blurred, lit from above */
.btn-primary {
  color: var(--btn-text, var(--accent-text));
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), var(--btn-a)), rgba(var(--accent-rgb), var(--btn-b)));
  border-color: rgba(var(--accent-rgb), .50);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  box-shadow:
    0 6px 16px -10px rgba(var(--accent-rgb), .45),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), calc(var(--btn-a) + .06)),
      rgba(var(--accent-rgb), calc(var(--btn-b) + .10)));
  border-color: rgba(var(--accent-rgb), .62);
  box-shadow:
    0 16px 36px -10px rgba(var(--accent-rgb), .85),
    0 0 0 6px rgba(var(--accent-rgb), .16),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
[data-theme="dark"] .btn-primary {
  color: var(--btn-text-dark, #FFFFFF);   /* maximum contrast on dark glass */
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), var(--btn-a)), rgba(var(--accent-rgb), var(--btn-b)));
  border-color: rgba(var(--accent-rgb), .48);
  box-shadow:
    0 8px 20px -12px rgba(var(--accent-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow:
    0 16px 36px -10px rgba(var(--accent-rgb), .85),
    0 0 0 6px rgba(var(--accent-rgb), .18),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-glass {
  color: var(--text);
  background: var(--glass-bg);
  border-color: var(--glass-brd);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  box-shadow: 0 8px 22px -14px rgba(12, 38, 84, .35), var(--inner-hi);
}
.btn-glass svg { color: var(--accent-text); }
.btn-glass:hover {
  background: var(--glass-bg-strong);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 10px 26px -12px rgba(var(--accent-rgb), .55), var(--inner-hi);
}

.btn-aqua {
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(70, 207, 228, .34), rgba(22, 182, 212, .16));
  border-color: rgba(70, 207, 228, .45);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  box-shadow: 0 14px 32px -14px rgba(22, 182, 212, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--glass-brd-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent-soft); }

/* Liquid glass, the quiet premium variant: the page shows through, the accent
   lives in the rim, the label and a soft halo underneath. */
.btn-lux {
  color: var(--accent-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05));
  border-color: rgba(var(--accent-rgb), .34);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    0 14px 34px -22px rgba(var(--accent-rgb), .8),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(var(--accent-rgb), .12);
}
.btn-lux:hover {
  border-color: rgba(var(--accent-rgb), .52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .26)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .09));
  box-shadow:
    0 22px 46px -20px rgba(var(--accent-rgb), .9),
    0 0 0 6px rgba(var(--accent-rgb), .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
[data-theme="dark"] .btn-lux {
  color: #FFFFFF;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .06));
  border-color: rgba(var(--accent-rgb), .46);
  box-shadow:
    0 16px 38px -22px rgba(var(--accent-rgb), .9),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(var(--accent-rgb), .18);
}
[data-theme="dark"] .btn-lux:hover {
  border-color: rgba(var(--accent-rgb), .66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .07)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .10));
  box-shadow:
    0 24px 50px -20px rgba(var(--accent-rgb), 1),
    0 0 0 6px rgba(var(--accent-rgb), .12),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-lg { padding: 18px 32px; font-size: 1.02rem; }
.btn-sm { padding: 11px 20px; font-size: .86rem; }

/* ripple (JS injects .ripple span) */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  animation: ripple .75s var(--ease) forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* icon button — round glass pill from the reference kits */
.icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--inner-hi);
  cursor: pointer;
  color: var(--text);
  transition: transform var(--t) var(--ease-liquid), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.icon-btn:hover { transform: translateY(-2px); color: var(--accent-text); border-color: var(--accent-soft); }
.icon-btn svg { width: 19px; height: 19px; }

/* The studio name and what it is, above the description in the hero. The two
   paragraphs belong together, so they sit in their own group with a small gap
   instead of the wide one the hero column uses between blocks. */
.hero-copy { display: grid; gap: 12px; }
.lead-sm { font-size: clamp(.94rem, 1.15vw, 1.06rem); color: var(--text-3); }
.lead-name { margin-bottom: 6px; color: var(--text-2); }
.lead-name strong {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .015em;
  color: var(--text);
}

/* ============================================================
   12b. THE PRINT — the hero photo shown the way a print is shown:
   mounted in a paper mat, with a gallery label under it and two more
   sheets peeking out from underneath. Replaces the glass panel; the
   previous version is kept in _versions/premium-hero-v2/.
   ============================================================ */
.hero-art {
  position: relative;
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 1000px) { .hero-art { order: 2; } }
/* The pair of buttons shares its row and fills it: side by side they end where
   the column ends (and, stacked under the print, where the print ends). The
   Russian label is the long one — a slightly tighter inline padding keeps both
   buttons on one line there too. */
/* the paragraph under the studio line is set justified, so its right edge is as
   straight as the left one; hyphenation (by the page language) keeps the gaps
   between words even, and the last line stays flush left */
[data-realm="premium"] .hero .lead-sm { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; }
/* The same on every page with a row of buttons in its first screen (brands,
   datasets, premium, contact): the buttons grow until the row is full, so their
   right edge is the column's right edge at any window width; when they no longer
   fit side by side, each takes a whole row. */
.hero .hero-cta:not(.hero-cta--stack) { align-items: stretch; }
/* a button never shrinks below its label (its overflow is hidden, so it would clip
   the text) — when the row gets tight it moves to a row of its own instead */
.hero .hero-cta:not(.hero-cta--stack) .btn,
.cta-band .hero-cta > .btn { min-width: fit-content; }
.hero .hero-cta:not(.hero-cta--stack) .btn {
  flex: 1 1 auto;
  justify-content: center;
  padding-inline: 22px;
}

/* The badges of the first screen are cut from the same ruby as the mount, so
   the screen reads as one material. */
[data-realm="premium"] .hero-badges .chip {
  border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(168deg, #B02B3D 0%, #7B2130 100%);
  color: rgba(255, 247, 244, .94);
  box-shadow: 0 12px 26px -18px rgba(74, 18, 28, .60),
              inset 0 1px 0 rgba(255, 255, 255, .20);
}
[data-realm="premium"] .hero-badges .chip svg { color: rgba(255, 247, 244, .80); }
[data-realm="premium"] .hero-badges .dot {
  background: #FFD6DC;
  box-shadow: 0 0 0 4px rgba(255, 214, 220, .16);
}
[data-theme="dark"][data-realm="premium"] .hero-badges .chip {
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(168deg, #551423 0%, #330B16 100%);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .75),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Contact (and any page in the house blue) in the day theme: the badges over the
   heading are cut from the same blue as the mail pill below. */
[data-theme="light"]:not([data-realm]) .hero-badges .chip {
  border-color: rgba(255, 255, 255, .32);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .28), transparent 55%),
    linear-gradient(135deg, #6A95FF 0%, #3F6DF6 48%, #2B50D8 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 26px -16px rgba(47, 107, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-theme="light"]:not([data-realm]) .hero-badges .chip svg { color: rgba(255, 255, 255, .92); }
[data-theme="light"]:not([data-realm]) .hero-badges .dot { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, .24); }

/* AI datasets in the day theme: the badges and the main button are cut from deep
   violet the way the premium page cuts them from ruby; the second button stays
   light glass. The night theme keeps its glass look. */
[data-theme="light"][data-realm="dataset"] .hero-badges .chip {   /* a gentle lavender violet, in tune with the camera */
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(168deg, #9A7CF0 0%, #6E4ED2 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 26px -18px rgba(88, 60, 180, .55),
              inset 0 1px 0 rgba(255, 255, 255, .30);
}
[data-theme="light"][data-realm="dataset"] .hero-badges .chip svg { color: rgba(255, 255, 255, .92); }
[data-theme="light"][data-realm="dataset"] .hero-badges .dot {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .24);
}
[data-theme="light"][data-realm="dataset"] .hero .hero-cta .btn-lux {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(168deg, #7C3AED 0%, #4C1D95 100%);
  box-shadow: 0 16px 34px -18px rgba(76, 29, 149, .75),
              inset 0 1px 0 rgba(255, 255, 255, .26),
              inset 0 -1px 0 rgba(20, 8, 46, .25);
}
[data-theme="light"][data-realm="dataset"] .hero .hero-cta .btn-lux:hover {
  border-color: rgba(255, 255, 255, .30);
  background: linear-gradient(168deg, #8B5CF6 0%, #5B21B6 100%);
  box-shadow: 0 22px 44px -18px rgba(76, 29, 149, .85),
              0 0 0 6px rgba(124, 58, 237, .12),
              inset 0 1px 0 rgba(255, 255, 255, .32);
}
/* The primary call is set in capitals with air between the letters. The size is
   left alone on purpose: a smaller font shrinks the line box, and the two
   buttons side by side would end up different heights. */
[data-realm="premium"] .hero .hero-cta .btn-primary {
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* on a narrow phone the capitalised label is wider than the screen: let it
   break instead of pushing the page sideways */
@media (max-width: 620px) {
  [data-realm="premium"] .hero .hero-cta .btn {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* "Start here": a small white sticker on the corner of the main button, so the
   first thing the eye lands on is the way into the portfolio. The sticker floats
   a little, its dot breathes and the button sends out a soft ring now and then;
   hover and keyboard focus stop the ring, and nothing moves for people who ask
   for less motion. Clicks go straight through the sticker to the button. */
[data-realm="premium"] .hero .hero-cta,
[data-realm="dataset"] .hero .hero-cta { position: relative; }
.cta-hint {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hint-brd, rgba(176, 43, 61, .28));
  background: #FFFFFF;
  color: var(--hint-ink, #8E1F33);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(74, 18, 28, .55),
              inset 0 -1px 0 rgba(176, 43, 61, .08);
  transform: rotate(-4deg);
  transform-origin: left center;
  pointer-events: none;
  animation: ctaHintFloat 2.8s ease-in-out infinite;
}
.cta-hint::after {                    /* the little tail pointing at the button */
  content: "";
  position: absolute;
  left: 18px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: #FFFFFF;
  border-right: 1px solid var(--hint-brd, rgba(176, 43, 61, .28));
  border-bottom: 1px solid var(--hint-brd, rgba(176, 43, 61, .28));
  transform: rotate(45deg);
}
.cta-hint-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--hint-dot-rgb, 210, 59, 83));
  animation: ctaHintDot 1.6s ease-out infinite;
}
[data-realm="premium"] .hero .hero-cta .btn-primary { animation: ctaRing 2.6s ease-out infinite; }
[data-realm="premium"] .hero .hero-cta .btn-primary:hover,
[data-realm="premium"] .hero .hero-cta .btn-primary:focus-visible { animation: none; }
/* AI datasets: the same ring on its main button, in the page's violet (no sticker) */
[data-realm="dataset"] .hero .hero-cta .btn-lux { animation: ctaRing 2.6s ease-out infinite; }
[data-realm="dataset"] .hero .hero-cta .btn-lux:hover,
[data-realm="dataset"] .hero .hero-cta .btn-lux:focus-visible { animation: none; }
@keyframes ctaHintFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(-4deg); }
}
@keyframes ctaHintDot {
  0%       { box-shadow: 0 0 0 0 rgba(var(--hint-dot-rgb, 210, 59, 83), .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(var(--hint-dot-rgb, 210, 59, 83), 0); }
}
@keyframes ctaRing {
  0%        { outline: 2px solid rgba(var(--accent-rgb), .55); outline-offset: 0; }
  75%, 100% { outline: 2px solid rgba(var(--accent-rgb), 0);   outline-offset: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-hint, .cta-hint-dot,
  [data-realm="premium"] .hero .hero-cta .btn-primary,
  [data-realm="dataset"] .hero .hero-cta .btn-lux { animation: none; }
}

/* The retro camera from the portfolio burst, sitting after the portfolio title.
   Its size is set in em, so it is about a capital letter tall at every heading
   size; it leans a little as if it had just landed, and hovering it throws a few
   more cameras, the same as the button at the top of the page. On the dark page
   a faint light rim keeps the black body from sinking into the ruby. */
.title-cam {
  display: inline-block;
  width: 1.02em;
  height: .714em;
  margin-left: .24em;
  vertical-align: baseline;
  transform: rotate(-9deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 .06em .1em rgba(10, 20, 40, .34));
  transition: transform .5s var(--ease-liquid);
}
.title-cam svg { display: block; width: 100%; height: 100%; overflow: visible; }
.title-cam:hover { transform: rotate(5deg) translateY(-.06em); }

@media (prefers-reduced-motion: reduce) { .title-cam { transition: none; } }

.print {
  position: relative;
  /* the mount is cut from the same ruby as the primary button, so the two
     read as one material; daylight version */
  --paper: linear-gradient(168deg, #B02B3D 0%, #7B2130 100%);
  --paper-edge: rgba(255, 255, 255, .34);
  --paper-shadow: rgba(74, 18, 28, .48);
  --win-edge: rgba(20, 6, 10, .30);         /* the cut edge of the mount, never tinted */
  --paper-ink: rgba(255, 247, 244, .92);    /* the label is set on ruby, not on paper */
  --paper-ink-accent: #FFD6DC;
  --paper-line: rgba(255, 255, 255, .26);
  --paper-line-on: #FFFFFF;
  --paper-sheen: .16;
}
[data-theme="dark"] .print {
  --paper: linear-gradient(168deg, #551423 0%, #330B16 100%);   /* bordeaux */
  --paper-edge: rgba(var(--accent-rgb), .50);                   /* a ruby hairline */
  --paper-shadow: rgba(0, 0, 0, .85);
  --win-edge: rgba(255, 255, 255, .12);
  --paper-ink: rgba(255, 255, 255, .82);
  --paper-ink-accent: rgb(var(--accent-rgb));
  --paper-line: rgba(var(--accent-rgb), .28);
  --paper-line-on: rgb(var(--accent-rgb));
  --paper-sheen: .22;
}
/* the two sheets under the top one */
.print-sheet {
  position: absolute;
  inset: 3% -2% 5%;             /* wider than the mount, so the corners show */
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 20px 44px -28px var(--paper-shadow);
  transition: transform .55s var(--ease-liquid);
}
.print-sheet.s1 { transform: rotate(-2.1deg) translateY(7px); }
.print-sheet.s2 { transform: rotate(2.8deg) translateY(13px); opacity: .7; }
.print:hover .print-sheet.s1 { transform: rotate(-3.3deg) translateY(9px); }
.print:hover .print-sheet.s2 { transform: rotate(4.4deg) translateY(17px); }

.print-mat {
  position: relative;
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 44px 84px -44px var(--paper-shadow),
              0 3px 8px -3px var(--paper-shadow);
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.print:hover .print-mat { transform: translateY(-4px); }
/* light along the top edge of the mount, stronger on dark paper */
.print-mat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                   /* under the picture, or it washes the frame out */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .55), transparent 32%);
  opacity: var(--paper-sheen, .2);
}
.print-win, .print-cap, .print-mat .shot-dots { position: relative; z-index: 1; }

/* the window: the picture sits recessed under the mount */
.print-win {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--r-md) - 4px);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--win-edge), inset 0 2px 10px -4px var(--paper-shadow);
}
.print-win img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .9s var(--ease);
}
.print-win img.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity .5s var(--ease);
  animation: printDrift 8s ease-out both;      /* the frame breathes, slowly */
}
@keyframes printDrift { from { transform: scale(1.02); } to { transform: scale(1.08); } }

/* the label, set the way a gallery sets one */
.print-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 3px 0;
  font-family: var(--font-display);
}
.print-name {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-ink);
}
.print-no {
  flex: none;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--paper-ink);
  font-variant-numeric: tabular-nums;
}
.print-no b { color: var(--paper-ink-accent); font-weight: 800; }
.print-no i { font-style: normal; opacity: .4; margin: 0 3px; }

/* the dots become hairlines under the label — a page count, not buttons */
.print-mat .shot-dots {
  position: static;
  margin-top: 11px;
  padding: 0 3px;
  justify-content: flex-start;
  gap: 5px;
}
.print-mat .shot-dots button {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--paper-line);
}
.print-mat .shot-dots button.is-active { width: 34px; background: var(--paper-line-on); }
.print-mat .shot-dots button:hover { background: var(--paper-line-on); opacity: .7; }
/* sixteen frames: on a phone the hairlines shrink to fit instead of widening the
   print (a fixed width gave the row a min-content wider than the screen) */
.print-mat .shot-dots { min-width: 0; }
.print-mat .shot-dots button { width: auto; flex: 0 1 20px; min-width: 5px; }
.print-mat .shot-dots button.is-active { width: auto; flex-basis: 34px; min-width: 14px; }

/* The label under the print is a way into the portfolio: a quiet arrow says so,
   and following it scrolls to that collection's card and makes it glow. */
a.print-name { color: #FFFFFF; text-decoration: none; cursor: pointer; }   /* white on the ruby mount, in both themes */
a.print-name::after {
  content: "→";
  display: inline-block;
  margin-left: .5em;
  opacity: .55;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
a.print-name:hover::after, a.print-name:focus-visible::after { opacity: 1; transform: translateX(3px); }
.coll.is-spotlit { animation: collSpot 1.2s ease-out 2; }
@keyframes collSpot {
  0%   { outline: 3px solid rgba(var(--accent-rgb), .85); outline-offset: 0; }
  100% { outline: 3px solid rgba(var(--accent-rgb), 0);   outline-offset: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .coll.is-spotlit { animation: none; outline: 3px solid rgba(var(--accent-rgb), .85); outline-offset: 4px; }
}

/* the arrows only appear over the picture, and only when wanted */
.print-mat .shot-nav { top: calc(50% - 22px); }
.print-mat:hover .shot-nav, .print-mat:focus-within .shot-nav { opacity: 1; }
/* nothing hovers on a phone, so the arrows stay out */
@media (hover: none) { .print-mat .shot-nav { opacity: .9; } }
.print-mat .shot-nav.prev { left: calc(clamp(14px, 1.5vw, 20px) + 10px); }
.print-mat .shot-nav.next { right: calc(clamp(14px, 1.5vw, 20px) + 10px); }

@media (prefers-reduced-motion: reduce) {
  .print-win img.is-active { animation: none; }
  .print-sheet, .print-mat { transition: none; }
}
@media (max-width: 560px) {
  .print-sheet.s2 { display: none; }
  .print-cap { padding-top: 11px; }
}

/* ---------- 8. Chips / tags / pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--inner-hi);
  font-size: .82rem;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
  max-width: 100%;               /* never wider than the row it sits in */
}
/* on a narrow screen a long chip wraps onto a second line instead of pushing the page */
@media (max-width: 620px) { .chip { white-space: normal; } }
.chip svg { width: 15px; height: 15px; color: var(--accent-text); }
.chip-accent { color: var(--accent-text); border-color: rgba(var(--accent-rgb), .30); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18);
  animation: pulse 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(70, 207, 228, 0); }
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* The row above a collections grid is exactly as wide as the frames below it:
   the chips share the leftover space, so both rows end on the same line.
   On a phone they go back to their own width and wrap. */
@media (min-width: 760px) {
  .pill-row--fill { gap: clamp(12px, 1.5vw, 20px); }
  .pill-row--fill .chip { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 8b. Brand tags (hero) ----------
   Recognisable marketplaces, read as tags so the association lands
   before the visitor has read a single sentence. */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tag-label {
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--inner-hi);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
  transition: transform var(--t) var(--ease-liquid),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
/* On the home page the three badges and the brand tags share one row: a slightly
   smaller set so all eight fit on one line on a wide screen (it still wraps on a
   narrow one). */
.hero-badges:has(.tag) { gap: 7px; }
.hero-badges:has(.tag) .chip { font-size: .74rem; padding: 7px 12px; gap: 6px; }
.hero-badges:has(.tag) .chip svg { width: 13px; height: 13px; }
.hero-badges .tag { font-size: .74rem; padding: 7px 10px; }
/* the five tags move as one group: either all of them stay on the badges' line or
   all of them go to the next one — never split two here, three there. On a phone
   the group itself wraps. */
.tag-group { display: inline-flex; flex-wrap: nowrap; gap: 7px; max-width: 100%; }
@media (max-width: 700px) { .tag-group { flex-wrap: wrap; } }
/* ...and every row of them runs edge to edge, like the buttons under the text: the
   badges stretch and shrink with the window instead of stopping short of the right */
.hero-badges:has(.tag) > .chip,
.hero-badges:has(.tag) > .tag-group,
.hero-badges:has(.tag) .tag-group > .tag { flex: 1 1 auto; justify-content: center; }
.tag:hover {
  transform: translateY(-2px);
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), .34);
}
@media (max-width: 620px) {
  .hero-tags { gap: 7px; }
  .tag { padding: 6px 12px; font-size: .78rem; }
}

/* ---------- 9. Navigation ---------- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), var(--maxw));
  z-index: 100;
  border-radius: var(--r-pill);
  padding: 15px 15px 15px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease),
              top var(--t) var(--ease), padding var(--t) var(--ease);
}
/* the header is the most transparent glass on the page */
.nav {
  background: var(--nav-bg);
  border-color: var(--nav-brd);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow: 0 10px 34px -22px rgba(12, 38, 84, .35), var(--inner-hi);
}
.nav.scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: var(--glass-shadow-lg), var(--inner-hi);
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex: none;
}
.brand-mark svg { width: 100%; height: 100%; overflow: visible; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.brand-sub {
  display: block;
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  white-space: nowrap;
  padding: 9px 12px;            /* the Russian row has to fit inside 1240px */
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-link:hover {
  color: var(--text);
  background: var(--nav-pill-hover);
}
.nav-link.active {
  color: var(--accent-text);
  background: var(--nav-pill);
  border: 1px solid var(--nav-pill-brd);
  padding: 8px 14px;                 /* the border adds the missing pixel */
  box-shadow:
    0 6px 18px -10px rgba(var(--accent-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 1px rgba(var(--accent-rgb), .12);
}
/* In dark themes the accent blue sat on a lightened pill and barely read;
   the active entry takes white text and lets the underline carry the accent. */
[data-theme="dark"] .nav-link.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow:
    0 6px 18px -10px rgba(var(--accent-rgb), .70),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(var(--accent-rgb), .22);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 16px; height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* The header row is set like the menu that drops from it: section names in
   capitals with air between the letters. Smaller than the old sentence case, so
   the longest row (the Russian one) still fits the bar. */
.nav-link {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.nav-ico { display: none; }
.nav-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-tools > * { flex: none; }

.nav-toggle { display: none; }

/* language selector */
.lang { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 4px 14px 4px 5px;
  gap: 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--inner-hi);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  font-size: .85rem; font-weight: 600;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-liquid);
}
.lang-btn .lang-name {                /* the display face of the menu, a size smaller and tracked, but not in capitals */
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.lang-btn:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
/* the globe sits in the same raised disc as the day/night knob */
.lang-knob {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-text);
  background: linear-gradient(180deg, #FFFFFF, rgba(var(--accent-rgb), .18));
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .55), inset 0 1px 0 #FFF;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease-liquid);
}
[data-theme="dark"] .lang-knob {
  background: linear-gradient(180deg,
      rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .28));
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #FFFFFF;
}
.lang-btn:hover .lang-knob { transform: scale(1.05); }
.lang-btn svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.lang-btn .caret { width: 14px; height: 14px; opacity: .45; }
.lang-btn .caret { transition: transform var(--t) var(--ease); }
.lang.open .lang-btn .caret { transform: rotate(180deg); }

.lang-menu {
  background: var(--menu-bg);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 186px;
  padding: 8px;
  border-radius: var(--r-md);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transition: all var(--t) var(--ease);
  /* above the burger sheet (95): both live inside the nav's stacking context,
     so a lower value put the language list behind the open menu */
  z-index: 120;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 0; width: 100%;
  background: transparent;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: .88rem;
  text-align: left;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-opt:hover { background: var(--glass-bg-soft); color: var(--text); }
.lang-opt[aria-selected="true"] { color: var(--accent-text); font-weight: 650; }
.lang-opt .code {
  margin-left: auto; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}

/* theme switch — liquid toggle */
.theme-switch {
  position: relative;
  flex: none;
  width: 72px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--inner-hi), inset 0 2px 6px rgba(12, 38, 84, .08);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.theme-switch .knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF, rgba(var(--accent-rgb), .18));
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .55), inset 0 1px 0 #FFF;
  transition: transform var(--t-slow) var(--ease-liquid), background var(--t) var(--ease);
  color: var(--accent-text);
}
.theme-switch .knob svg { width: 17px; height: 17px; }
[data-theme="dark"] .theme-switch .knob {
  transform: translateX(28px);
  background: linear-gradient(180deg,
      rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .62));
  box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .5);
  color: #FFF;
}
.theme-switch .knob .ico-sun,
.theme-switch .knob .ico-moon { position: absolute; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.theme-switch .knob .ico-moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
[data-theme="dark"] .theme-switch .knob .ico-sun { opacity: 0; transform: rotate(40deg) scale(.7); }
[data-theme="dark"] .theme-switch .knob .ico-moon { opacity: 1; transform: none; }

/* ---------- scroll progress inside the header capsule ---------- */
.nav-progress {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 7px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--glass-brd-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
  z-index: 3;
}
.nav.scrolled .nav-progress { opacity: 1; }

.nav-progress i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--sp, 0) * 100%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* the droplet riding the head of the bar */
.nav-progress i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--accent-soft) 45%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}
[data-theme="dark"] .nav-progress i {
  box-shadow: 0 0 12px rgba(91, 146, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* mobile nav — the bar keeps its entries for as long as they fit (main.js sets
   .nav-compact on <html> when the first entry would come closer than about a
   centimetre to the studio name); only then the menu button and the sheet take over */
.nav-measuring .nav, .nav-measuring .nav * { transition: none !important; }
/* while the window is being resized (main.js): nothing slides between widths, the big lights hold still */
.is-resizing *, .is-resizing *::before, .is-resizing *::after { transition: none !important; }
.is-resizing .blob { animation-play-state: paused; }
.burger { display: none; }
.nav-link-cta { display: none; }

/* Above the burger the entries stay in the bar, set tight at every width: the bar
   never grows past 1240px, and with the roomier set the studio line under the
   name broke into three lines in Russian and Spanish (and in English once the
   "Start a project" button joins the bar). The line under the name never wraps. */
  :where(html:not(.nav-compact)) .nav { gap: 8px; padding-left: 18px; }
  :where(html:not(.nav-compact)) .nav-link { font-size: .74rem; letter-spacing: .05em; padding: 8px 9px; }
  :where(html:not(.nav-compact)) .nav-link.active { padding: 7px 8px; }
  :where(html:not(.nav-compact)) .brand-sub { font-size: .56rem; letter-spacing: .13em; white-space: nowrap; }
  :where(html:not(.nav-compact)) .brand-name { white-space: nowrap; }

/* the narrowest bars before the burger: a little less air in the row */
@media (max-width: 1260px) {
  :where(html:not(.nav-compact)) .nav-link { letter-spacing: .03em; padding: 8px 6px; }
  :where(html:not(.nav-compact)) .nav-link.active { padding: 7px 6px; }
  :where(html:not(.nav-compact)) .brand-sub { letter-spacing: .07em; }
}
/* the very first widths above the burger: in Russian and Spanish the row was
   about 35px longer than the capsule and the day/night switch stuck out of its
   right end — the letters, the gaps and the language button close up a little */
@media (max-width: 1200px) {
  :where(html:not(.nav-compact)) .nav { gap: 6px; }
  :where(html:not(.nav-compact)) .nav-link { letter-spacing: .01em; padding: 8px 5px; }
  :where(html:not(.nav-compact)) .nav-link.active { padding: 7px 5px; }
  :where(html:not(.nav-compact)) .brand-sub { letter-spacing: .04em; }
  :where(html:not(.nav-compact)) .nav-tools { gap: 6px; }
  :where(html:not(.nav-compact)) .lang-btn { gap: 6px; padding-right: 10px; }
}

  /* An iOS-style sheet: deep frost, a lit rim along the top edge and a wide
     soft shadow. The colour lives in the icons, not in the panel. */
  :where(html.nav-compact) .nav-links {
    position: fixed;
    top: 86px; left: 12px; right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px;
    border-radius: 30px;
    z-index: 95;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .60), rgba(255, 255, 255, .28));
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(46px) saturate(200%);
    -webkit-backdrop-filter: blur(46px) saturate(200%);
    box-shadow:
      0 40px 80px -36px rgba(12, 20, 45, .55),
      0 8px 20px -12px rgba(12, 20, 45, .22),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px) scale(.985);
    transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease),
                transform var(--t) var(--ease-liquid);
  }
  :where(html.nav-compact)[data-theme="dark"] .nav-links {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
    border-color: rgba(255, 255, 255, .16);
    box-shadow:
      0 44px 84px -36px rgba(0, 0, 0, .85),
      inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  :where(html.nav-compact) body.menu-open .nav-links { opacity: 1; visibility: visible; transform: none; }

  /* a dim layer behind the menu: the entries always read, and a tap closes it */
  :where(html.nav-compact) .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(24, 34, 66, .28);
    /* diffuse the page properly: the sheet above is see-through, and sharp
       headlines showing through it made the menu hard to read */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
  }
  /* the night page needs a heavier veil than the day one */
  :where(html.nav-compact)[data-theme="dark"] .nav-scrim { background: rgba(4, 8, 18, .58); }
  :where(html.nav-compact) body.menu-open .nav-scrim { opacity: 1; visibility: visible; }
  :where(html.nav-compact) .nav-item { display: block; width: 100%; }
  :where(html.nav-compact) .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
  }
  :where(html.nav-compact) .nav-link {
    padding: 13px 14px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 18px;
    border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
  }
  :where(html.nav-compact) .nav-link.active::after { display: none; }
  :where(html.nav-compact) .nav-link:hover { background: rgba(var(--accent-rgb), .07); }

  :where(html.nav-compact) .nav-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 12px;
    color: var(--accent-text);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)),
      linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .06));
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  :where(html.nav-compact)[data-theme="dark"] .nav-ico {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
      linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .08));
    border-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
  }
  :where(html.nav-compact) .nav-ico svg { width: 17px; height: 17px; }

  /* the open page gets a soft glass pill, not a hard outline */
  :where(html.nav-compact) .nav-link.active {
    color: var(--accent-text);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .34));
    border-color: rgba(255, 255, 255, .80);
    box-shadow:
      0 10px 22px -14px rgba(var(--accent-rgb), .55),
      inset 0 1px 0 rgba(255, 255, 255, .95);
  }
  :where(html.nav-compact)[data-theme="dark"] .nav-link.active {
    color: #FFFFFF;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
      0 12px 24px -16px rgba(var(--accent-rgb), .6),
      inset 0 1px 0 rgba(255, 255, 255, .22);
  }
  :where(html.nav-compact) .nav-link.active .nav-ico {
    color: #fff;
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb), var(--btn-a)), rgba(var(--accent-rgb), var(--btn-b)));
    border-color: rgba(var(--accent-rgb), .5);
  }
  :where(html.nav-compact) .burger {
    display: inline-grid;
    color: var(--accent-text);
    border-color: rgba(var(--accent-rgb), .45);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .10));
    box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .6), var(--inner-hi);
  }
  :where(html.nav-compact) body.menu-open .burger {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .22));
  }
  :where(html.nav-compact) .brand-sub { font-size: .56rem; letter-spacing: .14em; }
  /* the call to action is glass too — a solid slab shouted over the sheet */
  :where(html.nav-compact) .nav-link-cta {
    display: block;
    margin-top: 10px;
    padding: 17px 18px;
    text-align: center;
    border-radius: 20px;
    color: rgb(var(--accent-rgb));
    border: 1px solid rgba(255, 255, 255, .70);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .26)),
      linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .07));
    box-shadow:
      0 16px 32px -18px rgba(var(--accent-rgb), .70),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    font-weight: 700;
    letter-spacing: -.01em;
  }
  :where(html.nav-compact)[data-theme="dark"] .nav-link-cta {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .24);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)),
      linear-gradient(180deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .12));
    box-shadow:
      0 18px 34px -18px rgba(var(--accent-rgb), .8),
      inset 0 1px 0 rgba(255, 255, 255, .24);
  }
  :where(html.nav-compact) .nav-link-cta:hover {
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow:
      0 22px 40px -18px rgba(var(--accent-rgb), .85),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }


/* the header CTA is the first thing to go when space runs short */
@media (max-width: 1460px) { .nav-cta { display: none; } }
html[lang="ru"] .nav-cta,
html[lang="es"] .nav-cta { display: none; }

/* compact header on phones */
@media (max-width: 680px) {
  .nav {
    top: 10px;
    gap: 8px;
    padding: 11px 11px 11px 15px;
  }
  .nav-cta { display: none; }
  .brand-name { white-space: nowrap; font-size: .95rem; }
  .brand-sub { font-size: .46rem; letter-spacing: .06em; line-height: 1.3; }
  .brand-mark { width: 40px; }
  .nav-tools { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .lang-btn { height: 40px; padding: 3px 10px 3px 4px; }
  .lang-knob { width: 32px; height: 32px; }
  .theme-switch { width: 62px; height: 40px; }
  .theme-switch .knob { width: 30px; height: 30px; }
  [data-theme="dark"] .theme-switch .knob { transform: translateX(22px); }
  .nav-links { top: 78px; }
  .nav-progress { left: 18px; right: 18px; bottom: 6px; }
}

@media (max-width: 520px) {
  .lang-btn .lang-name { display: none; }
  .lang-btn { padding: 3px 10px 3px 4px; }   /* the globe stays flush left */
  .nav { padding-left: 14px; }
}
/* the narrowest phones: tighter gaps and no caret, so the menu button stays inside the bar */
@media (max-width: 400px) {
  .nav { gap: 6px; padding-right: 10px; }
  .nav-tools { gap: 5px; }
  .lang-btn .caret { display: none; }
  .lang-btn { padding-right: 4px; }
  .brand, .brand > * { min-width: 0; }
}
/* .nav .brand-mark: the plain .brand-mark rule further down (the camera, 42px) comes
   later in the file and would win over a same-weight selector here */
@media (max-width: 370px) {
  .brand { gap: 8px; }
  .nav .brand-mark { width: 35px; }
  .brand-name { font-size: .88rem; }
}
@media (max-width: 340px) {
  .nav { padding-left: 10px; }
  .nav .brand-mark { width: 31px; }
  .brand-name { font-size: .82rem; }
  .theme-switch { width: 56px; }
  [data-theme="dark"] .theme-switch .knob { transform: translateX(16px); }
}

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 92px));
  padding-bottom: clamp(36px, 5vw, 64px);
}

.hero-inner { display: grid; gap: clamp(28px, 4vw, 46px); }

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* hero text sits in a column that already follows the grid, so it simply fills
   it — side by side with the picture and stacked above it alike */
.hero h1, .hero .lead { max-width: none; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* One button per direction, one per row: the labels are long in RU and ES,
   and a wrapped row of three left a ragged edge. */
.hero-cta--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.hero-cta--stack .btn { width: 100%; justify-content: center; }   /* as wide as the column above */

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  padding: 0;
}
.stat {
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 4px;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--glass-brd-2), transparent);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.22;            /* descenders (у, g, у) need the room */
  padding-bottom: 2px;
}
.stat-label { font-size: .82rem; color: var(--text-2); }
/* five figures instead of four: the last one takes the whole row once the band
   folds to two columns, so no half-empty cell is left over */
.stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .stats--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--five .stat:nth-child(4)::before { display: none; }
}
@media (max-width: 780px) {
  .stats--five .stat:nth-child(5) { grid-column: span 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before { display: none; }
}

/* ---------- 11. Cards ---------- */
.card {
  padding: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 14px;
  align-content: start;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg), var(--inner-hi); }

.card-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(220, 232, 255, .55));
  border: 1px solid var(--glass-brd);
  box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
[data-theme="dark"] .card-icon {
  background: linear-gradient(180deg, rgba(91, 146, 255, .22), rgba(91, 146, 255, .06));
  box-shadow: 0 8px 22px -12px rgba(91, 146, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.card-icon svg { width: 24px; height: 24px; }

.card-num {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-text);
}

/* big split card for the two service lines */
.pillar {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 340px;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-lg), var(--inner-hi); }
.pillar-glow {
  position: absolute;
  width: 320px; height: 320px;
  right: -90px; top: -110px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  background: radial-gradient(circle, var(--accent), transparent 65%);
  transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease);
  pointer-events: none;
}
.pillar:hover .pillar-glow { transform: scale(1.25) translate(-10px, 20px); opacity: .8; }
.pillar.aqua .pillar-glow { background: radial-gradient(circle, var(--accent-2), transparent 65%); }
.pillar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pillar li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--text-2); }
.pillar li svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent-text); }
.pillar .btn {
  margin-top: auto;              /* every card ends with its button on one line */
  align-self: stretch;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* feature list rows */
.rows { display: grid; gap: 12px; }
.row-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease);
}
.row-item:hover { transform: translateX(4px); border-color: var(--accent-soft); }
.row-item .rk { font-size: .95rem; font-weight: 650; }
.row-item .rv { font-size: .9rem; color: var(--text-2); text-align: right; }
@media (max-width: 700px) {
  .row-item { grid-template-columns: auto 1fr; }
  .row-item .rv { grid-column: 2; text-align: left; }
}

/* ---------- 12. Portfolio grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--inner-hi);
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.filter:hover { color: var(--text); transform: translateY(-2px); }
[data-theme="dark"] .filter.active { color: #FFFFFF; }
.filter.active {
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .14));
  border-color: rgba(var(--accent-rgb), .42);
  box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
  background: linear-gradient(135deg, var(--c1, #8AB3FF), var(--c2, #7FE3F0));
}
.shot.wide { aspect-ratio: 16 / 10; grid-column: span 2; }
@media (max-width: 620px) { .shot.wide { grid-column: span 1; } }
.shot:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--glass-shadow-lg); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 14, 34, .72));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.shot:hover::after { opacity: 1; }
.shot-meta {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--t) var(--ease);
}
.shot:hover .shot-meta { opacity: 1; transform: none; }
.shot-meta .t { font-weight: 650; font-size: .95rem; letter-spacing: -.01em; }
.shot-meta .s { font-size: .76rem; opacity: .8; }
.shot-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0B1729;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 13. Marquee (platforms) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.plat {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--inner-hi);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .92rem;
  color: var(--text-2);
  white-space: nowrap;
}
.plat svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- 13b. Offer grid (dataset page) ----------
   Eight short statements, one line each — the visitor should scan, not read. */
.offers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.offer {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: start;
  padding: clamp(18px, 2.1vw, 26px);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.32;
  color: var(--text);
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.offer:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-lg), var(--inner-hi); }
@media (max-width: 1000px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
  .offers { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* one card per row: the icon goes to the left and the text sits beside it, centred on it */
  .offer {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 16px;
    padding: 12px 18px 12px 12px;
  }
  .offer .card-icon { width: 46px; height: 46px; border-radius: 14px; }
  .offer .card-icon svg { width: 21px; height: 21px; }
}

/* ---------- 14. Process steps ---------- */
.steps { display: grid; gap: 14px; counter-reset: s; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease-liquid);
}
.step:hover { transform: translateX(6px); }
.step-n {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(220, 232, 255, .5));
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px -12px rgba(var(--accent-rgb), .8);
}
[data-theme="dark"] .step-n {
  background: linear-gradient(180deg, rgba(91, 146, 255, .2), rgba(91, 146, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* ---------- 15. Accordion / FAQ ---------- */
.faq { display: grid; gap: 12px; }
.qa { border-radius: var(--r-md); overflow: hidden; }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1rem;
  transition: color var(--t) var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent-text); }
.qa summary .plus {
  margin-left: auto;
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd-2);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.qa[open] summary .plus { transform: rotate(45deg); background: var(--glass-bg-soft); }
.qa .qa-body { padding: 0 24px 22px; color: var(--text-2); font-size: .94rem; }

/* ---------- 16. Forms ---------- */
.field { display: grid; gap: 8px; }
.label { font-size: .82rem; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; }

.input, .textarea, .select {
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--inner-hi), inset 0 2px 8px rgba(12, 38, 84, .06);
  font-size: .95rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  appearance: none;
}
.textarea { border-radius: var(--r-md); min-height: 150px; resize: vertical; font-family: inherit; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16), var(--inner-hi);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377869E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px;
  padding-right: 46px;
  cursor: pointer;
}

/* search field with round action button, like the kit */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--inner-hi);
}
.search-field input { flex: 1; border: 0; background: transparent; outline: none; padding: 12px 0; font-size: .95rem; }
.search-field .go {
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid rgba(var(--accent-rgb), .42);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent-text);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .32), rgba(var(--accent-rgb), .14));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 20px -12px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: transform var(--t) var(--ease-liquid);
}
.search-field .go:hover { transform: scale(1.06); }

/* checkbox */
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .9rem; color: var(--text-2); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  box-shadow: var(--inner-hi), inset 0 2px 6px rgba(12, 38, 84, .08);
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--t) var(--ease-liquid);
}
.check .box svg { width: 14px; height: 14px; }
.check input:checked + .box {
  color: #fff;
  background: linear-gradient(180deg, var(--btn-from), var(--btn-to));
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }

/* ---------- 17. Contact blocks ---------- */
.contact-card {
  display: grid;
  gap: 16px;
  align-content: start;          /* cards in a row share a height: titles stay level, spare room goes below */
  padding: clamp(22px, 2.6vw, 32px);
  transition: transform var(--t) var(--ease-liquid);
}
.contact-card:hover { transform: translateY(-4px); }
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: break-word;
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd-2);
  background: transparent;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--t) var(--ease);
}
.copy-btn:hover { color: var(--accent-text); border-color: var(--accent-soft); }
.copy-btn svg { width: 14px; height: 14px; }

/* two rows of short cards: reserve room for a two-line title so every
   description starts on the same line */
.perks .card h3 { min-height: 2.5em; }
@media (max-width: 620px) { .perks .card h3 { min-height: 0; } }
/* The same cards everywhere (premium "how we work", brand services): once they
   stand one per row, the icon moves to the left and the title with its text sits
   beside it, instead of leaving an empty band next to the icon. */
@media (max-width: 620px) {
  .grid > .card:has(> .card-icon:first-child) {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    align-content: start;
  }
  .grid > .card:has(> .card-icon:first-child) > .card-icon { grid-column: 1; grid-row: 1; width: 46px; height: 46px; border-radius: 14px; }
  .grid > .card:has(> .card-icon:first-child) > .card-icon svg { width: 21px; height: 21px; }
  /* the title stands on the middle of the icon, the text runs under the title */
  .grid > .card:has(> .card-icon:first-child) > h3 { grid-column: 2; grid-row: 1; margin: 0; min-height: 46px; display: flex; align-items: center; }
  .grid > .card:has(> .card-icon:first-child) > p { grid-column: 2; grid-row: 2; margin: 0; }
}


/* ============================================================
   Dataset collections — eight folders, opened in an overlay
   ============================================================ */
.collections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}
.coll {
  position: relative;
  padding: 0;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.coll:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg), var(--inner-hi); }
/* These cards are built by script, after the reveal observer has already run.
   Nothing here may hide them: no .reveal, no entrance animation with a
   backwards fill — a card that never gets animated must still be visible. */
.coll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.coll img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.coll:hover img { transform: scale(1.08); }
.coll {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow), var(--inner-hi);
}
/* the panel shot comes in two versions; the theme decides which one shows */
.hero-shot--wide .shot-night { display: none; }
[data-theme="dark"] .hero-shot--wide .shot-day { display: none; }
[data-theme="dark"] .hero-shot--wide .shot-night { display: block; }

/* the dataset cards are square; everything else about them is the default */
.collections--neon .coll { aspect-ratio: 1 / 1; }

.coll-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 10, 22, .28) 0%, transparent 34%,
              transparent 52%, rgba(6, 10, 22, .74) 100%);
  pointer-events: none;
}
.coll-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(9, 17, 32, .58);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #FFFFFF;
  /* never wider than its card: a long name wraps instead of being cut off */
  max-width: calc(100% - 24px);
  white-space: normal;
  text-align: left;
}
.coll-meta {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.coll-meta b { font-weight: 800; }
@media (max-width: 1000px) { .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the premium mosaic ----------
   Wide and tall cells in the same sheet, so a set of work reads like a
   hang on a wall rather than a row of equal tiles. */
/* The order in collections.js already fills every row of four; `dense` is the
   safety net for the narrower grids, where a wide card that no longer fits the
   row would otherwise leave a hole behind it. */
.collections--mosaic {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
}
.collections--mosaic .coll { aspect-ratio: 4 / 5; }
.collections--mosaic .coll--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 1000px) {
  .collections--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collections--mosaic .coll--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .collections--mosaic { grid-template-columns: minmax(0, 1fr); }
  .collections--mosaic .coll--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}
/* a quieter, more considered caption than the dataset tags */
.collections--mosaic .coll-tag {
  top: auto;
  bottom: 46px;
  left: 16px;
  right: 16px;                  /* the name wraps upward instead of running out */
  max-width: none;
  line-height: 1.2;
  text-align: left;             /* the card is a <button>, which centres its text */
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.01em;
  text-transform: none;
  text-shadow: 0 2px 12px rgba(6, 10, 22, .55);
}
/* A label over the cover for collections that show a technique rather than a
   subject — collages. Same ruby as the first-screen badges, so it reads as part
   of the page, not as a sticker. */
.coll-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .30);
  background: linear-gradient(168deg, #B02B3D 0%, #7B2130 100%);
  box-shadow: 0 10px 22px -12px rgba(74, 18, 28, .70),
              inset 0 1px 0 rgba(255, 255, 255, .24);
  color: rgba(255, 247, 244, .96);
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.coll-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD6DC;
  box-shadow: 0 0 0 3px rgba(255, 214, 220, .20);
}
[data-theme="dark"] .coll-badge {
  border-color: rgba(var(--accent-rgb), .55);
  background: linear-gradient(168deg, #551423 0%, #330B16 100%);
}
/* People: a quieter mark than the ruby technique badges — smoked glass in the
   opposite corner, a small figure and normal case, so a card carrying both reads
   as two different kinds of note. The dark tint keeps the white text legible on
   white product backgrounds as well as on photos. */
.coll-people {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(14, 16, 24, .52);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.coll-people svg { width: 13px; height: 13px; flex: none; opacity: .92; }
/* on a narrow card with a ruby badge too, the two would meet: stack them */
.collections--mosaic .coll { container-type: inline-size; }
@container (max-width: 250px) {
  .coll-badge ~ .coll-people { top: 50px; right: auto; left: 14px; }
}
.collections--mosaic .coll-meta {
  left: 16px;
  bottom: 20px;
  font-size: .8rem;
  font-weight: 550;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 2px 10px rgba(6, 10, 22, .5);
}
.collections--mosaic .coll-scrim {
  background: linear-gradient(180deg, rgba(6, 10, 22, .10) 0%, transparent 30%,
              transparent 42%, rgba(6, 10, 22, .78) 100%);
}
/* a hairline gold rim, the way a print sits in a mount */
.collections--mosaic .coll {
  border-color: rgba(var(--accent-rgb), .28);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.collections--mosaic .coll:hover {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 26px 50px -26px rgba(var(--accent-rgb), .55), var(--inner-hi);
}

/* ---------- category filters over a collections grid ---------- */
.cfilters { display: flex; flex-wrap: wrap; gap: 10px; }
.cfilter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--inner-hi);
  font-size: .82rem;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) var(--ease-liquid), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.cfilter:hover {
  transform: translateY(-2px);
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), .38);
}
.cfilter.is-on {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .96), rgba(var(--accent-rgb), .78));
  box-shadow: 0 12px 26px -14px rgba(var(--accent-rgb), .70),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
.cfilter-n { font-size: .72rem; opacity: .55; font-variant-numeric: tabular-nums; }
.cfilter.is-on .cfilter-n { opacity: .85; }
.cfilter:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }

/* ---------- the overlay ---------- */
body.lb-open { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  background: rgba(6, 10, 22, .88);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.lb-bar {
  position: relative;
  /* clip the blurred wash at the edges; `clip` keeps the bar from becoming a
     scroll container, so a sideways swipe cannot shift its contents */
  overflow: hidden;
  overflow: clip;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vw, 22px) clamp(16px, 3vw, 34px);
  color: #FFFFFF;
}
/* The open collection's cover, blurred into a wash and dimmed under a scrim.
   It gives the glass buttons something real to bend, and the bar takes on the
   colours of whichever folder is open. */
.lb-bar-wash {
  position: absolute;
  inset: -40% -8%;
  z-index: 0;                  /* stay under the type: positioned children paint
                                  above in-flow text, and the wash was greying
                                  the collection name */
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(6, 10, 22, .58), rgba(6, 10, 22, .40)),
    var(--lb-cover, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: blur(30px) saturate(135%);
  opacity: .85;
}
.lb-title {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  /* a tight shadow, not a wide halo: a 10px glow bled into the thin strokes and
     made the white read as grey */
  text-shadow: 0 1px 2px rgba(4, 8, 18, .55), 0 0 14px rgba(4, 8, 18, .28);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lb-count { position: relative; z-index: 1; flex: none; font-size: .9rem;
  color: rgba(255, 255, 255, .78); text-shadow: 0 1px 3px rgba(4, 8, 18, .60); }

/* A pane of glass next to the collection name, through to the contact page.
   The material itself is set once for both bar buttons further down. */
.lb-prevset {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #FFFFFF;
}
.lb-prevset svg { width: 16px; height: 16px; opacity: .92; }
.lb-cta, .lb-nextset {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  cursor: pointer;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .88rem;
  letter-spacing: .005em;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.lb-cta svg, .lb-nextset svg { width: 16px; height: 16px; opacity: .92; }
/* the cross keeps its distance from the next-collection button */
.lb-bar-right {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;                      /* the two pager buttons belong together */
}
.lb-bar-right .lb-close { margin-left: 12px; }   /* 8 + 12 = 20 from the pager */
.lb-cta:focus-visible, .lb-prevset:focus-visible, .lb-nextset:focus-visible {
  outline: 2px solid #FFFFFF; outline-offset: 3px;
}
/* No room for the label on a phone: the pill keeps the envelope only */
@media (max-width: 560px) {
  .lb-cta, .lb-nextset { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .lb-cta-txt, .lb-nextset-txt { display: none; }
  .lb-bar-right { gap: 6px; }
  .lb-bar-right .lb-close { margin-left: 6px; }
}
.lb-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close svg { width: 17px; height: 17px; }
/* Both buttons in the bar are cut from the same glass, so they read as one set.
   Genuinely see-through: the pane has next to no fill, so the background stays
   visible straight through it — no milky plate. What draws the shape is the
   light on its edges: bright along the top rim where it catches, thinner down
   the sides, a hint along the bottom for the thickness of the pane. */
.lb-cta, .lb-prevset, .lb-nextset, .lb-close {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .30);
  background: linear-gradient(157deg,
              rgba(255, 255, 255, .07) 0%,
              rgba(255, 255, 255, .02) 45%,
              rgba(255, 255, 255, .006) 100%);
  /* blur and saturate only — no brightness lift, or the glass turns opaque */
  backdrop-filter: blur(14px) saturate(200%);
  -webkit-backdrop-filter: blur(14px) saturate(200%);
  box-shadow:
    0 4px 14px -10px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    inset 1px 0 0 rgba(255, 255, 255, .11),
    inset -1px 0 0 rgba(255, 255, 255, .11);
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
/* the specular streak across the pane */
.lb-cta::after, .lb-prevset::after, .lb-nextset::after, .lb-close::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg,
              rgba(255, 255, 255, .13) 0%,
              rgba(255, 255, 255, .03) 26%,
              rgba(255, 255, 255, 0) 46%);
}
.lb-cta:hover, .lb-prevset:hover, .lb-nextset:hover, .lb-close:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .52);
  backdrop-filter: blur(14px) saturate(230%) brightness(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(230%) brightness(1.12);
  box-shadow:
    0 8px 20px -10px rgba(0, 0, 0, .50),
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -1px 0 rgba(255, 255, 255, .20),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset -1px 0 0 rgba(255, 255, 255, .16);
}
.lb-close { width: 36px; height: 36px; }
/* the pair shrinks together on a phone */
@media (max-width: 560px) { .lb-close { width: 36px; height: 36px; } }

/* A contact sheet in columns: every tile keeps the frame's own proportions —
   a portrait shot stays tall, a landscape one stays wide, and nothing is
   cropped or padded with empty bands. */
.lb-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 6px;          /* the row unit the masonry spans count in */
  column-gap: 12px;
  align-content: start;
  /* the top strip is the room the hover lift needs: the sheet scrolls, and a
     tile in the first row would otherwise be cut off at the clip edge */
  padding: 7px clamp(16px, 3vw, 34px) clamp(24px, 4vw, 44px);
}
.lb-cell {
  display: block;
  width: 100%;
  align-self: start;            /* never stretch to fill the spanned rows */
  grid-row-end: span var(--span, 40);
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md, 16px);
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(255, 255, 255, .06);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease);
}
.lb-cell img { width: 100%; height: auto; display: block; }
.lb-cell:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .34); }
.lb-cell:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 620px) {
  .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; padding-inline: 12px; }
  .lb-bar { padding-inline: 12px; gap: 10px; }
}
.lb-cell:hover img { opacity: .88; }

.lb-view {
  /* flex-basis 0 with min-height 0: without it the image can push the row
     taller than the window and the frame gets cut off at the edges */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  margin: 0;
  /* flex, not grid: a percentage max-height on the picture only resolves
     against a definite box, and an auto grid row is not one */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(56px, 8vw, 96px) clamp(20px, 3vw, 40px);
  cursor: zoom-out;
}
.lb-view img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md, 16px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
/* Paging zones run the full height of the frame: a click anywhere down the
   left or right edge turns the page, so there is no small target to hunt for.
   The round arrow is just the visible marker inside that zone. */
.lb-prev, .lb-next {
  position: absolute;
  /* JS measures the frame and sets these, so the strip is exactly as tall as
     the picture and never reaches up to the close button */
  top: var(--zt, 0px);
  height: var(--zh, 100%);
  bottom: auto;
  /* and exactly as wide as the space beside the picture: the zone starts where
     the frame ends, with no dead band in between (--zl / --zr from JS) */
  width: clamp(64px, 12vw, 150px);
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  place-items: center;
  transition: background var(--t) var(--ease);
}
.lb-prev { left: 0; width: var(--zl, clamp(64px, 12vw, 150px)); }
.lb-next { right: 0; width: var(--zr, clamp(64px, 12vw, 150px)); }
.lb-prev:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .10), transparent); }
.lb-next:hover { background: linear-gradient(270deg, rgba(255, 255, 255, .10), transparent); }
/* just the stroke, no button around it */
.lb-prev svg, .lb-next svg {
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: none;
  opacity: .72;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .60));
  transition: transform var(--t) var(--ease-liquid), opacity var(--t) var(--ease);
}
.lb-prev:hover svg, .lb-next:hover svg { opacity: 1; }
.lb-prev:hover svg { transform: translateX(-3px); }
.lb-next:hover svg { transform: translateX(3px); }
.lb-prev:focus-visible, .lb-next:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- three platform tiles inside the hero panel ----------
   Same frosted glass as the links further down the page, but square and
   equal, so the panel ends on a tidy row instead of one wide button. */
.panel-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ptile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .50);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .18));
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    0 12px 26px -18px rgba(20, 18, 30, .38),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
/* the star is redundant at this size — the row below the photo stays quiet */
.ptile svg:first-child { display: none; }
.ptile svg:last-child {
  width: 13px; height: 13px;
  flex: none;
  opacity: .45;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.ptile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ptile:hover {
  transform: translateY(-3px);
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 18px 34px -16px rgba(var(--accent-rgb), .45),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}
a.ptile:hover svg:last-child { opacity: 1; transform: translateX(2px); }
.ptile[aria-disabled] { opacity: .55; cursor: default; }
.ptile[aria-disabled] svg:last-child { display: none; }
[data-theme="dark"] .ptile {
  border-color: rgba(255, 255, 255, .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  box-shadow:
    0 14px 28px -18px rgba(0, 0, 0, .70),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}
@media (max-width: 420px) {
  .panel-links { gap: 6px; }
  .ptile { font-size: .68rem; padding: 11px 6px; gap: 5px; border-radius: 12px; }
  .ptile svg:last-child { display: none; }
}

/* ---------- Portfolio links (premium page) ----------
   A quiet row of platform links: the reviewer should be able to open our
   profile in one click, so the arrow is the only decoration. */
.plinks { display: flex; flex-wrap: wrap; gap: 12px; }
/* inside the split they share the column exactly: the row ends where the
   paragraph above it ends */
.split .plinks .plink { flex: 1 1 auto; justify-content: center; padding-inline: 16px; }
/* between these widths the column is too narrow for three tiles in a row and
   they would break 2 + 1; a single column reads as a decision, not a leftover */
@media (min-width: 1001px) and (max-width: 1199px) {
  .split .plinks { flex-direction: column; }
  .split .plinks .plink { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .split .plinks { flex-direction: column; }
  .split .plinks .plink { justify-content: flex-start; }
}
/* soft frosted pills, the way iOS draws its widgets: heavy blur, a light
   rim along the top edge, a wide diffuse shadow underneath */
.plink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22));
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 12px 28px -16px rgba(20, 18, 30, .40),
    0 2px 6px -3px rgba(20, 18, 30, .18),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .92rem;
  color: var(--text);
  white-space: nowrap;
  transition: transform var(--t) var(--ease-liquid), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
[data-theme="dark"] .plink {
  border-color: rgba(255, 255, 255, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow:
    0 14px 30px -18px rgba(0, 0, 0, .70),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.plink svg { width: 15px; height: 15px; flex: none; }
.plink svg:first-child { color: var(--accent-text); }
.plink svg:last-child { opacity: .45; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
a.plink:hover {
  transform: translateY(-2px);
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow:
    0 18px 36px -16px rgba(var(--accent-rgb), .45),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
a.plink:hover svg:last-child { opacity: 1; transform: translateX(3px); }
/* a platform whose link has not been filled in yet stays quiet and inert */
.plink[aria-disabled] { opacity: .55; cursor: default; }
.plink[aria-disabled] svg:last-child { display: none; }
/* The name sits over the address of the site it leads to, with an outward arrow —
   it reads as a link to another site before anyone hovers it. */
.plink-txt { display: grid; gap: 3px; text-align: left; line-height: 1.15; }
.plink-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: .01em;
  opacity: .74;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: opacity var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
.plinks .plink .plink-url svg { width: 11px; height: 11px; opacity: 1; transform: none; transition: transform var(--t) var(--ease); }
a.plink:hover .plink-url, a.plink:focus-visible .plink-url { opacity: 1; text-decoration-color: currentColor; }
.plinks a.plink:hover .plink-url svg, .plinks a.plink:focus-visible .plink-url svg { transform: translate(2px, -2px); }
/* On the premium page the platform tiles are cut from the same ruby as the print
   mount on the first screen — the day gradient and the night bordeaux, with the
   same edge — and set in white. */
[data-realm="premium"] .plink {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(168deg, #B02B3D 0%, #7B2130 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 14px 30px -18px rgba(74, 18, 28, .55),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
[data-theme="dark"][data-realm="premium"] .plink {
  border-color: rgba(var(--accent-rgb), .50);
  background: linear-gradient(168deg, #551423 0%, #330B16 100%);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .75),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
[data-realm="premium"] .plink svg:first-child { color: #FFFFFF; }
[data-realm="premium"] .plink svg:last-child { opacity: .7; }
[data-realm="premium"] a.plink:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 18px 36px -16px rgba(74, 18, 28, .70),
              inset 0 1px 0 rgba(255, 255, 255, .30);
}
[data-theme="dark"][data-realm="premium"] a.plink:hover {
  border-color: rgba(var(--accent-rgb), .75);
  box-shadow: 0 18px 36px -16px rgba(var(--accent-rgb), .45),
              inset 0 1px 0 rgba(255, 255, 255, .20);
}

/* address plus its copy button, centred under a CTA band */
.mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* toast */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 24px);
  z-index: 9999;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t) var(--ease-liquid);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; color: var(--accent-text); }

/* ---------- 18. CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 62px);
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}
/* four direction buttons stack on phones — equal width, not ragged */
.cta-band .hero-cta { width: min(100%, 900px); gap: 12px; align-items: stretch; }
.cta-band .hero-cta > .btn { flex: 1 1 260px; justify-content: center; min-height: 65px; }
.cta-band .hero-cta > .mail-split { flex: 1 1 440px; min-height: 65px; text-align: left; }
@media (max-width: 620px) {
  .cta-band .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-band .hero-cta > .btn,
  .cta-band .hero-cta > .mail-split { flex: none; }   /* in a column the basis would turn into height */
  .cta-band .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) { .cta-band { padding: 30px 16px; } }   /* room for the whole address in the pill */
.cta-band::after {
  content: "";
  position: absolute;
  width: 130%; height: 260px;
  left: -15%; bottom: -180px;
  background: radial-gradient(ellipse at center, var(--accent), transparent 62%);
  opacity: .28;
  filter: blur(40px);
  pointer-events: none;
}

/* ============================================================
   Back to top — a glass disc with a progress ring
   The ring fills as the page scrolls, so the button doubles as a
   reading-position indicator; it echoes the bar in the header.
   ============================================================ */
.totop {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  /* the page behind is pale, so the disc needs a real edge of its own */
  border: 1px solid rgba(var(--accent-rgb), .30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .70)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .03));
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 18px 36px -16px rgba(16, 26, 55, .30),
    0 3px 10px -4px rgba(16, 26, 55, .16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: var(--accent-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease),
              transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop:hover {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow:
    0 22px 44px -18px rgba(var(--accent-rgb), .60),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.totop:active { transform: scale(.96); }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the ring */
.totop-ring {
  position: absolute;
  inset: 0;                       /* concentric with the disc, not around it */
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);      /* start the sweep at twelve o'clock */
  pointer-events: none;
}
.totop-ring circle { fill: none; stroke-width: 2.2; }
.totop-track { stroke: rgba(var(--accent-rgb), .22); }
.totop-bar {
  stroke: rgb(var(--accent-rgb));
  stroke-linecap: round;
  /* 2πr with r = 25.9 */
  stroke-dasharray: 162.73;
  stroke-dashoffset: calc(162.73 - 162.73 * var(--sp, 0));
  transition: stroke-dashoffset .12s linear;
}
.totop-arrow {
  width: 21px;
  height: 21px;
  transition: transform var(--t) var(--ease-liquid);
}
.totop:hover .totop-arrow { transform: translateY(-2px); }

[data-theme="dark"] .totop {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .07));
  box-shadow:
    0 18px 36px -20px rgba(0, 0, 0, .80),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
[data-theme="dark"] .totop-track { stroke: rgba(255, 255, 255, .16); }

/* The mirror of it on the left: back to the top of the portfolio. A pill with a
   caption, not a disc — so nobody mistakes it for the back-to-top button, and
   the icon (an arrow into a line) reads as "to the start of this block". */
.tosec {
  position: fixed;
  left: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .70)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .03));
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 18px 36px -16px rgba(16, 26, 55, .30),
    0 3px 10px -4px rgba(16, 26, 55, .16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .84rem;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease),
              transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.tosec.show { opacity: 1; visibility: visible; transform: none; }
.tosec svg { width: 19px; height: 19px; flex: none; transition: transform var(--t) var(--ease-liquid); }
.tosec:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow:
    0 22px 44px -18px rgba(var(--accent-rgb), .60),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.tosec:hover svg { transform: translateY(-2px); }
.tosec:active { transform: scale(.97); }
.tosec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-theme="dark"] .tosec {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .07));
  box-shadow:
    0 18px 36px -20px rgba(0, 0, 0, .80),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* no room for the caption on a phone — the icon carries it */
@media (max-width: 760px) {
  .tosec { width: 54px; padding: 0; justify-content: center; }
  .tosec-txt { display: none; }
}
@media (max-width: 520px) {
  .tosec { width: 48px; height: 48px; }
  .tosec svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tosec { transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); }
}

/* it must never cover the open lightbox or the burger sheet */
body.lb-open .totop, body.menu-open .totop,
body.lb-open .tosec, body.menu-open .tosec {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
}
@media (max-width: 520px) {
  .totop { width: 48px; height: 48px; }
  .totop-arrow { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); }
}

/* ---------- 19. Footer ---------- */
.footer { margin-top: clamp(40px, 6vw, 80px); padding-bottom: 26px; }
.footer-glass {
  padding: clamp(28px, 3.4vw, 46px);
  display: grid;
  gap: 34px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.35fr .85fr 1fr 1.6fr;
  gap: 32px;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .footer-glass { padding-inline: 18px; } }   /* a little more room for the address pill on a small phone */
.footer h4 {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  font-weight: 700;
}
.footer-links { display: grid; gap: 9px; }
.footer-links a { font-size: .9rem; color: var(--text-2); width: fit-content; transition: color var(--t) var(--ease); }
.footer-links a:hover { color: var(--accent-text); }
.footer-links .copy-btn { justify-self: start; }
/* Contact column, on every page: under the address three pills of one width —
   Copy, the way to the brief (with the studio's hairline rim) and the way to the
   socials (with the marks of the networks). Every icon takes the same slot, so the
   three labels start on one line. */
.foot-actions { display: grid; gap: 8px; width: 100%; max-width: 330px; }
.foot-act,
.footer-links .foot-act {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 44px;
  padding: 5px 6px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  box-shadow: var(--inner-hi);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.foot-act:hover,
.footer-links .foot-act:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--glass-bg-strong);
  box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb), .55), var(--inner-hi);
}
.foot-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.foot-ico {
  width: 28px;
  height: 28px;
  margin-inline: 2px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), .10);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .16);
}
.foot-ico svg { width: 14px; height: 14px; }
.foot-ico--soc { width: 32px; margin-inline: 0; background: none; box-shadow: none; }
.foot-act > [data-i18n] { flex: 1 1 auto; min-width: 0; }
.foot-go { width: 16px; height: 16px; flex: none; margin-right: 12px; color: var(--text-3); transition: transform .45s var(--ease-liquid), color var(--t) var(--ease); }
.foot-act:hover .foot-go { color: var(--accent-text); transform: translateX(3px); }
/* the address and Copy in one pill: the envelope in the same slot as the other icons,
   the address shrinking a little in a narrow column so it always stays whole, and a
   short key in the page's colour at the right end that shows a tick once copied */
.foot-mail { container: footmail / inline-size; gap: 8px; cursor: default; }
.footer-links .foot-mail-addr {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-body, inherit);
  font-size: clamp(.62rem, calc((100cqi - 96px) / 16.4), .86rem);   /* 96px: envelope, gaps and the key */
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}
.footer-links .foot-mail-addr:hover { color: var(--accent-text); }
.foot-mail-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-mail-copy {
  width: 46px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .96), rgba(var(--accent-rgb), .78));
  box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.foot-mail-copy:hover { transform: translateY(-1px); box-shadow: 0 9px 18px -8px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.foot-mail-copy:active { transform: scale(.95); }
.foot-mail-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-mail-copy svg { width: 15px; height: 15px; }
.foot-mail-copy .ico-check { display: none; }
.foot-mail-copy.is-copied .ico-copy { display: none; }
.foot-mail-copy.is-copied .ico-check { display: block; animation: keyTick .4s var(--ease-liquid); }
@container footmail (max-width: 300px) {
  .foot-mail .foot-ico { display: none; }
  .footer-links .foot-mail-addr { padding-left: 10px; font-size: clamp(.62rem, calc((100cqi - 56px) / 16.4), .86rem); }
  .foot-mail-copy { width: 38px; }
}
.foot-act .soc-stack { --dot: 20px; --ov: 6px; --gap: 1.5px; }
.foot-act .soc-dot svg { width: 10px; height: 10px; }
.foot-act:hover .soc-dot:last-child { transform: translateX(2px) rotate(8deg); }
.foot-act--brief,
.footer-links .foot-act--brief,
.footer-links .foot-act--brief:hover {
  --rim: linear-gradient(90deg, #17A66C, #A855F7, #E0576E, #2F6BFF, #17A66C);
  border-color: transparent;
}
[data-theme="light"] .foot-act--brief { --rim: linear-gradient(90deg, #36B283, #9C6DF2, #E26C84, #5082F5, #36B283); }
.foot-act--brief::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--rim) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: briefRim 7s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .foot-act--brief::before { animation: none; } }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--glass-brd-2);
  font-size: .82rem;
  color: var(--text-3);
}

/* ---------- 20. Reveal on scroll ----------
   Content is visible by default; the entrance animation is only armed
   once JS confirms it can drive it. No JS, no hidden content. */
.reveal { transition: opacity .85s var(--ease), transform .85s var(--ease); }
body.anim-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
body.anim-ready .reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ---------- 21. Utilities ---------- */
.hr { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-brd-2), transparent); border: 0; }
.mt-s { margin-top: 10px; } .mt-m { margin-top: 22px; } .mt-l { margin-top: 40px; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   22. WHALE MARK  —  the Atlas logo and its fountain
   ============================================================ */
.whale-img {
  width: 100%;
  height: auto;
  display: block;
  /* the logo file is blue (hue ~214°); each realm rotates it onto its own accent */
  filter: var(--logo-filter, none);
  transition: filter var(--t) var(--ease), transform var(--t-slow) var(--ease-liquid);
  transform-origin: 24% 62%;   /* pivot at the head, so the tail lifts */
  transition: transform var(--t-slow) var(--ease-liquid);
}

/* invisible anchor: the fountain leaves the logo from the blowhole */
.blowhole {
  position: absolute;
  left: 27.3%;
  top: 21.9%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

[data-fountain] { cursor: pointer; position: relative; display: block; }
[data-fountain]:hover .whale-img,
[data-fountain].spouting .whale-img { transform: translateY(-3%) rotate(-4deg) scale(1.04); }

.brand-mark {
  position: relative;
  width: 42px;              /* the camera: a touch smaller than the whale was, level with the two lines of the name */
  height: auto;
  flex: none;
  display: block;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -22% -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .26), transparent 68%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.brand-mark:hover::before { opacity: 1; }

/* the giant hero logo */
.whale-hero {
  position: relative;
  width: min(340px, 78%);
  margin-inline: auto;
  filter: drop-shadow(0 22px 40px rgba(20, 60, 140, .28));
}
[data-theme="dark"] .whale-hero { filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .75)); }

.whale-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-3);
  opacity: .9;
}
.whale-hint svg { width: 15px; height: 15px; }
/* touch devices have no cursor to hover with */
@media (hover: none) { .whale-hint { display: none; } }

/* ============================================================
   23. HERO GLASS PANEL — the UI-kit style showcase
   ============================================================ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
}
/* both columns end on the same line: the bottom of the print sits level with the
   bottom of the buttons next to it. The text column takes the whole height and
   pushes only its buttons down, so the heading starts level with the top of the
   print instead of floating in the middle. */
.hero-grid--bottom { align-items: end; }
.hero-grid--bottom > .hero-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.hero-grid--bottom > .hero-inner > .hero-cta { margin-top: auto; }
@media (max-width: 1000px) {
  .hero-grid--bottom > .hero-inner { display: grid; }
  .hero-grid--bottom > .hero-inner > .hero-cta { margin-top: 0; }
}
/* Every first screen with a picture beside the text (brands, datasets, contact,
   home) is framed like the premium one: the glass panel or the collage takes the
   height of the text column, so its top edge is level with the first line of text
   and its bottom edge with the bottom of the buttons. The photo inside is what
   gives: it fills the height that is left (cropped, never stretched), down to a
   floor that keeps it a real picture — if the text is shorter than that, the
   buttons move down to the frame's bottom edge instead. Stacked under the text
   (1000px and less) everything keeps its own proportions. */
@media (min-width: 1001px) {
  .hero-grid--bottom > .hero-panel,
  .hero-grid--bottom > .hero-collage { align-self: stretch; }
  .hero-grid--bottom > .hero-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-grid--bottom > .hero-panel > .hero-shot {
    flex: 1 1 0;
    min-height: 240px;
    aspect-ratio: auto;
  }
  .hero-grid--bottom > .hero-collage { aspect-ratio: auto; min-height: 360px; }
  /* premium: the print keeps its 3:2 window as the floor and grows taller with a
     longer text (Russian, Spanish), so its top edge stays on the heading too */
  .hero-grid--bottom > .hero-art { align-self: stretch; grid-template-rows: 1fr; }
  .hero-grid--bottom > .hero-art > .print,
  .hero-grid--bottom > .hero-art .print-mat { display: flex; flex-direction: column; }
  .hero-grid--bottom > .hero-art .print-mat { flex: 1 1 auto; }
  .hero-grid--bottom > .hero-art .print-win { flex: 1 0 auto; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { order: 2; }
}

/* Grid tracks may shrink below their content's widest word: the content wraps
   instead of pushing the whole page sideways on a narrow window. */
.hero-grid > *, .split > *, .packs > * { min-width: 0; }
/* on the premium page the text keeps about half a centimetre more air from the
   print beside it (the sheets under the print reach out towards the text) */
@media (min-width: 1001px) {
  [data-realm="premium"] .hero-grid--bottom { column-gap: calc(clamp(22px, 3vw, 44px) + 20px); }
}
@media (max-width: 620px) {
  .hero-cta .btn { white-space: normal; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
}

.hero-panel {
  position: relative;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-xl);
  display: grid;
  gap: 14px;
  min-height: 420px;
  align-content: center;
}
.hero-panel .panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.hero-panel .panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: -.02em;
}
.hero-panel .panel-dots { margin-left: auto; display: flex; gap: 6px; }
.hero-panel .panel-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--glass-brd);
  box-shadow: var(--inner-hi);
}
.hero-panel .panel-dots i:first-child { background: var(--accent); opacity: .7; }

.mini-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mini-row > * { flex: none; }

.mini-toggle {
  position: relative;
  width: 58px; height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: linear-gradient(180deg, var(--btn-from), var(--btn-to));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -8px rgba(var(--accent-rgb), .9);
}
.mini-toggle::after {
  content: "";
  position: absolute;
  top: 3px; right: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #E6EEFF);
  box-shadow: 0 3px 8px rgba(10, 30, 80, .35);
  animation: slideKnob 4.5s var(--ease) infinite;
}
@keyframes slideKnob {
  0%, 40% { transform: translateX(0); }
  50%, 90% { transform: translateX(-26px); }
  100% { transform: translateX(0); }
}

.mini-card {
  padding: 18px 20px;
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
  background: linear-gradient(140deg,
      rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .08));
  border: 1px solid rgba(var(--accent-rgb), .22);
  box-shadow: var(--inner-hi);
}
[data-theme="dark"] .mini-card {
  background: linear-gradient(140deg,
      rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .07));
}

/* floating glass bubbles behind the hero */
.float {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--glass-shadow), var(--inner-hi);
  display: grid; place-items: center;
  color: var(--accent);
  animation: bob 7s var(--ease) infinite alternate;
  pointer-events: none;
}
.float svg { width: 44%; height: 44%; }
.float.f1 { width: 62px; height: 62px; left: -18px; top: 12%; animation-delay: -1s; }
.float.f2 { width: 46px; height: 46px; right: -12px; top: 30%; animation-delay: -3s; }
.float.f3 { width: 54px; height: 54px; right: 8%; bottom: -20px; animation-delay: -5s; }
@keyframes bob {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-16px) rotate(4deg); }
}
@media (max-width: 620px) { .float { display: none; } }

/* ============================================================
   24. SMALL PARTS
   ============================================================ */
.tick-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--text-2); }
.tick-list li .tk {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, var(--btn-from), var(--btn-to));
  box-shadow: 0 5px 12px -6px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.tick-list li .tk svg { width: 12px; height: 12px; }

/* same fluid measure as .lead; the lead inside takes the head's width, not less */
.section-head { display: grid; gap: 12px; max-width: calc(100% - clamp(0px, (100% - 600px) * .5, 400px)); margin-bottom: clamp(22px, 2.6vw, 36px); }
.section-head .lead { max-width: none; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
/* A left-aligned head sits over full-width content (chips, a grid of cards, a
   gallery): its paragraph now runs to the same right edge, so both move together
   as the window changes. Centred heads keep the narrower, centred measure. */
.section-head:not(.center) { max-width: none; }

.badge-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.note {
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--glass-brd);
  background: var(--glass-bg-soft);
  font-size: .86rem;
  color: var(--text-2);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem;
  color: var(--accent-text);
  width: fit-content;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
/* the address in the contact card is set like the other card values (bold display
   type), not like a small text link */
.contact-value.link-arrow { font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 800; letter-spacing: -.015em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
/* When the text column opens with an eyebrow, the card next to it should line
   up with the heading, not with the eyebrow above it — and end where the text
   column ends. `stretch` gives both columns the same box, the drop keeps the
   card's top on the heading, and the text column spreads its own blocks so its
   last line lands on the card's bottom edge. */
.split--head { align-items: stretch; --eyebrow-drop: 37px; }        /* eyebrow + stack gap */
.split--icon { --eyebrow-drop: calc(37px + 52px + 18px); }         /* + card icon + gap */
.split--head > :last-child { margin-top: var(--eyebrow-drop); }
.split--head > :first-child {
  display: flex;                 /* so the last block can be pushed down alone */
  flex-direction: column;
}
.split--head > :first-child > :last-child { margin-top: auto; }
/* the figures sit in the middle of their taller cells once the card is stretched */
.split--head .stats .stat { align-content: center; }
/* the right edge of the paragraph lines up with the column (and with the row of
   platform tiles under it); `pretty` keeps a single word off the last line, so
   justifying never has to stretch a nearly empty line */
.split .lead { text-align: justify; text-wrap: pretty; max-width: none; }   /* fills its column */
/* Every paragraph set under a heading runs justified, so its right edge is as
   straight as the left one; hyphenation (by the page language) keeps the gaps
   between words even and the last line stays flush left. Centred heads keep
   centred text. */
.hero .lead:not(.lead-name),     /* the one-line brand statement is a heading, not a paragraph */
.split .lead,
.section-head:not(.center) .lead {
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Below 1000px (the same point where the hero stacks) two columns get so narrow
   that the card beside the text grows tall and the paragraph, pinned to its bottom,
   drifts far from its heading — so the block becomes one column: heading, the text
   right under it, then the card. */
@media (max-width: 1000px) {
  .split--head { align-items: start; }
  .split--head > :last-child { margin-top: 0; }
}
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* ============================================================
   25. PACKAGES — the buying logic, drawn
   ============================================================ */
.packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
@media (max-width: 1080px) { .packs { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.pack {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
.pack:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg), var(--inner-hi); }
.pack--featured { border-color: rgba(var(--accent-rgb), .45); }
.pack--featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 24px 60px -30px rgba(var(--accent-rgb), .8);
  pointer-events: none;
}

/* the tag floats in the card's top corner, so every card keeps the same rhythm */
.pack-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--btn-text, var(--accent-text));
  background: linear-gradient(180deg,
      rgba(var(--accent-rgb), var(--btn-a)), rgba(var(--accent-rgb), var(--btn-b)));
  border: 1px solid rgba(var(--accent-rgb), .5);
  box-shadow: 0 5px 12px -8px rgba(var(--accent-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  white-space: nowrap;
}

.pack-head { display: grid; gap: 6px; }
.pack-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent-text);
}
.pack-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.15;
}
.pack-price small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

.pack-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 2px;
}
.pack-count b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-text);
  letter-spacing: -.03em;
}
.pack-count span { font-size: .8rem; color: var(--text-2); }

/* the 3×3 map of what you actually receive */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* cells shrink with the card */
  gap: 8px;
}
.pack-cell {
  --cell-rgb: 56, 171, 242;      /* sky blue, whatever the page's accent is */
  min-width: 0;
  overflow-wrap: anywhere;       /* a long capitalised word breaks instead of widening the card */
  -webkit-hyphens: auto;
  hyphens: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .005em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--t) var(--ease-liquid);
}
.pack:hover .pack-cell { transform: scale(1.02); }

.pack-cell--hero {
  color: #06243B;
  background: linear-gradient(160deg,
      rgba(var(--cell-rgb), .95), rgba(var(--cell-rgb), .72));
  border-color: rgba(var(--cell-rgb), .8);
}
[data-theme="dark"] .pack-cell--hero { color: #04202F; }
.pack-cell--life {
  color: var(--text);
  background: var(--glass-bg-strong);
  border-color: var(--glass-brd);
  box-shadow: var(--inner-hi);
}
.pack-cell--info {
  color: #0A3A5C;
  background: linear-gradient(160deg,
      rgba(var(--cell-rgb), .42), rgba(var(--cell-rgb), .24));
  border-color: rgba(var(--cell-rgb), .45);
}
[data-theme="dark"] .pack-cell--info { color: #CDE9FB; }
.pack-cell--empty {
  border: 1px dashed rgba(var(--cell-rgb), .28);
  background: var(--glass-bg-soft);
  color: transparent;
}
.pack-cell--empty::after {
  content: "";
  width: 14px; height: 2px;
  border-radius: 2px;
  background: rgba(var(--cell-rgb), .35);
}

.pack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.pack-legend span { display: inline-flex; align-items: center; gap: 10px; }
.pack-legend i {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--inner-hi);
}
.pack-legend .lg-hero { background: rgba(56, 171, 242, .92); border-color: rgba(56, 171, 242, .8); }
.pack-legend .lg-life { background: var(--glass-bg-strong); }
.pack-legend .lg-info { background: rgba(56, 171, 242, .38); border-color: rgba(56, 171, 242, .45); }

.pack-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pack-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .86rem; color: var(--text-2);
  padding-top: 9px;
  border-top: 1px solid var(--glass-brd-2);
}
.pack-list li:first-child { border-top: 0; padding-top: 0; }
.pack-list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--accent-text); }

.pack .btn { justify-self: stretch; white-space: normal; text-align: center; }

.pack-sub {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
}

/* ============================================================
   26. SOCIAL LINKS
   ============================================================ */
.socials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

/* the colours of each network: a fill for its mark and one tone for the glow */
.brand-ig { --brand-rgb: 225, 48, 108; --brand-fill: radial-gradient(circle at 28% 108%, #FFD86E 0%, #FFA24A 14%, #F2474F 40%, #D62E8F 64%, #6A45E0 100%); }
.brand-tg { --brand-rgb: 42, 171, 238; --brand-fill: linear-gradient(160deg, #4CC1F5 0%, #2AABEE 45%, #1B8ACB 100%); }
.brand-in { --brand-rgb: 10, 102, 194; --brand-fill: linear-gradient(160deg, #2E8DE8 0%, #0A66C2 60%, #0853A2 100%); }
[data-theme="dark"] .brand-in { --brand-rgb: 70, 146, 232; }

/* One tile per network: the mark in its own colours, the name and the handle in
   clear type, and a round key on the right that lights up in the network's colour. */
.social {
  --brand-rgb: var(--accent-rgb);
  container: social / inline-size;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 88px;
  padding: 16px 18px 16px 16px;
  border-radius: var(--r-lg, 22px);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t) var(--ease-liquid),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.social:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--brand-rgb), .5);
  box-shadow: 0 18px 38px -20px rgba(var(--brand-rgb), .85), var(--inner-hi);
}
.social:focus-visible { outline: 2px solid rgb(var(--brand-rgb)); outline-offset: 3px; }
.social-icon {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #FFFFFF;
  background: var(--brand-fill, rgb(var(--brand-rgb)));
  box-shadow: 0 10px 22px -12px rgba(var(--brand-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .12);
  transition: transform var(--t) var(--ease-liquid);
}
.social-icon svg { width: 25px; height: 25px; }
.social:hover .social-icon { transform: scale(1.05) rotate(-4deg); }
.social-name {
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.social-name b {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.social-name span {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-go {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-bg);
  box-shadow: inset 0 0 0 1px var(--glass-brd), var(--inner-hi);   /* a drawn inner line stays crisp on the round edge */
  color: var(--text-2);
  transition: color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.social-go svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease-liquid); }
.social:hover .social-go { color: #FFFFFF; background: var(--brand-fill, rgb(var(--brand-rgb))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
/* the mark, the name and the key sit above the light that follows the cursor, so they stay sharp under it */
.social > *, .alt-card > * { position: relative; z-index: 3; }
.social:hover .social-go svg { transform: translate(1px, -1px); }
@container social (max-width: 300px) { .social-go { display: none; } }   /* a narrow tile keeps the handle whole */
/* arriving from a "Socials" button, the tiles glow one after another */
.socials.is-lit .social { animation: socLit 1.3s ease-out; }
.socials.is-lit .social:nth-child(2) { animation-delay: .12s; }
.socials.is-lit .social:nth-child(3) { animation-delay: .24s; }
@keyframes socLit {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .6), var(--glass-shadow); }
  100% { box-shadow: 0 0 0 18px rgba(var(--brand-rgb), 0), var(--glass-shadow); }
}
@media (prefers-reduced-motion: reduce) { .socials.is-lit .social { animation: none; } }

/* ============================================================
   27. HERO PHOTOGRAPH — a real frame inside the glass panel
   ============================================================ */
.hero-shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-lg), var(--inner-hi);
  isolation: isolate;
}
.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.hero-shot:hover img { transform: scale(1.07); }

/* the dataset panel holds one wide frame instead of the whale */
.hero-shot--wide { aspect-ratio: 16 / 10; }

/* a whisper of the territory's colour over the frame */
.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--accent-rgb), .18));
  pointer-events: none;
}

/* ---------- the hero frame becomes a small gallery ---------- */
/* only a gallery stacks its frames; a lone photo just fills the frame */
.hero-shot[data-gallery] img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.hero-shot[data-gallery] img.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity .45s var(--ease), transform 1.1s var(--ease);
}
.hero-shot:hover img.is-active { transform: scale(1.06); }

.shot-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(20, 24, 34, .34);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t) var(--ease-liquid);
}
.shot-nav svg { width: 18px; height: 18px; }
.shot-nav.prev { left: 12px; }
.shot-nav.next { right: 12px; }
.hero-shot:hover .shot-nav,
.shot-nav:focus-visible { opacity: 1; }
.shot-nav:hover { background: rgba(var(--accent-rgb), .8); transform: translateY(-50%) scale(1.08); }
@media (hover: none) { .shot-nav { opacity: 1; } }

.shot-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.shot-dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.shot-dots button.is-active { width: 22px; border-radius: 4px; background: #fff; }

/* the caption under the frame is a link into the portfolio */
.panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease);
}
.panel-link:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .45); }
.panel-link svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); transition: transform var(--t) var(--ease); }
.panel-link:hover svg { transform: translateX(4px); }

/* marketplace chips under the hero */
.mp-row {
  display: grid;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 40px);
}
.mp-row .chip { font-weight: 600; }
.mp-row .chip svg { color: var(--accent-text); }

/* ---------- section drop-down under each nav entry ---------- */
.nav-item { position: relative; display: flex; }

.nav-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 292px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: var(--r-md);
  background: var(--menu-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              visibility var(--t) var(--ease);
  z-index: 30;
}
/* an invisible bridge, so the pointer can travel from the link to the menu */
.nav-drop::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px;
  height: 16px;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.nav-drop a {
  padding: 10px 13px;
  border-radius: var(--r-xs);
  /* a menu of section names, so they are set as small caps with air between the
     letters instead of running as sentences */
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-drop a:hover {
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent-text);
}

  :where(html.nav-compact) .nav-drop { display: none; }   /* the burger menu is already a list */


/* ============================================================
   28. HERO COLLAGE — real work instead of a mock interface
   ============================================================ */
.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.35fr;   /* small frames inside, the big one on the outer edge */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  aspect-ratio: 7 / 5;
}
.hc {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-lg), var(--inner-hi);
  isolation: isolate;
}
/* the tall frame owns the outer column; the stacked pair is inset a little
   so the block reads as a composition rather than a rectangle of tiles */
.hc-1 { grid-column: 2; grid-row: 1 / span 2; }
.hc-2 { grid-column: 1; grid-row: 1; margin-top: clamp(10px, 1.2vw, 18px); }
.hc-3 { grid-column: 1; grid-row: 2; margin-bottom: clamp(10px, 1.2vw, 18px); }
.hc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.hc:hover img { transform: scale(1.08); }
.hc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(var(--accent-rgb), .16));
  pointer-events: none;
}

.hc-badge {
  position: absolute;
  right: clamp(12px, 1.4vw, 18px);
  bottom: clamp(12px, 1.4vw, 18px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}
.hc-badge svg { width: 15px; height: 15px; color: var(--accent-text); }

/* A small label in the corner of a frame, naming what the shot is.
   It sits on the photo, not on the page, so its colours are fixed in both
   themes — a theme-driven white would vanish on a white packshot. */
.hc-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(9, 17, 32, .58);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #FFFFFF;
  white-space: nowrap;
}
/* the frame is small on phones and the Spanish label is the longest */
@media (max-width: 620px) {
  .hc-tag { left: 7px; top: 7px; padding: 4px 8px; font-size: .62rem; }
}
/* the big frame is too narrow to hold the badge on phones — hang it
   under the collage instead of letting it spill over the small frames */
@media (max-width: 760px) {
  .hc-badge {
    left: 50%;
    right: auto;
    bottom: -14px;
    transform: translateX(-50%);
  }
}

@media (max-width: 1000px) {
  .hero-collage { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .hero-collage { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
  .hc-1 { grid-column: 2; grid-row: 1 / span 2; }
  .hc-2, .hc-3 { margin: 0; }
}

/* a portrait frame, for vertical shots inside the hero panel */
.hero-shot--tall { aspect-ratio: 4 / 5; }
@media (max-width: 1000px) { .hero-shot--tall { aspect-ratio: 3 / 2; } }

/* ---------- home hero: the headline spans the page ---------- */
.hero-title {
  max-width: none;
  margin-block: 0 clamp(24px, 2.8vw, 38px);
  font-size: clamp(2.3rem, 6.9vw, 6.1rem);
}
/* Everything that is not the headline lives in the left column, so the
   text block and the photo block are two solid shapes side by side
   instead of two thin strips over a half-empty column. */
.hero-meta {
  display: grid;
  gap: 9px;
  justify-items: start;
  margin-bottom: clamp(24px, 3vw, 40px);
}
/* text column and photos sit level with each other */
.hero .hero-title ~ .hero-grid { align-items: center; }
.hero .hero-title ~ .hero-grid .hero-inner { gap: clamp(20px, 2.4vw, 30px); }
.hero .hero-title ~ .hero-grid .lead { max-width: none; }

@media (min-width: 1001px) {
  .hero .hero-title ~ .hero-grid { grid-template-columns: 1fr 1.05fr; }
  .hero .hero-title ~ .hero-grid .hero-cta { gap: 12px; }
}

/* ============================================================
   CAMERA LOGO — the retro camera replaces the whale everywhere
   One inline SVG (header, footer, the big one on the contact page, the camera after
   the premium portfolio title); its parts are coloured by variables, so every page
   dresses it in its own palette. Hovering it prints instant photos (cameras.js,
   data-cameras="polaroid"). Home and contact wear the site's own blue.
   ============================================================ */
:root {
  --cam-body: #23262E; --cam-plate: #DCD5C8; --cam-part: #3C424E; --cam-shutter: #3C424E;
  --cam-glass: #14171D; --cam-glint: rgba(255, 255, 255, .30); --cam-rim: transparent;
}
[data-theme="dark"] { --cam-rim: rgba(255, 255, 255, .24); }
/* pages without a realm of their own (home, contact) take the blue of the glass */
:root:not([data-realm]) {           /* day: a soft cornflower blue, lighter than the night camera */
  --cam-body: #5C7FD8; --cam-plate: #EEF3FF; --cam-part: #3C5CB4; --cam-shutter: #8AADFF;
  --cam-glass: #1B2B63; --cam-glint: rgba(235, 242, 255, .55); --cam-rim: transparent;
}
[data-theme="dark"]:not([data-realm]) {
  --cam-body: #1B3784; --cam-plate: #DCE6FF; --cam-part: #102456; --cam-shutter: #7AA7FF;
  --cam-glass: #070F2A; --cam-rim: rgba(200, 220, 255, .30);
}
[data-realm="premium"] {
  --cam-body: #7B2130; --cam-plate: #F7E3E7; --cam-part: #4A1320; --cam-shutter: #D23B53;
  --cam-glass: #25070F; --cam-glint: rgba(255, 255, 255, .34); --cam-rim: transparent;
}
[data-theme="dark"][data-realm="premium"] {
  --cam-body: #6A1A2A; --cam-plate: #F2D6DC; --cam-part: #3E0F1B; --cam-shutter: #F08D9F;
  --cam-glass: #1C050B; --cam-rim: rgba(255, 214, 220, .32);
}
[data-realm="dataset"] {              /* day: a soft lavender violet, gentler than the night camera */
  --cam-body: #8266DC; --cam-plate: #F3EEFF; --cam-part: #5B43B5; --cam-shutter: #BBA2FF;
  --cam-glass: #251659; --cam-glint: rgba(242, 235, 255, .55); --cam-rim: transparent;
}
[data-theme="dark"][data-realm="dataset"] {
  --cam-body: #3F1C80; --cam-plate: #E4D9FF; --cam-part: #261052; --cam-shutter: #C4A9FF;
  --cam-glass: #0F0726; --cam-rim: rgba(220, 200, 255, .30);
}
[data-realm="commerce"] {
  --cam-body: #0E5A3E; --cam-plate: #DFF4EA; --cam-part: #083A28; --cam-shutter: #17A66C;
  --cam-glass: #04170F; --cam-glint: rgba(201, 235, 217, .50); --cam-rim: transparent;
}
[data-theme="dark"][data-realm="commerce"] {
  --cam-body: #0D4A34; --cam-plate: #D3EFE1; --cam-part: #073023; --cam-shutter: #6FE0AC;
  --cam-glass: #03120C; --cam-rim: rgba(190, 240, 215, .30);
}
.cam .cam-body { fill: var(--cam-body); stroke: var(--cam-rim); stroke-width: 1.6; }
.cam .cam-plate { fill: var(--cam-plate); }
.cam .cam-part { fill: var(--cam-part); }
.cam .cam-shutter { fill: var(--cam-shutter); }
.cam .cam-glass { fill: var(--cam-glass); }
.cam .cam-glint { fill: var(--cam-glint); }

.brand-mark[data-cameras] { cursor: pointer; }
.brand-mark .cam {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100 / 70;
  overflow: visible;
  transform: rotate(-9deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 3px 6px rgba(10, 20, 40, .30));
  transition: transform .5s var(--ease-liquid);
}
.brand-mark:hover .cam { transform: rotate(4deg) translateY(-2px); }

/* the big camera on the contact page, in place of the big whale */
.cam-hero {
  position: relative;
  width: min(290px, 68%);
  margin: 10px auto 18px;
  cursor: pointer;
}
.cam-hero .cam {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100 / 70;
  overflow: visible;
  transform: rotate(-7deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 26px 34px rgba(8, 16, 36, .42));
  transition: transform .6s var(--ease-liquid);
}
.cam-hero:hover .cam { transform: rotate(3deg) translateY(-6px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .brand-mark .cam, .cam-hero .cam { transition: none; } }

/* ---------- contact: services, set like the header menu ---------- */
.svc-head { display: flex; align-items: center; gap: 14px; }
.svc-list { display: grid; gap: 8px; }
.svc {
  --svc-rgb: var(--c-light);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 9px;
  border-radius: 14px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  box-shadow: var(--inner-hi);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: transform var(--t) var(--ease-liquid), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
[data-theme="dark"] .svc { --svc-rgb: var(--c-dark); }
.svc-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: rgb(var(--svc-rgb));
  background: linear-gradient(180deg, rgba(var(--svc-rgb), .18), rgba(var(--svc-rgb), .06));
  border: 1px solid rgba(var(--svc-rgb), .28);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.svc-ico svg { width: 17px; height: 17px; }
.svc-name { flex: 1; min-width: 0; }
.svc-arrow { width: 16px; height: 16px; flex: none; opacity: .45; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.svc:hover, .svc:focus-visible {
  transform: translateX(3px);
  border-color: rgba(var(--svc-rgb), .50);
  box-shadow: 0 14px 28px -20px rgba(var(--svc-rgb), .85), var(--inner-hi);
}
.svc:hover .svc-ico, .svc:focus-visible .svc-ico { color: #FFFFFF; background: linear-gradient(180deg, rgba(var(--svc-rgb), .95), rgba(var(--svc-rgb), .72)); }
.svc:hover .svc-arrow, .svc:focus-visible .svc-arrow { opacity: 1; transform: translateX(3px); color: rgb(var(--svc-rgb)); }

/* ---------- contact: the two socials share the row ---------- */
.socials--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* under the social tiles: "Prefer email?", the address in the same small type and the copy button */
.soc-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.soc-mail-link {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .45);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.soc-mail-link:hover { color: var(--text); text-decoration-color: var(--accent); }
@media (max-width: 620px) { .socials--two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- contact: the brief ----------
   Concise on purpose: the service as four pills that share their rows, then one
   glass sheet with the fields (each label rests inside its field and moves up
   when the field is in use), a row that opens a field for reference links, the
   consent, and one wide button. */
.brief-card { padding: clamp(22px, 3vw, 40px); }
.brief-card.is-lit { animation: briefLit 1.5s ease-out; }
@keyframes briefLit {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55), var(--glass-shadow); }
  100% { box-shadow: 0 0 0 22px rgba(var(--accent-rgb), 0), var(--glass-shadow); }
}
.brief-head { display: grid; gap: 6px; margin-bottom: clamp(18px, 2.2vw, 26px); }
.brief-head .h2, .brief-head p { margin: 0; }
.brief-form { display: grid; gap: clamp(16px, 1.8vw, 20px); }
.brief-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label .opt { color: var(--text-3); font-weight: 500; }
.bf-label .opt { font-size: .86em; font-weight: 500; }

/* what is needed: four pills of equal width, two to a row — the coloured icon
   disc sits flush in the left end and a small ring answers it in the right end
   (it fills with the service colour when chosen), so every pill is symmetric.
   One to a row in a narrow column; the ring steps aside when the pills get tight. */
.choice-field { border: 0; margin: 0; padding: 0; min-width: 0; container: choices / inline-size; }
.choice-field legend { padding: 0; margin-bottom: 12px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container choices (max-width: 440px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice { --c: var(--c-light); position: relative; min-width: 0; cursor: pointer; container: choice / inline-size; }
[data-theme="dark"] .choice { --c: var(--c-dark); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 7px 18px 7px 7px;          /* the ring's centre is as far from the right end as the icon's is from the left */
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)), var(--glass-bg);
  box-shadow: 0 8px 20px -16px rgba(12, 38, 84, .40), var(--inner-hi);
  font-family: var(--font-display);    /* set like the menu in the header: capitals with air between them */
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-2);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease-liquid);
}
[data-theme="dark"] .choice-pill {
  color: rgba(255, 255, 255, .90);      /* readable on the dark glass */
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
[data-theme="dark"] .choice:hover .choice-pill,
[data-theme="dark"] .choice input:checked + .choice-pill { color: #FFFFFF; }
.choice-ico {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgb(var(--c));
  border: 1px solid rgba(var(--c), .22);
  background: radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, .95), rgba(var(--c), .10) 62%), rgba(var(--c), .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform .5s var(--ease-liquid);
}
[data-theme="dark"] .choice-ico {
  background: linear-gradient(180deg, rgba(var(--c), .24), rgba(var(--c), .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.choice-ico svg { width: 18px; height: 18px; }
.choice-text { flex: 1 1 auto; min-width: 0; }
.choice-mark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--c), .35);
  transition: border-color var(--t) var(--ease);
}
.choice-mark::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: rgb(var(--c));
  transform: scale(0);
  transition: transform .4s var(--ease-liquid);
}
.choice:hover .choice-pill { border-color: rgba(var(--c), .45); color: var(--text); transform: translateY(-1px); }
.choice:hover .choice-ico { transform: rotate(-8deg); }
.choice input:checked + .choice-pill {
  color: var(--text);
  border-color: rgba(var(--c), .70);
  background: linear-gradient(180deg, rgba(var(--c), .14), rgba(var(--c), .04)), var(--glass-bg-strong);
  box-shadow: 0 12px 26px -18px rgba(var(--c), .95), 0 0 0 3px rgba(var(--c), .12), var(--inner-hi);
}
.choice input:checked + .choice-pill .choice-ico {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(145deg, rgba(var(--c), 1), rgba(var(--c), .74));
  box-shadow: 0 8px 16px -8px rgba(var(--c), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.choice input:checked + .choice-pill .choice-mark { border-color: rgb(var(--c)); }
.choice input:checked + .choice-pill .choice-mark::after { transform: scale(1); }
.choice input:focus-visible + .choice-pill { outline: 2px solid rgb(var(--c)); outline-offset: 2px; }
/* a pill narrower than 330px keeps its label on one line instead: the ring steps aside
   and the type follows the pill's width (up to the full size), a touch tighter for the
   longest Russian label */
@container choice (max-width: 329px) {
  .choice-mark { display: none; }
  .choice-pill { gap: 8px; padding: 6px 10px 6px 6px; font-size: clamp(.66rem, calc((100cqi - 62px) / 13.8), .8rem); letter-spacing: .03em; }
  :lang(ru) .choice-pill { font-size: clamp(.66rem, calc((100cqi - 62px) / 14.6), .8rem); }
  .choice-ico { width: 36px; height: 36px; }
  .choice-ico svg { width: 17px; height: 17px; }
}

/* the sheet of fields */
.brief-sheet {
  --hair: rgba(var(--accent-rgb), .15);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--inner-hi), inset 0 2px 10px rgba(12, 38, 84, .05);
}
.bf {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  border-top: 1px solid var(--hair);
  transition: background var(--t) var(--ease);
}
.bf--half { grid-column: span 1; }
.bf:first-child, .bf--half + .bf--half { border-top: 0; }
.bf--half + .bf--half { border-left: 1px solid var(--hair); }
.bf::after {                        /* a line in the three colours of the studio under the field in use */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #17A66C, #A855F7 50%, #E0576E);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.bf:focus-within { background: rgba(var(--accent-rgb), .05); }
.bf:focus-within::after { transform: scaleX(1); }
.bf:has(.bf-in:user-invalid)::after { transform: scaleX(1); background: #E0576E; }
.bf-in {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 28px 20px 10px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
  font: inherit;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--text);
}
textarea.bf-in { min-height: 128px; padding-top: 32px; resize: vertical; }
.bf-in::placeholder { color: var(--text-3); opacity: 0; transition: opacity var(--t) var(--ease); }
.bf-in:focus::placeholder { opacity: 1; }
.bf-label {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 21px;
  overflow: hidden;
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .32s var(--ease), color .32s var(--ease);
}
.bf-in:focus + .bf-label,
.bf-in:not(:placeholder-shown) + .bf-label { transform: translateY(-11px) scale(.74); }
.bf-in:focus + .bf-label { color: var(--accent-text); }
.bf-in:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s; }
/* a required field left empty (or an address that is not one): the line under it and
   its label turn rose and a short note sits at its right end; in a narrow sheet only
   the note's dot stays */
.bf.is-invalid::after { transform: scaleX(1); background: rgb(var(--err)); }
.bf.is-invalid .bf-label { color: rgb(var(--err)); right: 176px; }
.bf.is-invalid .bf-in { padding-right: 176px; }
.bf .req-hint { position: absolute; right: 16px; top: 22px; }
.brief-sheet { container: sheet / inline-size; }
@container sheet (max-width: 400px) {
  .bf .req-hint { top: 29px; gap: 0; padding: 0; border: 0; background: none; font-size: 0; }
  .bf.is-invalid .bf-label { right: 40px; }
  .bf.is-invalid .bf-in { padding-right: 40px; }
}

/* references: a row of the sheet that turns into a field for links */
.refs-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 20px 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.refs-ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(135deg, #17A66C, #A855F7 55%, #E0576E);
  box-shadow: 0 10px 20px -12px rgba(168, 85, 247, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .5s var(--ease-liquid);
}
.refs-ico svg { width: 17px; height: 17px; }
.refs-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.refs-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.refs-opt {                            /* says the row can be skipped */
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-3);
}
.refs-hint { font-size: .78rem; font-weight: 500; line-height: 1.35; color: var(--text-3); }
.refs-plus { width: 18px; height: 18px; flex: none; color: var(--accent-text); transition: transform .5s var(--ease-liquid); }
.refs-btn:hover { background: rgba(var(--accent-rgb), .05); }
.refs-btn:hover .refs-ico { transform: rotate(-12deg) scale(1.06); }
.refs-btn:hover .refs-plus { transform: rotate(90deg); }
.refs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 0 0 21px 21px; }
.refs-btn[hidden], .refs-field[hidden] { display: none; }
.refs-field { position: relative; display: block; animation: refsIn .45s var(--ease) both; }
.refs-btn.is-back { animation: refsIn .4s var(--ease) both; }   /* folds back when nothing was added */
.refs-row { position: relative; }
.refs-row + .refs-row { border-top: 1px solid var(--hair); }
.refs-lab { position: relative; display: block; }
.refs-row--extra { animation: refsIn .4s var(--ease) both; }
.refs-row .bf-in { padding-right: 58px; }   /* room for the cross, on every row */
.refs-del {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  color: var(--text-3);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease-liquid);
}
.refs-del svg { width: 14px; height: 14px; }
.refs-del:hover { color: #E0576E; border-color: rgba(224, 87, 110, .5); transform: translateY(-50%) rotate(90deg); }
.refs-more {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 20px 15px;
  border: 0;
  border-top: 1px dashed var(--hair);
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.refs-more svg { width: 16px; height: 16px; flex: none; transition: transform .5s var(--ease-liquid); }
.refs-more:hover { background: rgba(var(--accent-rgb), .05); }
.refs-more:hover svg { transform: rotate(90deg); }
.refs-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }
.refs-more[hidden] { display: none; }
@keyframes refsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .bf--half { grid-column: 1 / -1; }
  .bf--half + .bf--half { border-left: 0; border-top: 1px solid var(--hair); }
}

.brief-check { align-items: flex-start; font-size: .84rem; line-height: 1.45; }
.brief-check .box { width: 22px; height: 22px; border-radius: 7px; margin-top: -1px; }
.brief-check input:not(:checked) + .box { border-color: rgba(var(--accent-rgb), .38); }
/* The send button: a slim, calm pill with a hairline edge. The label stands exactly
   in the middle (the same room on both sides); the paper plane sits in its own small
   glass disc at the right end — inset like the Copy key in the mail pill — nudged so
   its visual centre is the centre of the disc, and it takes off a little on hover. */
.brief-submit {
  width: 100%;
  min-height: 56px;
  padding: 6px 60px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 10px 24px -16px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-theme="dark"] .brief-submit {
  border-color: rgba(190, 210, 255, .26);
  box-shadow: 0 12px 26px -18px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .20);
}
.brief-submit:hover,
[data-theme="dark"] .brief-submit:hover {
  box-shadow: 0 16px 32px -14px rgba(var(--accent-rgb), .8), 0 0 0 4px rgba(var(--accent-rgb), .14), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.brief-submit-key {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .40);
}
.brief-submit .brief-submit-key svg { width: 17px; height: 17px; transform: translate(-1px, 1px); transition: transform .5s var(--ease-liquid); }
.brief-submit:hover .brief-submit-key svg { transform: translate(2px, -2px); }
@media (max-width: 400px) {           /* a small phone: a smaller disc, and the label may take two lines rather than be cut */
  .brief-submit { padding-inline: 50px; white-space: normal; line-height: 1.25; }
  .brief-submit-key { width: 38px; height: 38px; margin-top: -19px; }
}
.brief-note {
  margin: -4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
  color: var(--text-3);
}
.brief-note svg { width: 15px; height: 15px; flex: none; color: var(--accent-text); }

/* ---------- the brief form, sent through Formspree ---------- */
.hp { display: none !important; }   /* bot trap; not rendered, so browsers never autofill it */
.brief-form[hidden], .form-done[hidden], .form-status[hidden] { display: none !important; }
.brief-form [type="submit"].is-busy { opacity: .72; cursor: progress; transform: none; }
.form-status {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: .9rem;
  line-height: 1.5;
}
.form-status.is-error { background: rgba(224, 87, 110, .12); border: 1px solid rgba(224, 87, 110, .38); color: var(--text); }
.form-status a { color: var(--accent-text); font-weight: 700; overflow-wrap: anywhere; }
.form-status-detail { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-3); overflow-wrap: anywhere; }

/* the thank-you: a green check that draws itself inside two widening rings */
.form-done {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: clamp(20px, 4vw, 52px) 0 clamp(8px, 2vw, 24px);
  text-align: center;
  outline: none;
}
.form-done-ico {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #4ADE9F, #0E7C52);
  color: #FFFFFF;
  box-shadow: 0 24px 46px -18px rgba(23, 166, 108, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: formDone .7s var(--ease-liquid) both;
}
.form-done-ico::before,
.form-done-ico::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(63, 201, 142, .5);
  opacity: 0;
  animation: formDoneRing 1.8s var(--ease) .25s;
}
.form-done-ico::after { inset: -24px; border-width: 1px; animation-delay: .45s; }
.form-done-ico svg { width: 40px; height: 40px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: formTick .55s var(--ease) .35s forwards; }
.form-done-title { margin: 0; }
/* after "we will be in touch soon", a hand that waves twice once the tick is drawn */
.form-done-emoji {
  display: inline-block;
  transform-origin: 72% 82%;
  animation: doneEmojiIn .5s var(--ease-liquid) .55s both, doneWave 1.5s ease-in-out 1.1s;
}
@keyframes doneEmojiIn { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes doneWave {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%      { transform: rotate(-6deg); }
  40%      { transform: rotate(-4deg); }
  50%      { transform: rotate(12deg); }
  60%      { transform: rotate(0); }
}

/* A required part left empty: nothing is sent, the first gap is brought into view,
   its label turns rose with a short note beside it and the control gives one small
   shake; the mark goes as soon as that part is filled in. */
.brief-form { --err: 206, 55, 88; }
[data-theme="dark"] .brief-form { --err: 255, 140, 162; }
.req-hint {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(var(--err), .32);
  background: rgba(var(--err), .08);
  color: rgb(var(--err));
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.req-hint::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--err), .16);
}
.is-invalid .req-hint { display: inline-flex; animation: reqIn .4s var(--ease-liquid); }
.choice-field legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 20px; }
.choice-field.is-invalid legend > span:first-child { color: rgb(var(--err)); }
.choice-field.is-invalid .choice-pill { border-color: rgba(var(--err), .45); }
.brief-check.is-invalid input:not(:checked) + .box { border-color: rgb(var(--err)); box-shadow: 0 0 0 4px rgba(var(--err), .14); }
.choice-field.is-shake .choices,
.brief-check.is-shake .box { animation: reqShake .45s var(--ease); }
@keyframes reqShake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes reqIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .form-done-emoji, .choice-field.is-shake .choices, .brief-check.is-shake .box, .is-invalid .req-hint { animation: none; }
}
.form-done p { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.form-done b { color: var(--text); }
.form-done .btn { margin-top: 12px; }
@keyframes formDone { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes formDoneRing { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes formTick { to { stroke-dashoffset: 0; } }

/* contact, first screen: the address and "Copy" are one pill, as wide as the brief
   button under it. The pill is lit blue glass with a light sweeping across it on
   hover; the address sits centred with its envelope in a small glass disc, and
   "Copy" is a key set into the right end — white in the day theme, frosted at
   night — that is pressed in when clicked and shows a tick and "Copied" for a
   moment. In a column narrower than 500px the key keeps only its icon, below
   400px the envelope disc steps aside, and the address always stays on one line. */
.hero .hero-cta .mail-split { flex: 1 1 100%; }
/* both rows of the first screen are the same height at every width */
.hero .hero-cta .mail-split,
.hero .hero-cta:not(.hero-cta--stack) .btn-brief,
.hero .hero-cta:not(.hero-cta--stack) .btn-soc { min-height: 65px; }
.mail-split {
  container: mailsplit / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #FFFFFF;
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .30), transparent 55%),
    linear-gradient(135deg, #6A95FF 0%, #3F6DF6 48%, #2B50D8 100%);
  box-shadow:
    0 18px 38px -18px rgba(47, 107, 255, .80),
    0 2px 6px -2px rgba(20, 40, 120, .25),
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -1px 0 rgba(10, 30, 110, .25);
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease);
}
[data-theme="dark"] .mail-split {
  border-color: rgba(170, 196, 255, .30);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(170, 196, 255, .24), transparent 55%),
    linear-gradient(135deg, #3D66EA 0%, #2A4AC6 50%, #1E3597 100%);
  box-shadow:
    0 22px 46px -22px rgba(47, 107, 255, .90),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.mail-split::after {                    /* the light that sweeps across on hover */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.mail-split:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(47, 107, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(10, 30, 110, .25); }
.mail-split:hover::after { animation: mailSheen 1.1s var(--ease); }
@keyframes mailSheen { 0% { left: -45%; opacity: 1; } 100% { left: 125%; opacity: 1; } }
.mail-split > * { position: relative; z-index: 1; }

.mail-split-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px 0 0;
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.005em;
  /* the address stays on one line: in a narrow column the type steps down a little */
  font-size: clamp(.72rem, calc((100cqi - 130px) / 14.5), 1.02rem);
  white-space: nowrap;
}
.mail-split-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .30);
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--t) var(--ease-liquid);
}
.mail-split-ico svg { width: 17px; height: 17px; }
.mail-split-addr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t) var(--ease);
}
.mail-split-main:hover .mail-split-ico { transform: translateY(-1px) rotate(-8deg); }
.mail-split-main:hover .mail-split-addr { text-decoration-color: rgba(255, 255, 255, .55); }
.mail-split-main:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }

.mail-split-copy {
  flex: none;
  display: flex;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mail-split-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 53px;
  padding: 0 32px 0 26px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #FFFFFF 0%, #E9EFFF 100%);
  color: #2447C8;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(10, 30, 110, .70), inset 0 -2px 0 rgba(36, 71, 200, .12), inset 0 1px 0 #FFFFFF;
  transition: transform var(--t) var(--ease-liquid), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
[data-theme="dark"] .mail-split-key {
  border-color: rgba(255, 255, 255, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .10));
  color: #FFFFFF;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.mail-split-key svg { width: 17px; height: 17px; flex: none; }
.mail-split-key .ico-check { display: none; color: #17A66C; }
[data-theme="dark"] .mail-split-key .ico-check { color: #6FE0AC; }
.mail-split-copy:hover .mail-split-key { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(10, 30, 110, .75), inset 0 -2px 0 rgba(36, 71, 200, .12), inset 0 1px 0 #FFFFFF; }
[data-theme="dark"] .mail-split-copy:hover .mail-split-key { background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14)); }
.mail-split-copy:active .mail-split-key { transform: scale(.96); }
.mail-split-copy.is-copied .ico-copy { display: none; }
.mail-split-copy.is-copied .ico-check { display: block; animation: keyTick .4s var(--ease-liquid); }
@keyframes keyTick { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mail-split-copy:focus-visible { outline: none; }
.mail-split-copy:focus-visible .mail-split-key { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* home, final block: the same pill in light glass beside the blue "Write to us";
   here the key is the blue one */
.mail-split--glass {
  color: var(--text);
  border-color: var(--glass-brd);
  background: linear-gradient(180deg, rgba(255, 255, 255, .60), rgba(255, 255, 255, .24)), var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
          backdrop-filter: blur(18px) saturate(175%);
  box-shadow: 0 10px 26px -16px rgba(12, 38, 84, .35), inset 0 1px 0 rgba(255, 255, 255, .85);
}
[data-theme="dark"] .mail-split--glass {
  color: #FFFFFF;
  border-color: var(--glass-brd);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)), var(--glass-bg);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .60), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.mail-split--glass:hover,
[data-theme="dark"] .mail-split--glass:hover {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 16px 34px -14px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.mail-split--glass::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); }
[data-theme="dark"] .mail-split--glass::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent); }
.mail-split--glass .mail-split-ico {
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), .25);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.mail-split--glass .mail-split-main:hover .mail-split-addr { text-decoration-color: rgba(var(--accent-rgb), .55); }
.mail-split--glass .mail-split-main:focus-visible { outline-color: var(--accent); }
.mail-split--glass .mail-split-key,
[data-theme="dark"] .mail-split--glass .mail-split-key,
[data-theme="dark"] .mail-split--glass .mail-split-copy:hover .mail-split-key {
  color: #FFFFFF;
  border-color: rgba(var(--accent-rgb), .55);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .96), rgba(var(--accent-rgb), .78));
  box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mail-split--glass .mail-split-key .ico-check,
[data-theme="dark"] .mail-split--glass .mail-split-key .ico-check { color: #FFFFFF; }
.mail-split--glass .mail-split-copy:focus-visible .mail-split-key { outline-color: var(--accent); }
@container mailsplit (max-width: 500px) {
  .mail-split-key { padding: 0; width: 53px; }
  .mail-split-key [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container mailsplit (max-width: 400px) {
  .mail-split-ico { display: none; }
  .mail-split-main { padding-left: 12px; font-size: clamp(.7rem, calc((100cqi - 84px) / 15.5), 1rem); }
}
@container mailsplit (max-width: 300px) {
  .mail-split-key { width: 44px; min-width: 44px; }
  .mail-split-main { padding-inline: 10px; font-size: clamp(.6rem, calc((100cqi - 72px) / 15.6), .8rem); }   /* the address always fits whole */
}
/* beside the brief the key keeps only its icon but stays a wide pill, not a round
   button; the address steps down a little to leave it room */
@container mailsplit (max-width: 500px) {
  .alt-card .mail-split-key { width: 88px; }
  .alt-card .mail-split-main { font-size: clamp(.7rem, calc((100cqi - 178px) / 17), 1.02rem); }
}
@container mailsplit (max-width: 400px) {
  .alt-card .mail-split-key { width: 72px; }
  .alt-card .mail-split-main { font-size: clamp(.68rem, calc((100cqi - 116px) / 17), 1rem); }
}
@container mailsplit (max-width: 300px) {
  .alt-card .mail-split-key { width: 44px; }
  .alt-card .mail-split-main { font-size: clamp(.6rem, calc((100cqi - 72px) / 15.6), .8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mail-split:hover::after, .mail-split-copy.is-copied .ico-check { animation: none; }
}

/* The home page's main call, cut from the same lit blue glass as the mail pill: the
   light sweeps across it on hover, the label is set in spaced capitals exactly in the
   middle, and the arrow sits in a small glass disc at the right end — inset like the
   pill's envelope disc — nudging forward on hover. */
.btn-azure {
  min-height: 62px;
  padding: 6px 62px;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .30);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .30), transparent 55%),
    linear-gradient(135deg, #6A95FF 0%, #3F6DF6 48%, #2B50D8 100%);
  box-shadow:
    0 18px 38px -18px rgba(47, 107, 255, .80),
    0 2px 6px -2px rgba(20, 40, 120, .25),
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -1px 0 rgba(10, 30, 110, .25);
  font-family: var(--font-display);   /* the face of the headline above it: Manrope at its heaviest */
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
[data-theme="dark"] .btn-azure {
  border-color: rgba(170, 196, 255, .30);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(170, 196, 255, .24), transparent 55%),
    linear-gradient(135deg, #3D66EA 0%, #2A4AC6 50%, #1E3597 100%);
  box-shadow:
    0 22px 46px -22px rgba(47, 107, 255, .90),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.btn-azure::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn-azure:hover { color: #FFFFFF; box-shadow: 0 24px 46px -18px rgba(47, 107, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(10, 30, 110, .25); }
.btn-azure:hover::after { animation: mailSheen 1.1s var(--ease); }
.btn-azure:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .9); outline-offset: 3px; }
.btn-azure-label { position: relative; z-index: 1; }
.btn-azure-key {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .30);
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .5s var(--ease-liquid);
}
.btn .btn-azure-key svg { width: 17px; height: 17px; }
.btn-azure:hover .btn-azure-key { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-azure:hover::after { animation: none; } }

/* contact, first screen: under the address, the way down to the brief — a whole
   row of glass with a rim in the three colours of the studio running round it */
/* "Send a brief" and "Socials" share the row under the address in two equal
   halves; when either label no longer fits its half, each takes a whole row */
.hero .hero-cta:not(.hero-cta--stack) .btn-brief,
.hero .hero-cta:not(.hero-cta--stack) .btn-soc { flex: 1 1 0; min-width: fit-content; }
.btn-brief {
  color: var(--text);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
          backdrop-filter: blur(18px) saturate(175%);
  box-shadow: 0 16px 36px -22px rgba(168, 85, 247, .75), var(--inner-hi);
}
[data-theme="light"] .btn-brief { box-shadow: 0 14px 30px -20px rgba(70, 80, 200, .32), var(--inner-hi); }
/* The rim of the way to the brief and of the brief card itself: one hairline in
   the studio's colours drawn right on the outer edge. Neither has a border of its
   own, so no pale line of glass shows outside the colour and the edge stays a
   single clean line in both themes; in the day theme the colours are a little
   softer. */
.btn-brief,
.brief-card {
  --rim: linear-gradient(90deg, #17A66C, #A855F7, #E0576E, #2F6BFF, #17A66C);
  border-width: 0;
}
[data-theme="light"] .btn-brief,
[data-theme="light"] .brief-card {
  --rim: linear-gradient(90deg, #36B283, #9C6DF2, #E26C84, #5082F5, #36B283);
}
.btn-brief::before,
.brief-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--rim) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: briefRim 7s linear infinite;
  pointer-events: none;
}
.brief-card::before { animation-duration: 16s; }   /* a long edge drifts slower, at the same pace to the eye */
.btn-brief svg { color: var(--accent-text); }
.btn-brief:hover {
  background: var(--glass-bg-strong);
  box-shadow: 0 20px 42px -18px rgba(168, 85, 247, .7), var(--inner-hi);
}
.btn-brief-arrow { transition: transform .5s var(--ease-liquid); }
.btn-brief:hover .btn-brief-arrow { transform: translateY(3px); }
@keyframes briefRim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .form-done-ico, .form-done-ico::before, .form-done-ico::after, .refs-field, .refs-btn.is-back, .btn-brief::before, .brief-card::before, .brief-card.is-lit { animation: none; }
  .form-done-ico svg { animation: none; stroke-dashoffset: 0; }
}

/* ---------- contact: the three facts in one glass band ---------- */
.ch-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(8px, 1.2vw, 14px);
  border-radius: var(--r-xl);
}
.ch-item {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 32px);
  border-radius: calc(var(--r-xl) - 8px);
  transition: background var(--t) var(--ease);
}
.ch-item + .ch-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .3), transparent);
}
.ch-item:hover { background: rgba(var(--accent-rgb), .06); }
.ch-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ch-ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  box-shadow: var(--inner-hi);
  color: var(--accent-text);
}
.ch-ico svg { width: 18px; height: 18px; }
.ch-label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.ch-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--text);
}
.ch-mail { font-size: clamp(1.05rem, 1.45vw, 1.3rem); color: var(--accent-text); text-decoration: none; overflow-wrap: break-word; }   /* breaks only after the @ (a <wbr> in the markup) */
.ch-mail:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
[data-theme="dark"] .ch-mail { color: #FFFFFF; }   /* at night the address is white, like the other values in the band */
.ch-note { margin: 0; font-size: .9rem; color: var(--text-2); }
.ch-copy { margin-top: 4px; }
/* the address and Copy share one width: the button is as long as the address */
.ch-mailbox { display: grid; gap: 10px; width: max-content; max-width: 100%; }
.ch-mailbox .ch-copy {
  width: calc(100% + 16px);          /* a pill looks shorter than the line of text it sits under: it reaches 8px past each end */
  margin-inline: -8px;
  margin-top: 0;
  justify-content: center;
  padding-block: 10px;
  background: var(--glass-bg);
  box-shadow: var(--inner-hi);
}
@media (max-width: 1000px) {
  .ch-band { grid-template-columns: minmax(0, 1fr); }
  .ch-item + .ch-item::before {
    left: 6%; right: 6%; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .3), transparent);
  }
}

/* ---------- contact: beside the brief, for those who would rather just write ----------
   One glass card level with the top of the brief: a question, a line that says
   the brief is optional, the address with Copy, and a way down to the socials. */
@media (min-width: 1001px) {
  .brief-side { position: sticky; top: calc(var(--nav-h) + 28px); }   /* stays beside the form while it is filled in */
}
.alt-card {
  --alt-pad: clamp(22px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: var(--alt-pad);
}
.alt-head { position: relative; display: grid; gap: 8px; margin-bottom: 8px; }
/* the stripe on the card's left edge runs from the question to the end of its line */
.alt-bar {
  position: absolute;
  left: calc(-1 * var(--alt-pad));
  top: 4px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #17A66C, #A855F7, #E0576E);
}
.alt-title { margin: 0; }
.alt-text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.alt-card .mail-split,
.alt-card .btn-soc { min-height: 62px; }
.alt-card .btn-soc { width: 100%; white-space: normal; line-height: 1.3; text-align: center; padding-inline: clamp(14px, 4cqi, 32px); }
.alt-card { container: altcard / inline-size; }
.alt-or {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.alt-or::before,
.alt-or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .32)); }
.alt-or::after { transform: scaleX(-1); }

/* the way to the socials: glass, with the marks of the networks side by side */
.btn-soc {
  color: var(--text);
  background: var(--glass-bg);
  border-width: 0;                  /* the edge is an inner line, so it is exactly as big as "Send a brief" beside it */
  padding-block: 16px;
  -webkit-backdrop-filter: blur(18px) saturate(175%);
          backdrop-filter: blur(18px) saturate(175%);
  box-shadow: inset 0 0 0 1px var(--glass-brd), 0 10px 26px -16px rgba(12, 38, 84, .35), var(--inner-hi);
}
.btn-soc:hover {
  background: var(--glass-bg-strong);
  box-shadow: inset 0 0 0 1px rgba(225, 48, 108, .45), 0 18px 38px -18px rgba(225, 48, 108, .55), var(--inner-hi);
}
/* The marks of the networks, side by side like two coins on glass: no solid ring
   round them — the first is cut away where the second overlaps it, so the glass (and
   the colour of the page) shows in the thin gap, and each has only a faint glass edge
   tinted with the page's colour. */
.soc-stack { --dot: 28px; --ov: 7px; --gap: 2px; display: inline-flex; flex: none; }
.soc-dot {
  width: var(--dot);
  height: var(--dot);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFFFFF;
  background: var(--brand-fill);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: transform .5s var(--ease-liquid);
}
[data-theme="dark"] .soc-dot { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .30), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .30); }
.soc-dot:first-child:not(:last-child) {
  -webkit-mask: radial-gradient(circle at calc(var(--dot) * 1.5 - var(--ov)) 50%, transparent calc(var(--dot) / 2 + var(--gap) - .5px), #000 calc(var(--dot) / 2 + var(--gap)));
          mask: radial-gradient(circle at calc(var(--dot) * 1.5 - var(--ov)) 50%, transparent calc(var(--dot) / 2 + var(--gap) - .5px), #000 calc(var(--dot) / 2 + var(--gap)));
}
.soc-dot + .soc-dot { margin-left: calc(var(--ov) * -1); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 12px -6px rgba(var(--brand-rgb), .8); }
[data-theme="dark"] .soc-dot + .soc-dot { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .30), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .30), 0 6px 12px -6px rgba(var(--brand-rgb), .8); }
.btn .soc-dot svg { width: 14px; height: 14px; color: #FFFFFF; }
.btn-soc:hover .soc-dot:last-child { transform: translateX(3px) rotate(8deg); }
.btn-soc-arrow { color: var(--accent-text); transition: transform .5s var(--ease-liquid); }
.btn-soc:hover .btn-soc-arrow { transform: translateY(3px); }

/* brands & e-commerce while it is "coming soon": once the photo panel drops under the
   text it keeps only its own height instead of the tall first-screen frame */
@media (max-width: 1000px) {
  .hero--soon .hero-panel { min-height: 0; align-content: start; }
}

/* ============================================================
   AI datasets — "You define the data / Every detail is agreed"
   One card (it replaced two that repeated each other). The heading
   carries the accent on its second line; the two columns below say what
   the client defines and what is agreed together — the second one is the
   lit, tinted panel.
   ============================================================ */
.ds-terms {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: clamp(26px, 3.2vw, 44px);
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--r-xl);
}
.ds-terms-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 92% 0%, rgba(var(--accent-rgb), .20), transparent 70%),
    radial-gradient(36% 50% at 0% 100%, rgba(168, 85, 247, .12), transparent 70%);
}
.ds-terms-head { container-type: inline-size; min-width: 0; }
/* The two halves of the heading run as one line, the second in the accent. The type
   follows the width of the card, so the line stays whole on a wide screen; on a
   narrow one it wraps into two even lines. */
.ds-terms-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.5cqi, 2.5rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ds-terms-accent {
  background: linear-gradient(100deg, #6D28D9 0%, #9333EA 45%, #C026D3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
[data-theme="dark"] .ds-terms-accent { background-image: linear-gradient(100deg, #C4A9FF 0%, #E9D5FF 50%, #F0ABFC 100%); }

.ds-terms-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.ds-terms-col {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: calc(var(--r-xl) - 10px);
  border: 1px solid var(--glass-brd);
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
[data-theme="dark"] .ds-terms-col {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.ds-terms-col--agreed {
  border-color: rgba(var(--accent-rgb), .34);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .04));
  box-shadow: 0 20px 44px -30px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .60);
}
[data-theme="dark"] .ds-terms-col--agreed {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(var(--accent-rgb), .22), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .05));
  box-shadow: 0 22px 46px -30px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ds-terms-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ds-terms-col--agreed .ds-terms-label { color: var(--accent-text); }
.ds-terms-ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  box-shadow: var(--inner-hi);
  color: var(--accent-text);
}
.ds-terms-col--agreed .ds-terms-ico {
  border-color: transparent;
  background: linear-gradient(180deg, var(--btn-from), var(--btn-to));
  color: #FFFFFF;
  box-shadow: 0 10px 20px -10px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ds-terms-ico svg { width: 18px; height: 18px; }
.ds-terms-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-terms-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .14);
  font-size: .96rem;
  line-height: 1.5;
  color: var(--text-2);
}
.ds-terms-list li:first-child { border-top: 0; }
.ds-terms-col--agreed .ds-terms-list li { color: var(--text); }
.ds-terms-tick {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .35);
  color: var(--accent-text);
}
.ds-terms-col--agreed .ds-terms-tick {
  border-color: transparent;
  background: linear-gradient(180deg, var(--btn-from), var(--btn-to));
  color: #FFFFFF;
}
.ds-terms-tick svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .ds-terms-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ТЕЛЕФОНЫ: стекло без размытия
   backdrop-filter — самая дорогая операция для мобильного графического
   чипа, а закреплённая шапка пересчитывала размытие на каждом кадре
   едущей фото-стены: отсюда рывки при прокрутке. На узких экранах и на
   любом сенсорном устройстве размытие выключаем, а фон панелей делаем
   плотнее — иначе стекло без размытия просвечивает. На компьютере всё
   остаётся как было.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  :root {
    --nav-bg: rgba(255, 255, 255, .88);
    --nav-bg-scrolled: rgba(255, 255, 255, .94);
  }
  [data-theme="dark"] {
    --nav-bg: rgba(13, 19, 31, .90);
    --nav-bg-scrolled: rgba(13, 19, 31, .95);
  }
  /* Кнопки «наверх» и «к началу блока» лишились размытия, а их фон был
     рассчитан на стекло (в тёмной теме всего .13 → .04) — даём свой плотный. */
  .totop, .tosec {
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88));
  }
  [data-theme="dark"] .totop,
  [data-theme="dark"] .tosec {
    background: linear-gradient(180deg, rgba(16, 22, 36, .95), rgba(11, 16, 28, .90));
  }
  /* Остальное стекло возвращаем: эти поверхности стоят в потоке страницы и
     перерисовываются только при прокрутке. Радиус меньше, чем на компьютере,
     и без saturate — так дешевле, а вид остаётся стеклянным. */
  .glass:not(.nav):not(.nav-links):not(.lb),
  .btn-glass, .btn-primary, .btn-lux, .btn-aqua, .btn-soc,
  .plink, .ptile, .social, .search-field, .brief-sheet, .mail-split--glass,
  .h-kicker, .h-step-no, .h-dir-no, .h-dir-ico, .h-why-item::before {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  /* Запрет идёт последним: шапка сама несёт класс glass, и без этого порядка
     список возврата выше вернул бы ей размытие. Закреплённые поверхности висят
     над прокручивающимся содержимым — их размытие браузер пересчитывал бы
     каждый кадр, именно это давало рывки. */
  .nav, .nav-links, .nav-scrim,
  .totop, .tosec, .lb, .lb-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Сенсорные экраны: фотоаппараты не реагируют на касание.
   Холсты, которые сыпали фотоаппараты и полароиды, на телефоне уже не
   создаются (запрет в cameras.js, water.js, firework.js), но сами иконки
   ещё наклонялись: в мобильных браузерах состояние :hover срабатывает от
   касания, и фотоаппарат дёргался под пальцем. На компьютере наклоны
   остаются. */
@media (hover: none), (pointer: coarse) {
  .title-cam:hover,
  .brand-mark:hover .cam,
  .cam-hero:hover .cam { transform: none; }
}

/* ============================================================
   СЕНСОРНЫЕ ЭКРАНЫ: меню читается без размытия
   Панель открытого меню и затемнение под ней держались на
   backdrop-filter — их фон это полупрозрачный градиент, рассчитанный
   на размытое стекло. На телефоне размытие выключено, поэтому сквозь
   панель просвечивал текст страницы и надписи смешивались.
   Даём панели плотный фон страницы: токен --bg-top уважает цветовую
   территорию раздела, поэтому меню остаётся в стиле страницы. Рамку
   перекрашиваем — светлая на белом не видна. Затемнение позади меню
   делаем заметнее, оно тоже потеряло своё размытие.
   Кнопку-бургер заодно расширяем: круг 44px смотрелся мелким рядом с
   кнопкой языка и переключателем темы (72px).
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  :where(html.nav-compact) .nav-links,
  :where(html.nav-compact)[data-theme="dark"] .nav-links {
    background: var(--bg-top);
    border-color: rgba(12, 20, 45, .14);
  }
  :where(html.nav-compact)[data-theme="dark"] .nav-links {
    border-color: rgba(255, 255, 255, .16);
  }
  :where(html.nav-compact) .nav-scrim { background: rgba(24, 34, 66, .55); }
  :where(html.nav-compact)[data-theme="dark"] .nav-scrim { background: rgba(4, 8, 18, .78); }
  :where(html.nav-compact) .burger { width: 62px; border-radius: 22px; }
}

/* ============================================================
   Правки по замечаниям 16.09.2026
   ============================================================ */

/* 1. Первый экран главной: между шапкой и фото-стеной было слишком много
   воздуха — убираем ~1 см (38px), только на компьютере. */
@media (min-width: 1001px) {
  .h-hero { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 92px) - 38px); }
}

/* 2. Телефон: карточка с большим фотоаппаратом на контактах не нужна.
   Она жила ради курсора — полароиды сыпались при наведении, а на телефоне
   холст не создаётся, и остаётся просто большая пустая картинка. */
@media (max-width: 900px), (pointer: coarse) {
  .hero-panel:has(.cam-hero) { display: none; }
  .cam-hero, .whale-hint { display: none; }
}

/* 3. Рычажок темы: ночью слева, днём справа (ночная тема — основная). */
.theme-switch .knob { transform: translateX(28px); }
[data-theme="dark"] .theme-switch .knob { transform: none; }

/* Рычажок темы на узких экранах: переключатель там меньше (62px, затем 56px),
   поэтому дневное положение справа должно быть ближе — иначе рычажок выедет
   за край. Ночное положение слева во всех размерах. */
@media (max-width: 680px) {
  .theme-switch .knob { transform: translateX(22px); }
  [data-theme="dark"] .theme-switch .knob { transform: none; }
}
@media (max-width: 340px) {
  .theme-switch .knob { transform: translateX(16px); }
  [data-theme="dark"] .theme-switch .knob { transform: none; }
}

/* ============================================================
   Полоска прокрутки в шапке: плавный ход на телефоне
   Раньше заполнение задавалось шириной: width: calc(var(--sp) * 100%).
   Ширина — это раскладка, поэтому каждое событие прокрутки заставляло
   браузер пересчитывать и перерисовывать полоску. На iOS во время
   инерционной прокрутки события приходят реже кадров, и полоска шагала.
   Теперь заполнение — transform: scaleX(), а капля — translateX в
   единицах ширины полоски (для этого .nav-progress объявлен контейнером).
   Такие превращения считает композитор, без раскладки.
   Где браузер умеет, полоску ведёт сам прокрут (animation-timeline):
   тогда JS в этом вообще не участвует и ход идеально ровный.
   JS продолжает писать --sp — на нём держится кольцо у кнопки «наверх»
   и запасной путь для старых браузеров.
   ============================================================ */
.nav-progress { container-type: inline-size; }
.nav-progress i {
  width: 100%;
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
  transition: transform .14s linear;
  will-change: transform;
}
.nav-progress i::after { display: none; }   /* капля переехала на родителя, чтобы её не сжимало */
.nav-progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--accent-soft) 45%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
  transform: translate(calc(var(--sp, 0) * 100cqw - 3px), -50%);
  transition: transform .14s linear;
  will-change: transform;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .nav-progress i {
    transition: none;
    animation: navSpFill linear both;
    animation-timeline: scroll(root block);
  }
  .nav-progress::after {
    transition: none;
    animation: navSpDrop linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes navSpFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes navSpDrop {
    from { transform: translate(-3px, -50%); }
    to   { transform: translate(calc(100cqw - 3px), -50%); }
  }
}