/* =====================================================================
   SHIFT PACK — landing page
   Orange #FE5816 as punctuation · ink · warm paper · navy (hero sky)
   Motion constitution: expo-out entrances · (.65,0,.35,1) wipes · linear scrub
   ===================================================================== */

:root {
  --orange: #FE5816;
  --orange-deep: #E64D0F;
  --ink: #111111;
  --black: #0B0B0B;
  --ink-soft: #1A1A1A;
  --navy: #12222E;
  --navy-deep: #0B161E;
  --paper: #F5F3EF;
  --paper-2: #EDE9E3;
  --studio: #ECECEA;
  --white: #FFFFFF;
  --text: #141414;
  --muted: #6B6862;
  --muted-dark: rgba(255, 255, 255, 0.66);
  --rule: #D9D6CF;
  --rule-strong: #BDB8AF;
  --rule-dark: #2A2A2A;
  --rule-dark-soft: rgba(255, 255, 255, 0.14);
  --wa: #25D366;

  --font-display: "Outfit", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-ar: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;

  --container: 1360px;
  --gutter: clamp(16px, 4vw, 64px);
  --section-y: clamp(80px, 10vw, 160px);
  --radius: 8px;
  --radius-pill: 999px;
  --nav-h: 80px;
  --nav-h-compact: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out */
  --ease-turn: cubic-bezier(0.65, 0, 0.35, 1);     /* wipes / crossfades */
  --t-fast: 0.2s;
  --t-med: 0.3s;

  color-scheme: light;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html:not(.lenis) { scroll-behavior: smooth; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; font-weight: 800; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[data-scheme="dark"] :focus-visible { outline-color: var(--white); }
::selection { background: var(--orange); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums; }

.skip-link { position: fixed; inset-inline-start: 16px; top: -100px; z-index: 1000; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: var(--radius-pill); transition: top var(--t-fast) var(--ease-out); }
.skip-link:focus { top: 16px; }

/* ---------- Arabic / RTL ---------- */
[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] .eyebrow, [dir="rtl"] .idx { font-family: var(--font-ar); }
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.25; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .eyebrow { font-weight: 700; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
[data-scheme="light"] { background: var(--paper); color: var(--text); }
[data-scheme="dark"] { color: var(--white); }
.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }
.bg-studio { background: var(--studio); }
.bg-ink { background: var(--ink); }
.bg-black { background: var(--black); }
.bg-navy { background: var(--navy); }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.eyebrow .idx { font-variant-numeric: tabular-nums; }
.eyebrow .idx::after { content: "—"; margin-inline-start: 12px; opacity: 0.7; }
.h-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.7rem, 8vw, 7.2rem); line-height: 0.96; letter-spacing: -0.03em; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); letter-spacing: -0.015em; }
.lead { font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.5; max-width: 58ch; color: var(--muted); }
[data-scheme="dark"] .lead { color: var(--muted-dark); }
.accent { color: var(--orange); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
.section-head .lead { margin-top: 2px; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

/* Heading underline rule (the tape motif, whispered) */
.rule-h { position: relative; padding-bottom: 18px; }
.rule-h::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 64px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .rule-h::after { transform-origin: right; }
html.no-js .rule-h::after, .rule-h.is-in::after { transform: scaleX(1); transition: transform 0.8s var(--ease-out); }

/* Masked line reveal */
.lines .line { display: block; overflow: hidden; padding-block: 0.05em; margin-block: -0.05em; }
.lines .line > span { display: block; }
.lines .w { display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--white); --fill: var(--orange); --fg-hover: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap;
  transition: color var(--t-med) var(--ease-out), transform 0.12s var(--ease-out), box-shadow var(--t-med);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translateX(-101%); transition: transform var(--t-med) var(--ease-turn); }
[dir="rtl"] .btn::before { transform: translateX(101%); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover, .btn:focus-visible { color: var(--fg-hover); }
.btn:active { transform: scale(0.98); }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .ico--arrow { transform: translateX(4px); }
[dir="rtl"] .btn .ico--arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico--arrow { transform: scaleX(-1) translateX(4px); }
.btn-primary { --bg: var(--orange); --fg: var(--ink); --fill: var(--ink); --fg-hover: var(--white); }
.btn-dark { --bg: var(--ink); --fg: var(--white); --fill: var(--orange); --fg-hover: var(--ink); }
.btn-white { --bg: var(--white); --fg: var(--ink); --fill: var(--ink); --fg-hover: var(--white); }
.btn-ghost { --bg: transparent; --fg: currentColor; --fill: currentColor; --fg-hover: var(--paper); box-shadow: inset 0 0 0 1.5px currentColor; }
[data-scheme="light"] .btn-ghost { --fg-hover: var(--white); }
[data-scheme="dark"] .btn-ghost { --fg-hover: var(--ink); }
.btn-wa { --bg: var(--wa); --fg: var(--ink); --fill: var(--ink); --fg-hover: var(--white); }
.btn-lg { min-height: 64px; padding-inline: 34px; font-size: 1.06rem; }
.btn-sm { min-height: 44px; padding-inline: 20px; font-size: 0.92rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; position: relative; padding-bottom: 3px; }
.link-arrow::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.25s var(--ease-out); }
[dir="rtl"] .link-arrow::after { transform-origin: left; }
.link-arrow:hover { color: var(--orange); }
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
[dir="rtl"] .link-arrow:hover::after { transform-origin: right; }
.link-arrow .ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
.link-arrow:hover .ico { transform: translateX(4px); }
[dir="rtl"] .link-arrow .ico { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .ico { transform: scaleX(-1) translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--white);
  transition: transform 0.45s var(--ease-out), color var(--t-med), background-color var(--t-med), border-color var(--t-med);
  border-bottom: 1px solid transparent;
}
.site-header__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height var(--t-med) var(--ease-out); }
.site-header.is-compact .site-header__inner { height: var(--nav-h-compact); }
.site-header.is-compact { background: rgba(245, 243, 239, 0.92); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-color: var(--rule); color: var(--text); }
.site-header.is-compact.scheme-dark { background: rgba(17, 17, 17, 0.82); border-color: var(--rule-dark); color: var(--white); }
.site-header.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; height: 44px; }
.brand img { height: 42px; width: auto; transition: height var(--t-med) var(--ease-out); }
.site-header.is-compact .brand img { height: 34px; }
.brand .logo-dark { display: none; }
.site-header.is-compact:not(.scheme-dark) .brand .logo-light { display: none; }
.site-header.is-compact:not(.scheme-dark) .brand .logo-dark { display: block; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav__links { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.nav__links a { font-family: var(--font-display); font-weight: 500; font-size: 0.94rem; position: relative; padding: 6px 0; opacity: 0.92; }
.nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 0.25s var(--ease-out); }
[dir="rtl"] .nav__links a::after { transform-origin: left; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
[dir="rtl"] .nav__links a:hover::after, [dir="rtl"] .nav__links a.is-active::after { transform-origin: right; }
.nav__links a:hover { color: var(--orange); }
.lang { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-pill); border: 1px solid currentColor; isolation: isolate; }
.lang button { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.06em; padding: 6px 11px; border-radius: var(--radius-pill); opacity: 0.72; transition: color var(--t-med), opacity var(--t-med); min-width: 40px; }
.lang button[aria-pressed="true"] { color: var(--ink); opacity: 1; }
.lang button:hover { opacity: 1; }
.lang__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 40px; border-radius: var(--radius-pill); background: var(--orange); transition: transform 0.25s var(--ease-out), width 0.25s var(--ease-out); }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; place-items: center; position: relative; }
.burger span { position: absolute; left: 14px; width: 20px; height: 2px; background: currentColor; transition: transform 0.35s var(--ease-out), opacity 0.2s; }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 24px; }
.burger span:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1100px) {
  .nav__links, .nav .btn { display: none; }
  .burger { display: grid; }
}
@media (max-width: 480px) { .brand img, .site-header.is-compact .brand img { height: 32px; } .lang button { padding: 6px 8px; min-width: 34px; } .lang__thumb { width: 34px; } }

