/* ============ SolidFormLab: direction pages ============
   Shared components for the direction pages (/auto/, /kids/, ...) plus one
   "skin" per page. A skin only overrides the design tokens from style.css,
   so every component below follows it. Skins are single-theme on purpose
   (each page has its own mood), so direction pages have no theme toggle.
   Armenian text always falls back to Noto Sans Armenian / Noto Serif
   Armenian, the only Google fonts with Armenian glyphs. */

/* oswald cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-cyrillic-500-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* oswald latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-latin-500-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* nunito cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(../assets/fonts/nunito-cyrillic-600-900.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* nunito latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(../assets/fonts/nunito-latin-600-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pangolin cyrillic */
@font-face {
  font-family: 'Pangolin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/pangolin-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* pangolin latin */
@font-face {
  font-family: 'Pangolin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/pangolin-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cormorant cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/cormorant-cyrillic-500-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cormorant latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/cormorant-latin-500-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* plex cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/plex-cyrillic-400-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* plex latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/plex-latin-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* prata cyrillic */
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/prata-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* prata latin */
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/prata-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* literata cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/literata-cyrillic-500-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* literata latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/literata-latin-500-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* firacond cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/firacond-cyrillic-300.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* firacond latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/firacond-latin-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* firacond cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/firacond-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* firacond latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/firacond-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* firacond cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/firacond-cyrillic-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* firacond latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/firacond-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* notoserifarm armenian */
@font-face {
  font-family: 'Noto Serif Armenian';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/notoserifarm-armenian-500-800.woff2) format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
/* notosansarmcond armenian */
@font-face {
  font-family: 'Noto Sans Armenian Cond';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 75%;
  font-display: swap;
  src: url(../assets/fonts/notosansarmcond-armenian-600-800.woff2) format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
/* ============ Skins ============ */
html:root[data-skin] { --accent-2: var(--accent); --accent-3: var(--accent); --accent-4: var(--accent); --font-hand: var(--font-display); --display-case: none; --display-weight: 700; --display-track: -0.02em; }

html:root[data-skin="auto"] {
  color-scheme: dark;
  --bg: #0E0F10; --bg-alt: #141516; --surface: #1A1B1D; --surface-2: #222326;
  --border: #2E3033; --border-strong: #474A4F; --text: #F1F1EE; --text-muted: #A6A9AD;
  --steel-1: #D6D8DB; --steel-2: #8E9298;
  --accent: #FFC21A; --accent-strong: #F0B000; --accent-ink: #FFC21A; --on-accent: #151000;
  --accent-tint: rgba(255, 194, 26, .08); --accent-line: rgba(255, 194, 26, .34); --accent-2: #E4472B;
  --header-bg: rgba(14, 15, 16, .86); --hatch-a: #202124; --hatch-b: #18191B;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
  --font-display: 'Oswald', 'Noto Sans Armenian Cond', 'Noto Sans Armenian', system-ui, sans-serif;
  --display-case: uppercase; --display-track: 0.01em;
  --r: 3px;
}
html:root[data-skin="kids"] {
  color-scheme: light;
  --bg: #FFFDF7; --bg-alt: #FFF6E3; --surface: #FFFFFF; --surface-2: #FFF1D6;
  --border: #F0E2C4; --border-strong: #DCC79E; --text: #24324A; --text-muted: #56627A;
  --steel-1: #24324A; --steel-2: #56627A;
  --accent: #F25C3B; --accent-strong: #E04A29; --accent-ink: #C93C1C; --on-accent: #FFFFFF;
  --accent-tint: rgba(242, 92, 59, .1); --accent-line: rgba(242, 92, 59, .4);
  --accent-2: #2F7DE1; --accent-3: #FFC531; --accent-4: #34B37A;
  --header-bg: rgba(255, 253, 247, .9); --hatch-a: #FFF1D6; --hatch-b: #FFF8EA;
  --shadow: 0 10px 26px rgba(36, 50, 74, .1); --shadow-lg: 0 18px 40px rgba(36, 50, 74, .16);
  --font-display: 'Nunito', 'Noto Sans Armenian', system-ui, sans-serif;
  --font: 'Nunito', 'Noto Sans Armenian', system-ui, sans-serif;
  --font-hand: 'Pangolin', 'Nunito', 'Noto Sans Armenian', cursive;
  --display-weight: 900; --display-track: -0.01em;
  --r: 22px;
}
html:root[data-skin="decor"] {
  color-scheme: light;
  --bg: #EFE3D9; --bg-alt: #E8D7CA; --surface: #F8F0EA; --surface-2: #EBDBCE;
  --border: #D9C3B3; --border-strong: #B99E8A; --text: #26282A; --text-muted: #5C534D;
  --steel-1: #26282A; --steel-2: #5C534D;
  --accent: #8E2C3A; --accent-strong: #7A2230; --accent-ink: #8E2C3A; --on-accent: #FFF7F2;
  --accent-tint: rgba(142, 44, 58, .08); --accent-line: rgba(142, 44, 58, .32); --accent-2: #5F6E4D;
  --header-bg: rgba(239, 227, 217, .9); --hatch-a: #E6D3C4; --hatch-b: #EFE3D9;
  --shadow: 0 10px 28px rgba(60, 40, 30, .12); --shadow-lg: 0 20px 44px rgba(60, 40, 30, .18);
  --font-display: 'Cormorant Garamond', 'Noto Serif Armenian', Georgia, serif;
  --display-weight: 600; --display-track: -0.01em;
  --r: 14px;
}
html:root[data-skin="batch"] {
  color-scheme: light;
  --bg: #EEF1F4; --bg-alt: #E4E9EF; --surface: #FFFFFF; --surface-2: #F3F5F8;
  --border: #CDD5DF; --border-strong: #9AA8B9; --text: #14202B; --text-muted: #46546A;
  --steel-1: #14202B; --steel-2: #46546A;
  --accent: #1F5FAD; --accent-strong: #184D8D; --accent-ink: #1F5FAD; --on-accent: #FFFFFF;
  --accent-tint: rgba(31, 95, 173, .08); --accent-line: rgba(31, 95, 173, .32); --accent-2: #D88A16;
  --header-bg: rgba(238, 241, 244, .9); --hatch-a: #E4E9EF; --hatch-b: #EEF1F4;
  --shadow: 0 8px 24px rgba(20, 32, 43, .1); --shadow-lg: 0 16px 36px rgba(20, 32, 43, .14);
  --font-display: 'IBM Plex Sans', 'Noto Sans Armenian', system-ui, sans-serif;
  --font: 'IBM Plex Sans', 'Noto Sans Armenian', system-ui, sans-serif;
  --display-weight: 600; --display-track: -0.02em;
  --r: 4px;
}
html:root[data-skin="figurines"] {
  color-scheme: dark;
  --bg: #14111C; --bg-alt: #1A1624; --surface: #211C2D; --surface-2: #2A2438;
  --border: #362F47; --border-strong: #4E4566; --text: #EDE6D8; --text-muted: #AFA5BD;
  --steel-1: #E2D9C8; --steel-2: #A99FB8;
  --accent: #C9A24D; --accent-strong: #B68E38; --accent-ink: #D9B562; --on-accent: #1A1408;
  --accent-tint: rgba(201, 162, 77, .09); --accent-line: rgba(201, 162, 77, .36); --accent-2: #8B6BD0;
  --header-bg: rgba(20, 17, 28, .88); --hatch-a: #241E31; --hatch-b: #1C1727;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
  --font-display: 'Prata', 'Noto Serif Armenian', Georgia, serif;
  --display-weight: 400; --display-track: 0;
  --r: 6px;
}
html:root[data-skin="parts"] {
  color-scheme: light;
  --bg: #FAF8F4; --bg-alt: #F2EEE6; --surface: #FFFFFF; --surface-2: #F4F0E8;
  --border: #E2DACB; --border-strong: #C6B9A2; --text: #22252A; --text-muted: #565B63;
  --steel-1: #22252A; --steel-2: #565B63;
  --accent: #E08A1E; --accent-strong: #C97810; --accent-ink: #9A5804; --on-accent: #1C1203;
  --accent-tint: rgba(224, 138, 30, .1); --accent-line: rgba(176, 100, 0, .34); --accent-2: #2E8C6A;
  --header-bg: rgba(250, 248, 244, .9); --hatch-a: #F0EBE1; --hatch-b: #F7F4EE;
  --shadow: 0 8px 24px rgba(34, 37, 42, .08); --shadow-lg: 0 16px 36px rgba(34, 37, 42, .14);
  --r: 12px;
}
html:root[data-skin="prototyping"] {
  color-scheme: dark;
  --bg: #0E1622; --bg-alt: #121C2A; --surface: #172334; --surface-2: #1D2B3F;
  --border: #263850; --border-strong: #3A5170; --text: #E3EAF2; --text-muted: #97A8BE;
  --steel-1: #D3DEEA; --steel-2: #8EA0B6;
  --accent: #F2A23A; --accent-strong: #E08D1C; --accent-ink: #F5AE4E; --on-accent: #1A1206;
  --accent-tint: rgba(242, 162, 58, .08); --accent-line: rgba(242, 162, 58, .32); --accent-2: #5AA9E6;
  --header-bg: rgba(14, 22, 34, .88); --hatch-a: #1A2638; --hatch-b: #142030;
  --font-display: 'JetBrains Mono', 'Noto Sans Armenian', ui-monospace, monospace;
  --display-weight: 700; --display-track: -0.03em;
  --r: 4px;
}
html:root[data-skin="molds"] {
  color-scheme: light;
  --bg: #F1ECE6; --bg-alt: #E9E1D8; --surface: #FAF7F3; --surface-2: #EDE5DC;
  --border: #DCD0C3; --border-strong: #BCAA97; --text: #2E2A27; --text-muted: #5F5751;
  --steel-1: #2E2A27; --steel-2: #5F5751;
  --accent: #B8566B; --accent-strong: #A0465B; --accent-ink: #9C4256; --on-accent: #FFFFFF;
  --accent-tint: rgba(184, 86, 107, .09); --accent-line: rgba(184, 86, 107, .34); --accent-2: #8A6A4F;
  --header-bg: rgba(241, 236, 230, .9); --hatch-a: #E7DED4; --hatch-b: #F1ECE6;
  --shadow: 0 10px 26px rgba(46, 42, 39, .1); --shadow-lg: 0 18px 40px rgba(46, 42, 39, .16);
  --font-display: 'Literata', 'Noto Serif Armenian', Georgia, serif;
  --display-weight: 600; --display-track: -0.015em;
  --r: 16px;
}
html:root[data-skin="models"] {
  color-scheme: light;
  --bg: #FAFAF8; --bg-alt: #F1F1EE; --surface: #FFFFFF; --surface-2: #F4F4F1;
  --border: #DEDED8; --border-strong: #B4B4AC; --text: #1C1C1C; --text-muted: #57574F;
  --steel-1: #1C1C1C; --steel-2: #57574F;
  --accent: #3F5E5A; --accent-strong: #314B47; --accent-ink: #3F5E5A; --on-accent: #FFFFFF;
  --accent-tint: rgba(63, 94, 90, .07); --accent-line: rgba(63, 94, 90, .3); --accent-2: #A8A79F;
  --header-bg: rgba(250, 250, 248, .9); --hatch-a: #F0F0EC; --hatch-b: #F8F8F5;
  --shadow: 0 8px 24px rgba(0, 0, 0, .06); --shadow-lg: 0 16px 36px rgba(0, 0, 0, .1);
  --font-display: 'Fira Sans Condensed', 'Noto Sans Armenian', system-ui, sans-serif;
  --font: 'Fira Sans Condensed', 'Noto Sans Armenian', system-ui, sans-serif;
  --display-weight: 500; --display-track: -0.005em;
  --r: 0px;
}

/* Display type follows the skin */
html[data-skin] h1, html[data-skin] h2, html[data-skin] h3 {
  font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case);
}
html[data-skin="auto"] :lang(hy) h1, html[data-skin="auto"] :lang(hy) h2, html[data-skin="auto"] :lang(hy) h3 { letter-spacing: 0; }
html[data-skin="models"] h1 { font-weight: 300; }

/* ============ Header additions ============ */
.main-nav a.nav-home { color: var(--accent-ink); }
.brand-sub {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted); border-left: 1px solid var(--border); padding-left: 10px; margin-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch;
}
@media (max-width: 1360px) { .brand-sub { display: none; } }

/* ============ Breadcrumb ============ */
.crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.crumbs a { color: var(--text-muted); border-bottom: 1px solid var(--border); }
.crumbs a:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.crumbs span[aria-hidden] { opacity: .6; }

/* ============ Page hero ============ */
.pg-hero {
  position: relative; overflow: hidden; padding: clamp(32px, 6vh, 72px) 0 clamp(40px, 6vh, 72px);
  background: radial-gradient(ellipse 50% 70% at 80% 45%, var(--accent-tint) 0%, transparent 70%), var(--bg);
}
.pg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pg-hero h1 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.05; margin-bottom: var(--space-3); text-wrap: balance; }
:lang(hy) .pg-hero h1 { font-size: clamp(30px, 3.9vw, 58px); line-height: 1.12; }
html[data-skin="auto"] .pg-hero h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.02; }
html[data-skin="auto"] :lang(hy) .pg-hero h1 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.08; }
.pg-hero .lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--text-muted); max-width: 46ch; margin-bottom: var(--space-4); }
.pg-hero .hero-cta { margin-bottom: var(--space-4); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.pg-chips li {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface); min-width: 0;
}
.pg-chips strong { font-family: var(--font-mono); font-size: 16px; color: var(--text); line-height: 1.2; }
.pg-chips span { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.pg-art {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: center;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text);
}
.pg-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-art .art-caption {
  position: absolute; left: 14px; bottom: 12px; right: 14px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: .03em;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-hero .pg-copy > * { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .pg-hero .pg-copy > :nth-child(2) { animation-delay: .06s; }
  .pg-hero .pg-copy > :nth-child(3) { animation-delay: .12s; }
  .pg-hero .pg-copy > :nth-child(4) { animation-delay: .18s; }
  .pg-hero .pg-copy > :nth-child(5) { animation-delay: .24s; }
  .pg-art { animation: rise 1s cubic-bezier(.16, 1, .3, 1) .15s both; }
  .pg-art .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: draw 2.4s cubic-bezier(.4, 0, .2, 1) .4s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============ Cards (offer grid) ============ */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-2); }
