@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbfcfa;
  --surface: #ffffff;
  --surface-2: #eef8e8;
  --surface-mint: #f3faef;
  --text: #1a2e24;
  --muted: #6d7f75;
  --brand: #3d9a45;
  --brand-deep: #1e5631;
  --brand-strong: #0e2f1c;
  --accent: #7ed957;
  --lime: #c3e5ae;
  --lime-soft: #e8f6dc;
  --cream: #f4f8e8;
  --focus: #f5c518;
  --orange: #e8893a;
  --danger: #a42f3b;
  --success: #18764f;
  --footer-bg: #0b1f16;
  --site-footer-bg: #e6f2df;
  --footer-fg: #1a2e24;
  --footer-fg-muted: #5d7468;
  --on-deep: #e8f6dc;
  --on-deep-muted: #c9e4c0;
  --brand-rgb: 61, 154, 69;
  --deep-rgb: 30, 86, 49;
  --line: rgb(var(--deep-rgb) / 0.1);
  --shadow: 0 12px 32px rgb(var(--deep-rgb) / 0.08);
  --shadow-lg: 0 22px 50px rgb(var(--deep-rgb) / 0.12);
  --btn-radius: 999px;
  --btn-extrude: 4px;
  --shadow-btn:
    0 4px 0 0 color-mix(in srgb, var(--brand) 62%, #16361e),
    0 10px 18px rgb(var(--brand-rgb) / 0.22);
  --shadow-btn-hover:
    0 5px 0 0 color-mix(in srgb, var(--brand) 62%, #16361e),
    0 14px 22px rgb(var(--brand-rgb) / 0.26);
  --shadow-btn-press:
    0 1px 0 0 color-mix(in srgb, var(--brand) 62%, #16361e),
    0 4px 10px rgb(var(--brand-rgb) / 0.18);
  --shadow-soft:
    0 4px 0 0 #d7dee5,
    0 10px 18px rgb(20 40 70 / 0.1);
  --shadow-soft-hover:
    0 5px 0 0 #d7dee5,
    0 14px 22px rgb(20 40 70 / 0.12);
  --shadow-soft-press:
    0 1px 0 0 #d7dee5,
    0 4px 10px rgb(20 40 70 / 0.1);
  --shadow-chip:
    0 3px 0 0 #dce3e9,
    0 8px 14px rgb(20 40 70 / 0.1);
  --shadow-chip-on:
    0 3px 0 0 color-mix(in srgb, var(--brand) 62%, #16361e),
    0 8px 14px rgb(var(--brand-rgb) / 0.22);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --container: 1240px;
  --header-h: 76px;
  --font: "Vazirmatn", Tahoma, sans-serif;
  --font-size: 16px;
  --cmyk-c: #00aae4;
  --cmyk-m: #e4007c;
  --cmyk-y: #f5d000;
  --cmyk-k: #141414;
}

html[data-theme="dark"] {
  --bg: #07150f;
  --surface: #0e241c;
  --surface-2: #123226;
  --surface-mint: #10291f;
  --text: #e7f4ee;
  --muted: #9bb8ae;
  --brand: #6dcc6f;
  --brand-deep: #1a4a2c;
  --brand-strong: #082016;
  --accent: #8fe08a;
  --lime: #2f5a38;
  --lime-soft: #1a3a28;
  --cream: #1d3328;
  --footer-bg: #06120d;
  --site-footer-bg: #06120d;
  --footer-fg: #d7ece7;
  --footer-fg-muted: #9bb8b2;
  --on-deep: #d7ece7;
  --on-deep-muted: #9bb8b2;
  --brand-rgb: 109, 204, 111;
  --deep-rgb: 26, 74, 44;
  --line: rgba(231, 244, 238, 0.12);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.45);
  --shadow-btn:
    0 4px 0 0 color-mix(in srgb, var(--brand) 50%, #000),
    0 10px 18px rgb(0 0 0 / 0.28);
  --shadow-btn-hover:
    0 5px 0 0 color-mix(in srgb, var(--brand) 50%, #000),
    0 14px 22px rgb(0 0 0 / 0.32);
  --shadow-btn-press:
    0 1px 0 0 color-mix(in srgb, var(--brand) 50%, #000),
    0 4px 10px rgb(0 0 0 / 0.25);
  --shadow-soft:
    0 4px 0 0 #0a1c16,
    0 10px 18px rgb(0 0 0 / 0.28);
  --shadow-soft-hover:
    0 5px 0 0 #0a1c16,
    0 14px 22px rgb(0 0 0 / 0.32);
  --shadow-soft-press:
    0 1px 0 0 #0a1c16,
    0 4px 10px rgb(0 0 0 / 0.25);
  --shadow-chip:
    0 3px 0 0 #0a1c16,
    0 8px 14px rgb(0 0 0 / 0.28);
  --shadow-chip-on:
    0 3px 0 0 color-mix(in srgb, var(--brand) 50%, #000),
    0 8px 14px rgb(0 0 0 / 0.3);
}

html[data-palette="ocean"] {
  --bg: #f7fbfc;
  --surface: #ffffff;
  --surface-2: #e6f3f6;
  --surface-mint: #eef8fa;
  --text: #16303a;
  --muted: #5e7780;
  --brand: #2a8fa3;
  --brand-deep: #155e70;
  --brand-strong: #0a3340;
  --accent: #4ec9d4;
  --lime: #b8e4ea;
  --lime-soft: #def4f7;
  --cream: #eef7f8;
  --footer-bg: #0a2430;
  --site-footer-bg: #dceef2;
  --footer-fg: #16303a;
  --footer-fg-muted: #4e6a74;
  --on-deep: #d7f0f4;
  --on-deep-muted: #a8d4dc;
  --brand-rgb: 42, 143, 163;
  --deep-rgb: 21, 94, 112;
}
html[data-palette="ocean"][data-theme="dark"] {
  --bg: #06141a;
  --surface: #0c2430;
  --surface-2: #123844;
  --surface-mint: #102830;
  --text: #e4f4f7;
  --muted: #8fb4bd;
  --brand: #5ec4d4;
  --brand-deep: #145a6c;
  --brand-strong: #071c24;
  --accent: #7adce6;
  --lime: #1e4a54;
  --lime-soft: #143844;
  --cream: #163844;
  --footer-bg: #051018;
  --site-footer-bg: #051018;
  --footer-fg: #d7ece7;
  --footer-fg-muted: #8fb4bd;
  --on-deep: #d7ece7;
  --on-deep-muted: #8fb4bd;
  --brand-rgb: 94, 196, 212;
  --deep-rgb: 20, 90, 108;
  --line: rgba(228, 244, 247, 0.12);
}

html[data-palette="sunset"] {
  --bg: #fdfaf6;
  --surface: #ffffff;
  --surface-2: #f8eee4;
  --surface-mint: #faf3ea;
  --text: #2d2218;
  --muted: #7d6b5c;
  --brand: #c45e1e;
  --brand-deep: #8a3c12;
  --brand-strong: #4a2410;
  --accent: #e8954f;
  --lime: #f3d4b0;
  --lime-soft: #f8ead8;
  --cream: #f8f1e6;
  --footer-bg: #2a160c;
  --site-footer-bg: #f4e8dc;
  --footer-fg: #2d2218;
  --footer-fg-muted: #6e5c4e;
  --on-deep: #f6e6d4;
  --on-deep-muted: #e0c4a8;
  --brand-rgb: 196, 94, 30;
  --deep-rgb: 138, 60, 18;
}
html[data-palette="sunset"][data-theme="dark"] {
  --bg: #160e08;
  --surface: #26180f;
  --surface-2: #332014;
  --surface-mint: #22150c;
  --text: #f6ece2;
  --muted: #c4ab96;
  --brand: #e8954f;
  --brand-deep: #8a4218;
  --brand-strong: #2a160c;
  --accent: #f0b070;
  --lime: #5a3a22;
  --lime-soft: #3a2414;
  --cream: #3a2818;
  --footer-bg: #140a06;
  --site-footer-bg: #140a06;
  --footer-fg: #f6e6d4;
  --footer-fg-muted: #c4ab96;
  --on-deep: #f6e6d4;
  --on-deep-muted: #c4ab96;
  --brand-rgb: 232, 149, 79;
  --deep-rgb: 138, 66, 24;
  --line: rgba(246, 236, 226, 0.12);
}

html[data-palette="royal"] {
  --bg: #faf8fc;
  --surface: #ffffff;
  --surface-2: #efe8f6;
  --surface-mint: #f4eef9;
  --text: #261836;
  --muted: #6e627c;
  --brand: #5a3d96;
  --brand-deep: #3d2870;
  --brand-strong: #1e1238;
  --accent: #a47de8;
  --lime: #d7c6f0;
  --lime-soft: #eee6f8;
  --cream: #f4eef8;
  --footer-bg: #160e28;
  --site-footer-bg: #ece6f4;
  --footer-fg: #261836;
  --footer-fg-muted: #5e526c;
  --on-deep: #ece4f8;
  --on-deep-muted: #c8b8e0;
  --brand-rgb: 90, 61, 150;
  --deep-rgb: 61, 40, 112;
}
html[data-palette="royal"][data-theme="dark"] {
  --bg: #120c1c;
  --surface: #1d1430;
  --surface-2: #2a1c44;
  --surface-mint: #1a1230;
  --text: #efe8f8;
  --muted: #b4a4c8;
  --brand: #9b7ad4;
  --brand-deep: #3c2870;
  --brand-strong: #140c24;
  --accent: #c4a4f0;
  --lime: #3e2a5c;
  --lime-soft: #2a1c44;
  --cream: #2c1e48;
  --footer-bg: #0c0818;
  --site-footer-bg: #0c0818;
  --footer-fg: #ece4f8;
  --footer-fg-muted: #b4a4c8;
  --on-deep: #ece4f8;
  --on-deep-muted: #b4a4c8;
  --brand-rgb: 155, 122, 212;
  --deep-rgb: 60, 40, 112;
  --line: rgba(239, 232, 248, 0.12);
}

html[data-palette="ink"] {
  --bg: #f8f7f4;
  --surface: #ffffff;
  --surface-2: #eeeae2;
  --surface-mint: #f3f0e8;
  --text: #1c1b18;
  --muted: #6f6b62;
  --brand: #2c3544;
  --brand-deep: #161c26;
  --brand-strong: #0c1016;
  --accent: #c9a227;
  --lime: #e6d9a8;
  --lime-soft: #f3eccf;
  --cream: #f4f0e4;
  --footer-bg: #0e1218;
  --site-footer-bg: #ece8e0;
  --footer-fg: #1c1b18;
  --footer-fg-muted: #5f5b52;
  --on-deep: #ece6d4;
  --on-deep-muted: #c8c0a8;
  --brand-rgb: 44, 53, 68;
  --deep-rgb: 22, 28, 38;
}
html[data-palette="ink"][data-theme="dark"] {
  --bg: #0c0e12;
  --surface: #161a22;
  --surface-2: #1e2430;
  --surface-mint: #141820;
  --text: #eeeae2;
  --muted: #a8a090;
  --brand: #d4b44a;
  --brand-deep: #1a202c;
  --brand-strong: #0a0c10;
  --accent: #e8c85a;
  --lime: #4a4020;
  --lime-soft: #2a2618;
  --cream: #2a281c;
  --footer-bg: #080a0e;
  --site-footer-bg: #080a0e;
  --footer-fg: #ece6d4;
  --footer-fg-muted: #a8a090;
  --on-deep: #ece6d4;
  --on-deep-muted: #a8a090;
  --brand-rgb: 212, 180, 74;
  --deep-rgb: 26, 32, 44;
  --line: rgba(238, 234, 226, 0.12);
}

html[data-palette="crimson"] {
  --bg: #fdf8f8;
  --surface: #ffffff;
  --surface-2: #f8e8ea;
  --surface-mint: #faf0f1;
  --text: #2c1618;
  --muted: #7c5e62;
  --brand: #b53040;
  --brand-deep: #7a2230;
  --brand-strong: #3c1018;
  --accent: #e87880;
  --lime: #f0c4c8;
  --lime-soft: #f8e4e6;
  --cream: #f8eef0;
  --footer-bg: #220c12;
  --site-footer-bg: #f4e6e8;
  --footer-fg: #2c1618;
  --footer-fg-muted: #6e4e52;
  --on-deep: #f6e0e4;
  --on-deep-muted: #e0b8c0;
  --brand-rgb: 181, 48, 64;
  --deep-rgb: 122, 34, 48;
}
html[data-palette="crimson"][data-theme="dark"] {
  --bg: #14080a;
  --surface: #241014;
  --surface-2: #32181c;
  --surface-mint: #1c0e12;
  --text: #f6e8ea;
  --muted: #c8a0a6;
  --brand: #e87880;
  --brand-deep: #7a2230;
  --brand-strong: #1c0a0e;
  --accent: #f09aa0;
  --lime: #5c2830;
  --lime-soft: #3a181c;
  --cream: #3a1c20;
  --footer-bg: #100608;
  --site-footer-bg: #100608;
  --footer-fg: #f6e0e4;
  --footer-fg-muted: #c8a0a6;
  --on-deep: #f6e0e4;
  --on-deep-muted: #c8a0a6;
  --brand-rgb: 232, 120, 128;
  --deep-rgb: 122, 34, 48;
  --line: rgba(246, 232, 234, 0.12);
}

* { box-sizing: border-box; }
[hidden],
.is-filtered-out { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
}
html {
  scroll-behavior: smooth;
  font-size: var(--font-size, 16px);
}
html[data-font="vazirmatn"] { --font: Vazirmatn, Tahoma, sans-serif; }
html[data-font="system"] { --font: Tahoma, "Segoe UI", Arial, sans-serif; }
html[data-font="noto"] { --font: "Noto Sans Arabic", Tahoma, sans-serif; }
html[data-font="cairo"] { --font: Cairo, Tahoma, sans-serif; }
html[data-font-size="sm"] { --font-size: 14px; }
html[data-font-size="md"] { --font-size: 16px; }
html[data-font-size="lg"] { --font-size: 18px; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 420px at 100% -10%, color-mix(in srgb, var(--lime) 28%, transparent), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  width: 100%;
  position: relative;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--brand);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.narrow { width: min(100% - 32px, 760px); }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 40;
  max-width: 100%;
  overflow: visible;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(var(--deep-rgb) / 0.06);
}
.site-header.is-sticky {
  position: sticky;
  top: 0;
}
.topbar {
  background: var(--brand-deep);
  color: var(--on-deep);
  font-size: 13px;
  font-weight: 700;
}
.topbar-inner {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}
.topbar-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--on-deep-muted);
  min-width: 0;
}
.topbar-contact svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}
.topbar-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-contact:hover { color: #fff; }
.topbar-social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.topbar-social a {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--on-deep);
  background: rgba(255, 255, 255, 0.1);
}
.topbar-social a svg { width: 15px; height: 15px; display: block; }
.topbar-social a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.header-main {
  background: transparent;
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.header-inner {
  width: min(calc(100% - 32px), var(--container));
  max-width: 100%;
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 168px; flex-shrink: 0; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff; font-weight: 900; letter-spacing: -0.04em;
  box-shadow: 0 10px 22px rgb(var(--brand-rgb) / 0.28);
}
.brand-mark.invert { background: var(--lime); color: var(--brand-strong); }
.brand-mark--img {
  background: transparent;
  box-shadow: none;
  width: auto;
  min-width: 46px;
  padding: 0;
  overflow: hidden;
}
.brand-mark--img img {
  height: 46px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
.brand-mark--img.invert {
  background: transparent;
  color: inherit;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-weight: 900; }
.brand-text small { color: var(--muted); font-size: 12px; max-width: 220px; }

.header-searchbar {
  background: var(--lime-soft);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.searchbar-inner {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: visible;
}
.search-cats { position: relative; flex-shrink: 0; }
.search-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.search-cats-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.04);
}
.search-cats-btn:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-btn-press);
  filter: none;
}
a.search-cats-btn { color: #fff; }
.search-cats-btn .nav-ico {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 10px;
}
.header-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--btn-radius);
  overflow: visible;
  box-shadow: var(--shadow-chip);
  min-width: 0;
  padding: 4px;
  gap: 4px;
  min-height: 50px;
}
html[data-theme="dark"] .header-search {
  background: var(--surface);
}
.header-search input {
  border: 0;
  margin: 0;
  background: transparent;
  padding: 10px 16px;
  min-height: 42px;
}
.header-search button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-chip-on);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.header-search button svg { width: 20px; height: 20px; }
.header-search button:hover {
  transform: translateY(-1px);
}

