/* Studio Tom Aviram. Campaign layout: offer, proof, fit, conversation.
   Existing brand: Polin, ink, warm paper and yellow. Content sets height. */
:root {
  --paper: #f7f6f2; --surface: #ffffff; --ink: #171827; --navy: #171827;
  --navy-2: #222333; --cream: #f7f6f2; --cream-2: #eeede7;
  --gold: #eccc6e; --gold-deep: #80631d; --muted: #62636c; --muted-dark: #c4c4cc;
  --line: #deded8; --w: 1200px; --gutter: clamp(20px, 5vw, 72px);
  --section-space: clamp(64px, 7vw, 104px); --heading: clamp(32px, 3.5vw, 52px);
  --body-size: clamp(17px, 1.25vw, 19px); --r: 12px;
  --space-sm: 12px; --space-md: 24px; --space-lg: 40px;
}
html { scroll-padding-top: 28px; scrollbar-color: var(--gold-deep) var(--paper); }
/* Preserve the original hero composition. Only its small-screen sizing changes. */
@media (max-width: 859px) {
  header { top: 12px; padding: 0; background: transparent; }
  header .wrap { width: calc(100% - 40px); max-width: 520px; margin-inline: auto; }
  .hero-nav { display: flex; gap: 8px; font-size: clamp(14px,3.6vw,18px); }
  .hero-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero { height: auto; min-height: 0; padding: 0; background: #fff; }
  .hero .wrap { height: auto; width: 100%; display: block; }
  .hero-stage { position: relative; inset: auto; height: calc(142px + min(72vw,360px)); }
  .hero h1 { top: 72px; width: calc(100% - 32px); font-size: clamp(28px,8.2vw,52px); line-height: 1.15; letter-spacing: -.02em; }
  .hero-title-outline { display: none; }
  .hero-person { top: 142px; left: 50%; width: min(64vw,288px); height: min(72vw,360px); aspect-ratio: auto; overflow: visible; }
  .hero-fig img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .hero-blob { top: 132px; left: 50%; width: min(100vw,470px); height: min(78vw,390px); transform: translateX(-50%); }
  .hero-socials { top: 150px; left: 12px; gap: 0; }
  .hero-socials > a,.hero-socials > span { width: 44px; height: 44px; }
  .hero-socials img { width: 25px; height: 25px; }
  .hero-bottom { position: relative; inset: auto; width: auto; margin: 0 24px; padding: 20px 0 32px; gap: 16px; align-items: center; }
  .hero-copy { width: 100%; max-width: none; padding: 0; }
  .hero p.lede { max-width: 38ch; font-size: 17px; line-height: 1.5; margin: 0 auto; }
  .hero-actions { align-self: center; }
  .hero .btn-gold { min-height: 52px; font-size: 20px; padding: 10px 32px; }
}
body { background: var(--paper); color: var(--ink); font-size: var(--body-size); line-height: 1.65; }
::selection { background: var(--gold); color: var(--ink); }
input, textarea { caret-color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 5px; }
.dark :focus-visible { outline-color: var(--gold); }
.wrap, .pain-stage, .dream-stage { width: min(var(--w), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
section { padding-block: var(--section-space); }
h1,h2,h3 { text-wrap: balance; letter-spacing: -.025em; }
h2, .ui h2 { font-size: var(--heading); line-height: 1.15; max-width: 24ch; margin: 0 0 24px; }
h3 { font-size: 23px; line-height: 1.25; }
p.lede, .story, .case .story p { font-size: var(--body-size); line-height: 1.7; max-width: 56ch; }
.kicker, .dream-kicker, .pill { display: none; }
.grid2, .form-wrap, .case { gap: clamp(32px, 6vw, 80px); }
.grid2 > *, .form-wrap > *, .row2 > *, .case > * { min-width: 0; }
.btn { min-height: 52px; padding: 14px 24px; border-radius: 8px; font-size: 17px; line-height: 1.35; letter-spacing: 0; box-shadow: none; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: none; }
.btn-gold:hover { box-shadow: none; background: #f3d782; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.client-proof { padding: 28px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client-proof .wrap { display: flex; align-items: center; gap: 48px; }.client-proof p { font-size: 14px; color: var(--muted); }
.client-names { display: flex; flex: 1; justify-content: space-between; align-items: center; gap: 24px; font-size: clamp(16px,1.5vw,22px); font-weight: 800; }
.services-section { background: var(--surface); }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.section-intro h2 { margin: 0; }.section-intro p { color: var(--muted); }
.service-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.service-paths article { padding: 28px 0 0; border-top: 2px solid var(--gold-deep); }
.service-paths h3 { margin-bottom: 16px; font-size: 28px; }.service-paths p { color: var(--muted); }
.service-paths ul { padding: 0; list-style: none; margin: 24px 0; font-size: 16px; }.service-paths li { padding-block: 8px; border-bottom: 1px solid var(--line); }
.pain-section { height: auto; padding-block: var(--section-space); background: var(--cream-2); color: var(--ink); overflow: clip; }
.pain-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.pain-title,.pain-intro,.pain-quote,.pain-story,.pains { position: relative; inset: auto; width: auto; max-width: none; text-align: right; white-space: normal; order: 0; }
.pain-title { grid-column: 1; font-size: var(--heading); line-height: 1.15; margin: 0 0 16px; }
.pain-intro { grid-column: 1; font-size: 17px; margin: 0 0 8px; }
.pain-quote { grid-column: 1; font-size: clamp(25px,2.8vw,38px); line-height: 1.3; margin: 0 0 24px; color: var(--gold-deep); }
.pain-quote::before,.pain-quote::after { display: none; }
.pain-story { grid-column: 1; padding: 0; font-size: 17px; line-height: 1.65; }
.pains { grid-column: 2; grid-row: 1 / span 4; display: grid; gap: 16px; margin: 0; }
.pain,.pain:nth-child(2),.pain:nth-child(3) { position: relative; top: auto; width: 100%; height: auto; min-height: 0; padding: 24px 24px 24px 64px; margin: 0; border: 0; border-radius: 12px; box-shadow: none; background: var(--surface); }
.pain-card-copy { position: static; inset: auto; width: auto; }
.pain h3 { font-size: 20px; line-height: 1.3; }.pain p { font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 8px; color: var(--muted); }
.pain-graphic,.pain-art,.pain-art-blob,.pain-stack-spacer { display: none; }
.pain-number { right: auto; left: 8px; bottom: 12px; width: 44px; height: 48px; }.pain-number span { width: 26px; height: 26px; font-size: 13px; }
.pain:hover { transform: none; box-shadow: none; }
.dream-section { height: auto; min-height: 0; padding: var(--section-space) 0; background: var(--surface); }
.dream-stage { height: auto; display: flex; flex-direction: column; }
.dream-title,.dream-lede,.dream-mockups,.dream-controls { position: relative; inset: auto; width: auto; max-width: none; }
.dream-title { font-size: var(--heading); line-height: 1.15; margin: 0 0 24px; order: 0; }.dream-lede { font-size: var(--body-size); line-height: 1.65; max-width: 54ch; color: var(--muted); margin: 0; order: 0; }
.dream-mockups { height: auto; aspect-ratio: 2.4; width: 100%; margin: 32px 0 0; order: 0; }
.dream-mockup { position: absolute; top: 0; left: 0; width: 45%; height: auto; aspect-ratio: 1971/1325; }
.dream-mockup[data-dream-position="0"] { --dream-x: 0%; --dream-y: 0%; --dream-rotate: 0deg; --dream-base-scale: 1; }
.dream-mockup[data-dream-position="1"] { --dream-x: 61%; --dream-y: 10%; --dream-rotate: 0deg; --dream-base-scale: 1; }
.dream-mockup[data-dream-position="2"] { --dream-x: 122%; --dream-y: 20%; --dream-rotate: 0deg; --dream-base-scale: 1; }
.dream-mockup[data-dream-edge="before"] { --dream-x: -61%; --dream-y: -10%; }.dream-mockup[data-dream-edge="after"] { --dream-x: 183%; --dream-y: 30%; }
.dream-controls { order: 0; margin-top: 16px; gap: 24px; }.dream-arrow { width: 48px; height: 48px; font-size: 28px; background: var(--paper); }
.dream-status { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-size: 14px; direction: rtl; text-align: center; color: var(--muted); }
.dream-tooltip { min-width: 160px; padding: 10px 14px; border-radius: 8px; }.dream-tooltip strong { font-size: 16px; }.dream-tooltip small { font-size: 13px; }
.dream-device-screen { border-width: 4px; border-radius: 10px 10px 2px 2px; }.dream-blob { display: none; }
.steps { gap: 32px; margin-top: 40px; }.step { padding-top: 20px; }.step h3 { font-size: 21px; }.step p { font-size: 16px; color: var(--muted); }.step::before { font-size: 16px; }
.process-fig { display: block; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }.process-fig picture { display: none; }.process-fig .story { max-width: 72ch; }.hand { font-family: var(--fd); font-size: 19px; transform: none; }.process-fig .hand { color: var(--ink); font-weight: 800; }
.morph-on { padding-top: var(--section-space); }.morph-on .morph { height: auto; }
.morph-stage { position: relative; height: auto; overflow: visible; background: none; }.morph-stage::before,.morph-intro { display: none; }
.morph-copy { position: relative; top: auto; opacity: 1!important; transform: none!important; text-align: right; width: min(var(--w),calc(100% - var(--gutter)*2)); margin-inline: auto; padding: 0; pointer-events: auto; }
.morph-copy h2,.morph-copy p { margin-inline: 0; }.morph-copy p { max-width: 58ch; font-size: 17px; }
.morph-cards { position: relative; display: flex; gap: 20px; overflow-x: auto; padding: 32px max(var(--gutter),calc((100% - var(--w))/2)); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); perspective: none; scrollbar-width: thin; scrollbar-color: var(--gold) var(--navy-2); }
.mcard { position: relative; inset: auto; flex: 0 0 250px; width: 250px; height: auto; aspect-ratio: 12/17; margin: 0; opacity: 1!important; transform: none!important; scroll-snap-align: start; }
.mcard-in { transform: none!important; transform-style: flat; }.mcard-f { box-shadow: none; }.mcard-f::after { display: none; }
.mcard-b { inset: auto 0 0; min-height: 82px; padding: 12px; transform: none; backface-visibility: visible; background: var(--navy-2); border-radius: 0 0 10px 10px; box-shadow: none; }
.mcard-b b { font-size: 19px; }.mcard-b span { font-size: 14px; letter-spacing: 0; }.mcard-b i { font-size: 12px; }
.case { margin-top: 48px!important; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.18); }
.ui { background: var(--navy); }.ui::before { display: none; }.ui .wrap { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; text-align: right; }
.ui h2 { color: var(--cream); background: none; -webkit-text-fill-color: currentColor; margin-inline: 0; max-width: none; }.ui p.lede { text-align: right; margin-inline: 0; }.ui-shot { width: 100%; margin: 0; padding: 0; }.ui-shot img { aspect-ratio: 1.6; object-fit: contain; box-shadow: none; border-radius: 12px; }.ui-shot::after,.ui-glow { display: none; }
.about-fig { width: 100%; max-width: 400px; }.about-fig img { box-shadow: none; }.about-fig .hand { display: none; }.story p { margin-bottom: 16px; }
.fit { margin-top: 32px; }.fit .col { border-width: 1px; }.fit h3 { font-size: 20px; }
.offer { padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: 850px; }.offer h2 { max-width: none; }.offer .big { font-size: 24px; display: flex; gap: 8px; align-items: baseline; justify-content: center; margin-top: 16px; }.offer .big small { font-size: 17px; letter-spacing: 0; }.offer ul { max-width: 58ch; gap: 12px; }
.faq { max-width: 880px; margin: 32px 0 0; }.faq summary { padding-block: 20px; font-size: 19px; line-height: 1.4; }.faq .a { font-size: 17px; line-height: 1.7; }
.form-wrap { align-items: start; }.form-fig { display: none; }form { box-shadow: none; padding: 32px; border-radius: 12px; }.f input,.f select,.f textarea { min-width: 0; font-size: 16px; }.row2 { gap: 0 16px; }form .btn { white-space: normal; } .privacy { font-size: 13px; line-height: 1.6; }
.sticky { background: var(--navy); backdrop-filter: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; }.sticky .btn { min-width: 0; padding: 12px; font-size: 16px; white-space: normal; }
footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.16); }.footer-socials { display: flex; gap: 16px; }.footer-socials a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
#preloader { display: none!important; }
@media(max-width: 999px) {
  .pain-stage { gap: 0 32px; }.ui .wrap { grid-template-columns: 1fr; }.ui-shot { max-width: 760px; }
}
@media(max-width: 699px) {
  :root { --gutter: 24px; --section-space: 56px; --heading: 32px; --body-size: 17px; }
  .client-proof { padding: 24px 0; }.client-proof .wrap { flex-direction: column; align-items: start; gap: 16px; }.client-names { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 18px; }.client-proof p { font-size: 13px; }
  .section-intro,.service-paths { grid-template-columns: 1fr; gap: 24px; }.section-intro { margin-bottom: 28px; }.section-intro br { display: none; }.service-paths { gap: 32px; }.service-paths article { padding-top: 24px; }.service-paths h3 { font-size: 25px; }.service-paths ul { margin: 16px 0; }
  .pain-stage { display: flex; flex-direction: column; gap: 0; }.pain-title { font-size: 30px; }.pain-quote { font-size: 28px; margin-bottom: 20px; }.pain-story { font-size: 17px; }.pains { display: grid; gap: 12px; margin-top: 24px; }.pain,.pain:nth-child(2),.pain:nth-child(3) { padding: 20px 20px 20px 52px; }.pain h3 { font-size: 19px; }.pain p { font-size: 16px; }.pain-number { width: 36px; height: 40px; left: 8px; bottom: 12px; }.pain-number span { width: 24px; height: 24px; }
  .dream-title { font-size: 34px; }.dream-lede { font-size: 17px; }.dream-mockups { aspect-ratio: 1.35; margin-top: 24px; }.dream-mockup { width: 72%; }.dream-mockup[data-dream-position="1"] { --dream-x: 19%; --dream-y: 22%; }.dream-mockup[data-dream-position="2"] { --dream-x: 38%; --dream-y: 44%; }.dream-mockup[data-dream-edge="before"] { --dream-x: -19%; --dream-y: -22%; }.dream-mockup[data-dream-edge="after"] { --dream-x: 57%; --dream-y: 66%; }.dream-controls { gap: 12px; margin-top: 8px; }.dream-status { font-size: 12px; }.dream-tooltip { min-width: 0; width: max-content; max-width: 100%; padding: 8px; }.dream-tooltip strong { font-size: 13px; }.dream-tooltip small { font-size: 11px; }
  .steps { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }.step { padding: 0 40px 0 0; }.step::before { position: absolute; right: 0; top: 2px; }.step h3 { font-size: 21px; }.process-fig { margin-top: 24px; }
  .mcard { flex-basis: min(74vw,280px); width: min(74vw,280px); }.morph-copy p { font-size: 16px; }.morph-cards { gap: 16px; padding-block: 24px; }.case { margin-top: 32px!important; padding-top: 28px; gap: 20px; }.case .hand { font-size: 18px; }
  .ui .wrap { gap: 32px; }.ui h2 { font-size: 36px; }.ui .btn { margin-top: 24px; }.ui-shot img { aspect-ratio: 1.6; object-position: center; }.about-fig { max-width: 240px; justify-self: start; }.grid2 { gap: 32px; }.tools { gap: 8px; }.tools span { font-size: 13px; }
  .fit { grid-template-columns: 1fr; gap: 28px; }.fit li { font-size: 16px; }.offer { text-align: right; }.offer h2 { font-size: 30px; }.offer .big { justify-content: start; }.offer ul { font-size: 16px; margin-block: 24px; }
  .faq { margin-top: 24px; }.faq summary { font-size: 18px; }.faq .a { font-size: 16px; }
  .form-wrap { gap: 28px; }form { padding: 24px 20px; }.row2 { grid-template-columns: 1fr; }.f label { font-size: 15px; }.consent { font-size: 13px; }.f input,.f select,.f textarea { padding-inline: 12px; }
  footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }footer .wrap { gap: 16px; font-size: 13px; }
}
@media(max-width: 359px) {
  :root { --gutter: 20px; }
}
@media(hover:hover) and (pointer:fine) {.dark .text-link:hover { color: var(--gold); } }
@media(prefers-reduced-motion:reduce) { .dream-mockup { transition: none; } }