/* eTook — colours sampled from the official logo: navy #263A88, orange #F6A71B (+ #FDBA4D),
   on a warm paper ground. Vazirmatn (fa) / Inter (en), self-hosted.
   Logical properties throughout so one stylesheet serves rtl and ltr.
   Motion: transform/opacity/clip-path only; all of it switched off under prefers-reduced-motion. */
@font-face { font-family: Vazirmatn; src: url(fonts/Vazirmatn.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }

:root {
  --navy: #263A88; --navy-2: #1B2A63; --ink: #141E4A; --navy-tint: #E8EBF5;
  --orange: #F6A71B; --orange-2: #FDBA4D; --orange-ink: #9A5D00;
  --bg: #FBFAF7; --paper: #F4F1EA; --text: #1C2033; --muted: #5D6173; --rule: #E3DED3;
  --err: #B3261E; --ok: #1E6B45;
  --r: 10px; --r-sm: 6px; --wrap: 1240px;
  --font: Vazirmatn, Tahoma, sans-serif;
  --sp: clamp(4rem, 6.5vw, 6rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hdr: 76px;
  /* aliases used by the form styles */
  --blue: var(--navy); --blue-2: var(--navy-2); --blue-tint: var(--navy-tint); --accent: var(--orange); --accent-2: var(--orange-ink);
}
:root:lang(en) { --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 1rem); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.03rem/1.9 var(--font); overflow-x: clip; }
:root:lang(en) body { line-height: 1.65; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--navy); text-underline-offset: .22em; }
h1, h2, h3 { color: var(--ink); line-height: 1.35; margin: 0 0 .55em; font-weight: 800; text-wrap: balance; }
h3 { font-size: 1.18rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -5rem; background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 100; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: .93rem; margin-top: 1.5rem; }
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* type scale */
.display { font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.75rem); font-weight: 900; line-height: 1.22; margin-bottom: .45em; }
:root:lang(en) .display { line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.h-xl { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); font-weight: 900; line-height: 1.3; }
:root:lang(en) .h-xl { line-height: 1.1; letter-spacing: -.025em; font-weight: 800; }
.lead { font-size: clamp(1.06rem, .98rem + .4vw, 1.28rem); color: #3B4054; max-width: 60ch; }
.kicker { display: inline-flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 1.1rem; }
.kicker::before { content: ""; inline-size: 2rem; block-size: 3px; border-radius: 3px; background: var(--orange); }
.kicker--light { color: #fff; }
.tag { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--orange); padding: .15rem .6rem; border-radius: 3px; margin-bottom: .8rem; }

/* buttons */
.btn { --lift: 0px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .75rem 1.5rem;
  border-radius: var(--r); border: 0; font: 700 1rem/1.3 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s; transform: translateY(var(--lift)); }
.btn:hover { --lift: -2px; }
.btn:active { transform: translateY(0) scale(.98); }
.btn--accent { background: var(--orange); color: #1A1300; box-shadow: 0 10px 24px -12px rgba(246,167,27,.75); }
.btn--accent:hover { background: var(--orange-2); box-shadow: 0 16px 30px -14px rgba(246,167,27,.9); }
.btn--ink, .btn--primary { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -14px rgba(27,42,99,.8); }
.btn--ink:hover, .btn--primary:hover { background: var(--navy-2); }
.btn--glass { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.2); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--ghost:hover { background: var(--navy-tint); }
.btn--lg { min-height: 58px; padding-inline: 1.9rem; font-size: 1.05rem; }
.btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .93rem; }
.btn--text { background: none; border: 0; color: var(--navy); padding: .5rem 0; min-height: 44px; text-decoration: underline; font-weight: 600; box-shadow: none; }
.btn[disabled] { opacity: .65; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 800; color: var(--navy); text-decoration: none; }
.link::after { content: "←"; display: inline-block; color: var(--orange-ink); transition: transform .4s var(--ease); }
:root:lang(en) .link::after { content: "→"; }
.link:hover::after { transform: translateX(-6px); }
:root:lang(en) .link:hover::after { transform: translateX(6px); }
.link:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; background: rgba(251,250,247,.94); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 1px 0 var(--rule); transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.hdr__in { display: flex; align-items: center; gap: 1rem; block-size: var(--hdr); }
.logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.logo img { block-size: 42px; inline-size: auto; }
.logo__light { display: none; }
.hdr.is-over { background: transparent; box-shadow: none; backdrop-filter: none; }
.hdr.is-over .logo__dark { display: none; }
.hdr.is-over .logo__light { display: block; }
.hdr.is-over .lang { color: #fff; }
.hdr.is-over .burger, .hdr.is-over .burger::before, .hdr.is-over .burger::after { background: #fff; }
.hdr.is-hidden { transform: translateY(-100%); }
.menu { margin-inline-start: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: var(--r); }
.menu summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { content: ""; display: block; inline-size: 22px; block-size: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
.burger { position: relative; } .burger::before { position: absolute; top: -7px; } .burger::after { position: absolute; top: 7px; }
.menu[open] .burger { background: transparent !important; }
.menu[open] .burger::before { transform: translateY(7px) rotate(45deg); }
.menu[open] .burger::after { transform: translateY(-7px) rotate(-45deg); }
.menu nav { position: absolute; inset-inline-end: 0; top: calc(100% + .6rem); background: #fff; border-radius: var(--r); box-shadow: 0 24px 50px -20px rgba(20,30,74,.45); min-inline-size: 16rem; padding: .5rem; }
.menu nav a { display: flex; align-items: center; min-height: 46px; padding-inline: .9rem; text-decoration: none; color: var(--text); border-radius: var(--r-sm); font-weight: 600; }
.menu nav a:hover { background: var(--paper); }
.menu nav a[aria-current="page"] { color: var(--navy); background: var(--navy-tint); }
.hdr__end { display: flex; align-items: center; gap: .4rem; }
.lang { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; border-radius: var(--r-sm); color: var(--ink); }
@media (max-width: 560px) {
  :root { --hdr: 66px; }
  .logo img { block-size: 32px; }
  .hdr__in { gap: .25rem; }
  .hdr__end .btn { padding-inline: .7rem; font-size: .82rem; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .menu { margin-inline-start: 2rem; }
  .js .menu summary { display: none; }
  .menu > nav { position: static; display: block; box-shadow: none; padding: 0; min-inline-size: 0; background: none; }
  .menu ul { display: flex; gap: .2rem; }
  .menu nav a { font-size: .97rem; padding-inline: .8rem; background: none !important; position: relative; color: var(--text); white-space: nowrap; }
  :root:lang(en) .menu nav a { padding-inline: .65rem; font-size: .94rem; }
  .hdr.is-over .menu nav a { color: #fff; }
  .menu nav a::after { content: ""; position: absolute; inset-inline: .8rem; bottom: 6px; block-size: 2px; background: var(--orange); transform: scaleX(0); transform-origin: var(--from, right); transition: transform .45s var(--ease); }
  :root:lang(en) .menu nav a::after { --from: left; }
  .menu nav a:hover::after, .menu nav a[aria-current="page"]::after { transform: scaleX(1); }
  .hdr__end { margin-inline-start: auto; }
}

/* ---------- home hero ---------- */
.hero { position: relative; min-block-size: max(660px, 100svh); display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); color: #fff; isolation: isolate; overflow: hidden; background: var(--ink); }
.hero__bg, .phero__bg, .cta__bg { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.hero__bg img, .phero__bg img, .cta__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__bg img, .phero__bg img { animation: kenburns 22s var(--ease) both; }
.hero::before, .phero--img::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--shade, 270deg), rgba(14,22,58,.95) 0%, rgba(20,30,74,.8) 45%, rgba(20,30,74,.3) 100%),
              linear-gradient(0deg, rgba(14,22,58,.9) 0%, transparent 50%); }
:root:lang(en) .hero::before, :root:lang(en) .phero--img::before { --shade: 90deg; }
.hero__in { align-self: center; padding-block: calc(var(--hdr) + 3rem) 2.5rem; }
.hero .display { color: #fff; max-inline-size: 15em; }
.hero .lead { color: rgba(255,255,255,.86); }
.hero__flow { min-inline-size: 0; padding-block: 1.4rem 2.2rem; border-top: 1px solid rgba(255,255,255,.18); }
.hero__flow-h { font-size: .85rem; font-weight: 700; color: var(--orange-2); margin-bottom: 1rem; }
.hero__flow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.hero__flow ol::before { content: ""; position: absolute; inset-inline: 1.1rem; top: 1.1rem; block-size: 2px; background: rgba(255,255,255,.2); }
.hero__flow ol::after { content: ""; position: absolute; inset-inline-start: 0; top: calc(1.1rem - 1px); block-size: 4px; inline-size: 18%; border-radius: 4px;
  background: linear-gradient(var(--flow-dir, 270deg), transparent, var(--orange) 70%, #fff); animation: flow 6s linear infinite; }
:root:lang(en) .hero__flow ol::after { --flow-dir: 90deg; }
.hero__flow li { position: relative; display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; font-weight: 600; color: rgba(255,255,255,.88); }
.hero__flow li span { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff;
  background: var(--ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); animation: node 6s linear infinite; animation-delay: calc(var(--i) * 1.2s); }
@media (max-width: 760px) {
  .hero__flow ol { grid-template-columns: 1fr; gap: .45rem; }
  .hero__flow ol::before { inset-inline: auto; inset-inline-start: 1.1rem; inset-block: 1.1rem; inline-size: 2px; block-size: auto; }
  .hero__flow ol::after { display: none; }
  .hero__flow li { flex-direction: row; align-items: center; }
}

/* ---------- inner page hero ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--hdr) + clamp(3rem, 8vw, 6rem)) clamp(3rem, 6vw, 5rem); background: var(--paper); }
.phero--img { min-block-size: min(78svh, 720px); display: flex; align-items: flex-end; color: #fff; background: var(--ink); }
.phero--img .display { color: #fff; }
.phero--img .lead, .phero--img .note { color: rgba(255,255,255,.86); }
.phero .display { max-inline-size: 16em; }

/* form pages: the form is the point, keep the header short */
.phero--compact.phero--img { min-block-size: min(52svh, 460px); }
.phero--compact .display { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
.lang:lang(fa) { font-family: Vazirmatn, Tahoma, sans-serif; font-size: 1rem; padding-inline: .5rem; }

/* ---------- marquee ---------- */
.marquee { background: var(--orange); color: var(--ink); overflow: hidden; padding-block: 1.05rem; font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); }
.marquee__track { display: flex; inline-size: max-content; animation: marquee 50s linear infinite; }
.marquee ul { display: flex; align-items: center; gap: 2.2rem; padding-inline-end: 2.2rem; white-space: nowrap; }
.marquee__dot { inline-size: 11px; block-size: 11px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }

/* ---------- sections ---------- */
.sec { padding-block: var(--sp) calc(var(--sp) * 1.08); position: relative; }
.sec--paper { background: var(--paper); }
.sec--form { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sp); background: var(--paper); }
.sec__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-inline-size: 46rem; }
.sec__head--row { max-inline-size: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.sec__head--row .muted { max-inline-size: 30rem; margin: 0; }
.sec__head .h-xl, .sec__head--row .h-xl { margin-bottom: 0; }
.split { display: grid; gap: 2rem 5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; align-items: start; } }

/* problems */
.problems__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .problems__grid { grid-template-columns: 5fr 6fr; gap: 6rem; } }
.problems__img { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(20,30,74,.55); }
.problems__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.symptoms { margin-block: 2rem 1.25rem; border-top: 1px solid var(--rule); }
.symptoms li { display: flex; align-items: baseline; gap: 1.2rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule); font-size: 1.12rem; font-weight: 700; color: var(--ink); transition: padding .45s var(--ease), color .3s, opacity .9s var(--ease), transform 1.1s var(--ease); }
.symptoms li:hover { padding-inline-start: .7rem; color: var(--navy); }
.symptoms span { font-size: .85rem; font-weight: 800; color: var(--orange-ink); min-inline-size: 2rem; }

/* zig-zag services */
.zig { display: grid; gap: clamp(3.5rem, 6vw, 5.5rem); }
.zig__row { display: grid; gap: 2rem; align-items: center; scroll-margin-top: calc(var(--hdr) + 2rem); }
@media (min-width: 900px) {
  .zig__row { grid-template-columns: 7fr 5fr; gap: 5rem; }
  .zig__row:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .zig__row:nth-child(even) .zig__img { order: 2; }
}
.zig__img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; }
.zig__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.zig__n { display: block; font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--orange); margin-bottom: 1rem; }
.zig__text h2, .zig__text h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; }
.zig__text p { color: #3B4054; max-inline-size: 52ch; }
.zig__out { background: var(--paper); border-inline-start: 4px solid var(--orange); padding: 1rem 1.2rem; border-radius: var(--r-sm); color: var(--ink) !important; }
.zig__out strong { display: block; font-size: .85rem; color: var(--orange-ink); margin-bottom: .2rem; }

/* method line: fills as the section scrolls (site.js sets --p) */
.method { --p: 0; display: grid; gap: 2rem; position: relative; }
@media (min-width: 980px) {
  .method { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .method::before, .method::after { content: ""; position: absolute; inset-inline: 1.6rem; top: 1.5rem; block-size: 3px; border-radius: 3px; background: var(--rule); }
  .method::after { background: var(--orange); transform: scaleX(var(--p)); transform-origin: var(--from, right); }
  :root:lang(en) .method::after { --from: left; }
}
.method li { position: relative; }
.method__n { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 900; font-size: 1.1rem; margin-bottom: 1.2rem; box-shadow: 0 0 0 8px var(--bg); }
.sec--paper .method__n { box-shadow: 0 0 0 8px var(--paper); }
.method h3 { font-size: 1.1rem; }
.method p { color: var(--muted); font-size: .97rem; margin: 0; }

/* projects: one large, two stacked */
.proj { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .proj { grid-template-columns: 7fr 5fr; } .proj__item:first-child { grid-row: span 2; } }
.proj__item { position: relative; border-radius: var(--r); overflow: hidden; min-block-size: 320px; isolation: isolate; color: #fff; display: flex; align-items: flex-end; }
@media (min-width: 900px) { .proj__item:first-child { min-block-size: 560px; } }
.proj__img { position: absolute; inset: 0; z-index: -2; }
.proj__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.proj__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,22,58,.95) 0%, rgba(14,22,58,.5) 48%, rgba(14,22,58,.05) 100%); }
.proj__item:hover .proj__img img { transform: scale(1.06); }
.proj__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.proj__body h3 { color: #fff; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem); font-weight: 900; margin-bottom: .3rem; }
.proj__body p:last-child { margin: 0; color: rgba(255,255,255,.86); max-inline-size: 40ch; }

/* expert network band */
.band { display: grid; background: var(--ink); color: rgba(255,255,255,.86); }
@media (min-width: 960px) { .band { grid-template-columns: 11fr 9fr; } }
.band__img { min-block-size: 360px; overflow: hidden; }
.band__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.band__text { padding: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 5rem); align-self: center; }
.band__text h2 { color: #fff; }
.band__text p { max-inline-size: 46ch; font-size: 1.08rem; }

/* closing CTA over Tehran at dusk */
.cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; padding-block: clamp(5rem, 9vw, 7.5rem); background: var(--ink); }
.cta::before { background: radial-gradient(ellipse at center, rgba(20,30,74,.7) 0%, rgba(14,22,58,.93) 75%); }
.cta__in { max-inline-size: 52rem; display: flex; flex-direction: column; align-items: center; }
.cta .display { color: #fff; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.8rem); }
.cta p { color: rgba(255,255,255,.86); font-size: 1.1rem; max-inline-size: 46ch; }
.cta .actions { justify-content: center; }
.cta__direct { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; font-weight: 700; }
.cta__direct a { color: #fff; text-decoration-color: var(--orange); }
.arrow { inline-size: 120px; margin-bottom: 1.5rem; fill: none; stroke: var(--orange); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
:root[dir="rtl"] .arrow { transform: scaleX(-1); }
.arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .arrow path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .2s; }
.js .arrow path + path { transition-delay: 1.1s; transition-duration: .7s; }
.js .arrow.in path { stroke-dashoffset: 0; }

/* about */
.statement { max-inline-size: 66rem; }
.statement__text { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.15rem); line-height: 1.75; font-weight: 500; color: var(--ink); margin: 0; }
:root:lang(en) .statement__text { line-height: 1.4; letter-spacing: -.01em; }
.principles { border-top: 1px solid var(--rule); }
.principles li { display: flex; gap: 1.5rem; padding-block: 1.6rem; border-bottom: 1px solid var(--rule); }
.principles li > span { font-weight: 900; color: var(--orange-ink); font-size: 1rem; min-inline-size: 2.2rem; }
.principles p { margin: 0; font-size: 1.08rem; }
.principles h3 { margin-bottom: .2rem; }
.founder__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .founder__grid { grid-template-columns: 4fr 8fr; gap: 5rem; } }
.founder__mark { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--paper)); display: grid; place-items: center; max-inline-size: 340px; box-shadow: 0 40px 80px -50px rgba(20,30,74,.6); }
.founder__mark img { inline-size: 52%; animation: bob 6s ease-in-out infinite; }
.founder__role { color: var(--orange-ink); font-weight: 700; margin-top: -.4rem; }

