/* Landing-page refinements. Shared planner styles remain in style.css. */
.studio-home { --page: max(24px, calc((100% - 1100px) / 2)); --section-space: clamp(32px, 4vw, 52px); background: var(--bg); }
.studio-home .header { height:80px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:24px; padding-inline:var(--page); border:0; background:linear-gradient(180deg,#0c1012,#0c1012e6 58%,#0c101200); }
.studio-home .header .wordmark { justify-self:start; font-size:21px; }
.studio-home .desktop-nav { justify-content:center; gap:26px; font-size:14px; }
.studio-home .header-actions { justify-self:end; }
.studio-home .button { min-height:48px; padding:14px 21px; gap:24px; }
.studio-home .button.small { min-height:44px; padding:10px 15px; font-size:14px; }
.studio-home .mobile-nav { text-align:center; background:#10171bf7; border-color:#bfe3ee14; }
.studio-home .hero { height:auto; min-height:530px; margin-top:-80px; padding:118px var(--page) 66px; justify-content:center; text-align:center; }
.studio-home .hero-image { object-position:center 48%; }
.studio-home .hero-shade { background:linear-gradient(180deg,#0c1012 0%,#0c10125e 24%,#0c101270 65%,#0c1012 100%),linear-gradient(90deg,#0c10127a,#0c101242 50%,#0c10127a); }
.studio-home .hero-content { max-width:760px; width:100%; margin-inline:auto; }
.studio-home .hero .eyebrow { margin:0 auto 18px; max-width:none; font-size:12px; }
.studio-home .hero h1 { font-size:clamp(78px,8.6vw,122px); line-height:.9; }
.studio-home .hero-intro { font-size:16px; line-height:1.5; margin-top:18px; }
.studio-home .hero-links { justify-content:center; gap:24px; margin-top:24px; }
.studio-home .hero-foot { bottom:14px; justify-content:center; font-size:12px; letter-spacing:.1em; }
.studio-home .hero-foot span:last-child { display:none; }
.studio-home .discipline-strip { justify-content:center; flex-wrap:wrap; gap:20px; padding:14px var(--page); border:0; background:transparent; font-size:12px; letter-spacing:.07em; color:#a9bdc7; }
.studio-home .section { padding:var(--section-space) var(--page); }
.studio-home .section-heading { flex-direction:column; align-items:center; gap:12px; margin:0 auto 24px; text-align:center; max-width:660px; }
.studio-home .section-heading .eyebrow { margin-bottom:10px; font-size:12px; }
.studio-home .section-heading h2 { font-size:clamp(32px,3.5vw,46px); line-height:1.12; }
.studio-home .section-heading .text-link { margin-top:0; font-size:14px; }
.studio-home .work-section { padding-top:26px; }
/* The frame owns the ratio; fixed HTML image heights cannot stretch a grid row. */
.studio-home .tattoo-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; max-width:1020px; margin-inline:auto; }
.studio-home .tattoo-gallery figure { min-width:0; }
.studio-home .tattoo-gallery .image-button { aspect-ratio:4/5; }
.studio-home .tattoo-gallery .image-button img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.studio-home .tattoo-gallery figcaption { display:flex; flex-direction:column; gap:2px; margin-top:10px; font-size:14px; line-height:1.5; }
.studio-home .tattoo-gallery figcaption > span:first-child { font-weight:700; letter-spacing:.03em; }
.studio-home .tattoo-gallery figcaption a,.studio-home .tattoo-gallery figcaption > span:last-child:not(:first-child) { color:var(--muted); font-size:12px; }
.studio-home .tattoo-gallery figcaption a { padding:2px 0; width:fit-content; }
.studio-home .image-plus { width:32px; height:32px; right:10px; bottom:10px; font-size:22px; }
.studio-home .artist-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:42px; align-items:center; border:0; background:radial-gradient(ellipse at 50% 50%,#2130392e,transparent 68%); }
.studio-home .artist-portrait { position:relative; width:100%; max-width:480px; justify-self:center; overflow:hidden; }
.studio-home .artist-portrait-frame { aspect-ratio:1.05; overflow:hidden; }
.studio-home .artist-portrait img { width:100%; height:auto; aspect-ratio:auto; }
.studio-home .artist-portrait figcaption { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:38px 18px 16px; background:linear-gradient(transparent,#0c1012f5); font-size:12px; }
.studio-home .artist-portrait figcaption > span { letter-spacing:.06em; }
.studio-home .artist-portrait figcaption a { text-decoration:underline; text-underline-offset:4px; }
.studio-home .artist-copy { max-width:440px; margin-inline:auto; text-align:center; }
.studio-home .artist-copy .eyebrow { margin-bottom:16px; color:var(--muted); font-size:12px; }
.studio-home .artist-copy h2 { font-size:clamp(58px,6vw,82px); margin-bottom:14px; }
.studio-home .artist-copy .artist-role { color:var(--accent); font-size:18px; font-weight:600; margin-bottom:18px; }
.studio-home .artist-copy > p:not(.eyebrow):not(.artist-role) { font-size:16px; line-height:1.7; color:#b5bfc5; margin:0 0 14px; }
.studio-home .artist-copy .text-link { font-size:14px; margin-top:6px; }
.studio-home .world-section { display:block; min-height:0; background:radial-gradient(ellipse at 50% 50%,#263f4d30,transparent 68%); }
.studio-home .world-heading { max-width:580px; margin:0 auto 22px; text-align:center; }
.studio-home .world-heading .eyebrow { color:#a9bdc7; margin-bottom:12px; }
.studio-home .world-heading h2 { font-size:clamp(28px,3vw,38px); margin-bottom:14px; }
.studio-home .world-heading > p:last-child { font-size:16px; color:var(--muted); }
.studio-home .inspiration-gallery { display:grid; grid-template-columns:1fr 1.4fr; gap:18px; max-width:1020px; margin-inline:auto; }
.studio-home .world-image,.studio-home .ink-campaign-image { position:relative; min-width:0; min-height:0; height:280px; aspect-ratio:auto; overflow:hidden; }
.studio-home .inspiration-gallery img { position:absolute; width:100%; height:100%; object-fit:cover; }
.studio-home .world-image img { object-position:50% 38%; filter:saturate(.55) brightness(.8); }
.studio-home .ink-campaign-image img { object-position:54% center; }
.studio-home .inspiration-gallery figure::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0c101212 60%,#0c1012 100%); }
.studio-home .inspiration-gallery figcaption { position:absolute; z-index:1; bottom:16px; left:16px; right:16px; font-size:12px; letter-spacing:.08em; text-align:center; color:#dce1e3; }
/* The planner is a creative workspace; the appointment card below is its own action. */
.studio-home .planner-feature { display:block; border:0; background:radial-gradient(ellipse at 50% 60%,#213f5033,transparent 72%); }
.studio-home .planner-panel { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:36px; align-items:center; max-width:1020px; margin:auto; padding:30px; border:1px solid #a0b5c42b; border-radius:4px; background:linear-gradient(130deg,#14212999,#0c1012); }
.studio-home .planner-feature-art { width:100%; max-width:310px; justify-self:center; }
.studio-home .planner-paper { background:#f1efe9; color:#263035; padding:16px; border-radius:2px; transform:rotate(-2deg); box-shadow:8px 8px 0 #a0b5c41a; }
.studio-home .paper-label { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid #26303525; font-size:12px; letter-spacing:.07em; }
.studio-home .planner-paper img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; }
.studio-home .paper-caption { display:block; font-size:12px; text-align:center; }
.studio-home .planner-feature-copy { text-align:center; }
.studio-home .planner-feature .eyebrow { font-size:12px; margin-bottom:14px; color:#9eb8c7; }
.studio-home .planner-feature h2 { font:500 clamp(30px,3.3vw,43px)/1.1 Manrope,Arial,sans-serif; letter-spacing:-.045em; }
.studio-home .planner-feature .planner-feature-copy > p:not(.eyebrow) { max-width:420px; font-size:16px; line-height:1.65; margin:16px auto; color:#b3c6d1; }
.studio-home .planner-feature-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; padding:0; margin:20px 0; list-style:none; font-size:14px; letter-spacing:0; color:#cedbe2; }
.studio-home .planner-feature-steps span { font-size:12px; color:#7f9bab; margin-right:4px; }
.studio-home .planner-link { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:12px 18px; border:1px solid #8ca8b7; border-radius:3px; color:#e3edf2; font-size:14px; font-weight:700; }
.studio-home .planner-link:hover { background:#203540; border-color:#bfe3ee; }
.studio-home .planner-link > span { margin-left:12px; }
.studio-home .planner-feature .planner-feature-copy > p.planner-footnote { font-size:12px; margin:12px auto 0; max-width:330px; color:#93a8b4; }
.studio-home .booking-section { display:block; padding-top:12px; border:0; background:transparent; }
.studio-home .booking-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center; gap:32px; max-width:1020px; margin:auto; padding:30px; border:0; border-top:1px solid #bfe3ee2b; background:transparent; }
.studio-home .booking-label { display:flex; align-items:center; gap:12px; color:var(--accent); margin-bottom:12px; }
.studio-home .booking-label .eyebrow { margin:0; font-size:12px; }
.studio-home .booking-copy h2 { font:500 clamp(27px,2.8vw,36px)/1.16 Manrope,Arial,sans-serif; letter-spacing:-.045em; }
.studio-home .booking-copy > p { font-size:16px; line-height:1.65; margin-top:14px; color:#bdc9cf; }
.studio-home .booking-copy p.booking-detail { font-size:12px; line-height:1.6; max-width:410px; margin-top:10px; color:#9eafb8; }
.studio-home .booking-action { width:100%; max-width:350px; justify-self:center; text-align:center; }
.studio-home .booking-card .button,.studio-home .booking-card .ps-btn { min-height:52px; border-radius:0; }
.studio-home .secure-note { font-size:12px; margin-top:12px; }
.studio-home .fashion-link { justify-content:center; gap:22px; padding:22px var(--page); border:0; background:linear-gradient(180deg,#0c1012,#15212a66 50%,#0c1012); text-align:center; }
.studio-home .fashion-link > span { font-size:12px; }
.studio-home .fashion-link a { font-size:16px; }
.studio-home > footer { padding:26px var(--page) 20px; }
.studio-home .footer-top { justify-content:center; align-items:center; gap:48px; margin-bottom:26px; }
.studio-home .footer-top > div { gap:24px; font-size:14px; }
.studio-home .footer-bottom { border-color:#bfe3ee12; padding-top:16px; font-size:12px; }
@media (max-width:1050px) {
 .studio-home .header { grid-template-columns:auto 1fr auto; gap:18px; }
 .studio-home .desktop-nav { gap:16px; }
 .studio-home .header .wordmark { font-size:19px; }
 .studio-home .header .wordmark span { display:none; }
 .studio-home .artist-section { gap:28px; }
}
@media (max-width:760px) {
 .studio-home { --page:20px; --section-space:30px; }
 .studio-home .header { height:72px; grid-template-columns:1fr auto; gap:12px; }
 .studio-home .header .desktop-nav { display:none; }
 .studio-home .menu-toggle { display:block; }
 .studio-home .header-actions { gap:6px; }
 .studio-home .header .button.small { font-size:12px; padding-inline:12px; }
 .studio-home .hero { min-height:480px; margin-top:-72px; padding:106px var(--page) 60px; }
 .studio-home .hero h1 { font-size:clamp(62px,16vw,102px); }
 .studio-home .hero .eyebrow { max-width:290px; line-height:1.6; margin-bottom:18px; }
 .studio-home .hero-intro { font-size:16px; margin-top:16px; }
 .studio-home .hero-links { gap:18px; flex-wrap:wrap; margin-top:22px; }
 .studio-home .hero-links .button { font-size:14px; min-height:46px; padding:12px 16px; }
 .studio-home .hero-links .text-link { font-size:14px; }
 .studio-home .hero-foot { font-size:12px; letter-spacing:.04em; }
 .studio-home .discipline-strip { gap:8px; padding-block:12px; font-size:12px; letter-spacing:0; }
 .studio-home .discipline-strip span:last-child,.studio-home .discipline-strip span:nth-last-child(2) { display:none; }
 .studio-home .work-section { padding-top:24px; }
 .studio-home .section-heading { gap:10px; margin-bottom:20px; }
 .studio-home .section-heading h2 { font-size:32px; }
 .studio-home .tattoo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
 .studio-home .tattoo-gallery figcaption { font-size:14px; margin-top:8px; }
 .studio-home .image-plus { width:28px; height:28px; font-size:20px; right:8px; bottom:8px; }
 .studio-home .artist-section { grid-template-columns:1fr; gap:24px; }
 .studio-home .artist-portrait { max-width:420px; }
 .studio-home .artist-copy h2 { font-size:62px; }
 .studio-home .artist-copy .eyebrow { margin-bottom:10px; }
 .studio-home .artist-copy { max-width:430px; }
 .studio-home .world-heading h2 { font-size:28px; }
 .studio-home .inspiration-gallery { gap:10px; grid-template-columns:1fr 1.25fr; }
 .studio-home .world-image,.studio-home .ink-campaign-image { height:210px; }
 .studio-home .inspiration-gallery figcaption { left:8px; right:8px; bottom:12px; letter-spacing:.01em; }
 .studio-home .planner-panel { grid-template-columns:1fr; gap:26px; padding:26px 20px; }
 .studio-home .planner-feature-art { max-width:220px; }
 .studio-home .planner-paper { padding:12px; }
 .studio-home .planner-paper img { height:155px; aspect-ratio:auto; }
 .studio-home .planner-feature h2 { font-size:32px; }
 .studio-home .planner-feature-steps { gap:12px; }
 .studio-home .planner-feature .planner-feature-copy > p:not(.eyebrow) { margin:14px auto; }
 .studio-home .planner-feature .planner-feature-copy > p.planner-footnote { margin-bottom:0; }
 .studio-home .booking-section { padding-top:0; }
 .studio-home .booking-card { grid-template-columns:1fr; gap:22px; padding:26px 4px 0; text-align:center; }
 .studio-home .booking-label { justify-content:center; }
 .studio-home .booking-copy h2 { font-size:30px; }
 .studio-home .booking-copy p.booking-detail { margin-inline:auto; }
 .studio-home .booking-action { max-width:360px; }
 .studio-home .fashion-link { flex-direction:column; gap:8px; align-items:center; padding-block:20px; }
 .studio-home .footer-top { flex-direction:column; gap:22px; text-align:center; margin-bottom:22px; }
 .studio-home .footer-top > div { flex-direction:row; gap:20px; flex-wrap:wrap; justify-content:center; }
 .studio-home .footer-bottom { flex-wrap:wrap; justify-content:center; text-align:center; }
}
@media (max-width:360px) {
 .studio-home { --page:16px; }
 .studio-home .header .wordmark { font-size:17px; }
 .studio-home .header .button.small { padding-inline:9px; }
 .studio-home .tattoo-gallery figcaption { font-size:12px; }
 .studio-home .planner-panel { padding-inline:16px; }
 .studio-home .planner-feature-steps { gap:8px; font-size:12px; }
}