.nav-desktop {
  display: flex;
  gap: 4px;
  margin-inline: auto;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}
.nav-item { position: relative; }
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 14px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-item:hover > .nav-link,
.nav-item.is-open > .nav-link {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
.nav-link.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.nav-link.is-active::after,
.nav-link:hover::after,
.nav-item:hover > .nav-link::after,
.nav-item.is-open > .nav-link::after { transform: scaleX(1); }
.nav-ico,
.nav-sub-img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
  color: var(--brand);
  transition: background 0.22s ease, color 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-ico svg { width: 15px; height: 15px; display: block; }
.nav-sub-img {
  display: block;
  object-fit: cover;
  padding: 0;
  background: var(--surface-2);
}
.nav-link:hover .nav-ico,
.nav-link.is-active .nav-ico,
.nav-item:hover > .nav-link .nav-ico,
.nav-item.is-open > .nav-link .nav-ico {
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px) scale(1.04);
}
.nav-caret {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: currentColor;
  opacity: 0.7;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-caret svg { width: 12px; height: 12px; }
.nav-item:hover .nav-caret,
.nav-item.is-open .nav-caret,
.nav-mobile-group.is-open .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: max-content;
  min-width: 248px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px;
  display: grid;
  gap: 4px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transform-origin: top var(--menu-origin, right);
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s;
  z-index: 50;
}
html[dir="ltr"] { --menu-origin: left; }
.nav-menu::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 18px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--focus));
}
.nav-menu-wide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px;
}
.nav-menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.nav-desktop > .nav-item:last-child .nav-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.search-cats .nav-menu {
  z-index: 55;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  color: var(--text);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.35;
  white-space: nowrap;
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    color 0.2s ease;
}
.nav-menu-wide .nav-sublink {
  white-space: normal;
}
.nav-sublink span {
  display: grid;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.nav-menu-wide .nav-sublink:not(.nav-sublink-all) span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-sublink small { color: var(--muted); font-size: 11px; font-weight: 600; }
.nav-sublink-all {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  padding: 10px 12px;
}
.nav-sublink-all span { display: grid; }
.nav-sublink:hover,
.nav-sublink.is-active {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
  color: var(--brand-strong);
}
html[data-theme="dark"] .nav-sublink:hover,
html[data-theme="dark"] .nav-sublink.is-active { color: var(--text); }
.nav-sublink:hover .nav-ico,
.nav-sublink.is-active .nav-ico,
.nav-sublink:hover .nav-sub-img,
.nav-sublink.is-active .nav-sub-img {
  background: var(--brand);
  color: #fff;
  transform: scale(1.06);
}
.nav-item:hover .nav-sublink,
.nav-item:focus-within .nav-sublink,
.nav-item.is-open .nav-sublink {
  opacity: 1;
  transform: none;
}
.nav-item:hover .nav-sublink:nth-child(1),
.nav-item:focus-within .nav-sublink:nth-child(1),
.nav-item.is-open .nav-sublink:nth-child(1),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(1),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(1),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(1) { transition-delay: 0.04s; }
.nav-item:hover .nav-sublink:nth-child(2),
.nav-item:focus-within .nav-sublink:nth-child(2),
.nav-item.is-open .nav-sublink:nth-child(2),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(2),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(2),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(2) { transition-delay: 0.07s; }
.nav-item:hover .nav-sublink:nth-child(3),
.nav-item:focus-within .nav-sublink:nth-child(3),
.nav-item.is-open .nav-sublink:nth-child(3),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(3),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(3),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(3) { transition-delay: 0.1s; }
.nav-item:hover .nav-sublink:nth-child(4),
.nav-item:focus-within .nav-sublink:nth-child(4),
.nav-item.is-open .nav-sublink:nth-child(4),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(4),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(4),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(4) { transition-delay: 0.13s; }
.nav-item:hover .nav-sublink:nth-child(5),
.nav-item:focus-within .nav-sublink:nth-child(5),
.nav-item.is-open .nav-sublink:nth-child(5),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(5),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(5),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(5) { transition-delay: 0.16s; }
.nav-item:hover .nav-sublink:nth-child(6),
.nav-item:focus-within .nav-sublink:nth-child(6),
.nav-item.is-open .nav-sublink:nth-child(6),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(6),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(6),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(6) { transition-delay: 0.19s; }
.nav-item:hover .nav-sublink:nth-child(7),
.nav-item:focus-within .nav-sublink:nth-child(7),
.nav-item.is-open .nav-sublink:nth-child(7),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(7),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(7),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(7) { transition-delay: 0.22s; }
.nav-item:hover .nav-sublink:nth-child(8),
.nav-item:focus-within .nav-sublink:nth-child(8),
.nav-item.is-open .nav-sublink:nth-child(8),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(8),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(8),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(8) { transition-delay: 0.25s; }
.nav-item:hover .nav-sublink:nth-child(n+9),
.nav-item:focus-within .nav-sublink:nth-child(n+9),
.nav-item.is-open .nav-sublink:nth-child(n+9),
.nav-item:hover .nav-menu-list .nav-sublink:nth-child(n+9),
.nav-item:focus-within .nav-menu-list .nav-sublink:nth-child(n+9),
.nav-item.is-open .nav-menu-list .nav-sublink:nth-child(n+9) { transition-delay: 0.28s; }

.header-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; }
.lang-switch {
  display: flex;
  background: #fff;
  border: 0;
  border-radius: var(--btn-radius);
  padding: 4px;
  box-shadow: var(--shadow-chip);
}
html[data-theme="dark"] .lang-switch { background: var(--surface); }
.lang-switch a { padding: 6px 12px; border-radius: var(--btn-radius); font-size: 12px; font-weight: 800; color: var(--muted); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.lang-switch a.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgb(var(--brand-rgb) / 0.3);
}
.theme-toggle, .menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-chip);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.theme-toggle:hover, .menu-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft-hover);
}
.theme-toggle:active, .menu-toggle:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-soft-press);
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .menu-toggle {
  background: var(--surface);
}
.menu-toggle { display: none; }
html[data-theme="light"] .theme-moon, html[data-theme="dark"] .theme-sun { display: none; }

