/* English handwriting for notes (Latin letters only; Hebrew falls through to Oriya). Ms Madi, SIL OFL */
@font-face {
  font-family: 'Ms Madi';
  src: url('assets/fonts/MsMadi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0041-005A, U+0061-007A, U+00C0-00FF, U+0152-0153;
  size-adjust: 140%;
}
/* snap. website. Tokens come straight from the brand book. */
@font-face {
  font-family: 'Oriya Litman Ricardo';
  src: url('assets/fonts/OriyaLitmanRicardo-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --deep: #145250;
  --ink: #2f4645;
  --sage: #759290;
  --sand: #f6f2e7;   /* cream background */
  --yellow: #f9e17e; /* highlights */
  --concrete: #919292;
  --paper: #ffffff;
  --sand-deep: #e4dccb;

  --f-main: 'Google Sans', 'IBM Plex Sans Hebrew', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-latin: 'Bricolage Grotesque', 'Google Sans', system-ui, sans-serif;
  --f-hand: 'Ms Madi', 'Oriya Litman Ricardo', 'Comic Sans MS', cursive;

  --c-deep: #145250; --c-ink: #2f4645; --c-cream: #f6f2e7; --c-yellow: #f9e17e; --c-paper: #ffffff;
  --bg-now: #145250; /* the page opens on the deep green hero */
  --hand-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --snap: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 68px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
html { background: var(--bg-now); transition: background-color .7s ease; }
body { margin: 0; background: transparent; color: var(--ink); font-family: var(--f-main); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.27 0 0 0 0 0.27 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.025em; }
p, li, blockquote, figcaption, summary, .hand { text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.hand { font-family: var(--f-hand); font-weight: 400; }
.ic * { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
svg { overflow: visible; }
.skip { position: absolute; top: -60px; right: 16px; background: var(--deep); color: var(--sand); padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }

/* hand marks */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark > svg { position: absolute; pointer-events: none; }
.mark { isolation: isolate; }
.mark.under > svg { left: -3%; right: -3%; bottom: -.1em; width: 106%; height: .36em; color: var(--yellow); z-index: -1; }
.mark.under .hm { stroke-width: 26; }
.mark.circle > svg { inset: -22% -10% -18% -10%; width: 120%; height: 140%; color: var(--yellow); }
.mark.circle .hm { stroke-width: 3.5; }
.hm { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--deep); color: var(--sand); text-decoration: none; font-weight: 700; font-size: 17px; padding: 14px 26px; border-radius: var(--hand-radius); transition: transform .25s var(--snap), background .2s; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:hover { transform: translateY(-3px) rotate(-1deg); background: var(--ink); }
.btn:active { transform: scale(.97); }
.btn-sm { padding: 9px 16px; font-size: 15px; }
.btn-sm svg { width: 18px; height: 18px; }
.btn-light { background: var(--c-yellow); color: var(--c-deep); }
.btn-light:hover { background: var(--paper); }
.btn-ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.btn-ghost:hover { background: color-mix(in srgb, var(--sand) 12%, transparent); }
.link-under { font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; }
.link-under:hover { color: var(--deep); background-size: 100% 8px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; color: var(--ink); background: color-mix(in srgb, var(--bg-now) 88%, transparent); transition: background-color .7s ease, color .4s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; padding-top: env(safe-area-inset-top, 0px); }
.nav.scrolled { border-bottom-color: var(--sand-deep); }
.nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { color: var(--deep); display: block; }
.nav-logo svg { height: 34px; width: auto; aspect-ratio: 1100 / 414; display: block; }
.nav-links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--deep); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang { font: inherit; font-family: var(--f-latin); font-weight: 800; font-size: 13px; letter-spacing: .06em; background: none; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.lang:hover { background: var(--ink); color: var(--sand); }

/* hero */
.hero { padding-block: 72px 110px; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-text { display: grid; gap: 24px; justify-items: start; }
.eyebrow { font-size: 14px; font-weight: 500; color: var(--sage); letter-spacing: .02em; }
.hero-title { font-weight: 700; font-size: clamp(60px, 12vw, 170px); line-height: .95; letter-spacing: -.045em; color: var(--deep); }
.hero-lead { font-size: clamp(18px, 1.8vw, 21px); max-width: 30em; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--sage); font-size: 22px; transform: rotate(-2deg); margin-top: -4px; }
.hero-note svg { width: 56px; height: 38px; transform: scaleX(-1) rotate(-20deg); }
[dir="ltr"] .hero-note svg { transform: rotate(20deg); }
.hero-visual { position: relative; justify-self: center; width: min(340px, 100%); }
.reel { position: relative; aspect-ratio: 9 / 16; width: 100%; max-width: 300px; margin-inline: auto; border-radius: 26px; background: radial-gradient(120% 70% at 30% 20%, var(--sage) 0%, var(--deep) 58%, var(--ink) 100%); color: var(--sand); transform: rotate(3deg); box-shadow: 0 40px 60px -36px rgba(20, 82, 80, .75); overflow: hidden; }
.reel .tape { position: absolute; top: -6px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-4deg); background: color-mix(in srgb, var(--sand) 75%, var(--paper)); opacity: .9; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 100%, 4% 96%, 0 70%, 3% 40%, 0 12%); z-index: 2; }
.reel-top { position: absolute; top: 30px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; direction: ltr; }
.reel-top svg { height: 22px; width: auto; aspect-ratio: 1100 / 414; }
.rec { display: flex; align-items: center; gap: 6px; font-family: var(--f-latin); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.reel-body { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-play { width: 70px; height: 70px; color: color-mix(in srgb, var(--sand) 70%, transparent); }
.reel-cap { position: absolute; bottom: 44px; left: 18px; right: 18px; text-align: center; font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: -.02em; }
.boxed { background: var(--yellow); color: var(--deep); padding: 0 8px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sticker { position: absolute; width: 116px; height: 116px; top: 8%; left: -56px; color: var(--deep); background: var(--sand); border-radius: 50%; }
.sticker text { font-family: var(--f-latin); font-weight: 800; font-size: 11.5px; letter-spacing: .2em; fill: var(--deep); }
.spin { animation: spin 22s linear infinite; transform-origin: 60px 60px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* marquee */
.marquee { background: var(--deep); color: var(--sand); overflow: hidden; padding-block: 16px; direction: ltr; }
.marquee-track { display: flex; gap: 28px; width: max-content; animation: marquee 40s linear infinite; font-weight: 700; font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.marquee-track i { font-style: normal; color: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sections */
.sec { padding-block: 104px; }
.kicker { font-family: var(--f-hand); color: var(--deep); font-size: 30px; line-height: 1.2; margin-bottom: 4px; }
.about .kicker { color: var(--sage); }
.sec-title { font-weight: 700; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; color: var(--deep); }
.sec-head { margin-bottom: 52px; }
.sec-head.row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }

/* about */
.about { color: var(--ink); }
.about-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.about-body { display: grid; gap: 28px; }
.big-p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; letter-spacing: -.01em; }
.big-p strong { color: var(--deep); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; }
.facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.facts svg { width: 26px; height: 26px; color: var(--sage); }
.sig { font-size: 28px; color: var(--sage); transform: rotate(-3deg); justify-self: start; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { position: relative; background: var(--paper); border-radius: 10px; padding: 30px 28px 32px; display: grid; gap: 12px; align-content: start; transition: transform .3s var(--snap); }
.svc:hover { transform: translateY(-6px) rotate(-.6deg); }
.svc-ic { width: 54px; height: 54px; color: var(--deep); }
.svc h3 { font-size: 23px; color: var(--deep); }
.svc p { font-size: 16px; }
.svc-hi { background: var(--deep); color: var(--sand); }
.svc-hi h3, .svc-hi .svc-ic { color: var(--sand); }
.tag { position: absolute; top: 22px; left: 22px; color: var(--yellow); font-size: 20px; transform: rotate(-6deg); }

/* process */
.process { }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.steps li { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--deep); padding-top: 18px; }
.step-n { font-family: var(--f-hand); font-size: 44px; line-height: 1; color: var(--sage); }
.steps h3 { font-size: 26px; color: var(--deep); }

/* work */
.work-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tile { text-decoration: none; display: grid; gap: 10px; align-content: start; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .tile-media { background: var(--c-ink); }
.tile-play { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-cream) 90%, transparent); color: var(--c-deep); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: transform .3s var(--snap); }
.tile-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
[dir="rtl"] .tile-play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.tile:hover .tile-play { transform: scale(1.1); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-media { outline: 3px solid var(--c-yellow); outline-offset: 4px; }
.tile-wide .tile-media { aspect-ratio: 16 / 9; }
.tile-wide .tile-play { width: 76px; height: 76px; }
.tile-wide .tile-play svg { width: 30px; height: 30px; }
.work-feature { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: 56px; }
.work-feature-text { display: grid; gap: 12px; }
.work-feature-title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--deep); }
.work-feature .work-note { margin-top: 4px; }
.work-more { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vbox { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
.vbox::backdrop { background: rgba(16, 40, 39, .86); backdrop-filter: blur(6px); }
.vbox video { display: block; max-width: 92vw; max-height: 88vh; max-height: 88svh; width: auto; height: auto; border-radius: 14px; background: #000; }
.vbox.wide video { width: min(92vw, 1280px); }
.vbox-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-cream); color: var(--c-deep); cursor: pointer; }
.vbox-x svg { width: 20px; height: 20px; }
.tile-media { aspect-ratio: 9 / 16; max-width: 100%; border-radius: 16px; display: grid; place-items: center; color: var(--sand); transition: transform .3s var(--snap); position: relative; overflow: hidden; }
.tile:hover .tile-media { transform: translateY(-6px) rotate(-1.2deg); }
.tile-media svg { width: 52px; height: 52px; }
.t1 { background: linear-gradient(160deg, var(--sage), var(--deep)); }
.t2 { background: linear-gradient(200deg, var(--ink), var(--deep)); }
.t3 { background: linear-gradient(160deg, var(--deep), var(--sage)); }
.t4 { background: linear-gradient(180deg, var(--concrete), var(--ink)); }
.tile-cap { font-weight: 400; font-size: 14px; line-height: 1.35; color: var(--ink); }
.tile-cap b { display: block; font-weight: 700; font-size: 15px; color: var(--deep); }
.work-note { color: var(--sage); font-size: 20px; margin-top: 22px; }

/* fit */
.fit { padding-top: 0; }
.fit-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fit-col { border-radius: 12px; padding: 40px 36px; }
.fit-col.yes { background: var(--deep); color: var(--sand); }
.fit-col.no { background: transparent; box-shadow: inset 0 0 0 2px var(--sand-deep); }
.fit-title { font-size: clamp(28px, 3vw, 38px); margin-bottom: 22px; }
.fit-col.yes .fit-title { color: var(--paper); }
.fit-col.no .fit-title { color: var(--deep); }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 18px; }
.fit-col li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.fit-col svg { width: 26px; height: 26px; }
.fit-col.yes svg { color: var(--yellow); }
.fit-col.no svg { color: var(--concrete); }

/* faq */
.faq { }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-list { display: grid; }
.faq details { border-bottom: 1.5px solid var(--sand-deep); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 700; font-size: 20px; color: var(--deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 26px; height: 26px; flex: none; transition: transform .3s var(--snap); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 36em; font-size: 17px; }

/* contact */
.contact { color: var(--ink); text-align: center; }
.contact-in { display: grid; justify-items: center; gap: 22px; }
.contact-title { font-size: clamp(48px, 8vw, 104px); line-height: 1; color: var(--deep); letter-spacing: -.045em; }
.contact-lead { font-size: clamp(19px, 2vw, 23px); }
.contact-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* footer */
.foot { background: var(--ink); color: var(--sage); }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.foot-logo { height: 30px; width: auto; aspect-ratio: 1100 / 414; color: var(--sand); }

/* floating whatsapp (mobile) */
.wa-float { --deep: var(--c-yellow); --sand: var(--c-deep); position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: calc(18px + env(safe-area-inset-left, 0px)); width: 58px; height: 58px; border-radius: 50%; background: var(--deep); color: var(--sand); display: none; place-items: center; box-shadow: 0 12px 24px -10px rgba(20, 82, 80, .7); z-index: 60; }
.wa-float svg { width: 28px; height: 28px; }

/* entrance: the snap */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-text > *, .js .hero-visual { animation: snapIn .6s var(--snap) both; }
  .js .hero-text > :nth-child(2) { animation-delay: .06s; }
  .js .hero-text > :nth-child(3) { animation-delay: .12s; }
  .js .hero-text > :nth-child(4) { animation-delay: .18s; }
  .js .hero-text > :nth-child(5) { animation-delay: .24s; }
  .js .hero-visual { animation-delay: .2s; }
  @keyframes snapIn { from { transform: translateY(14px) scale(.97); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spin, .marquee-track, .rec i { animation: none; }
  .btn, .svc, .tile-media, .faq summary svg { transition: none; }
}

/* responsive */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
  .about-in, .faq-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .sec { padding-block: 72px; }
  .hero { padding-block: 32px 56px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { width: min(260px, 80%); }
  .fit-in { grid-template-columns: minmax(0, 1fr); }
  .wa-float { display: grid; }
  .nav-actions .btn-sm span { display: none; }
}
@media (max-width: 480px) {
  .svc-grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .fit-col { padding: 30px 24px; }
}

/* ---------- process: scroll-scrubbed phone "video" ---------- */
.scrolly { position: relative; height: 420vh; }
.scrolly-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: grid; align-items: center; overflow: hidden; }
.scrolly-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; width: 100%; }
.scrolly-text { display: grid; gap: 14px; align-content: center; }
.sc-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.sc-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; opacity: .32; transition: opacity .35s, transform .35s var(--snap); }
.sc-steps li.is-on { opacity: 1; transform: translateX(-6px); }
[dir="ltr"] .sc-steps li.is-on { transform: translateX(6px); }
.sc-steps h3 { font-size: 26px; color: var(--deep); }
.sc-steps p { font-size: 16px; }
.sc-bar { height: 3px; background: var(--sand); border-radius: 3px; overflow: hidden; max-width: 420px; }
.sc-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--deep); }

.phone { position: relative; height: min(calc(100vh - var(--nav-h) - 72px), 600px); height: min(calc(100svh - var(--nav-h) - 72px), 600px); width: auto; aspect-ratio: 9 / 18.5; border-radius: 42px; background: var(--ink); padding: 12px; box-shadow: 0 50px 70px -40px rgba(20, 82, 80, .8), inset 0 0 0 2px color-mix(in srgb, var(--sand) 18%, transparent); transform: rotate(-3deg) translateY(calc((var(--p, 0) - .5) * -30px)); }
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: var(--ink); z-index: 3; }
.scr { position: absolute; inset: 12px; border-radius: 32px; overflow: hidden; opacity: 0; transition: opacity .3s; display: grid; align-content: start; padding: 54px 18px 18px; gap: 14px; }
.scr.is-on { opacity: 1; }
.scr-label { font-family: var(--f-hand); font-size: 22px; line-height: 1.1; }

.scr-0 { background: var(--sand); color: var(--deep); }
.sc-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sc-tiles i { aspect-ratio: 1; border-radius: 10px; background: var(--paper); opacity: clamp(.25, calc(var(--lp, 0) * 7 - var(--i)), 1); transform: scale(clamp(.86, calc(.86 + (var(--lp, 0) * 7 - var(--i)) * .14), 1)); }
.sc-tiles i:nth-child(3n+1) { background: var(--sage); }
.sc-tiles i:nth-child(4) { background: var(--deep); }
.sc-tiles i:nth-child(5) { background: var(--yellow); }
.sc-lens { position: absolute; width: 74px; height: 74px; color: var(--deep); top: calc(80px + var(--lp, 0) * 220px); left: calc(16px + var(--lp, 0) * 150px); }

.scr-1 { background: var(--paper); color: var(--deep); }
.sc-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc-cal i { aspect-ratio: 1; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--sand-deep); position: relative; }
.sc-cal i::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--sage); opacity: clamp(0, calc(var(--lp, 0) * 22 - var(--i)), 1); transform: scale(clamp(0, calc(var(--lp, 0) * 22 - var(--i)), 1)); }
.sc-cal i:nth-child(5n+2)::after { background: var(--deep); border-radius: 4px; }
.sc-cal i:nth-child(7n+4)::after { background: var(--yellow); }
.sc-check { width: 70px; height: 70px; color: var(--deep); justify-self: center; margin-top: 10px; opacity: clamp(0, calc(var(--lp, 0) * 5 - 4), 1); }

