/* /test/ preview only. Reuses the live design tokens from /styles.css. */
.draft-pill{position:fixed;left:14px;bottom:14px;z-index:9999;background:#1a1a1a;color:#fff;font:500 12px/1.3 Inter,sans-serif;padding:8px 14px;border-radius:999px;opacity:.92;pointer-events:none;max-width:calc(100vw - 28px)}
.draft-note{margin:18px 0 0;padding:10px 14px;background:#fff6dc;border:1px dashed #d9b24a;border-radius:8px;font-size:.88rem;line-height:1.5;color:#5c4a12;text-align:left}
.center{text-align:center;margin-top:36px}
.subhead{text-align:center;font:500 1.4rem/1.3 Fraunces,serif;color:var(--ink);margin:56px 0 0}
.section-clients-compact{padding:66px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#clients .section-head{margin-bottom:26.4px}
.muted{color:var(--muted);font-size:.9rem}
.hero-call{margin:20px 0 0;width:100%;color:var(--ink-soft)}
.hero-call a,.form-sub a{color:var(--accent);font-weight:600}
.hero-price{align-self:center;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-weight:600;color:var(--ink)}
.page-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.text-link{color:var(--accent);font-weight:600}
.lang-switch{font-weight:600;letter-spacing:.06em;opacity:.8}
.lede-secondary{margin-top:-1.7rem}
.page-hero-inner h1{perspective:700px;line-height:1.18}
.rotating-word-wrap{display:inline-block;position:relative;padding:0 .12em .22em;margin:0 .06em;vertical-align:baseline}
.rotating-word-wrap::before{content:"";position:absolute;top:0;left:-.2em;right:-.2em;bottom:.22em;background:#181818;border-radius:.3em;z-index:0}

/* Logo marquee: JS-driven (script.js), time-based position, not a CSS @keyframes
   infinite animation. The old CSS-only version reliably broke on real mobile
   phones (froze on tap, went blank mid-scroll, restarted from the first logo)
   across five separate fix attempts; a raw infinite keyframe animation has no
   memory of "how far along it was", so anything that interrupts rendering makes
   the browser restart it from 0%. The JS version computes position each frame
   from elapsed wall-clock time, so there is nothing to restart - it just recomputes
   and continues. Diagnosed with a fullstack-engineer consult, 2026-09-23. */
.marquee-set{display:flex;align-items:center;gap:70px;flex-shrink:0}
.marquee-track{--marquee-speed:40;will-change:transform;backface-visibility:hidden;animation:none}
@media (max-width:720px){
  .section-head h2{font-size:2.5rem}
  .page-hero-inner h1{font-size:2.9rem}
  .section-clients-compact{padding:50px 0}
  #clients .section-head{margin-bottom:21.12px}
  .marquee-set{gap:50px}
  .marquee-track{--marquee-speed:55}
  .marquee-track img{height:74px;max-width:180px}
}
.rotating-word{position:relative;z-index:1;display:inline-block;color:var(--bg-elev);font-style:italic;transform-style:preserve-3d;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){.rotating-word{transition:none !important;transform:none !important}}
.page-form textarea{width:100%;padding:12px 14px;font-size:.95rem;font-family:var(--font-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);resize:vertical;min-height:110px;transition:border .2s,box-shadow .2s}
.page-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,100,30,.12)}
.footer-brand a{color:inherit;opacity:.85}

.section-services .service-card p{color:rgba(255,255,255,.78);line-height:1.7}
.section-services .service-card h3{margin-bottom:12px}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-grid.cards-4{grid-template-columns:repeat(4,1fr);gap:20px}
.cards-grid.cards-2{grid-template-columns:repeat(2,1fr);gap:28px}
.problem-card{padding:34px 32px}
.problem-card .info-num{font:600 .8rem Inter,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.problem-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.problem-list li{display:block;width:100%;flex:none;margin:0;padding:0;border:0}
.problem-list li::before{display:none}
.problem-list li strong{display:block;font-weight:600;line-height:1.5;margin-bottom:6px}
.problem-list li em{display:block;color:var(--ink-soft);font-style:italic;line-height:1.6}
.problem-link{margin:28px 0 0}

.problems-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.problem{display:flex;gap:20px;align-items:flex-start;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.problem-icon{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(200,100,30,.1);color:var(--accent);display:flex;align-items:center;justify-content:center}
.problem-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.problem-tag{display:inline-block;font:600 .7rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.problem h3{font:600 1.05rem/1.45 Inter,sans-serif;margin:0 0 8px;color:var(--ink)}
.problem p{margin:0;font-style:italic;color:var(--ink-soft);line-height:1.6}
.problems-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.info-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px}
.info-card .info-num{display:block;font:italic 500 1.4rem Fraunces,serif;color:var(--accent);margin-bottom:14px}
.info-card h3{margin-bottom:10px}
.info-card p{font-size:.98rem;line-height:1.7;color:var(--ink-soft)}

.steps{list-style:none;counter-reset:st;max-width:760px;margin:0 auto;padding:0;display:grid;gap:16px}
.step{counter-increment:st;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 26px}
.step::before{content:counter(st);font:italic 500 1.9rem/1 Fraunces,serif;color:var(--accent);padding-top:4px}
.step h3{margin:0 0 4px;font-size:1.15rem}
.step p{margin:0;color:var(--ink-soft);line-height:1.65}

.about-grid{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.photo-placeholder{aspect-ratio:4/5;border:2px dashed var(--line);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);background:var(--bg-elev)}
.about-collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;padding:8px}
.collage-col{display:flex;flex-direction:column;gap:16px}
.collage-col.col-b{margin-top:36px}
.print{position:relative;margin:0;background:#fff;padding:6px;border-radius:6px;box-shadow:0 12px 30px -14px rgba(0,0,0,.4);transition:transform .35s ease,box-shadow .35s ease}
.print img{display:block;width:100%;height:auto;border-radius:3px}
.print.p1{transform:rotate(-1.6deg)}
.print.p2{transform:rotate(1.4deg)}
.print.p3{transform:rotate(1deg)}
.print.p4{transform:rotate(-1.2deg)}
@media (hover:hover){.print:hover{transform:rotate(0) scale(1.03);z-index:2;box-shadow:0 18px 40px -14px rgba(0,0,0,.5)}}
@media (prefers-reduced-motion:reduce){.print{transition:none}}
.about-text h2{margin-bottom:18px}
.about-text p{margin-bottom:14px;line-height:1.75}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.work-card{margin:0;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.work-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.work-card figcaption{padding:14px 18px;font-weight:600}

.price-box{max-width:620px;margin:0 auto;text-align:center;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 32px}
.price-amount{font:500 3.2rem/1 Fraunces,serif;color:var(--ink);margin-bottom:14px}
.price-amount span{font:500 1rem Inter,sans-serif;color:var(--muted);margin-right:6px}
.price-box p{line-height:1.7;color:var(--ink-soft)}

.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;font-weight:600;padding:18px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;line-height:1.7;color:var(--ink-soft)}

@media (max-width:1000px){.cards-grid.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .cards-grid,.cards-grid.cards-2,.work-grid,.problems-grid{grid-template-columns:1fr}
  .problem{padding:22px;gap:16px}
  .about-grid{grid-template-columns:1fr;gap:28px}
  .photo-placeholder{aspect-ratio:16/10}
  .step{grid-template-columns:40px 1fr;padding:18px}
}
@media (max-width:560px){.cards-grid.cards-4{grid-template-columns:1fr}}

/* Service pages: client logos sit at the bottom of the hero, as social proof
   for the headline, instead of in their own section. */
.hero-clients{position:relative;z-index:1;margin-top:72px}
.hero-clients-label{font:600 .78rem/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.page-hero .marquee{position:relative;z-index:1;min-height:56px;margin-top:20px}
.page-hero .marquee-track img{height:56px;max-width:150px}
@media (max-width:720px){
  .hero-clients{margin-top:52px}
  .page-hero .marquee-track img{height:48px}
}