::view-transition-old(root) {
  animation: none;
  z-index: 1;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: none;
  z-index: 2;
  mix-blend-mode: normal;
  opacity: 1;
}
html[data-theme-play="wipe"]::view-transition-group(root) {
  animation-duration: 0.9s;
}
html[data-theme-play="wipe"]::view-transition-new(root) {
  animation: theme-wipe-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes theme-wipe-in {
  from { clip-path: circle(0px at 100% 0); }
  to { clip-path: circle(160vmax at 100% 0); }
}
html[data-theme-play="dots"]::view-transition-group(root) {
  animation-duration: 1.05s;
}
html[data-theme-play="dots"]::view-transition-new(root) {
  animation: theme-dots-reveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@keyframes theme-dots-reveal {
  0% {
    -webkit-mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 16% 18%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 82% 14%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 48% 42%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 20% 76%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 86% 70%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 54% 88%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 70% 36%, #000 0vmax, transparent 0.4vmax);
    mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 16% 18%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 82% 14%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 48% 42%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 20% 76%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 86% 70%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 54% 88%, #000 0vmax, transparent 0.4vmax),
      radial-gradient(circle at 70% 36%, #000 0vmax, transparent 0.4vmax);
  }
  34% {
    -webkit-mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 12vmax, transparent 12.6vmax),
      radial-gradient(circle at 16% 18%, #000 14vmax, transparent 14.6vmax),
      radial-gradient(circle at 82% 14%, #000 13vmax, transparent 13.6vmax),
      radial-gradient(circle at 48% 42%, #000 16vmax, transparent 16.6vmax),
      radial-gradient(circle at 20% 76%, #000 13vmax, transparent 13.6vmax),
      radial-gradient(circle at 86% 70%, #000 15vmax, transparent 15.6vmax),
      radial-gradient(circle at 54% 88%, #000 12vmax, transparent 12.6vmax),
      radial-gradient(circle at 70% 36%, #000 14vmax, transparent 14.6vmax);
    mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 12vmax, transparent 12.6vmax),
      radial-gradient(circle at 16% 18%, #000 14vmax, transparent 14.6vmax),
      radial-gradient(circle at 82% 14%, #000 13vmax, transparent 13.6vmax),
      radial-gradient(circle at 48% 42%, #000 16vmax, transparent 16.6vmax),
      radial-gradient(circle at 20% 76%, #000 13vmax, transparent 13.6vmax),
      radial-gradient(circle at 86% 70%, #000 15vmax, transparent 15.6vmax),
      radial-gradient(circle at 54% 88%, #000 12vmax, transparent 12.6vmax),
      radial-gradient(circle at 70% 36%, #000 14vmax, transparent 14.6vmax);
  }
  100% {
    -webkit-mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 16% 18%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 82% 14%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 48% 42%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 20% 76%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 86% 70%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 54% 88%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 70% 36%, #000 90vmax, transparent 90.6vmax);
    mask-image:
      radial-gradient(circle at var(--theme-origin-x, 92%) var(--theme-origin-y, 6%), #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 16% 18%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 82% 14%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 48% 42%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 20% 76%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 86% 70%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 54% 88%, #000 90vmax, transparent 90.6vmax),
      radial-gradient(circle at 70% 36%, #000 90vmax, transparent 90.6vmax);
  }
}

.nav-mobile {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, visibility 0.38s;
}
.nav-mobile-inner { overflow: hidden; display: grid; gap: 4px; padding: 0 16px; }
.nav-mobile.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--line);
  visibility: visible;
  pointer-events: auto;
}
.nav-mobile.is-open .nav-mobile-inner { padding: 10px 16px 14px; }
.nav-mobile .nav-link,
.nav-mobile-toggle {
  width: 100%;
  justify-content: flex-start;
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 15px;
}
.nav-mobile .nav-link::after { display: none; }
.nav-mobile-toggle { background: transparent; }
.nav-mobile-group.has-menu { display: grid; }
.nav-mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mobile-sub > div,
.nav-mobile-list {
  overflow: hidden;
  display: grid;
  gap: 2px;
  margin: 4px 0 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.nav-mobile-group.is-open .nav-mobile-sub { grid-template-rows: 1fr; }
.nav-mobile .nav-sublink {
  opacity: 0;
  transform: translateY(-8px);
  padding: 10px 12px;
  white-space: normal;
}
.nav-mobile-group.is-open .nav-sublink {
  opacity: 1;
  transform: none;
}
.nav-mobile-group.is-open .nav-sublink:nth-child(n) { transition-delay: 0.05s; }

/* ---------- Layout ---------- */
.page-main, .hero, .section, .partners-band, .site-footer, .newsletter-wrap, .explore-band {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
.page-main { min-height: 50vh; }
.page-main:focus { outline: none; }
.page-hero, .hero, .section { padding: 64px 0; }
.section.alt { background: var(--surface-2); }
.wave-top {
  position: relative;
  padding-top: 88px;
}
.wave-top::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 72px;
  background: var(--surface-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 32C240 80 480 0 720 32 960 64 1200 8 1440 40V80H0Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 72px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 32C240 80 480 0 720 32 960 64 1200 8 1440 40V80H0Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 72px;
  pointer-events: none;
}

.hero {
  padding: 28px 0 12px;
  background:
    radial-gradient(900px 280px at 10% -20%, color-mix(in srgb, var(--lime) 45%, transparent), transparent 60%),
    radial-gradient(700px 240px at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
.hero-grid, .service-detail-grid, .guide-layout, .order-grid, .contact-grid, .why-grid {
  display: grid; gap: 28px;
}
.hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  background: linear-gradient(125deg, var(--lime-soft) 0%, var(--cream) 48%, var(--surface) 100%);
  border-radius: 36px;
  padding: 48px 40px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
html[data-theme="dark"] .hero-grid {
  background: linear-gradient(125deg, var(--surface-2) 0%, var(--surface) 100%);
}
.eyebrow {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 8px;
}
.eyebrow.light { color: var(--lime); }
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 12px; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; }
.lead { font-size: 1.15rem; color: var(--muted); overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.hero-actions, .trust-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; padding-bottom: 14px; }
.trust-row span {
  background: #fff;
  border: 0;
  border-radius: var(--btn-radius);
  padding: 8px 14px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-chip);
}
html[data-theme="dark"] .trust-row span { background: var(--surface); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  min-width: 132px;
  padding: 0 28px;
  border-radius: var(--btn-radius);
  border: 0;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.04);
}
.btn:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-btn-press);
  filter: none;
}
.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 50%, var(--focus));
  outline-offset: 3px;
}
.btn-ghost,
.btn-light {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  filter: none;
}
.btn-ghost:hover,
.btn-light:hover {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-soft-hover);
  filter: none;
}
.btn-ghost:active,
.btn-light:active {
  box-shadow: var(--shadow-soft-press);
}
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-light {
  background: var(--surface);
  color: var(--text);
}
a.btn { color: #fff; }
a.btn-ghost,
a.btn-light { color: var(--text); }
.studio-form .btn,
.track-form .btn {
  margin-top: 10px;
  margin-bottom: 14px;
}
.crumb { color: var(--muted); margin-bottom: 8px; }
.crumb a { color: var(--brand); font-weight: 800; }

.page-hero {
  padding: 40px 0 28px;
  background:
    radial-gradient(700px 180px at 80% 0%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 60%),
    var(--surface-mint);
  border-bottom: 1px solid var(--line);
}

.hero-visual { position: relative; min-height: 360px; overflow: visible; }
.hero-card {
  position: absolute; background: var(--surface); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg); padding: 12px; width: min(58%, calc(100% - 8px));
  max-width: 100%;
}
.hero-card img { height: 168px; width: 100%; object-fit: cover; border-radius: 16px; }
.hero-card strong { display: block; padding: 8px 4px 2px; font-size: 14px; }
.hero-card:nth-child(1) { top: 0; inset-inline-start: 0; transform: rotate(-3deg); }
.hero-card:nth-child(2) { top: 40px; inset-inline-end: 0; width: 42%; transform: rotate(4deg); }
.hero-card:nth-child(3) { bottom: 0; inset-inline-start: 18%; width: 48%; }
.empty-card { position: relative; min-height: 180px; display: grid; place-items: center; color: var(--muted); }

.section-head { margin-bottom: 28px; }
.section-head.center { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 32px; }
.section-head.center p { color: var(--muted); }
.section-head.light h2 { color: #fff; }
.section-head.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  max-width: none;
  text-align: start;
  margin-bottom: 36px;
}
.section-head.split p { color: var(--muted); margin: 0; max-width: 46ch; }
.section-head.split .btn { flex-shrink: 0; }

.features-section { padding: 28px 0 12px; }
.features-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.feat-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 8px 4px;
  position: relative;
}
.feat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -10px;
  top: 36px;
  width: 18px;
  border-top: 2px dashed color-mix(in srgb, var(--brand) 35%, transparent);
}
.feat-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime-soft);
  color: var(--brand-deep);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.55);
}
.feat-ico svg { width: 28px; height: 28px; }
.feat-item h3 { font-size: 16px; margin: 4px 0 4px; }
.feat-item p { margin: 0; color: var(--muted); font-size: 13.5px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.cat-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}
.cat-media {
  width: 100%;
  aspect-ratio: 3 / 4.1;
  border-radius: 28px 28px 90px 90px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transition: border-radius 0.35s ease;
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.cat-card:hover .cat-media { border-radius: 28px; }
.cat-card:hover .cat-media img { transform: scale(1.05); }
.cat-dot {
  width: 54px;
  height: 54px;
  margin-top: -36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--brand-deep);
  font-weight: 900;
  box-shadow: var(--shadow);
  z-index: 1;
  overflow: hidden;
}
.cat-dot img { width: 100%; height: 100%; object-fit: cover; }
.cat-card strong { font-size: 15px; padding: 0 6px 8px; }

.services-grid, .material-grid, .feature-grid, .gallery-grid, .guide-results {
  display: grid; gap: 20px;
}
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services-home {
  padding-inline: clamp(20px, 5vw, 56px);
}
.services-home .container {
  width: min(100% - 48px, var(--container));
}
.services-grid-home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 840px;
  margin-inline: auto;
}
.services-grid-home .service-card { border-radius: 16px; }
.services-grid-home .card-media { aspect-ratio: 16 / 10; }
.services-grid-home .card-body { padding: 14px 16px 16px; }
.services-grid-home .service-card h3 { font-size: 1rem; }
.services-grid-home .service-card p {
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.services-grid-home .card-foot { margin-top: 10px; }
.services-grid-home .card-plus { width: 30px; height: 30px; font-size: 18px; }
.services-grid-home .num { padding: 3px 8px; font-size: 12px; }
.material-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-grid, .gallery-grid, .guide-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.service-card, .material-card, .feature-card, .recommendation-card, .program-card, .tracking-card, .contact-card, .gallery-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card, .material-card, .recommendation-card { display: flex; flex-direction: column; }
.service-card:hover, .material-card:hover, .gallery-card:hover, .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card-media { position: relative; aspect-ratio: 16/11; background: var(--surface-2); overflow: hidden; }
.card-media img, .media-frame img, .gallery-card img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease;
}
.service-card:hover img, .material-card:hover img { transform: scale(1.04); }
.num {
  position: absolute; inset-inline-start: 12px; bottom: 12px;
  background: #fff; color: var(--brand-strong); font-weight: 900; border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.card-body, .feature-card, .contact-card, .tracking-card { padding: 20px 22px 22px; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.card-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 6px 14px rgb(var(--brand-rgb) / 0.3);
}
.link { color: var(--brand); font-weight: 800; }
.service-card h3, .material-card h3 { font-size: 1.12rem; }
.service-card p, .material-card p, .feature-card p { color: var(--muted); margin: 0; }

.pill, .spec-pills .pill {
  display: inline-block;
  background: #fff;
  color: var(--text);
  border-radius: var(--btn-radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgb(var(--deep-rgb) / 0.1);
}
html[data-theme="dark"] .pill,
html[data-theme="dark"] .spec-pills .pill { background: var(--surface); }
.filter-pills, .pill-row, .spec-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 20px; justify-content: center; }
.filter-pills {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid color-mix(in srgb, #fff 55%, var(--line));
  border-radius: 32px;
  padding: 12px 12px 20px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: visible;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.filter-pills button {
  border: 0;
  background: #fff;
  border-radius: var(--btn-radius);
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--shadow-chip);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.filter-pills button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft-hover);
}
.filter-pills button:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-soft-press);
}
.filter-pills button.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-chip-on);
}
html[data-theme="dark"] .filter-pills button {
  background: var(--surface);
}
.search-input, input, select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px 16px;
  margin-top: 6px;
}
.search-input {
  border: 0;
  border-radius: var(--btn-radius);
  min-height: 50px;
  padding: 12px 20px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-chip);
  background: #fff;
}
textarea { border-radius: 20px; }
label { display: block; font-weight: 700; margin-bottom: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.full { grid-column: 1 / -1; }
.service-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface-2); min-height: 280px; }
.guide-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.order-grid, .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.program-card { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px; padding: 16px; margin-bottom: 16px; }
.program-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 16px; }
.media-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.media-row img, .media-row video { height: 120px; object-fit: cover; border-radius: 12px; }
.mini-icon { width: 36px; height: 36px; object-fit: contain; }
.partner-icon { width: 72px; height: 72px; object-fit: contain; margin-bottom: 12px; }