.scr-2 { background: radial-gradient(120% 70% at 30% 20%, var(--sage) 0%, var(--deep) 58%, var(--ink) 100%); color: var(--sand); align-content: center; justify-items: center; text-align: center; }
.sc-prog { position: absolute; top: 46px; left: 18px; right: 18px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sand) 30%, transparent); direction: ltr; }
.sc-prog span { display: block; height: 100%; width: calc(var(--lp, 0) * 100%); background: var(--sand); border-radius: 3px; }
.sc-logo { width: 70%; height: auto; aspect-ratio: 1100 / 414; transform: scale(calc(.7 + var(--lp, 0) * .3)) rotate(calc((1 - var(--lp, 0)) * -6deg)); }
.sc-loop { width: 80%; height: auto; }
.sc-loop path { fill: none; stroke: var(--sand); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--lp, 0) * 1.6)); }
.sc-words { font-weight: 700; font-size: 26px; line-height: 1.3; }
.sc-words span { display: inline-block; opacity: clamp(0, calc(var(--lp, 0) * 5 - 1.4 - var(--i)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--lp, 0) * 5 - 1.4 - var(--i)), 1)) * 14px)); }

.scr-3 { background: var(--deep); color: var(--sand); }
.sc-count { font-family: var(--f-latin); font-weight: 800; font-variation-settings: 'wdth' 80; font-size: 54px; line-height: 1; letter-spacing: -.03em; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
.sc-chart { width: 100%; height: 120px; }
.sc-grid { fill: none; stroke: color-mix(in srgb, var(--sand) 18%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-line { fill: none; stroke: var(--sand); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp, 0)); }
.sc-hearts { position: absolute; bottom: 40px; left: 22px; width: 60px; height: 120px; direction: ltr; }
.sc-hearts svg { position: absolute; bottom: 0; width: 28px; height: 28px; color: var(--yellow); left: calc(var(--i) * 16px); opacity: min(clamp(0, calc(var(--lp, 0) * 3 - var(--i) * .7 + .4), 1), clamp(0, calc(1.6 - var(--lp, 0) * 3 + var(--i) * .7), 1)); transform: translateY(calc((var(--lp, 0) * 3 - var(--i) * .7) * -60px)); }
.sc-note { position: absolute; bottom: 16px; right: 20px; font-size: 11px; opacity: .6; }

@media (max-width: 860px) {
  .scrolly-in { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .scrolly-text { text-align: center; justify-items: center; }
  .scrolly-text .sec-title { font-size: 30px; }
  .scrolly-text .kicker { display: none; }
  .sc-steps { margin: 0; }
  .sc-steps li { display: none; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .sc-steps li.is-on { display: grid; transform: none; }
  .sc-steps li .step-n { display: none; }
  .sc-bar { width: 220px; }
  .phone { height: min(calc(100svh - var(--nav-h) - 230px), 470px); order: -1; }
}

/* ================= scroll scenes =================
   --sp : 0..1 while a section crosses the viewport (set by main.js)
   --pp : 0..1 across a pinned section's sticky span
   --page: 0..1 for the whole page                       */

/* page as a reel: progress bar under the nav */
.reel-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: color-mix(in srgb, var(--deep) 12%, transparent); direction: ltr; }
.reel-progress span { display: block; height: 100%; width: calc(var(--page, 0) * 100%); background: var(--yellow); box-shadow: 0 0 0 .5px var(--deep); border-radius: 0 3px 3px 0; }
[dir="rtl"] .reel-progress { direction: rtl; }
[dir="rtl"] .reel-progress span { border-radius: 3px 0 0 3px; }

/* hero: the reel card tilts away and the title slides as you leave */
.hero .reel { transform: rotate(calc(3deg + var(--sp, .5) * 0deg + max(0, var(--sp, .5) - .5) * 28deg)) translateY(calc(max(0, var(--sp, .5) - .5) * -160px)) scale(calc(1 - max(0, var(--sp, .5) - .5) * .25)); }
.hero .hero-title { transform: translateX(calc(max(0, var(--sp, .5) - .5) * 120px)); }
[dir="ltr"] .hero .hero-title { transform: translateX(calc(max(0, var(--sp, .5) - .5) * -120px)); }

/* marquee driven by scroll instead of time */
.marquee-track { animation: none; transform: translateX(var(--mq, 0px)); }

/* about: words light up as you read */
.js-words .w { opacity: clamp(.16, calc(var(--sp, 1) * 2.6 * var(--n, 1) - var(--i) - var(--n, 1) * .45), 1); transition: opacity .1s linear; }
.about .sec-title { transform: translateY(calc((.5 - var(--sp, .5)) * 60px)); }

/* services: pinned, cards slide sideways like a carousel */
.hscroll { position: relative; height: 320vh; }
.hs-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; }
.hs-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; width: 100%; }
.hs-head .sec-head { margin-bottom: 24px; }
.hs-hint { color: var(--sage); font-size: 22px; margin-bottom: 30px; }
[dir="ltr"] .hs-hint { transform: scaleX(1); }
.hs-track { display: flex !important; gap: 18px; width: max-content; padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px)); transform: translateX(calc(var(--pp, 0) * var(--dist, 0px))); will-change: transform; }
.hs-track .svc { flex: none; width: min(360px, 78vw); min-height: 300px; transform: rotate(calc((var(--pp, 0) - .5) * var(--tilt, 0deg))); }
.hs-track .svc:nth-child(odd) { --tilt: -4deg; }
.hs-track .svc:nth-child(even) { --tilt: 3deg; margin-top: 34px; }