.pg-card {
  display: flex; flex-direction: column; gap: 10px; padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pg-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.pg-card .icon-lg { color: var(--accent-ink); }
.pg-card h3 { font-size: 19px; }
.pg-card p { color: var(--text-muted); font-size: 15px; flex: 1; }
.pg-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent-ink); padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.pg-card.is-wide { grid-column: span 2; }
@media (max-width: 700px) { .pg-card.is-wide { grid-column: auto; } }

/* ============ Rows (sticky head + numbered list) ============ */
.pg-rows-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-6); align-items: start; }
.pg-rows-layout .section-head { position: sticky; top: 100px; }
.pg-rows { list-style: none; counter-reset: row; display: flex; flex-direction: column; }
.pg-rows li { counter-increment: row; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.pg-rows li:first-child { border-top: 1px solid var(--border); }
.pg-rows li::before { content: counter(row, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--accent-ink); }
.pg-rows h3 { font-size: 19px; margin-bottom: 6px; }
.pg-rows p { color: var(--text-muted); font-size: 15px; max-width: 58ch; }
.pg-rows .pg-price { border: 0; padding: 0; white-space: nowrap; }
@media (max-width: 760px) { .pg-rows li { grid-template-columns: 40px minmax(0, 1fr); } .pg-rows .pg-price { grid-column: 2; } }

/* ============ Steps (horizontal process) ============ */
.pg-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-2); counter-reset: st; }
.pg-steps li { counter-increment: st; position: relative; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.pg-steps li::before {
  content: counter(st); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: var(--space-2);
  border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight: 700; font-size: 15px;
}
.pg-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--space-3) + 16px); right: calc(var(--space-2) * -1); width: var(--space-2); height: 2px; background: var(--accent-line);
}
.pg-steps h3 { font-size: 17.5px; margin-bottom: 6px; }
.pg-steps p { color: var(--text-muted); font-size: 14.5px; }
html[data-skin="kids"] .pg-steps li:nth-child(4n+2)::before { background: var(--accent-2); color: #fff; }
html[data-skin="kids"] .pg-steps li:nth-child(4n+3)::before { background: var(--accent-3); color: var(--text); }
html[data-skin="kids"] .pg-steps li:nth-child(4n+4)::before { background: var(--accent-4); color: #fff; }
html[data-skin="kids"] .pg-steps li::before { border-radius: 50%; }

/* ============ Tiers (sizes / packages) ============ */
.pg-tiers { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.pg-tier { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.pg-tier.is-key { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.pg-tier .tier-tag { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .05em; text-transform: uppercase; }
.pg-tier h3 { font-size: 22px; }
.pg-tier .tier-price { font-family: var(--font-mono); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--text); line-height: 1.1; }
.pg-tier p { color: var(--text-muted); font-size: 15px; }
.pg-tier ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.pg-tier li { font-size: 14.5px; padding-left: 20px; position: relative; }
.pg-tier li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); }

/* ============ Table ============ */
.pg-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pg-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.pg-table th, .pg-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pg-table thead th { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table td:first-child { font-weight: 600; color: var(--text); }
.pg-table td { color: var(--text-muted); }
.pg-table td.num { font-family: var(--font-mono); white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.pg-table-note { margin-top: var(--space-2); font-size: 14px; color: var(--text-muted); max-width: 70ch; }

/* ============ Notice (can / cannot) ============ */
.pg-notice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.pg-notice > div { padding: var(--space-4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
.pg-notice h3 { font-size: 20px; margin-bottom: var(--space-2); display: flex; align-items: center; gap: 10px; }
.pg-notice ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pg-notice li { font-size: 15px; color: var(--text-muted); padding-left: 26px; position: relative; }
.pg-notice .yes li::before, .pg-notice .no li::before { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 700; }
.pg-notice .yes li::before { content: "+"; color: var(--accent-ink); }
.pg-notice .no { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border)); background: color-mix(in srgb, var(--accent-2) 7%, var(--surface)); }
.pg-notice .no li::before { content: "\00D7"; color: var(--accent-2); }
html[data-skin="auto"] .pg-notice .no { background-image: repeating-linear-gradient(135deg, rgba(228, 71, 43, .06) 0 10px, transparent 10px 20px); }

/* ============ Triptych (master -> mold -> cast, drawing -> model -> toy) ============ */
.pg-trip { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pg-trip li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pg-trip li:not(:last-child)::after {
  content: "\2192"; position: absolute; right: calc(var(--space-4) * -0.78); top: 34%; font-size: 22px; color: var(--accent-ink);
}
.pg-trip .work-media { aspect-ratio: 4 / 5; }
.pg-trip h3 { font-size: 19px; }
.pg-trip p { color: var(--text-muted); font-size: 15px; }

/* ============ Timeline (iterations) ============ */
.pg-timeline { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding-left: 40px; }
.pg-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2)); }
.pg-timeline li { position: relative; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.pg-timeline li::before { content: ""; position: absolute; left: -35px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.pg-timeline .ver { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-ink); }
.pg-timeline h3 { font-size: 18px; margin: 4px 0 6px; }
.pg-timeline p { color: var(--text-muted); font-size: 15px; max-width: 64ch; }

/* ============ Scale strip (figurines, models) ============ */
.pg-scale { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: end; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pg-scale figure { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pg-scale .bar { width: min(64px, 60%); height: calc(var(--h) * 2.4px); max-height: 220px; border-radius: 40% 40% 6px 6px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .15); }
.pg-scale strong { font-family: var(--font-mono); font-size: 18px; }
.pg-scale figcaption { font-size: 14px; color: var(--text-muted); }

/* ============ Related directions ============ */
.pg-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); }
.pg-related a {
  display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); transition: border-color .2s ease, transform .2s ease;
}
.pg-related a:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.pg-related strong { font-family: var(--font-display); font-size: 18px; font-weight: var(--display-weight, 700); }
.pg-related span { color: var(--text-muted); font-size: 14px; }
.pg-related em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-top: auto; }