.prose { overflow-wrap: anywhere; }
.prose p { margin: 0 0 12px; }
.download-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gallery-card figcaption { padding: 12px 16px; color: var(--muted); font-weight: 700; }
.portfolio-band {
  position: relative;
  overflow: hidden;
  padding-block: 72px;
  padding-inline: clamp(20px, 5vw, 56px);
  background:
    radial-gradient(720px 280px at 8% 0%, color-mix(in srgb, var(--lime) 36%, transparent), transparent 62%),
    radial-gradient(640px 240px at 100% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    var(--surface-2);
  color: var(--text);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.portfolio-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(to right, rgb(var(--deep-rgb) / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--deep-rgb) / 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.portfolio-band .container {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, var(--container));
}
.portfolio-band .empty-state,
.portfolio-studio .empty-state {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
.portfolio-studio { padding-top: 36px; }
.portfolio-toolbar {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  z-index: 12;
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.portfolio-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.portfolio-showcase-home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
}
.portfolio-showcase-home .work-case {
  --work-radius: 16px;
  min-height: 168px;
  aspect-ratio: 16 / 11;
  box-shadow: 0 10px 24px rgb(var(--deep-rgb) / 0.12);
}
.portfolio-showcase-home .work-case-copy { padding: 16px 16px 14px; }
.portfolio-showcase-home .work-case h3 {
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
}

.work-case[id] { scroll-margin-top: calc(var(--header-h) + 18px); }
.portfolio-toolbar .filter-pills {
  box-shadow: var(--shadow);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.portfolio-toolbar .filter-pills::-webkit-scrollbar { display: none; }
.portfolio-toolbar .filter-pills button { white-space: nowrap; flex-shrink: 0; }

.work-case {
  --work-radius: 22px;
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  min-height: 240px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 0;
  border-radius: var(--work-radius);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 55%, white), transparent 52%),
    linear-gradient(155deg, var(--brand) 0%, var(--brand-deep) 72%);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-align: start;
  box-shadow: 0 14px 34px rgb(var(--deep-rgb) / 0.14);
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.work-case:nth-child(3n+2) {
  background:
    radial-gradient(120% 90% at 88% 8%, color-mix(in srgb, var(--accent) 45%, white), transparent 50%),
    linear-gradient(155deg, var(--brand-deep) 0%, var(--brand) 80%);
}
.work-case:nth-child(3n) {
  background:
    radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, var(--lime) 50%, transparent), transparent 55%),
    linear-gradient(155deg, var(--brand) 10%, var(--brand-strong) 100%);
}
.work-case:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.work-case:hover,
.work-case:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgb(var(--deep-rgb) / 0.18);
}
.work-case-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.work-case:hover .work-case-photo,
.work-case:focus-visible .work-case-photo {
  opacity: 0;
}
.work-case-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.work-case-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 22px 18px;
  color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
  transition: justify-content 0.5s ease, padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-case:hover .work-case-copy,