/* work: tiles drift at different speeds */
.work .tile-media { transform: translateY(calc((.5 - var(--sp, .5)) * var(--speed, 0px))) rotate(calc((.5 - var(--sp, .5)) * 6deg)); }
.work .tile:hover .tile-media { transform: translateY(calc((.5 - var(--sp, .5)) * var(--speed, 0px) - 6px)) rotate(-1.2deg); }

/* fit: the two columns slide in from opposite sides */
.fit .fit-col.yes { transform: translateX(calc((1 - min(1, var(--sp, 1) * 2.4)) * 90px)) rotate(calc((1 - min(1, var(--sp, 1) * 2.4)) * 3deg)); }
.fit .fit-col.no { transform: translateX(calc((1 - min(1, var(--sp, 1) * 2.4)) * -90px)) rotate(calc((1 - min(1, var(--sp, 1) * 2.4)) * -3deg)); }

/* contact: a pen loop draws across, the title grows in */
.contact { position: relative; overflow: hidden; }
.contact-in { position: relative; z-index: 1; }
.contact-loop { position: absolute; inset: 10% 0 auto 0; width: 100%; height: 70%; pointer-events: none; }
.contact-loop path { fill: none; stroke: color-mix(in srgb, var(--sage) 55%, transparent); stroke-width: 26; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--sp, 1) * 1.8)); }
.contact-title { transform: scale(calc(.82 + min(1, var(--sp, 1) * 2) * .18)); }