/* contact */
.contact { display: grid; gap: 3.5rem; }
.contact__direct { display: grid; gap: 1.5rem; margin: 0; }
@media (min-width: 760px) { .contact__direct { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4.5rem; } }
.contact__direct dt { color: var(--muted); font-size: .9rem; font-weight: 600; }
.contact__direct dd { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; }
.contact__direct a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.routes { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .routes { grid-template-columns: 1fr 1fr; } }
.route { background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -45px rgba(20,30,74,.6); }
.route figure { aspect-ratio: 16 / 9; overflow: hidden; }
.route figure img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.route:hover figure img { transform: scale(1.05); }
.route > div { padding: 1.8rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.route .btn { margin-top: auto; }

/* privacy */
.policy { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .policy { grid-template-columns: 17rem 1fr; gap: 5rem; } .policy__toc { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; } }
.policy__toc ol { border-inline-start: 2px solid var(--rule); }
.policy__toc a { display: block; padding: .35rem 1rem; color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 600; margin-inline-start: -2px; border-inline-start: 2px solid transparent; }
.policy__toc a:hover { color: var(--navy); border-color: var(--orange); }
.policy__body { max-inline-size: 70ch; }
.policy__body section { padding-block: 1.6rem; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--hdr) + 1.5rem); }
.policy__body h2 { font-size: 1.3rem; display: flex; gap: .8rem; align-items: baseline; }
.policy__body h2 span { color: var(--orange-ink); font-size: .9rem; }
.policy__body p { margin: 0; color: #343A4E; }

/* footer */
.ftr { background: var(--ink); color: #B9C0DA; padding-top: clamp(3.5rem, 7vw, 5.5rem); font-size: .97rem; }
.ftr__top { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 1.6fr 1.3fr 1fr 1.1fr; } }
.ftr__brand img { inline-size: 170px; block-size: auto; margin-bottom: 1rem; }
.ftr__brand p { max-inline-size: 36ch; }
.ftr h2 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.ftr a { color: #E6E9F5; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.ftr a:hover { color: var(--orange-2); }
.ftr__cta { color: var(--orange) !important; font-weight: 800; }
.ftr__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-block: .6rem; font-size: .88rem; }

/* film grain, very light */
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- motion ---------- */
.display .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .1em; margin-block: -.1em; }
.display .w > span { display: inline-block; animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .reveal-img[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .reveal-img[data-reveal] img { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.js .reveal-img[data-reveal].in { clip-path: inset(0 0 0 0); }
.js .reveal-img[data-reveal].in img { transform: scale(1); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes marquee { to { transform: translateX(var(--mq, -50%)); } }
:root[dir="rtl"] .marquee__track { --mq: 50%; }
@keyframes flow { 0% { inset-inline-start: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { inset-inline-start: 82%; opacity: 0; } }
@keyframes node { 0%, 18%, 100% { background: var(--ink); color: #fff; } 4%, 14% { background: var(--orange); color: var(--ink); } }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-3deg); } }

/* ---------- forms ---------- */
.formwrap { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .formwrap:not(.formwrap--single) { grid-template-columns: minmax(0, 1fr) 20rem; } }
.formwrap--single { max-width: 48rem; }
.mform { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2.25rem); min-inline-size: 0; }
.step { border: 0; padding: 0; margin: 0 0 2.5rem; min-inline-size: 0; }
.js .step { margin: 0; }
.step__title { font-size: 1.25rem; font-weight: 800; color: var(--blue); padding: 0; margin-bottom: 1.5rem; display: block; float: none; inline-size: 100%; }
.step__of { display: block; font-size: .85rem; color: var(--muted); font-weight: 600; margin-bottom: .2rem; }
.step__nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
html:not(.js) .step__nav [data-next], html:not(.js) .step__nav [data-prev], html:not(.js) [data-not-sure] { display: none; }
html:not(.js) .step:not(:last-of-type) .step__nav { display: none; }
.progress { display: flex; gap: .4rem; margin-bottom: 1.75rem; }
.progress li { flex: 1; display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; color: var(--muted); }
.progress li::before { content: ""; block-size: 4px; border-radius: 2px; background: var(--rule); }
.progress li span { display: none; }
.progress li em { font-style: normal; display: none; }
@media (min-width: 640px) { .progress li em { display: block; } }
.progress li.is-done::before { background: var(--blue); }
.progress li.is-now::before { background: var(--accent); }
.progress li.is-now { color: var(--blue); font-weight: 700; }

.field { margin: 0 0 1.25rem; border: 0; padding: 0; min-inline-size: 0; }
.field > label, .field > legend { display: block; font-weight: 700; margin-bottom: .4rem; padding: 0; color: var(--text); }
.req, .opt { font-size: .76rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; margin-inline-start: .35rem; vertical-align: middle; white-space: nowrap; }
.req { background: #FCEFD6; color: #6E4700; }
.opt { color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  inline-size: 100%; min-height: 48px; padding: .65rem .85rem; border: 1px solid #8A9BA6; border-radius: var(--r);
  background: #fff; color: var(--text); font: inherit; font-size: 1rem; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
input[type="file"] { font: inherit; padding: .6rem; border: 1px dashed #8A9BA6; border-radius: var(--r); inline-size: 100%; background: var(--bg); min-height: 48px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--blue); }
[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: 0 0 0 1px var(--err); }
fieldset[aria-invalid="true"] { box-shadow: none; }
.hint { font-size: .88rem; color: var(--muted); margin: .35rem 0 0; }
.err { color: var(--err); font-size: .9rem; font-weight: 600; margin: .35rem 0 0; }
.grid2 { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.contact .err { grid-column: 1 / -1; }
.choices__list { display: grid; gap: .5rem; }
.choices--inline .choices__list { display: flex; flex-wrap: wrap; }
.choice { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; font-weight: 500; }
.choices--inline .choice { border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .95rem; min-height: 44px; align-items: center; }
.choices--cards .choice { border: 1px solid var(--rule); border-radius: 8px; padding: .9rem 1rem; }
.choice small { display: block; color: var(--muted); font-size: .86rem; font-weight: 400; margin-top: .1rem; }
.choice input { inline-size: 1.2rem; block-size: 1.2rem; margin: .35rem 0 0; accent-color: var(--blue); flex: none; }
.choices--inline .choice input { margin: 0; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.choice span { flex: 1; }
.cond { border-inline-start: 4px solid var(--accent); padding-inline-start: 1rem; margin: 0 0 1.5rem; }
.cond h3 { font-size: 1.05rem; }
.rows .row { display: grid; gap: .5rem; margin-bottom: .5rem; }
/* fixed last column: rows with and without a Remove button keep identical field widths */
@media (min-width: 640px) { .rows .row { grid-template-columns: 1fr 1fr 1.3fr 5.5rem; } .rows .row--1 { grid-template-columns: 1fr 5.5rem; } }
.rows [data-remove] { justify-self: start; }
.cvpair { border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1rem .25rem; margin-bottom: 1.25rem; }
.cvpair.is-invalid { border-color: var(--err); }
.cvpair > .err { margin-bottom: 1rem; }
.errsum { border: 2px solid var(--err); background: #FDF1F0; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.errsum p { font-weight: 700; color: var(--err); margin-bottom: .4rem; }
.errsum ul { list-style: disc; padding-inline-start: 1.25rem; }
.errsum a { color: var(--err); }
.form-ok { background: #fff; border: 1px solid var(--rule); border-block-start: 4px solid var(--ok); border-radius: 10px; padding: 2rem; }
.form-ok__id { font-family: Inter, monospace; font-size: 1.05rem; color: var(--text); }

.summary { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 1.25rem 1.25rem .5rem; font-size: .93rem; }
@media (min-width: 1000px) { .summary { position: sticky; top: 5.5rem; } }
@media (max-width: 999px) { .summary { display: none; } } /* the review step covers this on small screens */
.summary h2 { font-size: 1.05rem; }
.summary dl, .review { margin: 0; }
.summary dt, .review dt { color: var(--muted); font-size: .82rem; font-weight: 600; }
.summary dd, .review dd { margin: 0 0 .75rem; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.review { background: var(--bg); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.review h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.review h3:first-child { margin-top: 0; }

.mform { border: 0; box-shadow: 0 40px 80px -60px rgba(20,30,74,.55); border-radius: 14px; }
.summary { border: 0; box-shadow: 0 30px 60px -50px rgba(20,30,74,.5); border-radius: 14px; }
.form-ok { border: 0; border-block-start: 5px solid var(--orange); box-shadow: 0 40px 80px -60px rgba(20,30,74,.55); }
.errsum, .alert { border-radius: var(--r); }



@media (max-width: 1099px) {
  /* menu opens as a full-width sheet under the header, never off-screen */
  .menu { position: static; }
  .menu nav { position: fixed; inset-inline: 0; top: var(--hdr); border-radius: 0 0 var(--r) var(--r); min-inline-size: 0; padding: .5rem 1rem 1rem; max-block-size: calc(100svh - var(--hdr)); overflow-y: auto; }
  .menu nav a { min-height: 50px; font-size: 1.05rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .menu nav li:last-child a { border-bottom: 0; }
}
.contact__direct a { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- phones: tighter rhythm (audit 2026-10-19: home was 13.6 screens, 150-220px dead gaps) ---------- */
@media (max-width: 760px) {
  :root { --sp: 2.9rem; }
  body { font-size: 1rem; }
  .sec { padding-block: var(--sp) calc(var(--sp) + .25rem); }
  .sec__head, .sec__head--row { margin-bottom: 1.6rem; gap: .5rem; }
  .actions { margin-top: 1.4rem; }
  .btn--lg { min-height: 52px; padding-inline: 1.3rem; font-size: 1rem; }
  .lead { font-size: 1.02rem; }
  .kicker { margin-bottom: .7rem; }

  /* hero fits one screen: steps become a swipeable strip */
  .hero { min-block-size: 0; }
  .hero__in { padding-block: calc(var(--hdr) + 1.4rem) 1.3rem; }
  .hero__flow { padding-block: 1rem 1.3rem; }
  .hero__flow-h { margin-bottom: .6rem; }
  .hero__flow ol { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .hero__flow ol::-webkit-scrollbar { display: none; }
  .hero__flow ol::before { display: none; }
  .hero__flow li { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .5rem; scroll-snap-align: start; white-space: nowrap; font-size: .88rem;
    background: rgba(255,255,255,.08); border-radius: 999px; padding: .35rem .9rem .35rem .4rem; }
  :root[dir="rtl"] .hero__flow li { padding: .35rem .4rem .35rem .9rem; }
  .hero__flow li span { inline-size: 1.9rem; block-size: 1.9rem; font-size: .8rem; }

  /* inner-page photo headers: no tall empty photo above the title */
  .phero { padding-block: calc(var(--hdr) + 2.5rem) 2rem; }
  .phero--img { min-block-size: 0; padding-block: calc(var(--hdr) + 6.5rem) 1.9rem; }

  .marquee { padding-block: .75rem; font-size: .95rem; }

  .problems__grid { gap: 1.75rem; }
  .problems__img { aspect-ratio: 16 / 10; }
  .symptoms { margin-block: 1.3rem 1rem; }
  .symptoms li { padding-block: .75rem; font-size: 1rem; gap: .9rem; }

  .zig { gap: 2.75rem; }
  .zig__row { gap: 1.1rem; }
  .zig__img { aspect-ratio: 16 / 10; }
  .zig__n { font-size: 2.6rem; margin-bottom: .4rem; -webkit-text-stroke-width: 1.5px; }
  .zig__text p { margin-bottom: .6rem; }

  /* method: compact numbered rail */

  /* home services: swipe strip of cards instead of five stacked rows */
  :root:lang(en) .display { font-size: 2.05rem; letter-spacing: -.03em; }
  :root:lang(en) .hero .lead { font-size: .98rem; }
  .zig--swipe { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; padding-block-end: .5rem; }
  .zig--swipe::-webkit-scrollbar { display: none; }
  .zig--swipe .zig__row { flex: 0 0 82%; scroll-snap-align: start; background: #fff; border-radius: var(--r); overflow: hidden; gap: 0; align-content: start; box-shadow: 0 20px 40px -32px rgba(20,30,74,.55); }
  .zig--swipe .zig__img { border-radius: 0; aspect-ratio: 16 / 10; }
  .zig--swipe .zig__text { padding: 1rem 1.1rem 1.1rem; }
  .zig--swipe .zig__n { font-size: 1.9rem; }
  .zig--swipe h3 { font-size: 1.12rem; }
  .zig--swipe .zig__text p { font-size: .95rem; }
  .zig--swipe .js [data-reveal], .zig--swipe [data-reveal] { transition-delay: 0s; }
  .method { gap: 0; }
  .method li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; padding-block-end: 1.3rem; }
  .method li::before { content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px); top: 2.6rem; bottom: .2rem; inline-size: 2px; background: var(--rule); }
  .method li:last-child::before { display: none; }
  .method__n { grid-row: span 2; inline-size: 2.5rem; block-size: 2.5rem; font-size: .95rem; margin: 0; box-shadow: none !important; }
  .method h3 { margin-bottom: .15rem; font-size: 1.02rem; }

  .proj { gap: .8rem; }
  .proj__item, .proj__item:first-child { min-block-size: 230px; }
  .proj__item:first-child { min-block-size: 280px; }
  .proj__body { padding: 1.2rem; }

  .band__img { min-block-size: 0; aspect-ratio: 16 / 10; }
  .band__text { padding: 2.4rem 1.25rem 2.8rem; }

  .cta { padding-block: 4rem 4.5rem; }
  .arrow { inline-size: 84px; margin-bottom: 1rem; }
  .cta__direct { margin-top: 1.2rem; }

  .statement__text { font-size: 1.2rem; }
  .split { gap: 1rem; }
  .principles li { padding-block: 1rem; gap: 1rem; }
  .founder__grid { gap: 1.25rem; grid-template-columns: 6.5rem 1fr; align-items: start; }
  .founder__mark { max-inline-size: 6.5rem; }

  .contact { gap: 2.2rem; }
  .route > div { padding: 1.3rem; }

  .policy__toc { display: none; }
  .policy__body section { padding-block: 1.1rem; }

  .ftr { padding-top: 2.8rem; }
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; }
  .ftr__brand, .ftr__top > div:last-child { grid-column: 1 / -1; }
  .ftr__brand img { inline-size: 130px; }
  .ftr a { min-height: 40px; font-size: .93rem; }
  .ftr__bar { margin-top: 1.8rem; }

  .sec--form { padding-block: 1.5rem 3rem; }
  .js [data-reveal] { transform: translateY(16px); transition-duration: .5s, .6s; transition-delay: calc(var(--d, 0) * 50ms); }
  .js .reveal-img[data-reveal] { transition-duration: .9s; }
}

/* Safety net (see site.js settle): final state wins once the animation was due. */
.motion-done .display .w > span { animation: none !important; }
.js [data-reveal].done { opacity: 1 !important; transform: none !important; transition: none !important; }
.js .reveal-img[data-reveal].done { clip-path: none !important; }
.js .reveal-img[data-reveal].done img { transform: none !important; transition: none !important; }
.js .arrow.done path { stroke-dashoffset: 0 !important; transition: none !important; }

/* Reduced motion: drop large movement (parallax, zoom, scrolling marquee, rising words, header slide)
   but keep fades and wipes, which carry no vestibular load. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bg img, .phero__bg img, .founder__mark img, .marquee__track, .hero__flow ol::after { animation: none !important; }
  .hero__flow li span { animation-duration: 6s; }
  .display .w > span { animation-name: fadein; animation-duration: .9s; }
  .js [data-reveal] { transform: none; transition: opacity 1s ease; transition-delay: calc(var(--d, 0) * 110ms); }
  .js .reveal-img[data-reveal] img { transform: none; }
  .hdr.is-hidden { transform: none; }
  .btn, .zig__img img, .proj__img img, .route figure img { transition-property: background-color, box-shadow, color; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
}
@keyframes fadein { from { opacity: 0; } }
@media print { .hdr, .ftr, .summary, .step__nav, .grain, .marquee { display: none; } }
@media (max-width: 760px) {
  .hero::before, .phero--img::before { background: linear-gradient(0deg, rgba(14,22,58,.96) 0%, rgba(20,30,74,.86) 55%, rgba(20,30,74,.55) 100%); }
}
.cta__direct a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- form mobile audit (2026-10-23) ---- */
/* Long English labels must wrap rather than push buttons off-screen. */
.btn { text-align: center; }
.btn--text { white-space: normal; text-align: start; block-size: auto; line-height: 1.5; }
/* Inline privacy link inside the consent sentence: larger hit area without changing the line. */
.consent a { padding-block: .7rem; margin-block: -.7rem; }
@media (max-width: 560px) {
  /* Step navigation stacks: the forward action full width on top, back below it. */
  .step__nav { flex-direction: column-reverse; align-items: stretch; gap: .6rem; }
  .step__nav > span { display: none; }
  .step__nav .btn { inline-size: 100%; }
  /* Repeatable rows read as separate entries once their fields stack. */
  .rows .row { background: var(--paper); border-radius: var(--r-sm); padding: .6rem; }
  .rows .row + .row { margin-top: .6rem; }
  .rows [data-remove] { justify-self: end; }
}
/* Theme resets (Hello Elementor: label { line-height: 1 }) must not cramp form labels; the consent
   label is a checkbox row, not a field caption. */
.field label, .choice { line-height: 1.55; }
.field > label.choice { display: flex; font-weight: 500; margin-bottom: 0; }
.consent .choice span { line-height: 1.7; }