.work-case:focus-visible .work-case-copy {
  justify-content: flex-end;
  padding-bottom: 20px;
}
.work-case-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.work-case:hover .work-case-kicker,
.work-case:focus-visible .work-case-kicker {
  transform: translateY(8px);
}
.work-case h3 {
  margin: 0;
  margin-top: auto;
  color: #fff;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.45s ease;
}
.work-case:hover h3,
.work-case:focus-visible h3 {
  margin-top: 0;
  transform: translateY(6px);
}
.work-case p {
  margin: 0;
  max-height: 0;
  opacity: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  line-height: 1.55;
  overflow: hidden;
  transform: translateY(12px);
  transition: max-height 0.45s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-case:hover p,
.work-case:focus-visible p {
  max-height: 4.8em;
  opacity: 1;
  transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (hover: none) {
  .work-case-photo { opacity: 1; }
  .work-case-copy { justify-content: flex-end; }
  .work-case p {
    max-height: 4.8em;
    opacity: 1;
    transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(6 16 12 / 0.72);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.work-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.work-lightbox-frame {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border-radius: 32px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 40px 80px rgb(0 0 0 / 0.28);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-lightbox.is-open .work-lightbox-frame { transform: none; }
.work-lightbox-close,
.work-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.work-lightbox-close {
  top: 18px;
  inset-inline-end: 18px;
  font-size: 22px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgb(var(--brand-rgb) / 0.32);
}
.work-lightbox-nav {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.work-lightbox-nav { top: 46%; transform: translateY(-50%); }
.work-lightbox-nav[data-work-prev] { inset-inline-start: 14px; }
.work-lightbox-nav[data-work-next] { inset-inline-end: 14px; }
.work-lightbox-nav[hidden],
.work-lightbox-nav:disabled { display: none; }
.work-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 24px;
  align-items: stretch;
}
.work-stage-visual { position: relative; }
.work-stage-media {
  position: relative;
  min-height: min(58vh, 520px);
  border-radius: 24px;
  overflow: hidden;
  background: #0b1a14;
}
.work-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.work-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.work-slide img,
.work-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 8px 8px 0;
}
html[dir="ltr"] .work-stage-copy { padding: 8px 0 8px 8px; }
.work-stage-copy h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-bottom: 10px;
}
.work-stage-result {
  color: var(--brand);
  font-weight: 800;
  margin-bottom: 10px;
}
.work-stage-copy p { color: var(--muted); }
.work-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  padding-bottom: 14px;
}
.work-lightbox-frame::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cmyk-c), var(--cmyk-m), var(--cmyk-y), var(--cmyk-k));
}
.work-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.work-thumbs::-webkit-scrollbar { display: none; }
.work-thumbs button {
  flex: 0 0 68px;
  width: 68px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1a14;
  cursor: pointer;
}
.work-thumbs button.is-active { border-color: var(--brand); }
.work-thumbs img,
.work-thumbs video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.work-lightbox-open { overflow: hidden; }

.why-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.why-list li { display: flex; gap: 14px; align-items: flex-start; }
.why-list span {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 900; flex-shrink: 0;
}
.why-list p { margin: 4px 0 0; color: var(--muted); }
.why-visual { display: grid; place-items: center; }
.why-orb {
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid var(--lime);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.why-orb img { width: 100%; height: 100%; object-fit: cover; }

.promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.promo-banner {
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  min-height: 220px;
  display: grid;
  align-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}
.promo-banner h3 { font-size: 1.6rem; color: #fff; }
.promo-banner p { color: rgba(255,255,255,0.88); margin: 0 0 16px; max-width: 36ch; }
.promo-lime {
  background:
    radial-gradient(280px 180px at 100% 100%, rgba(255,255,255,0.18), transparent 50%),
    linear-gradient(135deg, var(--accent), var(--brand));
}
.promo-forest {
  background:
    radial-gradient(280px 180px at 100% 100%, rgba(255,255,255,0.12), transparent 50%),
    linear-gradient(135deg, var(--brand-deep), var(--brand-strong));
}

.deal-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  background: linear-gradient(100deg, var(--lime-soft), var(--cream) 55%, var(--surface));
  border-radius: 80px;
  overflow: hidden;
  min-height: 280px;
  box-shadow: var(--shadow);
  padding: 36px 40px;
}
html[data-theme="dark"] .deal-banner {
  background: linear-gradient(100deg, #123226, #0e241c);
}
.deal-copy .btn { margin-top: 8px; }
.deal-visual {
  min-height: 200px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 62%),
    radial-gradient(circle at 70% 40%, rgba(232, 137, 58, 0.25), transparent 45%);
  border-radius: 50%;
}

.explore-band {
  padding: 88px 0;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-strong) 55%, transparent), color-mix(in srgb, var(--brand-strong) 78%, transparent)),
    radial-gradient(800px 240px at 50% 20%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    var(--brand-deep);
}
.explore-band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; }
.explore-band p { color: var(--on-deep); max-width: 46ch; margin: 0 auto 20px; }

.empty-state {
  border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 48px 24px;
  text-align: center; color: var(--muted); display: grid; gap: 8px;
  background: var(--surface);
}
.alert { background: #f8d7da; color: var(--danger); padding: 12px; border-radius: 12px; }
.success { background: #d8f3e6; color: var(--success); padding: 12px; border-radius: 12px; }
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 8px 0 8px 18px; border-inline-start: 3px solid var(--line); }
.timeline li.done { border-color: var(--success); }
.timeline li.current { border-color: var(--brand); font-weight: 900; }

.partners-band {
  background: var(--surface);
  color: var(--text);
  padding: 48px 0 28px;
}
.partners-band .section-head.light h2 { color: var(--text); }
.partner-slider {
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.partner-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: partner-marquee-ltr var(--marquee-duration, 28s) linear infinite;
}
html[dir="rtl"] .partner-track {
  animation-name: partner-marquee-rtl;
}
.partner-slider:hover .partner-track,
.partner-slider:focus-within .partner-track {
  animation-play-state: paused;
}
@keyframes partner-marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
@keyframes partner-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-shift, 50%)); }
}
.partner-slide {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  min-height: 140px;
  flex: 0 0 min(220px, 80vw);
  min-width: 0;
  box-shadow: var(--shadow);
}
.partner-slide img { height: 40px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px; }

