/* One architectural illustration family across the service. */
.line-sketch{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
.line-sketch .sketch-trace{stroke:var(--red);stroke-width:1.7}
.visuals-ready [data-sketch]:not(.sketch-drawn) .sketch-trace{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.visuals-ready [data-sketch].sketch-drawn .sketch-trace{stroke-dasharray:1;animation:sketch-draw 1.8s cubic-bezier(.22,.61,.36,1) both}
@keyframes sketch-draw{from{stroke-dashoffset:1;opacity:0}12%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
/* The film aligns with the hero copy; playback never adds a bottom panel. */
.home-start .hero{align-items:start}
.home-start{padding-bottom:var(--space-8)}
.hero-film{padding-bottom:0;align-self:start;min-width:0}
.hero-film .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.film-frame{position:relative;width:100%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:64px 4px 4px 4px;padding:28px 20px 14px;overflow:hidden}
.film-kicker{margin:0 0 16px;padding-left:24px;padding-right:32px;color:var(--muted);font-size:8px;line-height:1.8;letter-spacing:1.2px;text-transform:uppercase}
.hero-film-video{display:block;width:100%;height:auto;aspect-ratio:690/388;object-fit:contain;background:#fff}
.film-toggle{position:absolute;top:12px;right:10px;width:44px;height:44px;display:grid;place-items:center;background:#ffffffed;color:var(--ink);border:1px solid var(--line);border-radius:50%;padding:12px}
.film-toggle svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film-icon-pause{display:none}
.hero-film[data-playing=true] .film-icon-pause{display:block}
.hero-film[data-playing=true] .film-icon-play{display:none}
@media(hover:hover) and (pointer:fine){.hero-film[data-playing=true] .film-toggle{opacity:0}.hero-film:hover .film-toggle,.hero-film:focus-within .film-toggle{opacity:1}}
.home-start .benefits{margin-top:var(--space-6)}
@media(max-width:600px){.film-frame{border-top-left-radius:48px;padding:22px 12px 10px}.film-kicker{padding-left:18px;font-size:7px;letter-spacing:.7px;margin-bottom:12px}.film-toggle{top:6px;right:6px}}
/* Six situations keep the approved down-column reading order. */
.life-visual-intro{align-items:start}
.life-visual-intro>.life-prompt{margin:0;max-width:560px;align-self:end;font-size:16px;line-height:1.8}
.life-visual-list{grid-column:1/-1}
.life-visual-list li{gap:var(--space-4);align-items:center;min-width:0}
.life-visual-list .life-sketch{width:138px;height:108px;flex:0 0 138px}
.life-card-copy{min-width:0}
.life-visual-list li .life-card-number{font-size:12px;font-weight:400;display:block;margin:0 0 4px;color:var(--red)}
.life-visual-list h3{font-size:17px;line-height:1.5;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.life-visual-list li p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:370px}
/* Habits become spatial decisions. */
.habit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--block-space);margin-top:var(--block-space)}
.habit-card{border-top:1px solid var(--line);padding-top:var(--space-4);min-width:0}
.habit-card .line-sketch{height:150px;margin-bottom:var(--space-4)}
.habit-card h3{font-size:16px;font-weight:600;line-height:1.6;margin:0;letter-spacing:-.02em}
.habit-arrow{display:block;font-size:22px;line-height:1;color:var(--red);margin:12px 0}
.habit-card p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:340px}
/* A fixed decorative slot never moves the case title or the brief action. */
.case-copy{position:relative}
.case-illustrations{position:absolute;right:0;top:-12px;width:135px;height:74px;pointer-events:none}
.case-illustrations>div,.case-illustrations svg{width:100%;height:100%}
.case-copy .case-index{padding-right:140px}
.faq-sketch{width:230px;height:150px;margin-top:var(--space-6)}
.contact-sketch{width:185px;height:115px;margin-top:var(--space-4)}
/* Secondary pages receive the same visual voice. */
.page-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--column-space);align-items:center}
.page-intro-grid>div{min-width:0}
.page-intro-art .line-sketch{height:235px}
@media(hover:hover) and (pointer:fine){.life-sketch,.habit-card .line-sketch{transition:transform .35s ease}.life-visual-list li:hover .life-sketch,.habit-card:hover .line-sketch{transform:translateY(-3px)}}
@media(max-width:1100px){.life-visual-list .life-sketch{width:110px;flex-basis:110px}.page-intro-grid{grid-template-columns:minmax(0,1fr) 240px}.page-intro-art .line-sketch{height:190px}}
@media(max-width:800px){.life-visual-intro>.life-prompt{font-size:15px}.life-visual-list .life-sketch{width:90px;flex-basis:90px}.life-visual-list h3{font-size:15px}.life-visual-list li p{font-size:13px}.habit-grid{gap:var(--space-6)}.habit-card .line-sketch{height:125px}.habit-card h3{font-size:15px}.habit-card p{font-size:13px}.page-intro-grid{grid-template-columns:minmax(0,1fr) 180px;gap:var(--space-6)}.page-intro-art .line-sketch{height:150px}}
@media(max-width:600px){.life-visual-list{row-gap:0}.life-visual-list li{gap:12px}.life-visual-list .life-sketch{width:88px;height:94px;flex-basis:88px}.life-visual-list h3{font-size:16px}.life-visual-list li p{font-size:14px;line-height:1.75}.habit-grid{grid-template-columns:1fr;gap:var(--space-6)}.habit-card{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:16px;align-items:start}.habit-card .line-sketch{width:100px;height:120px;grid-column:1;grid-row:1/4;margin:0;align-self:center}.habit-card h3{grid-column:2;font-size:15px}.habit-card .habit-arrow{grid-column:2;margin:8px 0;font-size:20px}.habit-card p{grid-column:2;font-size:14px}.faq-sketch{width:155px;height:100px;margin-top:var(--space-4)}.contact-sketch{width:165px;height:100px}.page-intro-grid{grid-template-columns:minmax(0,1fr)}.page-intro-art .line-sketch{height:145px;width:230px;max-width:100%;margin-inline:auto}.page-intro-art{border-top:1px solid var(--line);padding-top:var(--space-4)}.case-illustrations{width:120px;height:68px;top:-8px}.case-copy .case-index{padding-right:125px}}
@media(prefers-reduced-motion:reduce){.line-sketch{transition:none!important}.visuals-ready [data-sketch] .sketch-trace{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}}

/* Fit the complete film below the introduction on phone screens. */
@media(max-width:600px){
  .home-start{padding-top:20px}
  .home-start .hero{gap:16px}
  .hero .eyebrow{margin-bottom:10px;font-size:9px;line-height:1.6;letter-spacing:1px}
  .hero h1{font-size:30px;line-height:1.15;margin-bottom:14px}
  .hero-mobile-join{display:none}
  .hero-lead{font-size:14px;line-height:1.6;margin-bottom:16px}
  .hero-actions{gap:8px}
  .hero-brief-entry{gap:5px}
  .hero-brief-entry .button{min-height:46px;padding:11px 16px;font-size:12px}
  .hero-brief-entry .brief-entry-note{font-size:10px;line-height:1.6}
  .hero-actions>.text-link{font-size:11px;margin-top:0;padding-block:4px}
  .hero-film{min-height:0}
  .film-frame{padding:18px 10px 8px;border-top-left-radius:40px}
  .film-kicker{margin-bottom:6px;padding-left:16px;line-height:1.6}
}
@media(max-width:360px){.hero h1{font-size:27px}.hero-lead{font-size:13px}}