/* ===== Layton Labs content sub-pages: studio / sa-jobbar-vi / kontakt =====
   Relies on styles.css for :root variables, .nav, .footer, .band, .signup, .pill. */

.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:clamp(148px,25vh,236px) 0 clamp(60px,11vh,116px)}
.phero-in{position:relative}
.phero-eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d);font-weight:600;margin:0 0 clamp(16px,2.4vh,24px)}
.phero-title{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(44px,8vw,100px);margin:0;text-wrap:balance}
.phero-lead{margin:clamp(20px,3vh,30px) 0 0;max-width:46ch;color:rgba(255,255,255,.82);font-size:clamp(17px,1.4vw,21px);line-height:1.5}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,38px)}

.page{background:var(--paper);color:var(--ink);padding:clamp(56px,9vh,108px) 0 clamp(64px,11vh,128px)}
.page-narrow{max-width:820px}
.page-lede{font-weight:400;letter-spacing:-.022em;line-height:1.22;font-size:clamp(24px,3.4vw,44px);max-width:18ch;margin:0 0 clamp(40px,6vh,72px);text-wrap:balance}

.page-list{list-style:none;border-top:1px solid var(--ink)}
.page-item{padding:clamp(30px,5vh,58px) 0;border-bottom:1px solid var(--line)}
.page-item:last-child{border-bottom:1px solid var(--ink)}
.page-h{font-weight:400;letter-spacing:-.03em;line-height:1.05;font-size:clamp(24px,3vw,40px);margin:0 0 clamp(12px,1.7vh,18px);text-wrap:balance}
.page-p{color:#4a4a4a;font-size:clamp(16px,1.2vw,18px);line-height:1.65;max-width:60ch;margin:0 0 14px}
.page-p:last-child{margin-bottom:0}
.page-p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.page-p a:hover{opacity:.65}

/* contact key/value rows */
.kv{list-style:none;border-top:1px solid var(--ink)}
.kv-row{display:grid;grid-template-columns:minmax(120px,0.32fr) 1fr;gap:6px clamp(20px,4vw,56px);padding:clamp(22px,3.4vh,34px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.kv-key{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kv-val{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.015em}
.kv-val a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.kv-val a:hover{opacity:.6}

@media(max-width:640px){
  .kv-row{grid-template-columns:1fr;gap:4px}
  .page-lede{max-width:none}
}