@media (max-width: 720px) {
  .hs-hint { display: none; }
  .hs-track .svc { min-height: 260px; }
  .hscroll { height: 380vh; }
}
/* reduced motion: no scroll-linked movement; services become a normal swipeable row */
.no-motion .hscroll { height: auto; }
.no-motion .hs-sticky { position: static; height: auto; padding-block: 80px; }
.no-motion .hs-track { transform: none; overflow-x: auto; max-width: 100vw; }

/* Instagram reels (official embeds) */
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ig-card { background: var(--paper); border-radius: 16px; padding: 8px; box-shadow: 0 18px 30px -24px rgba(20, 82, 80, .6); transform: translateY(calc((.5 - var(--sp, .5)) * var(--speed, 0px))); min-width: 0; }
.ig-card:nth-child(3n+1) { --speed: 60px; }
.ig-card:nth-child(3n+2) { --speed: -20px; margin-top: 40px; }
.ig-card:nth-child(3n) { --speed: 90px; }
.ig-card .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 10px !important; box-shadow: none !important; border: 0 !important; }
.ig-card iframe { max-width: 100% !important; min-width: 0 !important; border-radius: 10px !important; }
@media (max-width: 960px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ig-card:nth-child(n) { margin-top: 0; } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: minmax(0, 1fr); } .ig-card { transform: none; } }