/* Mobile menu */
.menu { position: fixed; inset: 0; z-index: 890; background: var(--ink); color: var(--white); display: grid; align-content: center; padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) var(--gutter) 40px; clip-path: inset(0 0 100% 0); visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu__links { display: grid; gap: 4px; }
.menu__links a { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 8.5vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; display: inline-flex; gap: 18px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule-dark); }
.menu__links a small { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; color: var(--orange); font-variant-numeric: tabular-nums; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 36px; color: var(--muted-dark); font-size: 0.95rem; }
.menu__foot a:hover { color: var(--white); }

/* ---------- Hero (cover) ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); min-height: min(100svh, 960px); display: grid; align-content: end; padding-top: calc(var(--nav-h) + 56px); isolation: isolate; }
.hero__plate { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform-origin: 50% 40%; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 34, 46, 0.5) 0%, rgba(18, 34, 46, 0.15) 30%, rgba(11, 22, 30, 0.75) 72%, var(--navy-deep) 100%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding-bottom: clamp(40px, 6vw, 88px); }
.hero__content { display: grid; gap: clamp(20px, 2.6vw, 30px); max-width: 1000px; }
.hero__title { color: var(--white); }
.hero__title .accent { color: var(--orange); }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.42rem); color: rgba(255, 255, 255, 0.8); max-width: 44ch; line-height: 1.5; }
.hero__imprint { display: grid; gap: 14px; justify-items: end; text-align: end; color: rgba(255, 255, 255, 0.62); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hero__imprint .cue { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.5); }
html.js .hero__cue-anim .cue { animation: cue 1.8s var(--ease-turn) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; z-index: 2; }
[dir="rtl"] .hero__rule { transform-origin: right; }
html.no-js .hero__rule { transform: scaleX(1); }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__imprint { justify-items: start; text-align: start; }
  .hero__imprint .cue { display: none; }
}

/* ---------- Sommaire strip ---------- */
.sommaire { border-bottom: 1px solid var(--rule); }
.sommaire__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sommaire__item { display: grid; gap: 10px; padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px); border-inline-start: 1px solid var(--rule); }
.sommaire__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.sommaire__item .idx { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: 0.8rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.sommaire__item h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
.sommaire__item p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 900px) {
  .sommaire__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sommaire__item { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline: 0; }
  .sommaire__item:nth-child(-n+2) { border-top: 0; }
  .sommaire__item:nth-child(even) { padding-inline-start: 20px; border-inline-start: 1px solid var(--rule); }
}

