/* Landing page. Tokens and buttons come from app.css. */
html{scroll-behavior:smooth;scroll-padding-top:72px}
.lp{background:var(--bg)}
.lp-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--ink)}
.wordmark{font:800 20px/1 var(--sans);letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center}
.wordmark img{display:block;height:36px;width:auto}
.lp-nav nav{display:none;gap:28px}
.lp-nav nav a{text-decoration:none;font-size:15px;padding:12px 0}
.lp-nav nav a:hover{text-decoration:underline;text-underline-offset:6px}
.lp main{max-width:1160px;margin:0 auto;padding:0 20px}

.hero{display:grid;gap:28px;padding:40px 0 44px}
.hero h1{font-size:clamp(34px,9.5vw,68px);line-height:.98;letter-spacing:-.035em;margin:14px 0 18px;text-wrap:balance}
.hero .lead{font-size:18px;color:var(--muted);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-art{display:grid;place-items:center;padding:20px;border:1px solid var(--line);background:
  linear-gradient(var(--hair) 1px,transparent 1px) 0 0/100% 24px,
  linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/24px 100%,var(--paper)}
.hero-art svg,.hero-art img{width:100%;height:auto;max-width:460px;display:block}
.hero-art img{max-width:none;aspect-ratio:1;object-fit:cover}
.hero-art:has(img){padding:0;background:none}

.band{padding:44px 0;border-top:1px solid var(--ink)}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.sec-h h2{font-size:clamp(24px,6vw,36px)}
.sec-h .label{font-size:12px;color:var(--accent)}

.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:28px 76px 1fr;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--hair)}
.svc li:first-child{border-top:0;padding-top:0}
.svc .n{font-size:12px;color:var(--muted)}
.svc .sk{display:grid;place-items:center;height:76px}
.svc .sk svg{max-width:76px;max-height:76px;height:auto}
.svc h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.svc p{color:var(--muted);font-size:15px;margin-top:2px}

.proc{list-style:none;margin:0;padding:0;display:grid;gap:0}
.proc li{position:relative;padding:0 0 26px 44px;border-left:1px solid var(--ink);margin-left:14px}
.proc li:last-child{padding-bottom:0;border-left-color:transparent}
.proc .tick{position:absolute;left:-15px;top:-2px;width:29px;height:29px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--ink);font-size:13px}
.proc h3{font-size:18px;font-weight:800}
.proc p{color:var(--muted);font-size:15px;margin-top:2px}

.gal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--hair)}
.gal.ph div{display:grid;place-items:center;aspect-ratio:4/3;border:1px dashed var(--line);background:var(--paper);padding:10px}
.gal.ph svg{max-width:100%;max-height:100%;height:auto}

.about .big{font-size:clamp(20px,4.6vw,30px);line-height:1.3;letter-spacing:-.015em;max-width:26em;text-wrap:pretty}

.contact-grid{display:grid;gap:28px}
.reach{display:grid;gap:10px;align-content:start}
.reach dl{margin:14px 0 0}
.reach dt{margin-top:14px}.reach dd{margin:4px 0 0}

.lp-foot{display:flex;justify-content:space-between;gap:16px;max-width:1160px;margin:0 auto;padding:22px 20px calc(96px + env(safe-area-inset-bottom));border-top:1px solid var(--ink);font-size:13px;color:var(--muted)}
.lp-foot a{padding:12px 0;margin:-12px 0}
.lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--ink)}

@media (min-width:860px){
  .lp-nav{padding:14px 32px}.lp-nav nav{display:flex}
  .lp main{padding:0 32px}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px;padding:72px 0 80px}
  .band{padding:72px 0}
  .svc{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .svc li:nth-child(2){border-top:0;padding-top:0}
  .proc{grid-template-columns:repeat(4,1fr)}
  .proc li{border-left:0;border-top:1px solid var(--ink);margin:14px 0 0;padding:30px 24px 0 0}
  .proc li:last-child{border-top-color:var(--ink)}
  .proc .tick{left:0;top:-15px}
  .gal{grid-template-columns:repeat(3,1fr);gap:12px}
  .contact-grid{grid-template-columns:1.1fr .9fr;gap:64px}
  .lp-bar{display:none}
  .lp-foot{padding:26px 32px}
}