/* ================= themes =================
   A section's data-theme re-maps the palette tokens inside it, so every component
   adapts without its own rules. Light "islands" (cards, embeds, phone) reset to the base palette. */
[data-theme="deep"] {
  --deep: var(--c-cream); --ink: color-mix(in srgb, var(--c-cream) 90%, transparent); --sand: var(--c-deep);
  --sage: #a8c3bf; --sand-deep: color-mix(in srgb, var(--c-cream) 22%, transparent); --paper: var(--c-cream);
}
[data-theme="yellow"] {
  --sand: var(--c-yellow); --sage: var(--c-deep); --yellow: var(--c-paper);
  --sand-deep: color-mix(in srgb, var(--c-deep) 18%, transparent);
}
[data-theme="ink"] {
  --deep: var(--c-cream); --ink: color-mix(in srgb, var(--c-cream) 90%, transparent); --sand: var(--c-ink);
  --sage: #a8c3bf; --paper: var(--c-cream);
}
.svc, .ig-card, .phone, .tile-media, .faq-list .island {
  --deep: var(--c-deep); --ink: var(--c-ink); --sand: var(--c-cream); --paper: var(--c-paper); --sage: #759290; --yellow: var(--c-yellow); --sand-deep: #e4dccb;
}
.svc { background: var(--c-paper); color: var(--c-ink); }
[data-theme] .btn { background: var(--deep); color: var(--sand); }
.nav .btn-sm { background: var(--deep); color: var(--sand); }
.nav .lang { border-color: currentColor; color: inherit; }
.nav .lang:hover { background: var(--deep); color: var(--sand); }
.nav-logo { color: var(--deep); }
[data-theme="deep"] .fit-col.yes, [data-theme="deep"] .card-dark { background: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }

[data-theme] .btn.btn-light { background: var(--c-yellow); color: var(--c-deep); }
[data-theme] .btn.btn-ghost { background: transparent; color: var(--deep); }
/* sections in a different color world than the current background fade back */
main [data-theme] { transition: opacity .5s ease; }
main [data-theme].dim { opacity: .12; }
@media (prefers-reduced-motion: reduce) { main [data-theme].dim { opacity: 1; } }

html[data-page="yellow"] .wa-float { --deep: var(--c-deep); --sand: var(--c-yellow); }

/* fit section on the deep background */
[data-theme="deep"] .fit-col.no { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-cream) 25%, transparent); }
[data-theme="deep"] .fit-col.no svg { color: color-mix(in srgb, var(--c-cream) 55%, transparent); }

/* ---------- intro: scroll-scrubbed "logo is born" video ---------- */
.intro { position: relative; height: 260vh; }
.intro-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); overflow: hidden; display: grid; place-items: center; }
#introCanvas { width: 100%; height: 100%; display: block; }
.intro-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: var(--sage); font-size: 22px; opacity: calc(1 - min(1, var(--ip, 0) * 8)); }
.intro.no-frames { display: none; }

/* ---------- hero: pinned, the logo inflates next to the title as you scroll ---------- */
.hero.hero-pin { height: 300vh; padding: 0; overflow: visible; position: relative; }
.hero-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; }
.hero-pin .hero-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 24px; width: 100%; max-width: 1320px; }
.hero-pin .hero-title { font-size: clamp(54px, 8.6vw, 128px); transform: none; }
.hero-visual { position: relative; min-width: 0; }
#introCanvas { width: 100%; height: auto; aspect-ratio: var(--intro-ar, 2.5); display: block; }
@media (max-width: 860px) {
  .hero-pin .hero-in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-pin .hero-visual { order: -1; }
  .hero-pin .hero-title { font-size: clamp(46px, 13vw, 72px); }
  .hero-pin .hero-text { gap: 16px; }
  .hero-pin .hero-note { display: none; }
}

/* text inside a themed section takes that theme's text color */
[data-theme] { color: var(--ink); }

/* hand-drawn circles that draw themselves as the section scrolls in */
/* .draw circles: dash length and offset are set by main.js in screen pixels (one continuous stroke) */
/* hero: logo grows and melts into the cream page */
#introCanvas { transform-origin: 50% 50%; will-change: transform; }
html.scrubbing { transition: none; }
.hero-pin .hero-text { transition: none; }

/* ---------- intro (v3): full-width logo, no zoom ---------- */
.intro { position: relative; height: 170vh; }
html.intro-lock, html.intro-lock body { overflow: hidden; }
.intro-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); overflow: hidden; }
.intro #introCanvas { width: 100%; height: 100%; aspect-ratio: auto; display: block; }