/* ---------- Media plates ---------- */
.plate { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
picture { display: block; width: 100%; height: 100%; }
.plate > picture, .hero__plate picture, .sweep__base picture, .sweep__color picture { position: absolute; inset: 0; }
.gitem .plate > img { position: static; height: auto; }
[data-scheme="dark"] .plate { background: var(--ink-soft); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate img.is-loading { opacity: 0; }
.plate img { transition: opacity var(--t-med) var(--ease-out); }
.plate__cap { position: absolute; inset-inline: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 6px; background: rgba(17, 17, 17, 0.7); color: var(--white); backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; }

/* ---------- Intro (manifesto) ---------- */
.intro__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.intro__text { display: grid; gap: 22px; }
.intro__collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); gap: 14px; aspect-ratio: 1 / 1.08; }
.intro__collage .plate { height: 100%; }
.intro__collage .plate:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 8; }
.intro__collage .plate:nth-child(2) { grid-column: 8 / 13; grid-row: 3 / 10; }
.intro__collage .plate:nth-child(3) { grid-column: 3 / 9; grid-row: 8 / 13; }
.intro__collage .fig { position: absolute; inset-inline-end: 0; top: 0; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .intro__grid { grid-template-columns: minmax(0, 1fr); } .intro__collage { aspect-ratio: 1 / 1.05; } }

