/* Homepage composition selected from option B. Shared appearance lives in site.css. */
.page{max-width:1440px;margin:0 auto;padding:0 48px}
.home-main h1,.home-main h2,.home-main p{margin:0}
.home-main h1{font-weight:650;letter-spacing:-.05em}
.home-main .eyebrow{font-size:14px;letter-spacing:.07em}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:70px;padding:30px 10px 33px}
.studio-name{font-family:Georgia,serif;font-weight:700;font-size:94px;line-height:.9;letter-spacing:-.075em;color:var(--orange)}
.studio-name span{padding-left:56px;font-style:italic}
.intro-copy .eyebrow{color:#a3442b;font-weight:500}
.intro h1{font-size:29px;line-height:1.7;letter-spacing:-.045em;margin:10px 0 14px}
.intro-copy>p:last-child{font-size:16px;color:#625c55;line-height:1.85}

.work{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:30px;position:relative;background:white;border:2px solid var(--ink);border-radius:26px;box-shadow:7px 7px 0 var(--ink);padding:29px 35px;overflow:hidden;min-height:315px}
.app-copy{min-width:0}
.app-heading{display:flex;gap:18px;align-items:center}
.app-heading .eyebrow{font-size:12px;color:#8e513b}
.app-heading h2{font-size:40px;letter-spacing:-.04em;font-weight:750;margin-top:2px}
.app-heading h2 a{text-decoration:none}
.app-heading .app-icon{width:62px;height:62px;flex:none}
.work .tagline{font-size:19px;font-weight:650;margin-top:18px}
.work .description{font-size:15px;color:#645b54;max-width:545px;line-height:1.8;margin-top:8px}
.work .app-meta{font-size:12px;margin-top:11px;color:#7a6b62}
.app-meta span{margin:0 8px}
.work .button{margin-top:15px}
.app-visual{position:relative;min-height:270px;background:#fbe05b;border-radius:50% 50% 15% 15%;margin:0 18px;align-self:stretch}
.phone{position:absolute;width:47%;max-width:173px;border:4px solid var(--ink);border-radius:19px;box-shadow:4px 12px 14px #45351625}
.phone-one{top:24px;left:3%;transform:rotate(-8deg)}
.phone-two{top:5px;right:2%;transform:rotate(8deg)}

.information{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:35px}
.information>a{display:flex;align-items:center;gap:20px;text-decoration:none;border-bottom:2px solid var(--ink);padding:18px 0;font-weight:600}
.information>a>span:last-child{margin-left:auto}
.info-number{font-size:12px;align-self:flex-start;margin-top:4px;color:var(--accent)}
.information small{display:block;font-size:13px;color:#756a60;font-weight:400;margin-top:2px}

.support{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;margin:68px 0;padding-top:34px;border-top:2px solid var(--line)}
.support h2{font-size:23px;margin-top:15px;font-weight:500}
.support p+p{margin-top:12px}
.support .fine{font-size:14px;color:#756a60}
.support .donate{display:inline-flex;gap:12px;align-items:center;font-size:14px;text-decoration:none;color:var(--accent);margin-top:20px;border-bottom:1px solid currentColor;padding-bottom:4px}

@media(max-width:1050px){.page{padding:0 32px}
.intro{gap:35px}
.studio-name{font-size:clamp(48px,7.4vw,78px)}
.intro h1{font-size:25px}
.work{grid-template-columns:minmax(0,1.2fr) minmax(0,.75fr);padding:27px}
.app-visual{margin:0}
.information{gap:16px}
.information small{font-size:12px}
}

@media(max-width:700px){.page{padding:0 22px}
.desktop{display:none}
.intro{grid-template-columns:minmax(0,1fr);gap:22px;padding:30px 0}
.studio-name{font-size:clamp(48px,17vw,72px);line-height:.91}
.studio-name span{padding-left:52px}
.intro h1{font-size:25px;margin:8px 0 12px}
.intro-copy .eyebrow{font-size:13px}
.work{grid-template-columns:minmax(0,1fr);padding:22px;gap:20px;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}
.app-heading{gap:14px}
.app-heading h2{font-size:32px}
.app-heading .app-icon{width:52px;height:52px}
.work .tagline{font-size:18px;line-height:1.7}
.work .description{font-size:16px}
.app-meta span{margin:0 4px}
.app-visual{height:284px;min-height:0;margin:0 8px;overflow:hidden;border-radius:24px}
.phone{width:45%;max-width:150px}
.phone-one{left:5%;top:20px}
.phone-two{right:5%;top:15px}
.work .button{font-size:14px;margin-top:18px}
.information{grid-template-columns:minmax(0,1fr);gap:0;margin-top:30px}
.information>a{border-bottom:1px solid #d9cebd;padding:18px 0}
.information small{font-size:13px}
.support{grid-template-columns:minmax(0,1fr);gap:22px;margin:45px 0;padding-top:30px}
.support h2{font-size:22px}
}

@media(max-width:360px){.app-heading h2{font-size:26px}
.app-heading{gap:10px}
.work .button{gap:12px;padding:12px 16px}
}