.newsletter-wrap {
  padding: 0 0 8px;
  background: transparent;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}
body:has(.page-cta) .newsletter-wrap {
  margin-top: 0;
  padding: 36px 0 16px;
  background: var(--bg);
}
.newsletter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--brand-deep);
  color: var(--on-deep);
  border-radius: 28px;
  padding: 28px 32px;
  box-shadow: var(--shadow-lg);
}
.newsletter-bar h2 { color: #fff; margin: 0 0 6px; }
.newsletter-bar p { margin: 0; color: var(--on-deep-muted); }
.newsletter-form {
  display: flex;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  min-width: min(100%, 420px);
  align-items: center;
}
.newsletter-form input {
  border: 0;
  margin: 0;
  background: #fff;
  color: var(--text);
  border-radius: var(--btn-radius);
  min-height: 54px;
  padding: 0 20px;
  box-shadow: var(--shadow-soft);
}
.newsletter-form .btn {
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-btn);
  min-width: 148px;
  flex-shrink: 0;
}

.footer-wave {
  height: 56px;
  background: var(--site-footer-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 40C240 8 480 72 720 40 960 8 1200 64 1440 28V80H0Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 56px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 40C240 8 480 72 720 40 960 8 1200 64 1440 28V80H0Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 56px;
  margin-bottom: -1px;
}
.site-footer {
  position: relative;
  background:
    radial-gradient(900px 260px at 100% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    var(--site-footer-bg);
  color: var(--footer-fg-muted);
  padding: 42px 0 18px;
  overflow-x: clip;
}
.footer-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%);
}
.footer-inner {
  position: relative;
  width: min(calc(100% - 32px), var(--container));
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.05fr);
  gap: 36px 28px;
  align-items: start;
}
.footer-brand { min-width: 0; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--footer-fg);
}
.footer-logo span { display: grid; line-height: 1.25; min-width: 0; }
.footer-logo small { color: var(--footer-fg-muted); font-size: 12px; font-weight: 600; }
.footer-note {
  margin: 14px 0 0;
  color: var(--footer-fg-muted);
  max-width: 34ch;
  overflow-wrap: anywhere;
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: 132px;
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 0 28px;
  border-radius: var(--btn-radius);
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: var(--shadow-btn);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.footer-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.04);
}
.footer-cta:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-btn-press);
  filter: none;
}
.footer-col { display: grid; gap: 4px; align-content: start; min-width: 0; }
.footer-col h3 {
  margin: 0 0 10px;
  color: var(--footer-fg);
  font-size: 15px;
  letter-spacing: 0;
}
.footer-col a,
.footer-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: 12px;
  color: var(--footer-fg-muted);
  font-weight: 700;
  font-size: 14px;
  overflow-wrap: anywhere;
  transition: background 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col a:hover {
  background: color-mix(in srgb, var(--footer-fg) 8%, transparent);
  color: var(--footer-fg);
}
html[dir="rtl"] .footer-col a:hover { transform: translateX(-4px); }
html[dir="ltr"] .footer-col a:hover { transform: translateX(4px); }
.footer-more { color: var(--brand); }
.footer-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--footer-fg) 8%, transparent);
  color: var(--brand);
}
.footer-ico svg { width: 14px; height: 14px; display: block; }
.footer-meta { margin: 0; font-weight: 650; }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.footer-social a svg { width: 18px; height: 18px; display: block; }
.footer-social a:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 22px rgb(var(--brand-rgb) / 0.35);
}
.footer-bottom {
  position: relative;
  width: min(calc(100% - 32px), var(--container));
  max-width: 100%;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--footer-fg) 12%, transparent);
  padding-top: 16px;
  color: var(--footer-fg-muted);
  font-size: 13px;
}
.footer-copy { justify-self: start; }
.footer-credit {
  justify-self: center;
  text-align: center;
}
.footer-credit a {
  color: var(--footer-fg);
  font-weight: 800;
  text-decoration: none;
}
.footer-credit a:hover { color: var(--brand); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px 16px;
}
.footer-legal a {
  color: var(--footer-fg-muted);
  font-weight: 700;
  position: relative;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--footer-fg); }

@media (max-width: 1100px) {
  .material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-item::after { display: none; }
  .nav-desktop { gap: 2px; }
  .nav-link { padding: 7px 8px; font-size: 13px; }
  .brand-text small { display: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .deal-banner { border-radius: 36px; }
}
@media (min-width: 1201px) {
  .nav-mobile { display: none; }
}
@media (max-width: 1200px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .header-searchbar { display: none; }
}
@media (max-width: 980px) {
  .hero-grid, .service-detail-grid, .guide-layout, .order-grid, .contact-grid, .why-grid, .promo-grid, .deal-banner { grid-template-columns: minmax(0, 1fr); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-card { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-height: 260px; }
  .hero-grid { padding: 28px 20px; border-radius: 28px; }
  .section-head.split { flex-direction: column; align-items: flex-start; }
  .work-stage { grid-template-columns: minmax(0, 1fr); }
  .work-stage-copy { padding: 4px 2px 8px; }
  .work-stage-media { min-height: 46vh; }
  .work-lightbox { padding: 12px; align-items: end; }
  .work-lightbox-frame { max-height: 92vh; border-radius: 24px 24px 18px 18px; padding: 14px; }
}
@media (max-width: 640px) {
  .services-grid, .material-grid, .feature-grid, .gallery-grid, .guide-results, .form-grid, .features-row, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .services-home { padding-inline: 16px; }
  .services-home .container { width: min(100% - 20px, var(--container)); }
  .services-grid-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 12px;
  }
  .portfolio-showcase,
  .portfolio-showcase.is-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .portfolio-band {
    padding-inline: 16px;
    padding-block: 48px;
  }
  .portfolio-band .container { width: min(100% - 20px, var(--container)); }
  .portfolio-showcase-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 12px;
  }
  .portfolio-showcase-home .work-case { min-height: 140px; }
  .work-case { aspect-ratio: 16 / 11; min-height: 210px; }
  .work-lightbox-nav { width: 38px; height: 38px; }
  .brand-text small { display: none; }
  .topbar-email { display: none; }
  .header-inner { width: min(calc(100% - 20px), var(--container)); gap: 8px; }
  .container, .narrow, .footer-inner, .footer-bottom { width: min(calc(100% - 20px), var(--container)); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .footer-copy, .footer-credit, .footer-legal { justify-self: center; }
  .footer-legal { justify-content: center; }
  .newsletter-form { min-width: 100%; flex-direction: column; border-radius: 0; }
  .newsletter-form .btn { border-radius: var(--btn-radius); width: 100%; }
  .deal-banner { padding: 24px; border-radius: 28px; }
}
@media (max-width: 420px) {
  .work-case { border-radius: 18px; }
  .services-grid-home { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-card, .card-media img, .work-case, .work-case-photo, .work-case-photo img,
  .work-lightbox, .work-lightbox-frame, .work-slide,
  .nav-link, .nav-ico, .nav-caret, .nav-menu, .nav-sublink, .nav-mobile, .nav-mobile-sub,
  .footer-cta, .footer-col a, .footer-social a, .btn, .cat-media img,
  .partner-track {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .partner-slider {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }
  .partner-slider::-webkit-scrollbar { display: none; }
}

/* ========== Print studio layer ========== */
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .paper-grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
}

.hero-stage {
  position: relative;
  overflow: hidden;
  padding: 20px 0 36px;
  color: var(--on-deep);
  background:
    radial-gradient(920px 460px at 8% -18%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%),
    radial-gradient(640px 340px at 96% 8%, color-mix(in srgb, var(--cmyk-c) 18%, transparent), transparent 52%),
    radial-gradient(480px 260px at 72% 100%, color-mix(in srgb, var(--cmyk-m) 12%, transparent), transparent 50%),
    linear-gradient(165deg, var(--brand-strong) 0%, var(--brand-deep) 52%, var(--footer-bg) 100%);
}
.hero-stage .eyebrow { color: var(--accent); }
.hero-stage h1 { color: #fff; max-width: 16ch; }
.hero-stage .lead { color: color-mix(in srgb, var(--on-deep) 82%, transparent); }
.hero-ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 78%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 24%),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--cmyk-y) 16%, transparent), transparent 18%);
  animation: ink-drift 18s ease-in-out infinite alternate;
}
.cmyk-bar {
  position: absolute;
  top: 18px;
  inset-inline-end: max(24px, calc((100% - var(--container)) / 2));
  display: flex;
  gap: 6px;
  z-index: 2;
}
.cmyk-bar i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.cmyk-bar .ink-c { background: var(--cmyk-c); }
.cmyk-bar .ink-m { background: var(--cmyk-m); }
.cmyk-bar .ink-y { background: var(--cmyk-y); }
.cmyk-bar .ink-k { background: var(--cmyk-k); }
.hero-stage .hero-grid {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 40px 0 8px;
  overflow: visible;
  z-index: 1;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.hero-chips span {
  padding: 8px 14px;
  border-radius: var(--btn-radius);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.hero-scroll {
  position: relative;
  z-index: 1;
  margin: 8px auto 0;
  text-align: center;
  color: color-mix(in srgb, var(--on-deep) 70%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 8px auto 0;
  background: linear-gradient(#fff, transparent);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}
.hero-visual { z-index: 1; }
.print-marks {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 3;
}
.print-marks::before,
.print-marks::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid rgba(255,255,255,0.45);
}
.print-marks::before {
  top: 0;
  inset-inline-start: 0;
  border-block-start-width: 2px;
  border-inline-start-width: 2px;
}
.print-marks::after {
  bottom: 0;
  inset-inline-end: 0;
  border-block-end-width: 2px;
  border-inline-end-width: 2px;
}
.page-hero .print-marks {
  inset: 18px max(16px, calc((100% - var(--container)) / 2));
}
.hero-stage .hero-card {
  background: rgba(255,255,255,0.94);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, z-index 0s;
}
.hero-stage .hero-card:hover {
  z-index: 4;
  box-shadow: 0 28px 60px rgba(0,0,0,0.28);
}
.hero-stage .hero-card:nth-of-type(1):hover { transform: rotate(-1deg) scale(1.05) translateY(-8px); }
.hero-stage .hero-card:nth-of-type(2):hover { transform: rotate(1deg) scale(1.06) translateY(-8px); }
.hero-stage .hero-card:nth-of-type(3):hover { transform: rotate(0deg) scale(1.05) translateY(-8px); }
html[data-theme="dark"] .hero-stage .hero-card {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
  color: var(--on-deep);
  background:
    radial-gradient(680px 240px at 88% -20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    radial-gradient(520px 200px at 8% 120%, color-mix(in srgb, var(--cmyk-c) 16%, transparent), transparent 50%),
    linear-gradient(165deg, var(--brand-strong), var(--brand-deep) 72%, var(--footer-bg));
  border-bottom: 0;
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: color-mix(in srgb, var(--on-deep) 82%, transparent); }
.page-hero .crumb { color: color-mix(in srgb, var(--on-deep) 62%, transparent); }
.page-hero .crumb a { color: var(--accent); }
.page-hero-ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--cmyk-y) 12%, transparent), transparent 22%),
    radial-gradient(circle at 12% 80%, color-mix(in srgb, var(--cmyk-m) 10%, transparent), transparent 20%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--accent); }
.media-frame {
  position: relative;
}
.media-frame img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-frame:hover img {
  transform: scale(1.05);
}

.craft-marquee {
  overflow: hidden;
  padding: 14px 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, #000 18%, var(--brand-strong)), var(--brand-strong));
  color: #fff;
  border-block: 1px solid rgba(255,255,255,0.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.craft-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  padding-inline: 8px;
  animation: craft-marquee 36s linear infinite;
}
.craft-marquee:hover .craft-track {
  animation-play-state: paused;
}
.craft-chip {
  --chip-ink: var(--accent);
  display: inline-flex;
  align-items: stretch;
  gap: 12px;
  min-height: 48px;
  padding-block: 8px;
  padding-inline-start: 8px;
  padding-inline-end: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  white-space: nowrap;
}
.craft-chip:nth-child(4n+1) { --chip-ink: var(--cmyk-c); }
.craft-chip:nth-child(4n+2) { --chip-ink: var(--cmyk-m); }
.craft-chip:nth-child(4n+3) { --chip-ink: var(--cmyk-y); }
.craft-chip:nth-child(4n+4) { --chip-ink: var(--accent); }
.craft-stripe {
  display: block;
  width: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--chip-ink);
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip-ink) 55%, transparent);
}
.craft-label {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: #fff;
}
.craft-inks {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 3px;
  flex-shrink: 0;
  margin-inline-start: 6px;
  padding: 4px;
  border-radius: 7px;
  background: rgba(0,0,0,0.22);
}
.craft-inks i {
  display: block;
  width: 9px;
  height: 14px;
  border-radius: 2px;
}
.craft-inks .ink-c { background: var(--cmyk-c); }
.craft-inks .ink-m { background: var(--cmyk-m); }
.craft-inks .ink-y { background: var(--cmyk-y); }
.craft-inks .ink-k { background: var(--cmyk-k); }
html[dir="rtl"] .craft-track { animation-name: craft-marquee-rtl; }