/* ---------- Products rail ---------- */
.products { overflow: hidden; }
.rail { margin-top: clamp(32px, 4vw, 56px); }
.rail__track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.prod { position: relative; width: clamp(300px, 34vw, 500px); flex: none; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--ink-soft); border: 1px solid var(--rule-dark); }
.prod .plate { border-radius: 0; aspect-ratio: 1 / 1.02; }
.prod__body { padding: clamp(20px, 2.2vw, 30px); display: grid; gap: 10px; align-content: start; }
.prod__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.prod__tag { color: var(--orange); font-weight: 700; }
.prod__idx { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.prod h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); position: relative; display: inline-block; }
.prod h3::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -4px; width: 100%; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
[dir="rtl"] .prod h3::after { transform-origin: right; }
.prod:hover h3::after { transform: scaleX(1); }
.prod p { color: var(--muted-dark); font-size: 1rem; }
.prod__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; margin-top: 8px; color: var(--white); }
.prod__cta .ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
.prod:hover .prod__cta .ico { transform: translateX(4px); }
[dir="rtl"] .prod__cta .ico { transform: scaleX(-1); }
[dir="rtl"] .prod:hover .prod__cta .ico { transform: scaleX(-1) translateX(4px); }
.rail__foot { display: flex; align-items: center; gap: 20px; margin: 26px var(--gutter) 0; }
.rail__progress { flex: 1; height: 2px; background: var(--rule-dark); overflow: hidden; }
.rail__progress i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .rail__progress i { transform-origin: right; }
.rail__count { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--muted-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1023px) {
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .prod { scroll-snap-align: start; width: min(76vw, 400px); }
}