/* ---------- tools ---------- */
.tools-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tool { background: var(--c-paper); border-radius: 14px; padding: 26px 12px 20px; display: grid; justify-items: center; gap: 12px; color: var(--c-deep); transition: box-shadow .25s; }
.tool:nth-child(odd) { --drift: 30px; }
.tool:nth-child(even) { --drift: -20px; }
.tool:hover { box-shadow: 0 16px 30px -22px rgba(20, 82, 80, .6); }
.tool-ic { width: 44px; height: 44px; }
.tool-name { font-family: var(--f-latin); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--c-ink); text-align: center; }
.tool-design .tool-ic { color: var(--c-deep); }
/* ---------- clients ---------- */
.clients-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.client { min-height: 130px; border-radius: 14px; background: var(--c-paper); display: grid; place-items: center; gap: 10px; padding: 22px; text-align: center; }
.client img { max-width: 70%; max-height: 64px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; transition: filter .3s, opacity .3s; }
.client:hover img { filter: none; opacity: 1; }
.client span { font-weight: 700; font-size: 17px; color: var(--c-ink); }
.client.placeholder { background: transparent; box-shadow: inset 0 0 0 2px var(--sand-deep); }
.client.placeholder span { color: var(--concrete); font-weight: 500; font-size: 15px; }
@media (max-width: 960px) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tools-grid, .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* clients: logo wall */
.clients-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.clients-grid .client { flex: 0 0 calc((100% - 6 * 14px) / 7); min-height: 0; padding: 20px 12px 16px; display: grid; justify-items: center; align-content: start; gap: 12px; }
.client-logo { height: 70px; width: 100%; display: grid; place-items: center; }
.client.wide img { max-width: 92%; max-height: 54px; object-fit: contain; filter: none; opacity: 1; }
.client.round img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: none; opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.client.invert img { filter: invert(1); }
.client-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--c-ink); text-align: center; }
.client { transition: transform .3s var(--snap), box-shadow .3s; }
.client:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -22px rgba(20, 82, 80, .6); }
@media (max-width: 1100px) { .clients-grid .client { flex-basis: calc((100% - 4 * 14px) / 5); } }
@media (max-width: 760px) { .clients-grid .client { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 460px) { .clients-grid .client { flex-basis: calc((100% - 14px) / 2); } }

/* sliding elements must never widen the page */
main { overflow-x: clip; }

/* clients: two running rows, top moves right, bottom moves left */
.client-rows { display: grid; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-row { overflow: hidden; }
.client-track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 16px; width: max-content; animation: clients-left 70s linear infinite; }
.client-row.r1 .client-track { animation-name: clients-right; }
.client-row:hover .client-track { animation-play-state: paused; }
@keyframes clients-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@keyframes clients-right { from { transform: translateX(calc(-50% - 8px)); } to { transform: translateX(0); } }
.chip { display: flex; align-items: center; gap: 14px; background: var(--c-paper); border-radius: 999px; padding: 10px 26px 10px 12px; white-space: nowrap; direction: rtl; flex: none; }
.chip img { height: 46px; width: auto; max-width: 130px; object-fit: contain; flex: none; }
.chip.round img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chip.invert img { filter: invert(1); }
.chip span { font-weight: 700; font-size: 17px; color: var(--c-ink); }
@media (max-width: 560px) { .chip { padding: 8px 18px 8px 10px; gap: 10px; } .chip img { height: 36px; max-width: 100px; } .chip.round img { width: 36px; height: 36px; } .chip span { font-size: 15px; } .client-track { animation-duration: 50s; } }
@media (prefers-reduced-motion: reduce) { .client-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .client-track [aria-hidden="true"] { display: none; } }

/* tools drop onto the page one after another as you scroll (--drop set by main.js, 1 = landed) */
.tool { --drop: 1; transform: translateY(calc((1 - var(--drop)) * -220px)) rotate(calc((1 - var(--drop)) * var(--spin, 10deg))); opacity: clamp(0, calc(var(--drop) * 3), 1); will-change: transform; }
.tool:nth-child(even) { --spin: -12deg; }
.tool:nth-child(3n) { --spin: 16deg; }

/* tool logos that come as images: painted in the same color as the icon set */
.tool-mask { display: block; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* English FAQ title sits in a narrow column: a touch smaller so no word is left alone on a line */
html[lang="en"] .faq .sec-title { font-size: clamp(34px, 4.6vw, 58px); }

@media (max-width: 600px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 22px; } }

/* ---------- work: tilted wheel of videos, turned by scrolling ---------- */
.work-wheel { position: relative; margin-top: 8px; }
.wheel-stage { position: relative; height: calc(var(--ch-stage, min(60svh, 540px)) + 150px); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.wheel-stage.dragging { cursor: grabbing; }
.wheel-stage.dragging .wcard { transition: none; }
.wcard video { pointer-events: none; }
.wheel-arrow { position: absolute; top: calc(50% - 46px); z-index: 120; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-deep); color: var(--c-cream); cursor: pointer; box-shadow: 0 12px 26px -14px rgba(20, 50, 49, .7); transition: transform .25s var(--snap); }
.wheel-arrow svg { width: 24px; height: 24px; }
.wheel-arrow:hover { transform: scale(1.08); }
.wheel-arrow:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; }
/* RTL: the next video comes from the left */
.wheel-arrow.next { left: max(16px, calc(50% - 640px)); }
.wheel-arrow.next svg { transform: scaleX(-1); }
.wheel-arrow.prev { right: max(16px, calc(50% - 640px)); }
[dir="ltr"] .wheel-arrow.next { left: auto; right: max(16px, calc(50% - 640px)); }
[dir="ltr"] .wheel-arrow.next svg { transform: none; }
[dir="ltr"] .wheel-arrow.prev { right: auto; left: max(16px, calc(50% - 640px)); }
[dir="ltr"] .wheel-arrow.prev svg { transform: scaleX(-1); }
.wheel-ring { position: absolute; inset: 0 0 92px; --ch: min(60vh, 540px); --ch: min(60svh, 540px); }
.wcard { position: absolute; left: 50%; top: 50%; width: calc(var(--ch) * 9 / 16); background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; will-change: transform, opacity; }
.wcard.wide { width: min(calc(var(--ch) * 1.2), 90vw); }
.wcard .tile-media { aspect-ratio: 9 / 16; width: 100%; border-radius: 18px; background: var(--c-ink); box-shadow: 0 30px 50px -30px rgba(20, 50, 49, .55); transform: none !important; }
.wcard.wide .tile-media { aspect-ratio: 16 / 9; }
.wcard .tile-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wcard .tile-play { opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--snap); }
.wcard.is-front .tile-play { opacity: 1; transform: none; }
.wcard.is-front:hover .tile-play { transform: scale(1.1); }
.wcard:focus-visible { outline: none; }
.wcard:focus-visible .tile-media { outline: 3px solid var(--c-yellow); outline-offset: 4px; }
.wheel-cap { position: absolute; bottom: 34px; left: 16px; right: 16px; text-align: center; font-size: 16px; color: var(--ink); line-height: 1.35; }
.wheel-cap b { display: block; font-size: 20px; font-weight: 700; color: var(--deep); }
.wheel-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--f-latin); font-size: 12px; letter-spacing: .12em; color: var(--sage); }
@media (max-width: 700px) {
  .wheel-stage { height: calc(min(54svh, 460px) + 140px); }
  .wheel-ring { --ch: min(54svh, 460px); inset: 0 0 84px; }
  .wheel-arrow { width: 42px; height: 42px; top: calc(50% - 40px); }
  .wheel-arrow svg { width: 20px; height: 20px; }
}
/* reduced motion: a plain grid */
.work-wheel.static { height: auto; }
.work-wheel.static .wheel-stage { position: static; height: auto; overflow: visible; }
.work-wheel.static .wheel-ring { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; padding: 0 var(--gutter, 16px); }
.work-wheel.static .wcard { position: static; width: auto; transform: none !important; opacity: 1 !important; }
.work-wheel.static .wcard.wide { grid-column: span 2; }
.work-wheel.static .wcard .tile-play { opacity: 1; transform: none; }
.work-wheel.static .wcard .tile-cap { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block; margin-top: 8px; font-size: 14px; text-align: start; }
.work-wheel.static .wheel-cap, .work-wheel.static .wheel-count { display: none; }