.process-section { padding-top: 72px; }
.process-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.process-rail::before {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline: 8%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand) 45%, transparent) 0 10px,
    transparent 10px 18px
  );
}
.process-rail li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 20px 20px;
  box-shadow: var(--shadow);
  min-width: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.process-rail li:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.process-rail span {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #fff;
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-weight: 800;
  position: relative;
  z-index: 1;
}
.process-rail strong { display: block; margin-bottom: 6px; }
.process-rail p { margin: 0; color: var(--muted); font-size: 14px; }

.service-card,
.material-card,
.gallery-card,
.feature-card,
.recommendation-card {
  position: relative;
}
.service-card::after,
.material-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
  transition: transform 0.7s ease;
}
.service-card:hover::after,
.material-card:hover::after {
  transform: translateX(130%);
}

.cat-card { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cat-card:hover { transform: translateY(-8px); }
.feat-ico {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
.feat-item:hover .feat-ico {
  transform: rotate(-8deg) scale(1.06);
  background: var(--brand);
  color: #fff;
}
.why-orb {
  animation: orb-float 7s ease-in-out infinite;
}
.promo-banner {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.promo-banner:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.deal-banner {
  position: relative;
}
.deal-visual {
  position: relative;
  overflow: hidden;
}
.deal-visual::before,
.deal-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 18%;
  border: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  animation: spin-slow 28s linear infinite;
}
.deal-visual::after {
  inset: 32%;
  animation-direction: reverse;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

[data-reveal] {
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-reveal]:nth-child(2) { animation-delay: 0.06s; }
[data-reveal]:nth-child(3) { animation-delay: 0.12s; }
[data-reveal]:nth-child(4) { animation-delay: 0.18s; }
[data-reveal]:nth-child(5) { animation-delay: 0.24s; }
[data-reveal]:nth-child(6) { animation-delay: 0.3s; }
[data-reveal]:nth-child(7) { animation-delay: 0.36s; }
[data-reveal]:nth-child(8) { animation-delay: 0.42s; }
[data-reveal]:nth-child(9) { animation-delay: 0.48s; }

@keyframes ink-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, 4%, 0) scale(1.06); }
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}
@keyframes craft-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes craft-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
@keyframes orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .hero-stage .hero-grid { padding: 24px 0 4px; }
  .process-rail,
  .process-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-rail::before { display: none; }
  .cmyk-bar { inset-inline-end: 16px; }
}
@media (max-width: 640px) {
  .process-rail { grid-template-columns: minmax(0, 1fr); }
  .hero-stage h1 { max-width: none; }
  .cmyk-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-grain,
  .hero-ink,
  .craft-track,
  .why-orb,
  .deal-visual::before,
  .deal-visual::after,
  .hero-scroll::after,
  [data-reveal] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .craft-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.page-cta {
  position: relative;
  overflow: visible;
  padding: 56px 0 72px;
  color: var(--on-deep);
  background:
    radial-gradient(640px 220px at 12% 120%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(135deg, var(--brand-deep), var(--brand-strong));
}
.page-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.page-cta h2 { color: #fff; margin: 0 0 8px; }
.page-cta p { margin: 0; color: color-mix(in srgb, var(--on-deep) 80%, transparent); max-width: 46ch; }
.page-cta-actions { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 14px; }

.studio-form,
.contact-sheet,
.estimate-card,
.tracking-sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.studio-form { display: grid; gap: 4px; }
.studio-form .form-grid { margin-top: 8px; }
.studio-form .full { width: 100%; }
.form-block {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 16px 8px;
  margin: 0 0 8px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.form-block legend {
  padding: 0 8px;
  font-weight: 900;
  color: var(--brand-deep);
  font-size: 13px;
  letter-spacing: 0.04em;
}
html[data-theme="dark"] .form-block legend { color: var(--accent); }
.finish-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 20px;
  padding-bottom: 8px;
}
.finish-chip {
  margin: 0;
  cursor: pointer;
}
.finish-chip input { position: absolute; opacity: 0; pointer-events: none; }
.finish-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: var(--btn-radius);
  border: 0;
  background: linear-gradient(180deg, #fff 0%, #eef1f5 100%);
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--shadow-chip);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
html[data-theme="dark"] .finish-chip span {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 78%, #000) 100%);
}
.finish-chip:hover span {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-hover);
}
.finish-chip input:checked + span {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 72%, #fff) 0%,
      var(--brand) 42%,
      color-mix(in srgb, var(--brand) 72%, #000) 100%);
  color: #fff;
  box-shadow: var(--shadow-chip-on);
}
.search-input, input, select, textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.search-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.search-input:focus {
  border: 0;
  box-shadow: var(--shadow-soft), 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.newsletter-form input:focus {
  box-shadow: var(--shadow-soft), 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.contact-sheet h2 { margin-bottom: 18px; }
.contact-list { display: grid; gap: 10px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-chip);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
html[data-theme="dark"] .contact-row {
  background: var(--surface);
}
.contact-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-hover);
}
.contact-row.is-static { margin: 0; }
.contact-row small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.contact-row strong { font-size: 15px; }
.contact-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 12px rgb(var(--brand-rgb) / 0.28);
}
.contact-ico svg { width: 18px; height: 18px; }

.estimate-card {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  align-self: start;
  background:
    radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
}
.estimate-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  gap: 10px;
}
.estimate-list li {
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  font-weight: 800;
  border-inline-start: 3px solid var(--brand);
}

.timeline { display: grid; gap: 0; }
.timeline li {
  position: relative;
  padding-block: 14px;
  padding-inline-start: 22px;
  border-inline-start: 3px solid var(--line);
}
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
}
.timeline li.done { border-color: var(--success); }
.timeline li.done::before { background: var(--success); border-color: var(--success); }
.timeline li.current {
  border-color: var(--brand);
  font-weight: 900;
  color: var(--brand-strong);
}
.timeline li.current::before {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent);
}