/* ============ Final CTA band ============ */
.pg-cta {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: center;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--r); border: 1px solid var(--accent-line);
  background: linear-gradient(150deg, var(--accent-tint), transparent 70%), var(--surface);
}
.pg-cta h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 12px; text-wrap: balance; }
.pg-cta p { color: var(--text-muted); font-size: 16px; max-width: 52ch; }
.pg-cta .pg-cta-actions { display: flex; flex-direction: column; gap: 10px; }
.pg-cta .pg-cta-actions .btn { width: 100%; }
.pg-cta .contact-value { display: block; margin-top: 6px; text-align: center; }

/* ============ Home: directions grid ============ */
.dir-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.dir-group h3 { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.dir-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dir-card {
  position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 0 16px; padding: 18px 18px 18px 0;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dir-card::before { content: ""; grid-row: 1 / span 2; background: var(--swatch, var(--accent)); }
.dir-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.dir-card strong { font-family: var(--font-display); font-size: 17.5px; line-height: 1.25; }
.dir-card span { color: var(--text-muted); font-size: 14px; line-height: 1.45; margin-top: 4px; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .pg-hero-grid { grid-template-columns: 1fr; }
  .pg-art { max-width: 520px; aspect-ratio: 4 / 3; justify-self: start; }
  .pg-rows-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .pg-rows-layout .section-head { position: static; }
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-steps li::after { display: none; }
  .pg-tiers { grid-template-columns: 1fr; }
  .pg-cta { grid-template-columns: 1fr; }
  .dir-groups { grid-template-columns: 1fr; }
  .pg-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pg-steps { grid-template-columns: 1fr; }
  .pg-notice { grid-template-columns: 1fr; }
  .pg-trip { grid-template-columns: 1fr; gap: var(--space-3); }
  .pg-trip li::after { display: none; }
  .pg-trip .work-media { aspect-ratio: 16 / 10; }
  .pg-chips li { flex: 1 1 140px; }
}

/* ============ Hero line art (inline SVG in .pg-art) ============ */
.pg-art .a-grid { stroke: var(--border); stroke-width: 1; fill: none; }
.pg-art .a-line { stroke: var(--text); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-art .a-thin { stroke: var(--text-muted); stroke-width: 1.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-art .a-acc { stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-art .a-acc2 { stroke: var(--accent-2); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-art .a-fill { fill: var(--accent); stroke: none; }
.pg-art .a-fill2 { fill: var(--accent-2); stroke: none; }
.pg-art .a-fill3 { fill: var(--accent-3); stroke: none; }
.pg-art .a-fill4 { fill: var(--accent-4); stroke: none; }
.pg-art .a-soft { fill: var(--accent-tint); stroke: none; }
.pg-art .a-surf { fill: var(--surface-2); stroke: var(--text); stroke-width: 2.2; stroke-linejoin: round; }
.pg-art .a-txt { fill: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.pg-art .a-txt-acc { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.pg-art .a-hand { fill: var(--accent-2); font-family: var(--font-hand); font-size: 20px; }

/* ============ Home additions ============ */
.more-link { display: inline-block; margin-left: 18px; font-weight: 600; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more-link:hover { text-decoration-thickness: 2px; }
.footer-inner:has(> .footer-col:nth-of-type(4)) { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
@media (max-width: 1024px) { .footer-inner:has(> .footer-col:nth-of-type(4)) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .more-link { display: block; margin: 14px 0 0; }
  .footer-inner:has(> .footer-col:nth-of-type(4)) { grid-template-columns: 1fr; }
}

/* ============ Accessibility, consent banner, legal footer ============ */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
  background: var(--accent); color: #111; font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-biz { color: var(--text-muted); font-size: 13.5px; }
.footer-biz a { color: inherit; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13.5px; }
.footer-legal a, .link-btn { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .link-btn:hover { color: var(--text); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 900; max-width: 520px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  font-size: 14.5px; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; }
.consent-btn { flex: 1; justify-content: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.consent-btn:hover { border-color: var(--accent-line); }
@media (max-width: 700px) { .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

/* ============ Legal pages ============ */
.doc { padding: calc(var(--header-h, 72px) + var(--space-5)) 0 var(--space-6); }
.doc h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: var(--space-2) 0 8px; text-wrap: balance; }
.doc-updated { color: var(--text-muted); font-size: 14px; margin-bottom: var(--space-5); }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h, 72px) + 24px); font-size: 14px; }
.doc-toc ol { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-muted); }
.doc-toc a { color: var(--text-muted); }
.doc-toc a:hover { color: var(--text); }
.doc-body { max-width: 72ch; }
.doc-sec { scroll-margin-top: calc(var(--header-h, 72px) + 20px); margin-bottom: var(--space-4); }
.doc-sec h2 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 12px; }
.doc-sec p, .doc-sec li { color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.doc-sec p + p, .doc-sec ul + p, .doc-sec p + ul { margin-top: 10px; }
.doc-sec ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-biz div { display: flex; gap: 12px; }
.doc-biz dt { min-width: 120px; color: var(--text-muted); }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .doc-toc { position: static; }
}
/* keyboard users: an element that receives focus is shown even before its reveal animation runs */
.reveal:focus-within, .reveal:focus { opacity: 1 !important; transform: none !important; }