/* ---------- services: sideways row, not pinned ---------- */
.hswipe { padding-block: 104px 64px; }
.hswipe .hs-sticky { position: static; height: auto; overflow: visible; display: block; }
.hs-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.hswipe .hs-hint { margin: 0 6px 0 0; }
.hs-arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-deep); color: var(--c-cream); cursor: pointer; transition: transform .25s var(--snap), opacity .2s; }
.hs-arrow svg { width: 22px; height: 22px; }
.hs-arrow:hover { transform: scale(1.08); }
.hs-arrow:disabled { opacity: .3; cursor: default; transform: none; }
.hs-arrow:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; }
/* RTL: next points left */
.hs-arrow.next svg { transform: scaleX(-1); }
[dir="ltr"] .hs-arrow.next svg { transform: none; }
[dir="ltr"] .hs-arrow.prev svg { transform: scaleX(-1); }
.hs-scroller { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px)); scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 18px 46px; cursor: grab; }
.hs-scroller::-webkit-scrollbar { display: none; }
.hs-scroller.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hswipe .hs-track { transform: none; will-change: auto; }
.hswipe .hs-track .svc { scroll-snap-align: start; transform: rotate(calc(var(--tilt, 0deg) * .35)); }
@media (max-width: 720px) {
  .hswipe { padding-block: 72px 40px; }
  .hswipe .hs-head { flex-direction: column; align-items: stretch; gap: 0; }
  .hswipe .hs-head .sec-head { margin-bottom: 14px; }
  .hs-nav { margin-bottom: 8px; }
  .hswipe .hs-hint { white-space: nowrap; margin-inline-end: auto; }
  .hswipe .hs-track .svc { min-height: 0; }
  .hs-arrow { width: 40px; height: 40px; }
  .hswipe .hs-hint { display: block; font-size: 19px; }
}

.wheel-cap .credit, .tile-cap .credit { display: block; margin-top: 4px; font-family: var(--f-latin); font-size: 10.5px; letter-spacing: .04em; color: var(--sage); direction: ltr; unicode-bidi: isolate; }

/* ---------- AI videos page ---------- */
.ai-page { padding-top: 72px; min-height: calc(100svh - var(--nav-h)); }
.ai-page .sec-title { font-size: clamp(40px, 6vw, 76px); }
.ai-lead { max-width: 560px; font-size: 19px; color: var(--ink); margin-top: 14px; }
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; max-width: 980px; }
.ai-grid .tile-media { border-radius: 18px; box-shadow: 0 30px 50px -32px rgba(20, 50, 49, .55); }
.ai-grid .tile-cap { margin-top: 4px; }
.ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 48px; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 720px) {
  .ai-page { padding-top: 40px; }
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 24px; margin-top: 30px; }
  .ai-grid .tile-play { width: 48px; height: 48px; }
}