.gallery-card { position: relative; }
.gallery-card img { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-card:hover img { transform: scale(1.07); }

.newsletter-bar {
  position: relative;
  overflow: visible;
  padding-bottom: 8px;
}
.newsletter-bar::before {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 18px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

@media (max-width: 980px) {
  .estimate-card { position: static; }
}
@media (max-width: 640px) {
  .filter-pills { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-row, .finish-chip span, .gallery-card img {
    transition: none !important;
  }
}

/* About page */
.about-stage {
  padding: 56px 0 48px;
  background:
    radial-gradient(720px 220px at 88% 0%, color-mix(in srgb, var(--lime) 38%, transparent), transparent 62%),
    var(--surface-mint);
}
.about-stage .container {
  width: min(100% - 48px, var(--container));
}
@media (min-width: 1100px) {
  .about-stage { padding: 72px 0 56px; }
  .about-stage .container { width: min(100% - 96px, var(--container)); }
}
.about-intro {
  --about-gold: var(--focus);
  --about-ink: var(--brand-strong);
  --about-muted: var(--muted);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 28px 20px;
  align-items: center;
  background: var(--surface);
  color: var(--about-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 52px 60px 52px 68px;
  overflow: hidden;
}
.about-intro::before,
.about-intro::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  width: 6px;
  background: var(--brand);
  z-index: 1;
}
.about-intro::before { left: 0; }
.about-intro::after { right: 0; }
.about-intro-copy { position: relative; z-index: 2; }
.about-hello {
  margin: 0 0 10px;
  color: var(--brand);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-hello::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 8px;
  background: var(--brand);
}
.about-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em 0.45em;
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.about-im {
  color: transparent;
  -webkit-text-stroke: 2px var(--about-ink);
  paint-order: stroke fill;
  font-weight: 900;
}
.about-name {
  color: var(--brand);
  font-weight: 900;
}
.about-tags {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  width: fit-content;
  max-width: 100%;
}
.about-tag {
  display: block;
  margin: 0;
  padding: 8px 16px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about-tag.is-ink { background: var(--brand-deep); color: #fff; }
.about-lead {
  margin: 0 0 22px;
  max-width: 52ch;
  color: var(--about-muted);
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
}
.about-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.about-more:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.about-intro-visual {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 36px 52px 36px 8px;
}
html[dir="rtl"] .about-intro-visual { padding: 36px 8px 36px 52px; }
.about-portrait {
  --orbit-r: 168px;
  position: relative;
  width: min(270px, 68vw);
  aspect-ratio: 1;
}
.about-portrait-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #dbe8f4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.about-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-portrait-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--about-ink);
  color: var(--about-gold);
  font-weight: 900;
  font-size: 2.4rem;
}
.about-arc {
  position: absolute;
  inset: -16%;
  color: var(--about-gold);
  pointer-events: none;
}
html[dir="rtl"] .about-arc { transform: scaleX(-1); }
.about-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.about-orbit-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  margin: -21px;
  --flip: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-deep);
  color: var(--accent);
  transform: rotate(calc(var(--flip) * var(--a) * 1deg)) translateX(var(--orbit-r)) rotate(calc(var(--flip) * var(--a) * -1deg));
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: auto;
}
html[dir="rtl"] .about-orbit-btn { --flip: -1; }
.about-orbit-btn svg { width: 16px; height: 16px; }
.about-orbit-btn:hover {
  background: var(--brand);
  color: #fff;
}
.about-block.is-mint { background: var(--surface-mint); }
.about-block { scroll-margin-top: calc(var(--header-h) + 16px); }
.about-faq-list { display: grid; gap: 12px; }
.about-faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--brand);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: var(--brand-deep);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-align: start;
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease;
}
.about-faq-q span { min-width: 0; }
.about-faq.is-open .about-faq-q {
  background: var(--brand);
  color: #fff;
}
.about-faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.about-faq-icon::before,
.about-faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.about-faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}
.about-faq.is-open .about-faq-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.about-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-faq.is-open .about-faq-panel { grid-template-rows: 1fr; }
.about-faq-body {
  overflow: hidden;
  min-height: 0;
  padding: 0 18px;
  color: var(--muted);
  line-height: 1.8;
  transition: padding 0.42s ease;
}
.about-faq.is-open .about-faq-body { padding: 16px 18px 18px; }
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 28px 18px;
  justify-items: center;
}
.about-team-card {
  text-align: center;
  max-width: 220px;
}
.about-team-photo {
  width: 148px;
  height: 148px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--brand);
  background: var(--brand-deep);
  box-shadow: 0 10px 24px rgb(var(--deep-rgb) / 0.12);
}
.about-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-team-photo span {
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
}
.about-team-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.about-team-role {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 12px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
}
.about-team-bio { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.about-org-wrap {
  overflow-x: auto;
  padding: 12px 8px 24px;
}
.org-tree,
.org-level {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.org-level {
  position: relative;
  padding-top: 28px;
}
.org-tree > li > .org-level::before,
.org-level::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 28px;
  background: var(--brand);
}
.org-tree.org-level::before { display: none; }
.org-tree.org-level { padding-top: 0; }
.org-level > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
}
.org-level > li::before,
.org-level > li::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--brand);
}
.org-level > li::before {
  left: 50%;
  width: 50%;
}
.org-level > li::after {
  right: 50%;
  width: 50%;
}
.org-level > li:first-child::after { display: none; }
.org-level > li:last-child::before { display: none; }
.org-level > li:only-child::before,
.org-level > li:only-child::after { display: none; }
.org-level:not(.org-tree) > li > .org-node { margin-top: 12px; }
.org-level:not(.org-tree) > li > .org-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 2px;
  height: 12px;
  background: var(--brand);
  transform: translateX(-50%);
}
.org-node {
  position: relative;
  z-index: 1;
  min-width: 148px;
  max-width: 220px;
  padding: 12px 16px;
  background: var(--brand-deep);
  color: #fff;
  text-align: center;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgb(var(--deep-rgb) / 0.12);
}
.org-node.is-root {
  background: var(--brand);
  color: #fff;
}
.org-node strong { display: block; font-size: 13px; letter-spacing: 0.03em; }
.org-node span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.88;
}
.about-join {
  background:
    radial-gradient(620px 240px at 50% 0%, color-mix(in srgb, var(--lime) 55%, transparent), transparent 70%),
    var(--surface-mint);
}
.about-join .section-head { margin-bottom: 32px; }
.about-join-form {
  width: min(100%, 640px);
  margin-inline: auto;
  display: grid;
  gap: 14px;
  position: relative;
  padding: 36px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.about-join-form::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 22%;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--focus));
}
.about-join-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.about-join-form label { display: grid; gap: 6px; font-weight: 800; }
.about-join-submit {
  justify-self: center;
  min-width: 200px;
  border-radius: 999px;
  margin-top: 6px;
}
.about-join-form input:focus,
.about-join-form select:focus,
.about-join-form textarea:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
html[data-theme="dark"] .about-intro,
html[data-theme="dark"] .about-faq,
html[data-theme="dark"] .about-join-form {
  background: var(--surface);
}

@media (max-width: 980px) {
  .about-stage { padding: 40px 0 36px; }
  .about-stage .container { width: min(100% - 32px, var(--container)); }
  .about-intro {
    grid-template-columns: 1fr;
    padding: 36px 28px 28px 36px;
    text-align: start;
  }
  .about-intro-visual { min-height: 0; padding: 8px 28px 18px; }
  .about-join-row { grid-template-columns: 1fr; }
  .about-join-form { padding: 32px 22px 24px; }
}
@media (max-width: 640px) {
  .about-orbit,
  .about-arc { display: none; }
  .about-portrait { width: min(220px, 70vw); }
  .about-tags { width: 100%; }
  .about-lead { text-align: start; }
  .about-stage { padding: 28px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-faq-panel,
  .about-faq-body,
  .about-faq-q,
  .about-faq-icon::before,
  .about-faq-icon::after {
    transition: none !important;
  }
}