/* ---------- Services (sticky media) ---------- */
.services__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.services__media { position: sticky; top: calc(var(--nav-h-compact) + 32px); }
.services__stack { position: relative; aspect-ratio: 4 / 4.4; max-height: min(72vh, 680px); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.services__stack .plate { position: absolute; inset: 0; border-radius: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.5s var(--ease-turn), transform 0.6s var(--ease-out); }
.services__stack .plate.is-active { opacity: 1; transform: scale(1); }
.services__stack .plate img { height: 100%; }
.services__num { position: absolute; inset-inline-start: 20px; top: 16px; height: 1em; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.services__num div { transition: transform 0.45s var(--ease-out); }
.services__num span { display: block; height: 1em; }
.services__list { display: grid; }
.svc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px clamp(16px, 2vw, 28px); padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--rule); transition: opacity 0.4s var(--ease-out); }
.svc:last-child { border-bottom: 1px solid var(--rule); }
.svc.is-dim { opacity: 0.42; }
.svc__idx { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--orange); font-variant-numeric: tabular-nums; padding-top: 6px; }
.svc__body { display: grid; gap: 12px; }
.svc__body h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.svc__body p { color: var(--muted); max-width: 48ch; }
.svc__bullets { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }
.svc__bullets li { display: inline-flex; align-items: center; gap: 8px; }
.svc__bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.svc__mobile { display: none; }
@media (max-width: 900px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .services__media { display: none; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__mobile { display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; }
  .svc.is-dim { opacity: 1; }
}

/* ---------- Comparison (light sweep) ---------- */
.compare__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sweep { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--studio); }
.sweep__base, .sweep__color { position: absolute; inset: 0; }
.sweep__base img, .sweep__color img { width: 100%; height: 100%; object-fit: cover; }
.sweep__base img { filter: grayscale(1) brightness(0.55); }
.sweep__color { clip-path: inset(0 100% 0 0); }
[dir="rtl"] .sweep__color { clip-path: inset(0 0 0 100%); }
html.no-js .sweep__color { clip-path: inset(0); }
.sweep__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--orange); box-shadow: 0 0 18px rgba(254, 88, 22, 0.6); transform: translateX(-2px); }
.sweep__cap { position: absolute; bottom: 16px; padding: 8px 12px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(17, 17, 17, 0.75); color: var(--white); backdrop-filter: blur(6px); }
.sweep__cap--bad { left: 16px; color: rgba(255, 255, 255, 0.8); }
.sweep__cap--good { right: 16px; color: var(--orange); }
.compare__cols { display: grid; gap: 0; }
.compare__col { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid var(--rule); }
.compare__col:last-child { border-bottom: 1px solid var(--rule); }
.compare__col h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 12px; }
.compare__col h3 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.compare__col--good h3 .dot { background: var(--orange); }
.compare__col--bad { color: var(--muted); }
.compare__col li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.compare__col li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; }
.compare__col--bad li::before { background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6862' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.compare__col--good li::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
@media (max-width: 900px) { .compare__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sweep__cap { font-size: 0.72rem; max-width: 60%; } .sweep__cap--bad { top: 16px; bottom: auto; } }

/* Figure 1 — anatomy */
.anatomy { margin-top: clamp(64px, 8vw, 120px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.anatomy__fig { position: relative; }
.anatomy__fig .plate { aspect-ratio: 1 / 1.05; }
.anatomy__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.anatomy__svg .lead { stroke: var(--orange); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.anatomy__svg .dot { fill: var(--orange); }
.anatomy__svg .end { fill: var(--white); stroke: var(--orange); stroke-width: 1.5; }
.anatomy__svg .num { font-family: var(--font-display); font-weight: 700; font-size: 9px; fill: var(--orange); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.02em; }
html.no-js .anatomy__svg .lead { stroke-dashoffset: 0; }
.anatomy__text { display: grid; gap: 18px; }
.anatomy__list { display: grid; }
.anatomy__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.anatomy__list li:last-child { border-bottom: 1px solid var(--rule); }
.anatomy__list li .idx { color: var(--orange); font-size: 0.78rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Why (rows) ---------- */
.why__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.why__rows { display: grid; }
.why__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--rule); transition: padding-inline-start 0.3s var(--ease-out); }
.why__row:last-child { border-bottom: 1px solid var(--rule); }
.why__row:hover { padding-inline-start: 6px; }
.why__row .idx { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--orange); font-variant-numeric: tabular-nums; padding-top: 7px; }
.why__row h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.why__row p { grid-column: 2; color: var(--muted); max-width: 52ch; }
.why__media { position: sticky; top: calc(var(--nav-h-compact) + 32px); display: grid; gap: 14px; }
.why__media .plate { aspect-ratio: 4 / 4.2; }
.why__media .fig { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 900px) { .why__grid { grid-template-columns: minmax(0, 1fr); } .why__media { position: static; order: -1; } .why__media .plate { aspect-ratio: 16 / 10; } }

/* ---------- Offer (orange page) ---------- */
.offer { background: transparent; color: var(--ink); overflow: hidden; }
.offer__page { position: absolute; inset: 0; background: var(--orange); z-index: -1; }
.offer { isolation: isolate; }
.offer__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.offer__text { display: grid; gap: 22px; }
.offer .eyebrow { color: var(--ink); }
.offer .h2 { color: var(--white); }
.offer .lead { color: rgba(17, 17, 17, 0.82); }
.offer__list { display: grid; }
.offer__list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(17, 17, 17, 0.22); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.offer__list li:last-child { border-bottom: 1px solid rgba(17, 17, 17, 0.22); }
.offer__list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FE5816' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.offer__note { font-size: 0.92rem; color: rgba(17, 17, 17, 0.72); }
.offer .btn-ghost { --fg-hover: var(--orange); }
.offer__visual { position: relative; }
.offer__frame { padding: 12px; background: var(--white); border-radius: var(--radius); margin-top: calc(-1 * clamp(56px, 8vw, 120px)); }
.offer__frame .plate { aspect-ratio: 4 / 4.6; border-radius: 4px; }
.offer__frame .plate img { transform: scale(1.08); }
.offer__caption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px 0; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .offer__grid { grid-template-columns: minmax(0, 1fr); } .offer__frame { margin-top: 0; } }

/* ---------- Coverage (58) ---------- */
.coverage { background: var(--navy); color: var(--white); overflow: hidden; }
.coverage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.coverage__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(9rem, 26vw, 22rem); line-height: 0.85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; position: relative; display: inline-block; }
.coverage__num .fill { position: absolute; inset: 0; color: var(--orange); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); }
html.no-js .coverage__num .fill { clip-path: inset(0); }
.coverage__unit { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.7rem); margin-top: 12px; }
.coverage__text { display: grid; gap: 22px; padding-bottom: 12px; }
.coverage__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--rule-dark-soft); }
.fact { padding: 24px 20px 0 0; display: grid; gap: 6px; border-inline-start: 1px solid var(--rule-dark-soft); padding-inline-start: 20px; }
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; color: var(--orange); font-variant-numeric: tabular-nums; }
.fact__label { color: var(--muted-dark); font-size: 0.95rem; }
@media (max-width: 900px) { .coverage__grid { grid-template-columns: minmax(0, 1fr); } .coverage__facts { grid-template-columns: minmax(0, 1fr); } .fact { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule-dark-soft); padding-top: 18px; } .fact:first-child { border-top: 0; } }

