/* Quiet luxury: deep navy, warm paper, Japanese serif, and readable upright numerals. */
:root {
  --white: #fffefa;
  --ivory: #f3eee4;
  --charcoal: #0b1422;
  --black: #080f1a;
  --gray: #666e78;
  --line: #d9d2c4;
  --gold: #9f8354;
  --gold-text: #79613b;
  --numbers: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --width: 1120px;
  --space: 150px;
}
body { font-size: 16px; line-height: 2; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.72; letter-spacing: .08em; }
h3 { line-height: 1.7; }
.container { width: calc(100% - 112px); }
.eyebrow, .editorial-label { color: var(--gold-text); font-size: 12px; letter-spacing: .2em; }
.eyebrow { gap: 17px; margin-bottom: 28px; }
.eyebrow:before { width: 35px; }
a:focus-visible, button:focus-visible { outline-color: #87662d; }
.hero a:focus-visible, .hero button:focus-visible, .site-header a:focus-visible, .site-header button:focus-visible, .final-cta a:focus-visible, .final-cta button:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: #e1c598; }
.draft-bar { background: #080f1a; border-bottom: 1px solid #202d40; color: #c1c1b4; padding: 7px 20px; }
.site-header { background: var(--charcoal); color: #f1ebdf; height: 112px; padding: 0 5%; border-bottom: 1px solid #273448; gap: 28px; }
.site-header.scrolled { background: rgba(11,20,34,.98); border-color: #273448; }
.brand>span { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: .035em; }
.brand small { font-size: 11px; letter-spacing: .08em; margin-top: 7px; color: #cbd5df; }
.brand-dot { color: #c6aa79; }
.desktop-nav { font-size: 14px; gap: 27px; }
.line-cta { min-height: 62px; padding: 18px 25px; font-size: 15px; border: 1px solid #636b5a; background: #28352c; color: #faf7ef; letter-spacing: .04em; }
.line-cta:hover { background: #3c4c40; border-color: #75806a; }
.header-cta { background: transparent; border-color: #9f8c6d; color: #efe6d7; font-size: 13px; padding: 14px 19px; min-height: 50px; }
.header-cta:hover { background: #3e4237; border-color: #c6aa79; }
.cta-arrow { font-size: 22px; margin-left: 22px; }
.line-icon { padding: 7px 4px; font-size: 8px; color: #28352c; }
.hero { display: block; position: relative; min-height: 880px; background: var(--charcoal); color: #f5f0e6; overflow: hidden; padding: 56px 0 0; }
.hero-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .63; }
.hero-layout { position: relative; display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: 60px; }
.hero-copy { padding: 16px 0 40px; min-width: 0; position: relative; }
.hero .eyebrow { color: #cfb487; font-size: 12px; letter-spacing: .2em; margin-bottom: 25px; }
.hero h1 { white-space: normal; font-size: clamp(50px, 4.7vw, 68px); font-weight: 400; line-height: 1.52; letter-spacing: .09em; margin-top: 0; }
.hero h1 span { display: inline-block; padding-left: .8em; }
.hero-lead { font-size: 16px; color: #d2d0c4; line-height: 2.05; letter-spacing: .055em; margin-top: 25px; }
.hero-cta { margin-top: 35px; }
.hero-cta .line-cta { background: #f0ebdf; border-color: #f0ebdf; color: #252c23; padding: 20px 25px; }
.hero-cta .line-cta:hover { background: #dbccb1; border-color: #dbccb1; }
.hero-cta .line-icon { color: white; background: #28352c; }
.hero-cta .line-icon:after { border-top-color: #28352c; }
.hero-cta .small { color: #bdbbae; font-size: 12px; margin-top: 16px; }
.scroll-cue { display: flex; margin-top: 27px; padding-top: 0; font-size: 10px; color: #c9c6b8; gap: 15px; }
.scroll-cue span { height: 30px; background: #b29a70; }
.hero-visual { min-height: 650px; width: 100%; margin-top: 14px; overflow: visible; }
.hero-photo-main { position: absolute; top: 14px; left: 30px; right: 0; height: 548px; padding: 0; border: 1px solid #9a8763; }
.hero-photo-main:before { content: ""; position: absolute; z-index: 1; pointer-events: none; inset: 10px; border: 1px solid rgba(248,240,220,.4); }
.hero-photo-main picture, .hero-photo-main img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo-main img { object-position: 64% 50%; }
.hero-photo-label { position: absolute; top: -14px; right: 0; font: 10px/1.6 Arial,sans-serif; color: #c4b18b; letter-spacing: .18em; }
.hero-detail { position: absolute; left: -18px; bottom: 12px; margin: 0; width: 242px; border: 9px solid var(--charcoal); background: var(--charcoal); }
.hero-detail img { position: static; height: 158px; width: 100%; object-position: 65% center; }
.hero-detail figcaption { font-family: var(--serif); font-size: 12px; line-height: 1.8; letter-spacing: .07em; padding: 14px 0 4px; color: #ece5d5; white-space: nowrap; }
.hero-visual .photo-caption { bottom: 41px; left: 250px; right: 0; display: block; background: none; padding: 0; color: #c9c3b2; }
.photo-caption span:first-child { display: block; font: 29px/1.2 Georgia,serif; letter-spacing: .18em; }
.photo-caption span:last-child { display: block; margin-top: 9px; font: 9px/1.5 Arial; letter-spacing: .23em; }
.hero-footer { position: relative; display: flex; justify-content: space-between; border-top: 1px solid #58594b; color: #aeb09f; padding: 23px 0 30px; margin-top: 15px; font: 10px/1.8 Arial,sans-serif; letter-spacing: .19em; }
.hero-footer span:last-child { font: 12px/1.8 var(--serif); letter-spacing: .15em; }
.intro { padding-top: 155px; padding-bottom: 140px; }
.intro-grid { grid-template-columns: 1fr 1.1fr; gap: 115px; }
.intro h2 { font-size: 41px; line-height: 1.9; }
.intro-lead { font-family: var(--serif); font-size: 23px; line-height: 1.9; }
.concerns { margin: 36px 0; }
.concerns li { padding: 20px 0; font-size: 16px; }
.concerns li:before { content: "—"; margin-right: 20px; }
.intro-grid>div:last-child>p:last-child { font-size: 16px; line-height: 2.1; }
.concept { position: relative; overflow: hidden; padding-bottom: 75px; }
.concept-grid { grid-template-columns: 1.1fr 1fr; gap: 98px; }
.concept-photo { padding-bottom: 0; }
.concept-photo :is(img, video) { height: 560px; object-position: center top; }
.concept-copy p:not(.eyebrow) { font-size: 16px; line-height: 2.05; }
.concept-copy .section-lead { font-family: var(--serif); font-size: 22px!important; font-weight: 500; margin-top: 32px; }
.concept-copy p.small { font-size: 12px; }
.concept-art { position: relative; margin-top: 65px; padding: 38px 0; border-top: 1px solid #cbb999; border-bottom: 1px solid #cbb999; }
.concept-art-copy { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.concept-art-copy p:first-child { font: italic 42px/1.4 Georgia,serif; color: #6e5c3e; }
.concept-art-copy p:last-child { font: 16px/2 var(--serif); letter-spacing: .1em; margin-top: 0; }
.text-link { font-size: 14px; padding-bottom: 13px; border-color: #aa9164; }
.section-top { margin-bottom: 80px; }
.section-aside { font-size: 15px; color: var(--gray); line-height: 2; }
.feature-row { grid-template-columns: 1.25fr 1fr; gap: 100px; margin-bottom: 100px; }
.feature-row.reverse { grid-template-columns: 1fr 1.03fr; margin-left: 50px; }
.feature-row.reverse .feature-copy { padding-left: 0; }
.feature-photo img { height: 390px; }
.feature-row.reverse .feature-photo img { height: 440px; }
.feature-copy h3 { font-size: 27px; margin: 18px 0 26px; line-height: 1.75; }
.feature-copy p { font-size: 16px; line-height: 2.05; }
.section-number { font: 500 46px/1.2 var(--numbers); color: #57728e; letter-spacing: 0; }
.voice-grid { grid-template-columns: 1fr 1.2fr; gap: 100px; }
.voice-empty { padding: 40px 0; }
.voice-empty h3 { font-size: 29px; margin: 25px 0; }
.voice-empty p { font-size: 16px; }
.therapist-grid { grid-template-columns: 1fr 1.05fr; gap: 100px; }
.therapist-photo { position: relative; padding: 16px 0 0 16px; }
.therapist-photo:before { content: ""; position: absolute; z-index: -1; inset: 0 16px 16px 0; border: 1px solid #ad9264; }
.therapist-photo img { height: 620px; object-position: 65% center; }
.therapist-name { font-size: 25px; margin: 12px 0 26px; }
.therapist-copy>p:not(.eyebrow):not(.therapist-role):not(.small) { font-size: 16px; line-height: 2.05; }
.therapist-role { font-size: 13px; margin-top: 35px; }
.profile-list>div, .access-list>div { font-size: 14px; padding: 19px 0; }
.pending { font-size: 13px; }
.flow-grid { gap: 100px; grid-template-columns: 1fr 1.15fr; }
.flow-side { top: 145px; }
.flow-side img { height: 400px; }
.flow-side>p { font-family: var(--serif); font-size: 24px; }
.flow-steps li { padding: 27px 0; gap: 28px; }
.flow-steps h3 { font: 500 19px/1.75 var(--serif); }
.flow-steps p { font-size: 14px; }
.step-number { font: 500 28px/1.4 var(--numbers); color: #57728e; letter-spacing: 0; }
.price-heading h2 { font-size: 44px; }
.price-panel { padding: 58px 0; border-color: #947c50; }
.price-offer h3 { font-size: 28px; }
.price-amount { font-family: var(--numbers); font-size: 64px; font-weight: 500; color: var(--charcoal); margin: 32px 0 25px; }
.price-detail dl>div { padding: 15px 0; }
.price-cta { margin-top: 50px; }
.faq-container { max-width: 930px; }
.faq-note { margin-bottom: 45px; }
.faq-question { padding: 29px 0; font-size: 16px; }
.question-mark, .answer-mark { font-family: var(--numbers); font-style: normal; font-weight: 500; color: #57728e; }
.faq-answer p { font-size: 16px; line-height: 2; }
.final-cta { position: relative; background: linear-gradient(90deg, rgba(8,15,26,.28), rgba(8,15,26,.06)), url("assets/consultation-navy-arch.webp") center/cover; padding: 145px 0; border-top: 1px solid #9f8354; border-bottom: 1px solid #806e4d; }
.final-grid { grid-template-columns: 1.08fr .92fr; gap: 95px; position: relative; }
.final-cta .eyebrow { color: #d0b58a; }
.final-cta h2 { font-size: 46px; line-height: 1.8; }
.final-cta p:not(.eyebrow):not(.small) { font-size: 16px; color: #d8d4c7; }
.final-cta .small { color: #c3c0b2; font-size: 12px; }
.final-cta .line-cta { background: #f0ebdf; border-color: #f0ebdf; margin-top: 40px; }
.final-photo { padding: 15px; border: 1px solid #b29a70; background: rgba(8,15,26,.32); box-shadow: 0 20px 60px rgba(0,0,0,.16); }
.final-photo img { height: 425px; }
.access-grid { gap: 100px; }
.access-photo img { height: 460px; }
.site-footer { background: #080f1a; padding-top: 78px; }
.footer-top { padding-bottom: 50px; }
.footer-top nav { font-size: 14px; gap: 16px 25px; }
.footer-bottom { padding-top: 24px; border-color: #273448; }
.footer-note { font-size: 11px; color: #b8b9aa; }
.privacy-link, .back-top { font-size: 13px; }
.notice-dialog { background: var(--ivory); }
.notice-dialog h2 { font-size: 26px; line-height: 1.65; }
.menu-toggle { color: #eee8d9; }
.mobile-menu { background: var(--charcoal); color: #ece5d8; }
.mobile-menu a { border-color: #273448; }
.mobile-menu .line-cta { border-color: #b39a6d; }
.mobile-sticky { background: #f3eee4; border-top-color: #a08b67; }
.mobile-sticky .line-cta { background: #29392e; }
@media (min-width: 1600px) {
  .hero { min-height: 925px; }
  .hero-copy { padding-left: 0; }
}
@media (max-width: 1199px) {
  .site-header { height: 102px; padding: 0 35px; gap: 24px; }
  .desktop-nav { font-size: 13px; gap: 22px; }
  .brand>span { font-size: 18px; }
  .header-cta { font-size: 12px; padding: 14px; }
  .hero { min-height: 810px; padding-top: 55px; }
  .hero-layout { gap: 40px; grid-template-columns: .9fr 1fr; }
  .hero h1 { font-size: 54px; }
  .hero-visual { min-height: 610px; }
  .hero-photo-main { left: 20px; height: 505px; }
  .hero-detail { width: 210px; bottom: 10px; }
  .hero-detail img { height: 140px; }
  .hero-visual .photo-caption { left: 218px; bottom: 35px; }
  .photo-caption span:first-child { font-size: 24px; }
  .intro-grid, .concept-grid, .therapist-grid, .feature-row, .flow-grid, .final-grid, .access-grid, .voice-grid { gap: 60px; }
  .intro h2 { font-size: 36px; }
  .intro-lead { font-size: 21px; }
  .feature-row.reverse { margin-left: 0; }
  .feature-copy h3 { font-size: 25px; }
  .final-cta h2 { font-size: 40px; }
}
@media (max-width: 900px) {
  .container { width: calc(100% - 64px); }
  .hero { min-height: 790px; }
  .hero h1 { font-size: 47px; }
  .hero .eyebrow { font-size: 10px; }
  .hero-lead { font-size: 14px; }
  .hero .line-cta { font-size: 13px; padding: 18px; gap: 10px; }
  .hero .cta-arrow { margin-left: 8px; }
  .hero-visual { min-height: 580px; }
  .hero-photo-main { height: 475px; left: 10px; }
  .hero-detail { width: 180px; left: -5px; }
  .hero-detail img { height: 125px; }
  .hero-detail figcaption { font-size: 10px; }
  .hero-visual .photo-caption { left: 190px; }
  .photo-caption span:first-child { font-size: 20px; }
  .concept-grid, .therapist-grid, .feature-row, .flow-grid, .final-grid, .access-grid { gap: 35px; }
  .intro-grid { gap: 45px; }
  .concept-photo :is(img, video) { height: 510px; }
  .feature-copy h3 { font-size: 22px; }
  .profile-list>div { grid-template-columns: 125px 1fr; gap: 12px; }
  .final-cta .line-cta { font-size: 13px; gap: 10px; padding: 18px; }
  .final-photo { padding: 12px; }
}
@media (max-width: 767px) {
  :root { --space: 86px; }
  html { scroll-padding-top: 86px; }
  .container { width: calc(100% - 48px); }
  h2 { font-size: 30px; line-height: 1.8; letter-spacing: .065em; }
  .eyebrow { font-size: 11px; margin-bottom: 22px; }
  .draft-bar { font-size: 9px; padding: 7px 12px; gap: 10px; }
  .draft-bar span { font-size: 10px; }
  .site-header { height: 86px; padding: 0 24px; }
  .brand>span { font-size: 17px; }
  .brand small { font-size: 10px; margin-top: 7px; }
  .menu-toggle { padding: 12px 0 12px 12px; font-size: 10px; }
  .hero { display: block; min-height: 0; padding: 38px 0 0; }
  .hero-atmosphere { height: 740px; width: 100%; object-position: 70% center; opacity: .63; }
  .hero-layout { display: block; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 25px; }
  .hero h1 { font-size: clamp(44px, 11.7vw, 57px); line-height: 1.56; letter-spacing: .09em; }
  .hero h1 span { padding-left: .8em; }
  .hero-lead { font-size: 14px; line-height: 2; margin-top: 25px; }
  .hero-cta { margin-top: 27px; width: 100%; }
  .hero .line-cta { font-size: 14px; gap: 14px; padding: 18px 20px; min-width: 0; }
  .hero .cta-arrow { margin-left: 16px; }
  .hero-cta .small { font-size: 11px; margin-top: 12px; }
  .scroll-cue { display: none; }
  .hero-visual { height: 486px; min-height: 0; margin: 46px 0 0; }
  .hero-photo-main { top: 0; left: 21px; right: 0; height: 373px; }
  .hero-photo-main img { object-position: 66% center; }
  .hero-photo-main:before { inset: 8px; }
  .hero-detail { width: 163px; bottom: 20px; left: 0; border-width: 7px; }
  .hero-detail img { height: 105px; }
  .hero-detail figcaption { font-size: 10px; letter-spacing: 0; padding-top: 10px; }
  .hero-visual .photo-caption { left: 177px; bottom: 48px; right: 0; }
  .photo-caption span:first-child { font-size: 21px; letter-spacing: .11em; }
  .photo-caption span:last-child { font-size: 8px; letter-spacing: .18em; margin-top: 7px; }
  .hero-photo-label { font-size: 8px; top: -21px; }
  .hero-footer { margin-top: 0; padding: 17px 0 23px; font-size: 8px; letter-spacing: .06em; gap: 15px; }
  .hero-footer span:last-child { font-size: 10px; letter-spacing: .04em; }
  .intro { padding: 86px 0; }
  .intro-grid { display: block; }
  .intro h2 { font-size: 32px; line-height: 1.95; }
  .intro h2 br:nth-of-type(2) { display: inline; }
  .intro-grid>div:last-child { margin-top: 36px; }
  .intro-lead { font-size: 19px; }
  .concerns { margin: 28px 0; }
  .concerns li { font-size: 14px; padding: 19px 0; }
  .concerns li:before { margin-right: 13px; }
  .intro-grid>div:last-child>p:last-child { font-size: 15px; }
  .concept { padding-bottom: 0; }
  .concept-grid { display: grid; grid-template-columns: 1fr; gap: 38px; }
  .concept-photo :is(img, video) { height: 365px; }
  .concept-copy p:not(.eyebrow) { font-size: 15px; }
  .concept-copy p.small { font-size: 12px; }
  .concept-copy .section-lead { font-size: 20px!important; }
  .concept-art { margin-top: 40px; padding: 28px 0; }
  .concept-art-copy { display: block; }
  .concept-art-copy p:first-child { font-size: 36px; }
  .concept-art-copy p:last-child { font-size: 15px; margin-top: 13px; }
  .section-top { margin-bottom: 43px; }
  .section-aside { margin-top: 26px; font-size: 14px; }
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 26px; margin-bottom: 62px; margin-left: 0; }
  .feature-photo img { height: 270px; }
  .feature-row.reverse .feature-photo img { height: 285px; }
  .feature-copy, .feature-row.reverse .feature-copy { padding-left: 49px; }
  .section-number { font-size: 34px; }
  .feature-copy h3 { font-size: 22px; margin: 0 0 18px; line-height: 1.8; }
  .feature-copy p { font-size: 15px; }
  .voice-grid, .therapist-grid, .flow-grid, .final-grid, .access-grid { grid-template-columns: 1fr; gap: 37px; }
  .voice-empty { padding: 28px 0; }
  .voice-empty h3 { font-size: 26px; }
  .voice-empty p { font-size: 15px; }
  .therapist-photo { padding-top: 12px; padding-left: 12px; }
  .therapist-photo img { height: 430px; }
  .therapist-copy h2 { font-size: 32px; }
  .therapist-copy>p:not(.eyebrow):not(.therapist-role):not(.small) { font-size: 15px; }
  .profile-list>div { grid-template-columns: 135px 1fr; font-size: 13px; }
  .flow-side { position: static; }
  .flow-side img { height: 285px; }
  .flow-side>p { font-size: 19px; }
  .flow-steps li { gap: 18px; padding: 24px 0; }
  .flow-steps h3 { font-size: 18px; }
  .flow-steps p { font-size: 14px; }
  .step-number { font-size: 27px; }
  .price-heading h2 { font-size: 34px; }
  .price-panel { padding: 34px 0; gap: 28px; }
  .price-offer h3 { font-size: 25px; }
  .price-amount { font-size: 52px; }
  .price-amount small { display: block; margin-left: 0; margin-top: 15px; }
  .price-detail dl>div { padding: 13px 0; }
  .price-cta { margin-top: 32px; }
  .faq-note { margin-bottom: 29px; }
  .faq-question { font-size: 15px; padding: 24px 0; }
  .faq-answer p { font-size: 15px; line-height: 1.9; }
  .final-cta { padding: 86px 0; background-image: linear-gradient(90deg, rgba(8,15,26,.2), rgba(8,15,26,.4)), url("assets/consultation-navy-arch-small.webp"); background-position: 82% top; background-size: auto 680px; background-repeat: no-repeat; background-color: var(--black); }
  .final-cta h2 { font-size: 34px; }
  .final-cta p:not(.eyebrow):not(.small) { font-size: 15px; }
  .final-cta .line-cta { font-size: 14px; padding: 18px; gap: 12px; }
  .final-cta .small { font-size: 11px; }
  .final-photo { padding: 12px; }
  .final-photo img { height: 285px; }
  .access-list>div { font-size: 13px; padding: 19px 0; }
  .access-photo img { height: 325px; }
  .site-footer { padding-top: 52px; }
  .footer-top nav { font-size: 13px; gap: 17px 24px; }
  .footer-note { font-size: 10px; }
  .notice-dialog h2 { font-size: 23px; }
  .mobile-sticky .line-cta { font-size: 14px; min-height: 54px; }
}
@media (max-width: 359px) {
  .container { width: calc(100% - 40px); }
  .site-header { padding: 0 20px; }
  .hero h1 { font-size: 43px; letter-spacing: .07em; }
  .hero .line-cta { font-size: 13px; padding: 17px 16px; gap: 10px; }
  .hero .cta-arrow { margin-left: 9px; }
  .hero-lead { font-size: 13px; }
  .hero-visual { height: 441px; }
  .hero-photo-main { height: 339px; left: 17px; }
  .hero-detail { width: 145px; }
  .hero-detail img { height: 94px; }
  .hero-detail figcaption { font-size: 9px; }
  .hero-visual .photo-caption { left: 153px; bottom: 41px; }
  .photo-caption span:first-child { font-size: 18px; letter-spacing: .08em; }
  .profile-list>div, .access-list>div { grid-template-columns: 118px 1fr; }
  .feature-copy h3 { font-size: 21px; }
  .final-cta .line-cta { font-size: 13px; padding: 17px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere, .reveal-ready { transform: none; }
}

/* Content adapted from the supplied prototype. */
.hero h1.source-headline { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.85; letter-spacing: .04em; }
.hero-offer { display: block; margin-top: 27px; padding: 16px 0 15px; border-top: 1px solid #72664d; border-bottom: 1px solid #72664d; min-width: 290px; }
.hero-offer>span:first-child { font-size: 11px; letter-spacing: .12em; color: #d7c39c; }
.hero-offer strong { display: block; font: 500 39px/1.4 var(--numbers); letter-spacing: 0; margin: 5px 0; }
.hero-offer strong>span { font-size: 22px; margin-right: 4px; }
.hero-offer small { font: 12px/1.5 var(--font); margin-left: 15px; color: #d2d0c4; letter-spacing: .04em; }
.hero-offer .hero-offer-time { display: block; color: #c5c4b5; font-size: 11px; letter-spacing: .02em; }
.hero-offer:hover { border-color: #ccb58a; }
.hero-cta { margin-top: 28px; }
.hero-copy { padding-bottom: 24px; }
.hero-lead { margin-top: 18px; }
.hero .scroll-cue { margin-top: 22px; }
.concerns li { display: flex; align-items: baseline; }
.concerns li:before { flex: none; }
.voice-intro { margin-top: 30px; font-size: 16px; }
.voice-disclaimer { margin-top: 24px; font-size: 12px; color: var(--gray); }
.voice-item { padding: 35px 0 40px; }
.voice-item:first-child { border-top: 1px solid var(--line); }
.voice-item h3 { font-size: 25px; margin-top: 16px; }
.voice-item .editorial-label>span { color: var(--gray); font: 12px/1.7 var(--font); letter-spacing: .03em; margin-left: 13px; }
.voice-item blockquote { margin: 23px 0; padding: 0; font-size: 16px; color: #4f6276; line-height: 2.05; }
.voice-item blockquote p+p { margin-top: 18px; }
.voice-item>.small { font-size: 11px; color: var(--gray); }
.therapist-name { font-size: 33px; letter-spacing: .18em; margin-bottom: 12px; }
.therapist-copy>.therapist-experience { font: 15px/1.9 var(--font); color: var(--gold-text); letter-spacing: .06em; margin: 0 0 29px; }
.therapist-photo img { object-position: center; }
.credential { display: block; }
.credential+.credential { margin-top: 10px; }
.price-amount .yen { font-size: .56em; margin-right: 6px; }
.first-plan { font-size: 13px; color: var(--gray); }
.first-time { font: 500 20px/1.6 var(--numbers); letter-spacing: 0; margin-top: 10px; }
.price-detail>.price-plan-note { margin-top: 28px; font-size: 14px; line-height: 2; color: var(--gray); }
.plans { margin-top: 65px; }
.plan-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.plan-table caption { text-align: left; font: 24px/1.8 var(--serif); letter-spacing: .08em; padding-bottom: 24px; }
.plan-table th, .plan-table td { border-bottom: 1px solid var(--line); padding: 25px 20px; text-align: left; font-weight: 400; }
.plan-table thead th { font: 12px/1.8 var(--font); color: var(--gray); border-top: 1px solid #9f8962; border-bottom-color: #9f8962; padding-top: 16px; padding-bottom: 16px; }
.plan-table th:first-child { width: 57%; padding-left: 0; }
.plan-table th:nth-child(2) { width: 15%; }
.plan-table th:last-child { width: 28%; }
.plan-table th:last-child, .plan-table td:last-child { text-align: right; padding-right: 0; }
.plan-name { display: block; font: 21px/1.7 var(--serif); letter-spacing: .04em; }
.plan-range { display: block; font: 13px/1.8 var(--font); color: var(--gray); margin-top: 6px; }
.plan-duration { font-size: 14px; white-space: nowrap; }
.plan-amount { font: 500 28px/1.6 var(--numbers); color: var(--charcoal); white-space: nowrap; }
.plan-note { margin-top: 24px; font-size: 12px; color: var(--gray); }
.answer-copy p+p { margin-top: 16px; }
.faq-note { font-size: 14px; color: var(--gray); }
.access-lead { font: 24px/1.8 var(--serif); letter-spacing: .045em; }
.access-list dd a { border-bottom: 1px solid var(--line); }
.access .text-link { gap: 20px; font-size: 13px; }
.footer-clinic { font-size: 13px; color: #c9c6b7; margin-top: 23px; letter-spacing: .07em; }
@media (max-width: 900px) and (min-width: 768px) {
  .hero-offer { min-width: 0; width: 100%; }
  .hero h1.source-headline { font-size: 28px; }
  .hero-copy { padding-top: 0; }
}
@media (max-width: 767px) {
  .hero h1.source-headline { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.85; letter-spacing: .035em; }
  .hero-lead { margin-top: 18px; }
  .hero-offer { width: 100%; min-width: 0; margin-top: 22px; padding: 14px 0 12px; }
  .hero-offer strong { font-size: 36px; margin: 3px 0; }
  .hero-offer strong>span { font-size: 21px; }
  .hero-cta { margin-top: 23px; }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { margin-top: 40px; }
  .voice-intro { font-size: 15px; margin-top: 20px; }
  .voice-disclaimer { font-size: 11px; margin-top: 20px; }
  .voice-item h3 { font-size: 23px; }
  .voice-item blockquote { font-size: 15px; }
  .voice-item { padding: 29px 0 32px; }
  .therapist-name { font-size: 30px; }
  .therapist-photo img { height: 460px; }
  .profile-list>div { grid-template-columns: 95px 1fr; gap: 15px; }
  .plans { margin-top: 39px; }
  .plan-table caption { font-size: 21px; padding-bottom: 17px; }
  .plan-table th, .plan-table td { padding: 22px 6px; }
  .plan-table th:first-child { width: 51%; }
  .plan-table th:nth-child(2) { width: 15%; }
  .plan-table th:last-child { width: 34%; }
  .plan-table thead th { font-size: 10px; padding: 13px 6px; }
  .plan-name { font-size: 17px; letter-spacing: 0; }
  .plan-range { font-size: 11px; line-height: 1.8; margin-top: 5px; }
  .plan-duration { font-size: 12px; }
  .plan-amount { font-size: 24px; letter-spacing: 0; }
  .plan-note { font-size: 11px; }
  .access-lead { font-size: 21px; }
  .access-list>div { grid-template-columns: 90px 1fr; }
  .footer-clinic { font-size: 12px; margin-top: 18px; }
}
@media (max-width: 359px) {
  .hero h1.source-headline { font-size: 28px; letter-spacing: .015em; }
  .plan-name { font-size: 15px; }
  .plan-amount { font-size: 21px; }
  .plan-duration { font-size: 11px; }
  .plan-table th, .plan-table td { padding-left: 4px; padding-right: 4px; }
  .therapist-photo img { height: 400px; }
}

@media (max-width:359px) { h2 { font-size:28px; } .price-heading h2 { font-size:30px; } }

/* Full-bleed treatment photography with live text over the image. */
.hero.hero-overlay { isolation: isolate; min-height: 0; padding: 38px 0 0; background: var(--charcoal); }
.hero-overlay .hero-background { position: absolute; inset: 0; z-index: 0; }
.hero-overlay .hero-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.hero-overlay:before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,15,26,.91) 0%, rgba(8,15,26,.83) 29%, rgba(8,15,26,.48) 49%, rgba(8,15,26,.13) 72%, rgba(8,15,26,.16) 100%); }
.hero-overlay .hero-layout { position: relative; z-index: 2; display: flex; align-items: center; min-height: 740px; gap: 0; }
.hero-overlay .hero-copy { display: block; width: 560px; max-width: 52%; padding: 28px 0 35px; }
.hero-overlay .hero-message { width: 100%; }
.hero.hero-overlay h1.source-headline { font-size: clamp(36px, 3.7vw, 52px); line-height: 1.7; letter-spacing: .04em; }
.hero-overlay .hero-lead { margin-top: 20px; color: #f1eee4; font-size: 16px; line-height: 2; }
.hero-overlay .hero-action { width: 330px; max-width: 100%; margin-top: 28px; }
.hero-overlay .hero-offer { margin-top: 0; min-width: 0; width: 100%; padding: 13px 0; border-color: #a49677; }
.hero-overlay .hero-offer>span:first-child { color: #eee0bf; font-size: 12px; }
.hero-overlay .hero-offer strong { font-size: 40px; line-height: 1.35; margin: 4px 0; }
.hero-overlay .hero-offer small, .hero-overlay .hero-offer .hero-offer-time { color: #eee9df; font-size: 12px; }
.hero-overlay .hero-offer:hover { border-color: #efdfbe; }
.hero-overlay .hero-cta { margin-top: 24px; }
.hero-overlay .hero-cta .line-cta { width: 100%; }
.hero-overlay .hero-cta .small { color: #e4e2d7; font-size: 12px; margin-top: 12px; }
.hero-overlay .scroll-cue { margin-top: 27px; color: #dedccb; }
.hero-overlay .hero-footer { position: relative; z-index: 2; margin-top: 0; padding: 18px 0 22px; color: #e3e1d4; border-color: rgba(237,226,201,.4); }
@media (min-width:1600px) {
  .hero-overlay .hero-layout { min-height: 790px; }
}
@media (max-width:1199px) and (min-width:768px) {
  .hero.hero-overlay { padding-top: 30px; }
  .hero-overlay .hero-layout { min-height: 710px; }
  .hero-overlay .hero-copy { max-width: 55%; }
  .hero.hero-overlay h1.source-headline { font-size: clamp(32px, 3.7vw, 42px); }
  .hero-overlay .hero-action { width: 310px; }
}
@media (max-width:767px) {
  .hero.hero-overlay { padding: 0; }
  .hero-overlay .hero-background img { object-position: 70% 50%; }
  .hero-overlay:before { background: linear-gradient(180deg, rgba(8,15,26,.9) 0%, rgba(8,15,26,.76) 28%, rgba(8,15,26,.2) 45%, rgba(8,15,26,.16) 59%, rgba(8,15,26,.83) 79%, rgba(8,15,26,.93) 100%), linear-gradient(90deg, rgba(8,15,26,.25), rgba(8,15,26,0) 75%); }
  .hero-overlay .hero-layout { display: block; min-height: 0; }
  .hero-overlay .hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 140px; width: 100%; max-width: none; min-height: 780px; padding: 35px 0 25px; }
  .hero-overlay .hero-message { width: 100%; }
  .hero-overlay .eyebrow { font-size: 11px; margin-bottom: 20px; color: #e1cba3; }
  .hero.hero-overlay h1.source-headline { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.8; letter-spacing: .035em; }
  .hero-overlay .hero-lead { font-size: 14px; line-height: 2; margin-top: 18px; }
  .hero-overlay .hero-action { width: 100%; margin: 0; }
  .hero-overlay .hero-offer { padding: 12px 0; }
  .hero-overlay .hero-offer strong { font-size: 36px; line-height: 1.3; margin: 3px 0; }
  .hero-overlay .hero-offer>span:first-child { font-size: 12px; }
  .hero-overlay .hero-offer .hero-offer-time { font-size: 12px; letter-spacing: 0; }
  .hero-overlay .hero-cta { margin-top: 20px; }
  .hero-overlay .hero-cta .small { font-size: 12px; margin-top: 10px; }
  .hero-overlay .scroll-cue { display: none; }
  .hero-overlay .hero-footer { padding: 15px 0 20px; font-size: 9px; letter-spacing: .08em; }
  .hero-overlay .hero-footer span:last-child { font-size: 11px; letter-spacing: .04em; }
}
@media (max-width:359px) {
  .hero.hero-overlay h1.source-headline { font-size: 28px; letter-spacing: .015em; }
  .hero-overlay .hero-copy { min-height: 745px; gap: 130px; }
  .hero-overlay .hero-footer { font-size: 8px; gap: 10px; }
  .hero-overlay .hero-footer span:last-child { font-size: 10px; }
}


/* LINE consultation CTAs: official icon, colors, and isolated content layers. */
.line-cta[data-line] {
  --line-icon-width: 25px;
  --line-icon-area: 61px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 62px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #06c755;
  color: #fff;
  font: 600 15px/1.5 var(--font);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  transition: none;
}
.line-cta[data-line]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity .16s ease;
}
.line-cta[data-line]:hover::before { opacity: .1; }
.line-cta[data-line]:active::before { opacity: .3; transition: none; }
.line-cta[data-line]:focus-visible { outline: 3px solid #06c755; outline-offset: 5px; box-shadow: 0 0 0 3px #fff; }
.line-cta[data-line] .line-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--line-icon-area);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.line-cta[data-line] .line-icon img {
  display: block;
  width: var(--line-icon-width);
  height: auto;
  max-width: none;
  object-fit: contain;
}
.line-cta[data-line] .line-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 1px;
  border: 0;
  background: rgba(0,0,0,.08);
}
.line-cta[data-line] .line-label {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px var(--line-icon-width);
  color: #fff;
  white-space: nowrap;
}
.line-cta.header-cta[data-line] { min-height: 52px; font-size: 13px; --line-icon-area: 55px; }
.hero-overlay .hero-cta .small, .price-cta .small, .final-cta .small { margin-top: 18px; }
.line-cta[data-line]:disabled { cursor: default; background: #fff; border-color: rgba(229,229,229,.6); }
.line-cta[data-line]:disabled::before { opacity: 0; }
.line-cta[data-line]:disabled .line-label { color: rgba(30,30,30,.2); }
.line-cta[data-line]:disabled .line-icon img { visibility: hidden; }
.line-cta[data-line]:disabled .line-icon::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 24px;
  background: rgba(30,30,30,.2);
  -webkit-mask: url("assets/line-icon-white.png") center / contain no-repeat;
  mask: url("assets/line-icon-white.png") center / contain no-repeat;
}
.line-cta[data-line]:disabled .line-icon::after { background: rgba(229,229,229,.6); }
@media (max-width:1199px) and (min-width:768px) {
  .line-cta[data-line] { font-size: 14px; }
}
@media (max-width:900px) { .line-cta.header-cta[data-line] { display: none; } }
@media (max-width:767px) {
  .line-cta[data-line] { min-height: 58px; font-size: 14px; --line-icon-area: 57px; }
  .mobile-sticky { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width:359px) { .line-cta[data-line] { font-size: 13px; } }


/* Upright numerals for prices, duration, and numbered sections. */
.hero-offer strong, .price-amount, .plan-amount, .section-number, .step-number,
.first-time, .plan-duration, .editorial-label, .access-list dd {
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.price-amount, .plan-amount, .hero-offer strong { letter-spacing: 0; }
.plan-duration { font-family: var(--numbers); }
@media (max-width:767px) {
  .brand>span { font-size: 17px; letter-spacing: .025em; }
  .brand small { font-size: 10px; letter-spacing: .06em; }
}
@media (max-width:359px) {
  .brand>span { font-size: 15px; letter-spacing: .015em; }
}


/* Framed introductory pricing with a generated matte navy / gold-foil texture. */
.hero-overlay .hero-offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 23px;
  border: 1px solid #bc9b64;
  background: #0b1422 url("assets/price-navy-gold.webp") center / cover;
  box-shadow: 0 12px 30px rgba(4,8,15,.22);
  text-align: left;
}
.hero-overlay .hero-offer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px;
  border: 1px solid rgba(217,188,139,.25);
  pointer-events: none;
}
.hero-overlay .hero-offer>span:first-child { color: #ead7b2; }
.hero-overlay .hero-offer strong { color: #f5e5bf; }
.hero-overlay .hero-offer small, .hero-overlay .hero-offer .hero-offer-time { color: #ece8de; }
.hero-overlay .hero-offer:hover { border-color: #ecd3a0; }
.hero-overlay .hero-offer:focus-visible { outline-offset: 6px; }
.price-panel { gap: 52px; padding: 0; border: 0; align-items: center; }
.price-offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 38px 42px;
  border: 1px solid #bc9b64;
  background: #0b1422 url("assets/price-navy-gold.webp") center / cover;
  color: #fffaf0;
  box-shadow: 0 16px 36px rgba(8,15,26,.09);
}
.price-offer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  border: 1px solid rgba(217,188,139,.32);
  pointer-events: none;
}
.price-offer .editorial-label { color: #dcc291; }
.price-offer .price-amount { color: #f5e5bf; }
.price-offer .price-amount small { color: #efe9dc; }
.price-offer .first-plan { color: #ddd7cb; }
.price-offer .first-time { color: #fffaf0; }
.price-detail { padding: 18px 0; }
.plan-table .plan-amount { background: rgba(159,131,84,.07); }
.plan-table thead th:last-child { background: rgba(159,131,84,.07); }
.plan-table td:last-child, .plan-table th:last-child { padding-right: 18px; }
@media (max-width:1199px) and (min-width:768px) {
  .price-panel { gap: 38px; }
  .price-offer { padding: 38px 29px 36px; }
}
@media (max-width:900px) and (min-width:768px) {
  .price-panel { grid-template-columns: 1fr 1.05fr; gap: 28px; }
  .price-offer { padding: 34px 24px; }
}
@media (max-width:767px) {
  .hero-overlay .hero-offer { padding: 16px 22px; background-image: url("assets/price-navy-gold-small.webp"); }
  .price-panel { gap: 24px; }
  .price-offer { padding: 34px 26px; background-image: url("assets/price-navy-gold-small.webp"); border-bottom: 1px solid #bc9b64; }
  .price-detail { padding: 0; }
  .plan-table td:last-child, .plan-table th:last-child { padding-right: 9px; }
}
@media (max-width:359px) {
  .hero-overlay .hero-offer { padding: 15px 18px; }
  .price-offer { padding: 30px 21px; }
  .plan-table td:last-child, .plan-table th:last-child { padding-right: 6px; }
}

/* Keep the campaign title together in narrower pricing cards. */
@media (max-width:900px) and (min-width:768px) {
  .price-offer h3 { font-size: 24px; letter-spacing: .025em; }
}
@media (max-width:359px) {
  .price-offer h3 { font-size: 22px; letter-spacing: .015em; }
}

/* Generated mineral paper gives the editorial sections one tactile material. */
.intro, .features, .therapist, .price, .access {
  background-image: linear-gradient(rgba(255,254,250,.9), rgba(255,254,250,.9)), url("assets/ivory-mineral-paper.webp");
  background-position: center;
  background-size: cover;
}
.concept, .voice, .flow, .faq {
  background-image: linear-gradient(rgba(243,238,228,.72), rgba(243,238,228,.72)), url("assets/ivory-mineral-paper.webp");
  background-position: center;
  background-size: cover;
}
.features, .voice, .therapist, .flow, .price, .faq, .access { border-top: 1px solid rgba(159,131,84,.22); }
.section .eyebrow:before { width: 46px; background: linear-gradient(90deg, #b3925e, #d6c7a8); }
.intro-grid>div:first-child { position: relative; }
.intro-grid>div:first-child:after { content: ""; display: block; width: 94px; height: 1px; margin-top: 43px; background: linear-gradient(90deg, #b3925e, transparent); }
.concept-photo, .feature-photo, .access-photo {
  padding: 10px;
  border: 1px solid rgba(159,131,84,.5);
  background: rgba(255,254,250,.62);
  box-shadow: 0 16px 35px rgba(57,43,20,.055);
}
.feature-copy { padding-top: 10px; }
.feature-copy h3:after { content: ""; display: block; width: 45px; height: 1px; background: #b3925e; margin-top: 22px; }
.voice-item {
  position: relative;
  padding: 32px 35px 34px;
  border: 1px solid #d6c6aa;
  background: rgba(255,254,250,.76);
  box-shadow: 0 14px 35px rgba(57,43,20,.045);
}
.voice-item:first-child { border-top-color: #b69b6c; }
.voice-item+.voice-item { margin-top: 26px; }
.voice-item:before { content: ""; position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; border-top: 1px solid #b69b6c; border-left: 1px solid #b69b6c; pointer-events: none; }
.therapist-photo:before { background: linear-gradient(rgba(243,238,228,.7), rgba(243,238,228,.7)), url("assets/ivory-mineral-paper.webp") center/cover; }
.profile-list { border-top: 1px solid #b8a17b; }
.flow-side>img { border: 8px solid rgba(255,254,250,.85); outline: 1px solid rgba(159,131,84,.45); box-shadow: 0 16px 35px rgba(57,43,20,.07); }
.flow-steps { border-top: 1px solid #b8a17b; }
.flow-steps li { border-color: rgba(159,131,84,.35); }
.price-heading:after { content: ""; display: block; width: 90px; height: 1px; margin: 35px auto 0; background: linear-gradient(90deg, transparent, #9f8354, transparent); }
.plan-table thead { background: rgba(159,131,84,.045); }
.faq-list { border-top: 1px solid #b8a17b; padding: 0 30px; background: rgba(255,254,250,.8); box-shadow: 0 16px 40px rgba(57,43,20,.035); }
.faq-item { border-color: rgba(159,131,84,.32); }
.access-photo .small { margin: 14px 7px 4px; }
.final-cta .eyebrow:before { background: #c5aa7b; }
.site-footer { border-top: 1px solid rgba(197,170,123,.22); }

@media (max-width:1199px) and (min-width:768px) {
  .concept-art { padding: 33px 0; }
  .concept-art-copy { gap: 35px; }
  .concept-art-copy p:first-child { font-size: 37px; }
  .voice-item { padding: 28px; }
}
@media (max-width:767px) {
  .intro, .features, .therapist, .price, .access, .concept, .voice, .flow, .faq { background-image: linear-gradient(rgba(255,254,250,.87), rgba(255,254,250,.87)), url("assets/ivory-mineral-paper-small.webp"); }
  .concept, .voice, .flow, .faq { background-image: linear-gradient(rgba(243,238,228,.73), rgba(243,238,228,.73)), url("assets/ivory-mineral-paper-small.webp"); }
  .section .eyebrow:before { width: 34px; }
  .intro-grid>div:first-child:after { margin-top: 28px; width: 72px; }
  .concept { padding-bottom: 60px; }
  .concept-art-copy p:first-child { font-size: 31px; }
  .concept-photo, .feature-photo, .access-photo { padding: 7px; }
  .feature-copy { padding-top: 0; }
  .feature-copy h3:after { margin-top: 18px; width: 35px; }
  .voice-item { padding: 27px 22px; }
  .voice-item+.voice-item { margin-top: 20px; }
  .faq-list { padding: 0 17px; }
  .access-photo .small { margin: 11px 3px 3px; }
}

/* The visit photo retains the complete frame, including the practitioner's hands. */
.flow-side>img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: right bottom; }
@media (max-width:900px) and (min-width:768px) {
  .final-cta h2 { font-size: 34px; letter-spacing: .045em; }
}

/* The treatment clip keeps the photo framing and a discreet pause control. */
.concept-video { display: block; width: 100%; object-fit: cover; background: #080f1a; }
.concept-video-toggle { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 106px; min-height: 44px; padding: 10px 15px; border: 1px solid rgba(214,199,168,.7); border-radius: 2px; background: rgba(8,15,26,.82); color: #fffefa; font: 500 12px/1.5 Arial, sans-serif; letter-spacing: .03em; }
.concept-video-toggle[hidden] { display: none; }
.concept-video-toggle:hover { background: #0b1422; }
.concept-video-toggle:focus-visible { outline: 2px solid #fffefa; outline-offset: 3px; }
.video-control-icon { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.concept-video-toggle[data-playing="false"] .video-control-icon { width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
@media (max-width:767px) { .concept-video-toggle { right: 20px; bottom: 20px; } }

/* The therapist introduction starts directly with the practitioner profile. */
.therapist-copy > .therapist-role { margin-top: 0; }
@media (max-width:900px) and (min-width:768px) {
  .intro h2 { font-size: 32px; letter-spacing: .045em; }
}
@media (max-width:359px) {
  .intro h2 { font-size: 28px; letter-spacing: .03em; }
}
@media (max-width:390px) {
  .final-cta h2 { font-size: 30px; letter-spacing: .03em; }
}

/* Three concise illustrated steps adapted from the supplied explanation sheet. */
.mechanism { margin: 28px 0 0; padding: 21px 0 18px; border-top: 1px solid rgba(159,131,84,.5); border-bottom: 1px solid rgba(159,131,84,.35); }
.mechanism-steps { list-style: none; padding: 0; margin: 0; }
.mechanism-steps li { display: grid; grid-template-columns: 140px minmax(0,1fr); align-items: center; gap: 20px; padding: 17px 0; }
.mechanism-steps li+li { border-top: 1px solid rgba(159,131,84,.2); }
.mechanism-steps li:first-child { padding-top: 0; }
.mechanism-art { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1024 / 560; }
.mechanism-art img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; }
.mechanism-art-movement { aspect-ratio: 1024 / 550; }
.mechanism-art-movement img { transform: translateY(-37.109375%); }
.mechanism-art-circulation { aspect-ratio: 1024 / 416; }
.mechanism-art-circulation img { transform: translateY(-72.916667%); }
.mechanism-step-heading { display: flex; align-items: baseline; gap: 9px; }
.mechanism-number { flex-shrink: 0; font: 500 12px/1.6 var(--numbers); color: var(--gold-text); }
.mechanism-step-heading h3 { font-size: 16px; line-height: 1.65; letter-spacing: .025em; }
.concept-copy .mechanism-text p { margin-top: 6px; font-size: 13px; line-height: 1.9; color: #5c6470; }
.concept-copy p.mechanism-note { margin-top: 4px; font-size: 11px; line-height: 1.8; color: var(--gray); }
@media (max-width:1199px) and (min-width:768px) {
  .mechanism-steps li { grid-template-columns: 112px minmax(0,1fr); gap: 15px; }
  .mechanism-step-heading h3 { font-size: 14px; }
  .concept-copy .mechanism-text p { font-size: 13px; }
}
@media (max-width:767px) {
  .mechanism { margin-top: 25px; padding: 20px 0 16px; }
  .mechanism-steps li { grid-template-columns: 120px minmax(0,1fr); gap: 18px; }
  .mechanism-step-heading h3 { font-size: 15px; }
}
@media (max-width:390px) {
  .mechanism-steps li { grid-template-columns: 100px minmax(0,1fr); gap: 12px; }
  .mechanism-step-heading { gap: 7px; }
  .mechanism-step-heading h3 { font-size: 14px; }
  .concept-copy .mechanism-text p { font-size: 13px; }
}

/* Ivory paper and peripheral brass foil frame the live copy without covering it. */
.mechanism {
  position: relative;
  padding: 24px 24px 20px;
  border: 1px solid #c6b18b;
  background-image: linear-gradient(rgba(255,254,250,.22), rgba(255,254,250,.22)), url("assets/mechanism-ivory-brass.webp");
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 12px 30px rgba(57,43,20,.055);
}
.mechanism:before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(159,131,84,.22); pointer-events: none; }
.mechanism-steps li { grid-template-columns: 112px minmax(0,1fr); gap: 12px 18px; padding: 22px 0; }
.mechanism-art { grid-column: 1; grid-row: 1; }
.mechanism-text { display: contents; }
.mechanism-step-heading { grid-column: 2; grid-row: 1; align-items: flex-start; gap: 10px; }
.mechanism-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid rgba(159,131,84,.55); border-radius: 50%; background: rgba(255,254,250,.72); line-height: 1; }
.mechanism-step-heading h3 { font-size: 16px; line-height: 1.8; letter-spacing: .025em; }
.concept-copy .mechanism-text p { grid-column: 1 / -1; margin-top: 0; font-size: 14px; line-height: 1.95; }
.concept-copy p.mechanism-note { margin-top: 8px; text-align: right; }
.voice-item { background-image: linear-gradient(rgba(255,254,250,.36), rgba(255,254,250,.36)), url("assets/mechanism-ivory-brass.webp"); background-position: right top; background-size: 100% auto; border-color: #d2bf9b; }
@media (max-width:1199px) and (min-width:768px) {
  .mechanism { padding: 22px 18px 18px; }
  .mechanism-steps li { grid-template-columns: 100px minmax(0,1fr); gap: 10px 14px; }
  .mechanism-step-heading { gap: 8px; }
  .mechanism-step-heading h3 { font-size: 15px; }
}
@media (max-width:767px) {
  .mechanism { padding: 22px 20px 18px; background-image: linear-gradient(rgba(255,254,250,.22), rgba(255,254,250,.22)), url("assets/mechanism-ivory-brass-small.webp"); }
  .voice-item { background-image: linear-gradient(rgba(255,254,250,.36), rgba(255,254,250,.36)), url("assets/mechanism-ivory-brass-small.webp"); }
  .mechanism-steps li { grid-template-columns: 104px minmax(0,1fr); gap: 10px 14px; }
  .mechanism-step-heading h3 { font-size: 15px; }
}
@media (max-width:390px) {
  .mechanism { padding: 20px 16px 16px; }
  .mechanism-steps li { grid-template-columns: 88px minmax(0,1fr); gap: 10px 12px; }
  .mechanism-step-heading { gap: 7px; }
  .mechanism-number { width: 24px; height: 24px; font-size: 11px; }
  .mechanism-step-heading h3 { font-size: 14px; }
}