/* ---------- real-estate page ---------- */
.nd .sec { padding-block: 88px; }
.nd-hero { padding-top: 64px !important; }
.nd-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.nd-title { font-size: clamp(46px, 7vw, 96px); line-height: .98; color: var(--deep); letter-spacing: -.03em; }
.nd-lead { font-size: 19px; max-width: 560px; margin-top: 22px; }
.nd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.nd-sample { background: none; border: 0; font: inherit; color: var(--deep); cursor: pointer; }
.nd-hero-video { width: 100%; }
.nd-hero-video .tile-media { aspect-ratio: 16 / 9; }
.nd-hero-video .tile-media { border-radius: 22px; box-shadow: 0 40px 60px -36px rgba(20, 50, 49, .6); transform: rotate(-1.2deg); }
.nd-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nd-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.nd-steps li { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--deep); padding-top: 16px; }
.nd-steps h3 { font-size: 24px; color: var(--deep); }
.nd-steps p { color: var(--ink); }
.nd-sub { margin-top: 12px; font-size: 18px; }
@media (min-width: 900px) { .nd-aud .nd-sub { white-space: nowrap; } }
.nd-aud-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.nd-aud-list li { background: var(--c-paper); border-radius: 14px; padding: 22px 20px; overflow-wrap: break-word; min-width: 0; display: grid; gap: 6px; align-content: start; }
.nd-aud-list svg { width: 30px; height: 30px; color: var(--deep); }
.nd-aud-list b { font-size: 19px; color: var(--deep); }
.nd-aud-list span { font-size: 15px; line-height: 1.45; color: var(--ink); }
.nd-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.nd-type { background: var(--c-paper); border-radius: 16px; padding: 30px 26px; display: grid; gap: 12px; align-content: start; }
.nd-type h3 { font-size: 24px; color: var(--deep); }
.nd-type-tv { background: var(--c-deep); color: var(--c-cream); }
.nd-type-tv h3, .nd-type-tv .nd-from { color: var(--c-cream); }
.nd-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.nd-specs li::before { content: "· "; color: var(--sage); font-weight: 700; }
.nd-from { font-weight: 700; font-size: 20px; color: var(--deep); margin-top: 4px; }
.q-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; margin-top: 30px; align-items: start; }
.q-form { display: grid; gap: 26px; }
.q-step { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.q-step[hidden] { display: none; }
.q-step legend { font-weight: 700; font-size: 20px; color: var(--deep); padding: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.q-n { width: 30px; height: 30px; border-radius: 50%; background: var(--c-deep); color: var(--c-cream); display: inline-grid; place-items: center; font-size: 15px; font-family: var(--f-latin); }
.q-hint { font-size: 14px; color: var(--sage); margin: -6px 0 0; }
.q-opts { display: grid; gap: 12px; }
.q-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-pills { grid-template-columns: repeat(2, minmax(0, max-content)); }
.q-opt { position: relative; display: grid; gap: 4px; align-content: start; background: var(--c-paper); border-radius: 14px; padding: 16px 18px; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, transform .2s var(--snap); }
.q-opt input { position: absolute; opacity: 0; pointer-events: none; }
.q-opt b { color: var(--deep); font-size: 17px; }
.q-opt span { font-size: 14px; color: var(--ink); }
.q-opt:hover { transform: translateY(-2px); }
.q-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c-deep); background: #fff; }
.q-opt:has(input:focus-visible) { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.q-save { color: var(--c-deep) !important; font-weight: 700; }
.q-stepper { display: inline-flex; align-items: center; gap: 16px; background: var(--c-paper); border-radius: 999px; padding: 6px; width: max-content; }
.q-stepper button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-deep); color: var(--c-cream); font-size: 22px; cursor: pointer; }
.q-stepper output { min-width: 24px; text-align: center; font-weight: 700; font-size: 20px; font-family: var(--f-latin); }
.q-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.q-chips label { cursor: pointer; }
.q-chips input { position: absolute; opacity: 0; pointer-events: none; }
.q-chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--c-paper); font-weight: 500; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.q-chips input:checked + span { box-shadow: inset 0 0 0 2px var(--c-deep); background: #fff; }
.q-chips input:focus-visible + span { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.q-sum { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--c-deep); color: var(--c-cream); border-radius: 20px; padding: 28px 26px; display: grid; gap: 10px; }
.q-sum-k, .q-total-k { font-size: 14px; letter-spacing: .04em; opacity: .75; margin: 0; }
.q-lines { list-style: none; margin: 0 0 8px; padding: 0 0 14px; display: grid; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-cream) 25%, transparent); }
.q-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.q-lines b { white-space: nowrap; }
.q-total { font-size: 40px; font-weight: 700; line-height: 1; margin: 0; font-family: var(--f-main); }
.q-note { font-size: 13px; opacity: .75; margin: 0 0 6px; }
.q-sum .btn { background: var(--c-yellow); color: var(--c-ink); justify-content: center; }
@media (max-width: 960px) {
  .nd-hero-in, .q-wrap { grid-template-columns: minmax(0, 1fr); }
  .nd-hero-video { max-width: 640px; }
  .nd-steps, .nd-type-grid { grid-template-columns: minmax(0, 1fr); }
  .nd-aud-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-opts-3 { grid-template-columns: minmax(0, 1fr); }
  .q-sum { position: static; }
}
@media (max-width: 560px) {
  .nd .sec { padding-block: 60px; }
  .q-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.q-pay { font-size: 14px; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c-cream) 10%, transparent); }
.q-pay-split { opacity: .8; }

.ai-grid .ai-wide { grid-column: 1 / -1; }
.ai-grid .ai-wide .tile-media { aspect-ratio: 16 / 9; }

/* mobile menu (hamburger) */
.menu-btn { display: none; width: 42px; height: 42px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; padding: 0; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s; }
.menu-btn span:nth-child(1) { top: 14px; }
.menu-btn span:nth-child(2) { top: 19.5px; right: 14px; }
.menu-btn span:nth-child(3) { top: 25px; }
.nav.menu-open .menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.nav.menu-open .menu-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav.menu-open .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; inset-inline: 0; background: var(--c-deep, #145250); color: var(--c-cream, #f6f2e7); padding: 10px 24px 22px; box-shadow: 0 24px 40px -24px rgba(20, 82, 80, .7); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; animation: menuIn .22s ease; }
  .nav.menu-open .nav-links a { font-size: 20px; padding: 14px 2px; border-bottom: 1px solid rgba(246, 242, 231, .18); }
  .nav.menu-open .nav-links a:last-child { border-bottom: 0; }
  .nav.menu-open .nav-links a:hover { color: var(--c-yellow, #f9e17e); }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav.menu-open .nav-links { animation: none; } .menu-btn span { transition: none; } }
html[lang="en"] .nd-title { font-size: clamp(40px, 5.4vw, 80px); }
.q-fx { font-size: 12px; opacity: .7; margin: -4px 0 6px; }

/* nadlan: works row (small posters, open in the lightbox) */
.nd-works-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; align-items: flex-start; }
.nd-work { --h: 250px; display: grid; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; width: calc(var(--h) * 16 / 9); }
.nd-work.tall { width: calc(var(--h) * 9 / 16); }
.nd-work .tile-media { height: var(--h); width: 100%; aspect-ratio: auto; background: var(--c-ink); border-radius: 14px; box-shadow: 0 24px 40px -28px rgba(20, 50, 49, .55); }
.nd-work .tile-play { width: 44px; height: 44px; }
.nd-work .tile-cap { font-size: 14px; line-height: 1.35; }
.nd-work:hover .tile-media { transform: translateY(-3px); }
@media (max-width: 720px) {
  .nd-works-row { gap: 12px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .nd-work { --h: 140px; flex: none; scroll-snap-align: start; }
  .nd-work.tall { --h: 220px; }
}