/* ---------- Process (line draw) ---------- */
.process__track { position: relative; }
.process__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.process__svg .base { stroke: var(--rule); stroke-width: 2; fill: none; }
.process__svg .draw { stroke: var(--orange); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
html.no-js .process__svg .draw { stroke-dashoffset: 0; }
.process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); position: relative; }
.step { display: grid; gap: 12px; padding-top: 40px; position: relative; }
.step__node { position: absolute; top: 12px; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule-strong); transition: background var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.step__node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--orange); opacity: 0; transform: scale(0.6); transition: opacity 0.5s, transform 0.5s var(--ease-out); }
.step.is-on .step__node { background: var(--orange); border-color: var(--orange); transform: scale(1.1); }
.step.is-on .step__node::after { opacity: 0.6; transform: scale(1); }
.step .idx { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--orange); font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.step p { color: var(--muted); font-size: 0.98rem; }
.process__cta { margin-top: clamp(36px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: 28px; border-top: 1px solid var(--rule); }
.process__cta p { color: var(--muted); max-width: 52ch; }
@media (max-width: 900px) {
  .process__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-inline-start: 36px; }
  .step { padding-top: 0; }
  .step__node { inset-inline-start: -36px; top: 6px; }
}

/* ---------- Gallery ---------- */
.gallery__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); align-items: start; }
.gallery__col { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.gallery__col:nth-child(2) { padding-top: clamp(40px, 6vw, 96px); }
.gitem { position: relative; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); cursor: zoom-in; text-align: start; }
.gitem img { width: 100%; height: auto; }
.gitem figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px 0; font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--muted); transition: color var(--t-fast); }
.gitem:hover figcaption { color: var(--orange); }
.gitem figcaption svg { width: 16px; height: 16px; flex: none; }
.gitem { background: transparent; }
.gitem .plate { border-radius: var(--radius); }
@media (max-width: 760px) { .gallery__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery__col { display: contents; } .gallery__col:nth-child(2) { padding-top: 0; } }

.insta { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.insta__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 24px; }
.insta__head h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.insta__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.post { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.post img { width: 100%; height: 100%; object-fit: cover; }
.post__ig { position: absolute; inset-inline-end: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: translateY(-6px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.post__ig svg { width: 16px; height: 16px; }
.post:hover .post__ig, .post:focus-visible .post__ig { opacity: 1; transform: none; }
@media (max-width: 900px) { .insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(11, 11, 11, 0.94); display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: 82vh; width: auto; height: auto; border-radius: var(--radius); object-fit: contain; }
.lightbox__cap { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--white); display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast); }
.lightbox__btn:hover { background: var(--orange); color: var(--ink); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 20px; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 64px; translate: none; } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } }

/* ---------- Contact ---------- */
.contact { background: var(--black); color: var(--white); overflow: hidden; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact__panel { display: grid; gap: 28px; position: relative; }
.contact__phone { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); transition: color var(--t-fast); display: inline-block; }
.contact__phone:hover { color: var(--orange); }
.contact__rows { display: grid; }
.contact__rows a, .contact__rows div { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 10px 0; border-top: 1px solid var(--rule-dark); transition: padding-inline-start var(--t-fast) var(--ease-out), color var(--t-fast); }
.contact__rows li:last-child > * { border-bottom: 1px solid var(--rule-dark); }
.contact__rows a:hover { padding-inline-start: 8px; color: var(--orange); }
.contact__rows .lbl { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); min-width: 100px; }
.contact__rows .val { font-weight: 600; }
.contact__rows .arr { margin-inline-start: auto; width: 18px; height: 18px; color: var(--muted-dark); transition: transform var(--t-fast) var(--ease-out); }
.contact__rows a:hover .arr { transform: rotate(-45deg); color: var(--orange); }
[dir="rtl"] .contact__rows .arr { transform: scaleX(-1); }
[dir="rtl"] .contact__rows a:hover .arr { transform: scaleX(-1) rotate(-45deg); }
.contact__cutout { position: absolute; inset-inline-end: -6%; top: -18%; width: clamp(220px, 26vw, 420px); opacity: 0.95; pointer-events: none; }
.contact__cutout img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.form { position: relative; background: var(--white); color: var(--text); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 6px; border: 1.5px solid var(--rule-strong); background: var(--paper); color: var(--text); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-inline-end: 42px; }
[dir="rtl"] .field select { background-position: left 14px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(254, 88, 22, 0.18); background: var(--white); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #C62828; }
.field__err { display: none; font-size: 0.82rem; color: #B71C1C; }
.field.is-invalid .field__err { display: block; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.form__privacy { font-size: 0.84rem; color: var(--muted); }
.form__fields { display: grid; gap: 16px; transition: opacity var(--t-fast), transform var(--t-fast); }
.form.is-preview .form__fields { opacity: 0; pointer-events: none; transform: translateY(-12px); position: absolute; inset: 0; }
.form__preview { display: none; gap: 16px; }
.form.is-preview .form__preview { display: grid; }
.form__preview h3 { font-size: 1.15rem; }
.bubble { position: relative; background: #DCF8C6; color: #1B1B1B; padding: 16px 18px; border-radius: 12px 12px 12px 2px; white-space: pre-wrap; font-size: 0.96rem; line-height: 1.55; }
[dir="rtl"] .bubble { border-radius: 12px 12px 2px 12px; }
.form__preview .btn-group { gap: 10px; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } .contact__cutout { position: static; width: min(60%, 320px); margin-inline-start: auto; margin-top: -8px; } }
@media (max-width: 520px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer (colophon) ---------- */
.footer { background: var(--black); color: var(--white); padding-block: clamp(48px, 6vw, 80px) 28px; border-top: 1px solid var(--rule-dark); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr)); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--rule-dark); }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__brand img { height: 48px; width: auto; }
.footer__brand p { color: var(--muted-dark); max-width: 36ch; }
.footer__col h4 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; font-weight: 700; }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a { color: var(--muted-dark); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--white); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; font-size: 0.86rem; color: var(--muted-dark); }
.footer__bottom a { color: var(--white); }
@media (max-width: 760px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mobile WhatsApp bar ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: none; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(245, 243, 239, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 0.4s var(--ease-out); }
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar .btn { width: 100%; }
.mobile-bar small { display: block; font-size: 0.72rem; opacity: 0.75; font-weight: 500; }
@media (max-width: 767px) { html.js .mobile-bar { display: block; } }

/* ---------- Motion helpers ---------- */
html.js [data-reveal], html.js [data-plate] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hero__rule { transform: scaleX(1); }
  .rule-h::after { transform: scaleX(1); }
  .sweep__color { clip-path: inset(0) !important; }
  .coverage__num .fill { clip-path: inset(0) !important; }
  .process__svg .draw { stroke-dashoffset: 0 !important; }
  .anatomy__svg .lead { stroke-dashoffset: 0 !important; }
}