
.studio-hero{background:#0f1010;color:#fff;min-height:740px;display:grid;grid-template-columns:1fr 1fr}
.studio-hero-copy{padding:clamp(52px,7vw,104px);display:flex;flex-direction:column;justify-content:center}
.studio-hero-copy h1{font-family:"Manrope",Arial,sans-serif;font-size:clamp(76px,8.8vw,132px);font-weight:700;line-height:.78;margin:26px 0 32px;letter-spacing:-.07em}
.studio-hero-copy p{max-width:680px;line-height:1.9;color:#ddd5ca;font-size:19px;font-weight:400}
.studio-hero-media{min-height:740px;background:url('/studio-hero.jpg') center/cover no-repeat}

.story{background:#f6f2eb}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:start}
.story h2{font-size:clamp(48px,6vw,84px);line-height:.94;margin:12px 0 0}
.story-grid>p{font-size:19px;line-height:1.95;color:#5d5850;margin-top:36px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px}
.features article{padding:32px;border-radius:22px;background:rgba(255,255,255,.78);border:1px solid rgba(17,17,15,.09);backdrop-filter:blur(12px)}
.features b{display:block;font-family:"Manrope",Arial,sans-serif;font-size:18px;font-weight:800;line-height:1.3;margin-bottom:12px}
.features p{font-size:16px;line-height:1.85;color:#6a655e;margin:0}

.beauty-section{background:#111210;color:#fff;overflow:hidden}
.beauty-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.beauty-copy h2{font-size:clamp(56px,7vw,100px);margin:14px 0 28px}
.beauty-copy>p{max-width:700px;font-size:19px;line-height:1.95;color:#ccc5b9}
.beauty-note{margin-top:28px;padding:24px 26px;border-left:2px solid #c5a46f;background:rgba(255,255,255,.04);max-width:690px;color:#ded8cd;line-height:1.85;font-size:17px}
.beauty-visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.beauty-orbit{position:absolute;border:1px solid rgba(215,190,148,.34);border-radius:50%}
.orbit-a{width:78%;height:78%}
.orbit-b{width:54%;height:54%;border-color:rgba(255,255,255,.15)}
.beauty-center{width:42%;aspect-ratio:1/1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,#e5cfa9 0%,#ad8a59 36%,#3b3428 100%);box-shadow:0 32px 90px rgba(0,0,0,.35);text-align:center}
.beauty-center span{font:700 10px "Manrope",Arial,sans-serif;letter-spacing:.18em}
.beauty-center strong{font:600 clamp(30px,4vw,56px) "Manrope",Arial,sans-serif;letter-spacing:-.04em;margin:4px 0}

.branding-section{background:#fff}
.branding-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.branding-intro h2{font-size:clamp(54px,7vw,96px);margin:14px 0 0}
.branding-intro>p{font-size:19px;line-height:1.95;color:#5f5a53;margin-top:34px}
.branding-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:54px}
.branding-grid article{min-height:250px;padding:30px;border-radius:24px;background:#f4f0e9;border:1px solid rgba(17,17,15,.07)}
.feature-no{display:block;font:700 11px "Manrope",Arial,sans-serif;letter-spacing:.14em;color:#9b7b50;margin-bottom:36px}
.branding-grid h3{font:700 20px "Manrope",Arial,sans-serif;margin:0 0 12px}
.branding-grid p{font-size:16px;line-height:1.85;color:#69635c;margin:0}
.branding-statement{margin-top:18px;padding:52px clamp(24px,5vw,58px);border-radius:26px;background:#151614;color:#fff;display:grid;grid-template-columns:.35fr 1.65fr;gap:40px;align-items:center}
.branding-statement strong{font-size:clamp(32px,4vw,54px);line-height:1.15}

.selected-section{background:#f8f5ef}

.package{background:#e8dfd2}
.package-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.package .price{font-family:"Manrope",Arial,sans-serif;font-size:clamp(72px,9vw,118px);line-height:.88;letter-spacing:-.05em}
.package .price small{font:800 11px "Manrope",Arial,sans-serif;letter-spacing:.12em}
.package>div p{line-height:1.85}
.package-row{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid #beb1a0;font:600 13px "Manrope",Arial,sans-serif}
.package-row span:last-child{text-align:right;font-weight:800}
.addon{margin-top:28px;padding:24px;border:1px solid #bdb09f;border-radius:18px}
.addon b{font:800 14px "Manrope",Arial,sans-serif}

.contact{background:#11110f;color:#fff;text-align:center}
.contact h2{font-size:clamp(52px,7vw,98px);line-height:.92;margin:14px 0 22px}
.contact-copy{color:#c7c0b5;margin:0 0 28px}

@media(max-width:900px){
 .studio-hero{grid-template-columns:1fr}
 .studio-hero-media{order:-1;min-height:52vh}
 .studio-hero-copy{padding:54px 24px 64px}
 .story-grid,.beauty-grid,.branding-intro,.package-grid{grid-template-columns:1fr}
 .features{grid-template-columns:1fr}
 .branding-grid{grid-template-columns:1fr 1fr}
 .branding-statement{grid-template-columns:1fr;gap:18px}
 .beauty-visual{max-width:620px;width:100%;margin:auto}
}

@media(max-width:560px){
 .studio-hero-copy h1{font-size:clamp(66px,22vw,96px);line-height:.78}
 .studio-hero-copy p{font-size:15px}
 .story h2,.beauty-copy h2,.branding-intro h2{font-size:clamp(44px,14vw,68px)}
 .branding-grid{grid-template-columns:1fr}
 .beauty-center{width:48%}
 .branding-statement{padding:34px 24px}
 .branding-statement strong{font-size:clamp(30px,9vw,42px)}
}

/* V2.3 Studio Type Override */
.story h2,
.beauty-copy h2,
.branding-intro h2,
.contact h2,
.branding-statement strong{
  font-family:"Manrope","Noto Sans Thai",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.055em;
}
.package .price{
  font-family:"Manrope",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.065em;
}
.beauty-center strong{
  font-family:"Manrope",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.05em;
}
.package>div>p,
.contact-copy{
  font-size:18px;
  line-height:1.9;
}
@media(max-width:900px){
  .studio-hero-copy p,
  .story-grid>p,
  .beauty-copy>p,
  .branding-intro>p{
    font-size:18px;
  }
}
@media(max-width:560px){
  .studio-hero-copy p,
  .story-grid>p,
  .beauty-copy>p,
  .branding-intro>p{
    font-size:17px;
    line-height:1.85;
  }
  .features p,
  .branding-grid p{
    font-size:15px;
  }
  .beauty-note{
    font-size:16px;
  }
}


/* V3.0 Studio Page Layout */
.studio-hero-media{background:none!important}
.beauty-visual{border-radius:30px;overflow:hidden;background:#201f1c;box-shadow:0 36px 90px rgba(0,0,0,.34)}
.branding-media{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin:48px 0 18px}
.branding-media .layout-media{border-radius:26px}
.branding-wide{aspect-ratio:16/9}.branding-portrait{aspect-ratio:4/5}
@media(max-width:900px){.branding-media{grid-template-columns:1fr}.branding-wide,.branding-portrait{aspect-ratio:4/5}}
