/* ═══════════════════════════════════════════════════════
   Flora & Metabolite Lab. — Design System
   vitalregina.com
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

:root {
  --forest:#1a2e1a; --forest-light:#2d4a2d; --forest-dark:#0f1f0f;
  --sage:#7a9e7a; --gold:#c5a55a; --gold-light:#d4bc7e;
  --cream:#f8f5ee; --white:#fff; --warm-gray:#e8e4dc;
  --text-dark:#1a1a1a; --text-mid:#555548; --text-light:#8a8a7a;
  --teal:#2a7a6e; --teal-light:#3a9a8e; --teal-bg:#eaf5f3;
  --regina-rose:#a8284f; --regina-d-purple:#5b3a8c; --vitalex-gold:#c9a84c;
  --font-display:'Cormorant Garamond',serif; --font-body:'Noto Sans JP',sans-serif;
  --max-w:1200px; --pad:24px; --sec-pad:120px;
  --nav-h:80px; --nav-h-s:64px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:100px;
  --tr-fast:.25s ease; --tr:.3s ease; --tr-smooth:.4s cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text-dark);background:var(--forest);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button{border:none;outline:none;cursor:pointer;font-family:var(--font-body)}
input,textarea,select{font-family:var(--font-body)}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--forest)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.3}
h1{font-size:48px} h2{font-size:36px} h3{font-size:24px}

.section-label{font-family:var(--font-display);font-size:12px;letter-spacing:4px;text-transform:uppercase;margin-bottom:12px}
.section-label--gold{color:var(--gold)} .section-label--teal{color:var(--teal)}

/* ─── Nav ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;backdrop-filter:blur(0);transition:all var(--tr);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(26,46,26,.95);backdrop-filter:blur(12px);border-bottom-color:rgba(197,165,90,.2)}
.nav__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height var(--tr)}
.nav.scrolled .nav__inner{height:var(--nav-h-s)}
.nav__logo{display:flex;align-items:baseline;gap:8px}
.nav__logo-main{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--gold);letter-spacing:1px}
.nav__logo-sub{font-family:var(--font-display);font-size:13px;color:var(--gold-light);letter-spacing:2px;font-style:italic}
.nav__links{display:flex;gap:32px;align-items:center}
.nav__link{color:var(--cream);font-size:13px;letter-spacing:1px;opacity:.85;transition:opacity var(--tr-fast)}
.nav__link:hover{opacity:1}
.nav__cta{color:var(--forest);background:var(--gold);font-size:12px;font-weight:600;padding:8px 20px;border-radius:var(--r-pill);letter-spacing:1px;transition:background var(--tr)}
.nav__cta:hover{background:var(--gold-light)}
.nav__hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav__hamburger span{display:block;width:24px;height:2px;background:var(--cream);transition:all var(--tr)}
.nav__hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav__hamburger.active span:nth-child(2){opacity:0}
.nav__hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav__mobile-menu{display:none;position:fixed;top:var(--nav-h-s);left:0;right:0;bottom:0;background:rgba(26,46,26,.98);backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:32px;z-index:99}
.nav__mobile-menu.active{display:flex}
.nav__mobile-menu a{color:var(--cream);font-size:18px;letter-spacing:2px}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:14px 32px;border-radius:var(--r-pill);letter-spacing:1px;transition:all var(--tr);cursor:pointer}
.btn--gold{background:var(--gold);color:var(--forest)} .btn--gold:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn--teal{background:var(--teal);color:var(--white)} .btn--teal:hover{background:var(--teal-light);transform:translateY(-1px)}
.btn--outline{background:transparent;border:1px solid var(--sage);color:var(--cream)} .btn--outline:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn--outline-dark{background:transparent;border:1px solid rgba(42,122,110,.4);color:var(--teal)}
.btn .btn__arrow{font-size:18px;transition:transform var(--tr-fast)} .btn:hover .btn__arrow{transform:translateX(4px)}

/* ─── Cards ─── */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--warm-gray);transition:all var(--tr-smooth);overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(26,46,26,.07)}
.card--dark{background:rgba(255,255,255,.03);border-color:rgba(197,165,90,.1)}
.card--dark:hover{background:rgba(197,165,90,.06);border-color:rgba(197,165,90,.25)}

/* ─── Tags ─── */
.tag{display:inline-block;font-size:10px;font-weight:600;padding:4px 14px;border-radius:var(--r-pill);letter-spacing:1px}
.tag--gold{color:var(--gold);border:1px solid var(--gold)}
.tag--green{color:var(--white);background:#4a7c59}
.tag--teal{color:var(--white);background:var(--teal)}

/* ─── Scroll Animations ─── */
.fade-in{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.fade-in--right{transform:translateX(-36px)} .fade-in--left{transform:translateX(36px)}
.fade-in.visible{opacity:1;transform:none}
.fade-in.delay-1{transition-delay:.1s} .fade-in.delay-2{transition-delay:.2s}
.fade-in.delay-3{transition-delay:.3s} .fade-in.delay-4{transition-delay:.4s}

/* ─── Keyframes ─── */
@keyframes float0{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-20px) translateX(10px)}}
@keyframes float1{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(15px) translateX(-15px)}}
@keyframes float2{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-10px) translateX(-8px)}}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:.8;transform:scaleY(1.3)}}

/* ═══════════════════════════════════════════
   TOP PAGE - Hero
   ═══════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(160deg,var(--forest) 0%,#0f1f0f 50%,var(--forest) 100%);display:flex;align-items:center}
.hero__glow{position:absolute;inset:0;background-image:radial-gradient(ellipse 600px 400px at 75% 40%,rgba(122,158,122,.08) 0%,transparent 70%),radial-gradient(ellipse 400px 600px at 20% 60%,rgba(197,165,90,.05) 0%,transparent 70%);pointer-events:none}
.hero__particle{position:absolute;border-radius:50%;background:rgba(197,165,90,.12);pointer-events:none}
.hero__inner{max-width:var(--max-w);margin:0 auto;padding:120px var(--pad) 80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;width:100%}
.hero__text{opacity:0;transform:translateY(30px);transition:all 1s cubic-bezier(.25,.46,.45,.94) .2s}
.hero__text.loaded{opacity:1;transform:none}
.hero__label{font-family:var(--font-display);font-size:13px;color:var(--gold);letter-spacing:4px;text-transform:uppercase;margin-bottom:24px}
.hero__title{font-size:48px;color:var(--cream);line-height:1.3;letter-spacing:1px;margin:0 0 12px}
.hero__title span{color:var(--gold);font-weight:600}
.hero__desc{font-size:15px;color:var(--sage);line-height:2;margin:24px 0 0;max-width:440px;font-weight:300}
.hero__buttons{display:flex;gap:16px;margin-top:48px;opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.25,.46,.45,.94) .6s}
.hero__buttons.loaded{opacity:1;transform:none}
.hero__visual{position:relative;opacity:0;transform:translateX(40px);transition:all 1.2s cubic-bezier(.25,.46,.45,.94) .4s}
.hero__visual.loaded{opacity:1;transform:none}
.hero__product-area{position:relative;width:380px;height:420px;margin:0 auto}
.hero__product-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(197,165,90,.15) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%)}
.hero__product-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:280px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(197,165,90,.2);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.hero__product-icon{width:50px;height:50px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center}
.hero__product-icon svg{width:24px;height:24px}
.hero__product-name{font-family:var(--font-display);font-size:14px;color:var(--gold-light);letter-spacing:3px;font-style:italic}
.hero__scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
.hero__scroll-text{font-family:var(--font-display);font-size:10px;color:var(--sage);letter-spacing:3px;text-transform:uppercase}

/* ═══════════════════════════════════════════
   TOP PAGE - Philosophy
   ═══════════════════════════════════════════ */
.philosophy{background:var(--cream);padding:var(--sec-pad) var(--pad)}
.philosophy__inner{max-width:800px;margin:0 auto;text-align:center}
.philosophy__title{color:var(--forest);margin:0 0 24px}
.philosophy__title span{color:var(--gold)}
.philosophy__desc{font-size:15px;color:var(--text-mid);line-height:2.2;font-weight:300}
.philosophy__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:80px}
.philosophy__stat{padding:32px 16px;border-top:2px solid var(--gold)}
.philosophy__stat-num{font-family:var(--font-display);font-size:48px;font-weight:300;color:var(--forest);letter-spacing:-1px}
.philosophy__stat-num span{font-size:20px;color:var(--gold)}
.philosophy__stat-label{font-size:13px;color:var(--text-light);margin-top:8px;letter-spacing:1px}

/* ═══════════════════════════════════════════
   TOP PAGE - Products
   ═══════════════════════════════════════════ */
.products{background:var(--white);padding:var(--sec-pad) var(--pad)}
.products__inner{max-width:var(--max-w);margin:0 auto}
.products__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.products__title{color:var(--forest);margin:0}
.products__more{font-size:13px;color:var(--gold);letter-spacing:1px;display:flex;align-items:center;gap:6px}
.products__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{border-radius:16px;overflow:hidden;border:1px solid var(--warm-gray);transition:all var(--tr-smooth);cursor:pointer;background:var(--white)}
.product-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(26,46,26,.08)}
.product-card__image{height:200px;background:linear-gradient(135deg,var(--cream) 0%,var(--warm-gray) 100%);display:flex;align-items:center;justify-content:center;position:relative}
.product-card__tag{position:absolute;top:12px;left:12px;color:var(--white);font-size:10px;font-weight:600;padding:4px 12px;border-radius:var(--r-pill);letter-spacing:1px}
.product-card__placeholder{width:60px;height:100px;border-radius:8px;background:linear-gradient(180deg,rgba(26,46,26,.06) 0%,rgba(26,46,26,.02) 100%);border:1px solid rgba(26,46,26,.08);display:flex;align-items:center;justify-content:center}
.product-card__placeholder-text{font-family:var(--font-display);font-size:10px;color:var(--text-light);letter-spacing:1px;writing-mode:vertical-rl}
.product-card__body{padding:24px 20px}
.product-card__name{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--forest);margin:0 0 4px}
.product-card__name-en{font-family:var(--font-display);font-size:11px;color:var(--text-light);letter-spacing:2px;margin-bottom:12px}
.product-card__desc{font-size:12.5px;color:var(--text-mid);line-height:1.8;margin:0}
.product-card__link{margin-top:20px;padding-top:16px;border-top:1px solid var(--warm-gray);font-size:12px;color:var(--gold);font-weight:600;letter-spacing:1px;display:flex;align-items:center;gap:6px}

/* ═══════════════════════════════════════════
   TOP PAGE - Seicho Tester
   ═══════════════════════════════════════════ */
.seicho{background:var(--white);padding:100px var(--pad);position:relative;overflow:hidden}
.seicho__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.seicho__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(42,122,110,.08);padding:6px 16px;border-radius:var(--r-pill);margin-bottom:20px}
.seicho__badge-text{font-size:10px;color:var(--teal);font-weight:600;letter-spacing:1px}
.seicho__title{font-size:32px;color:var(--forest);line-height:1.4;margin:0 0 16px}
.seicho__title span{color:var(--teal)}
.seicho__desc{font-size:14px;color:var(--text-mid);line-height:2.2;margin-bottom:28px}
.seicho__buttons{display:flex;gap:12px}

/* Report card */
.seicho-card{background:var(--cream);border-radius:24px;padding:36px 32px;border:1px solid var(--warm-gray);box-shadow:0 12px 40px rgba(26,46,26,.06)}
.seicho-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.seicho-card__title{font-size:11px;color:var(--teal);font-weight:600;letter-spacing:1px}
.seicho-card__sub{font-size:9px;color:var(--text-light);margin-top:2px}
.seicho-card__sample{font-size:9px;color:var(--white);background:var(--teal);padding:4px 10px;border-radius:var(--r-pill);font-weight:600;letter-spacing:.5px}
.seicho-card__section-label{font-size:10px;color:var(--text-light);letter-spacing:.5px;margin-bottom:8px}
.seicho-card__gauge{display:flex;gap:3px;margin-bottom:6px}
.seicho-card__gauge-bar{flex:1;height:18px;border-radius:5px;opacity:.25;display:flex;align-items:center;justify-content:center;transition:all .3s}
.seicho-card__gauge-bar.active{height:28px;opacity:1}
.seicho-card__gauge-bar.active span{font-size:10px;color:var(--white);font-weight:700}
.seicho-card__gauge-labels{display:flex;justify-content:space-between}
.seicho-card__gauge-labels span{font-size:9px}
.seicho-card__habit-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.seicho-card__habit-label{font-size:10px;color:var(--text-mid);min-width:56px}
.seicho-card__habit-track{flex:1;height:7px;background:var(--warm-gray);border-radius:4px;overflow:hidden}
.seicho-card__habit-fill{height:100%;border-radius:4px}
.seicho-card__habit-score{font-size:10px;color:var(--text-mid);min-width:20px;text-align:right}
.seicho-card__advice{background:rgba(42,122,110,.05);border-radius:12px;padding:14px 16px;border:1px solid rgba(42,122,110,.08);margin-top:20px}
.seicho-card__advice-title{font-size:9px;color:var(--teal);font-weight:600;letter-spacing:.5px;margin-bottom:4px}
.seicho-card__advice-text{font-size:10px;color:var(--text-mid);line-height:1.7}

/* ═══════════════════════════════════════════
   TOP PAGE - Counseling
   ═══════════════════════════════════════════ */
.counseling{background:var(--forest);padding:var(--sec-pad) var(--pad);position:relative;overflow:hidden}
.counseling__glow{position:absolute;inset:0;background-image:radial-gradient(ellipse 500px 400px at 80% 50%,rgba(197,165,90,.06) 0%,transparent 70%)}
.counseling__inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative}
.counseling__title{font-size:34px;color:var(--cream);line-height:1.5;margin:0 0 24px}
.counseling__title span{color:var(--gold)}
.counseling__desc{font-size:14px;color:var(--sage);line-height:2;font-weight:300}
.counseling-step{display:flex;gap:20px;align-items:flex-start;padding:20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(197,165,90,.1);transition:all var(--tr)}
.counseling-step:hover{background:rgba(197,165,90,.06);border-color:rgba(197,165,90,.25)}
.counseling-step__num{font-family:var(--font-display);font-size:28px;color:var(--gold);font-weight:300;line-height:1;min-width:40px}
.counseling-step__title{font-size:14px;color:var(--cream);font-weight:600;margin-bottom:4px}
.counseling-step__desc{font-size:12px;color:var(--sage);line-height:1.6}

/* ═══════════════════════════════════════════
   TOP PAGE - Column
   ═══════════════════════════════════════════ */
.column-section{background:var(--cream);padding:var(--sec-pad) var(--pad)}
.column-section__inner{max-width:var(--max-w);margin:0 auto}
.column-section__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.column-section__more{font-size:13px;color:var(--gold);letter-spacing:1px;display:flex;align-items:center;gap:6px}
.column-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.column-card{background:var(--white);border-radius:16px;overflow:hidden;transition:all var(--tr-smooth);cursor:pointer}
.column-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(26,46,26,.06)}
.column-card__image{height:180px;background:linear-gradient(135deg,var(--forest-light) 0%,var(--forest) 100%);display:flex;align-items:center;justify-content:center}
.column-card__image span{font-family:var(--font-display);font-size:48px;color:rgba(197,165,90,.6);font-weight:300}
.column-card__body{padding:24px 24px 28px}
.column-card__cat{display:inline-block;font-size:10px;color:var(--gold);font-weight:600;letter-spacing:1px;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--gold);margin-bottom:12px}
.column-card__title{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--forest);margin:0 0 12px;line-height:1.6}
.column-card__date{font-family:var(--font-display);font-size:12px;color:var(--text-light);letter-spacing:1px}

/* ═══════════════════════════════════════════
   TOP PAGE - CTA
   ═══════════════════════════════════════════ */
.cta-section{background:linear-gradient(135deg,var(--forest) 0%,#0f1f0f 100%);padding:100px var(--pad);text-align:center;position:relative}
.cta-section__glow{position:absolute;inset:0;background-image:radial-gradient(ellipse 600px 300px at 50% 50%,rgba(197,165,90,.08) 0%,transparent 70%)}
.cta-section__inner{max-width:600px;margin:0 auto;position:relative}
.cta-section__title{font-size:32px;color:var(--cream);line-height:1.5;margin:0 0 16px}
.cta-section__title span{color:var(--gold)}
.cta-section__desc{font-size:14px;color:var(--sage);line-height:1.8;margin-bottom:40px}
.cta-section__buttons{display:flex;gap:16px;justify-content:center}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */
.footer{background:#0a150a;padding:64px var(--pad) 32px}
.footer__inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer__brand-name{font-family:var(--font-display);font-size:20px;color:var(--gold);letter-spacing:1px}
.footer__brand-name span{font-style:italic;font-size:14px}
.footer__address{font-size:11px;color:var(--sage);line-height:1.8;margin-top:16px}
.footer__col-title{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:1px;margin-bottom:16px}
.footer__link{display:block;font-size:12px;color:var(--sage);padding:6px 0;transition:color var(--tr)}
.footer__link:hover{color:var(--cream)}
.footer__bottom{max-width:var(--max-w);margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(122,158,122,.15);display:flex;justify-content:space-between}
.footer__copyright{font-size:10px;color:rgba(122,158,122,.5);letter-spacing:1px}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:1024px){
  :root{--sec-pad:80px;--nav-h:72px}
  h1{font-size:36px} h2{font-size:28px}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__desc{margin-left:auto;margin-right:auto}
  .hero__buttons{justify-content:center}
  .hero__visual{display:none}
  .products__grid{grid-template-columns:repeat(2,1fr)}
  .seicho__inner{grid-template-columns:1fr}
  .counseling__inner{grid-template-columns:1fr;gap:48px}
  .footer__inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  :root{--sec-pad:60px;--pad:20px;--nav-h:64px;--nav-h-s:56px}
  h1{font-size:30px} h2{font-size:24px} h3{font-size:20px}
  .nav__links{display:none} .nav__hamburger{display:flex}
  .btn{font-size:13px;padding:12px 24px}
  .philosophy__stats{grid-template-columns:1fr;gap:24px}
  .products__grid{grid-template-columns:1fr}
  .products__header{flex-direction:column;align-items:flex-start;gap:12px}
  .column-grid{grid-template-columns:1fr}
  .column-section__header{flex-direction:column;align-items:flex-start;gap:12px}
  .cta-section__buttons{flex-direction:column;align-items:center}
  .seicho__buttons{flex-direction:column}
  .footer__inner{grid-template-columns:1fr;gap:28px}
  .footer__bottom{flex-direction:column;gap:8px;align-items:center}
}
@media(max-width:480px){
  :root{--sec-pad:48px;--pad:16px}
  h1{font-size:26px} h2{font-size:22px}
  .hero__label{font-size:11px;letter-spacing:3px}
  .philosophy__stat-num{font-size:36px}
}

/* ═══════════════════════════════════════════
   SUBPAGE — Common page header
   ═══════════════════════════════════════════ */
.page-header{position:relative;overflow:hidden;padding-top:80px;background:linear-gradient(160deg,var(--forest) 0%,#0f1f0f 100%)}
.page-header__glow{position:absolute;inset:0;background-image:radial-gradient(ellipse 500px 300px at 70% 60%,rgba(197,165,90,.05) 0%,transparent 70%)}
.page-header__inner{max-width:var(--max-w);margin:0 auto;padding:64px var(--pad) 72px;opacity:0;transform:translateY(20px);transition:all .8s ease .1s}
.page-header__inner.loaded{opacity:1;transform:none}
.page-header h1{font-size:42px;color:var(--cream);line-height:1.3;margin:0}

/* ─── Breadcrumb ─── */
.breadcrumb{font-size:11px;color:var(--sage);letter-spacing:1px;margin-bottom:24px}
.breadcrumb a{color:var(--sage);transition:color var(--tr)} .breadcrumb a:hover{color:var(--cream)}
.breadcrumb .sep{margin:0 8px;opacity:.5}
.breadcrumb .current{color:var(--gold-light)}

/* ─── Company page ─── */
.message-grid{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
.message-portrait{width:260px;height:320px;border-radius:20px;background:linear-gradient(160deg,var(--forest-light) 0%,var(--forest) 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.message-portrait__glow{position:absolute;inset:0;background-image:radial-gradient(circle at 50% 40%,rgba(197,165,90,.08) 0%,transparent 60%)}
.message-portrait__initial{width:72px;height:72px;border-radius:50%;border:2px solid rgba(197,165,90,.25);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.message-portrait__initial span{font-family:var(--font-display);font-size:28px;color:var(--gold-light)}

.overview-table{background:var(--cream);border-radius:20px;overflow:hidden;border:1px solid var(--warm-gray)}
.overview-row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--warm-gray)}
.overview-row:last-child{border-bottom:none}
.overview-row__label{padding:18px 24px;font-size:13px;color:var(--forest);font-weight:600;background:rgba(197,165,90,.04);display:flex;align-items:center;letter-spacing:.5px}
.overview-row__value{padding:18px 24px;font-size:13px;color:var(--text-mid);line-height:1.8;background:var(--white)}

/* Timeline */
.timeline{position:relative}
.timeline__line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),var(--warm-gray),var(--gold));transform:translateX(-50%)}
.timeline__item{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;margin-bottom:12px;min-height:90px}
.timeline__dot{width:12px;height:12px;border-radius:50%;background:var(--white);border:3px solid var(--warm-gray);margin:0 auto;position:relative;z-index:2}
.timeline__dot--highlight{width:18px;height:18px;background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(197,165,90,.12)}
.timeline-card{text-align:right;padding-right:28px}
.timeline-card--right{text-align:left;padding-left:28px;padding-right:0}
.timeline-card--highlight{background:var(--white);border-radius:14px;padding:18px 22px!important;border:1px solid var(--warm-gray);box-shadow:0 4px 16px rgba(26,46,26,.04)}
.timeline-card__year{font-family:var(--font-display);font-size:24px;color:var(--gold);font-weight:400;letter-spacing:1px;margin-bottom:4px}
.timeline-card__title{font-size:14px;color:var(--forest);font-weight:600;margin-bottom:4px}
.timeline-card__desc{font-size:12px;color:var(--text-mid);line-height:1.7}

/* Strengths */
.strengths-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.strength-card{text-align:center;padding:36px 16px;background:rgba(255,255,255,.03);border-radius:16px;border:1px solid rgba(197,165,90,.12);transition:all var(--tr)}
.strength-card:hover{background:rgba(197,165,90,.06);border-color:rgba(197,165,90,.25)}
.strength-card__num{font-family:var(--font-display);font-size:48px;color:var(--cream);font-weight:300;line-height:1}
.strength-card__num span{font-size:18px;color:var(--gold)}
.strength-card__label{font-size:12px;color:var(--sage);margin-top:10px;letter-spacing:1px}
.partner-tag{font-size:12px;color:var(--sage);padding:10px 20px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(122,158,122,.15);letter-spacing:.5px;display:inline-block}

/* Business area cards */
.business-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.business-card{border-radius:20px;overflow:hidden;border:1px solid var(--warm-gray);background:var(--white);transition:all var(--tr-smooth)}
.business-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,46,26,.06)}
.business-card__image{height:180px;display:flex;align-items:center;justify-content:center;font-size:48px;opacity:.5}
.business-card__body{padding:28px 28px 24px}
.business-card__tag{font-size:10px;color:var(--gold);font-weight:600;letter-spacing:1px;margin-bottom:8px}
.business-card__title{font-size:18px;font-weight:600;color:var(--forest);margin:0 0 12px}
.business-card__desc{font-size:13px;color:var(--text-mid);line-height:2;margin:0}
.business-card__link{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.5px;margin-top:16px;display:inline-flex;align-items:center;gap:4px}

/* Access */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.map-placeholder{height:300px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#e8eee8,#dde4dd);display:flex;align-items:center;justify-content:center;border:1px solid var(--warm-gray);position:relative}

/* ─── FAQ page ─── */
.faq-categories{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;position:sticky;top:80px;background:var(--cream);padding:16px 0;z-index:10}
.faq-cat-btn{padding:8px 20px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.5px;background:var(--white);border:1px solid var(--warm-gray);color:var(--text-mid);cursor:pointer;transition:all var(--tr)}
.faq-cat-btn:hover,.faq-cat-btn.active{background:var(--forest);color:var(--cream);border-color:var(--forest)}

.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:#ffffff;border-radius:14px;overflow:hidden;border:1px solid #e8e4dc;transition:all .3s;cursor:pointer}
.faq-item.active{border-color:rgba(197,165,90,.4);box-shadow:0 4px 16px rgba(26,46,26,0.04)}
.faq-item__question{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-item__question h3{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--forest);margin:0;display:flex;align-items:flex-start;gap:14px}
.faq-item__question h3 .q-label{font-size:11px;color:var(--gold);font-weight:700;min-width:20px}
.faq-item__icon{font-family:var(--font-display);font-size:22px;color:var(--gold);font-weight:300;transition:transform .3s;flex-shrink:0;margin-left:12px;line-height:1}
.faq-item.active .faq-item__icon{transform:rotate(45deg)}
.faq-item__answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.active .faq-item__answer{max-height:400px}
.faq-item__answer-inner{padding:0 24px 20px}
.faq-item__answer-inner p{font-size:13px;color:var(--text-mid);line-height:2.1;display:flex;gap:14px;margin:0}
.faq-item__answer-inner .a-label{font-size:12px;color:#a8284f;font-weight:700;min-width:22px;flex-shrink:0}

/* ─── Contact page ─── */
.contact-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.contact-type{border-radius:16px;padding:28px 20px;text-align:center;cursor:pointer;border:1px solid var(--warm-gray);background:var(--white);transition:all var(--tr)}
.contact-type:hover,.contact-type.active{border-color:var(--gold);background:rgba(197,165,90,.04)}
.contact-type__icon{font-size:28px;margin-bottom:10px}
.contact-type__title{font-size:13px;font-weight:600;color:var(--forest);margin-bottom:4px}
.contact-type__desc{font-size:11px;color:var(--text-light)}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:12px;color:var(--forest);font-weight:600;margin-bottom:6px}
.form-group .required{font-size:9px;color:var(--white);background:var(--regina-rose);padding:2px 6px;border-radius:4px;font-weight:700;margin-left:6px}
.form-input{width:100%;font-size:14px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--warm-gray);background:var(--cream);outline:none;transition:border-color var(--tr)}
.form-input:focus{border-color:var(--gold)}
.form-textarea{min-height:120px;resize:vertical}

/* ─── Counseling page ─── */
.counseling-hero__tagline{font-size:22px;color:var(--gold-light);font-weight:300;letter-spacing:1px;margin-top:12px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{background:var(--white);border-radius:18px;padding:36px 28px;text-align:center;border:1px solid var(--warm-gray);transition:all var(--tr-smooth)}
.value-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,46,26,.05)}
.value-card__icon{font-size:36px;margin-bottom:16px}
.value-card__title{font-size:15px;font-weight:600;color:var(--forest);margin:0 0 10px}
.value-card__desc{font-size:13px;color:var(--text-mid);line-height:2;margin:0}

.flow-steps{display:flex;flex-direction:column;gap:0;position:relative}
.flow-steps__line{position:absolute;left:32px;top:40px;bottom:40px;width:2px;background:linear-gradient(to bottom,var(--teal),var(--warm-gray) 50%,var(--teal))}
.flow-step{display:flex;gap:28px;align-items:flex-start;padding:16px 0}
.flow-step__circle{width:64px;height:64px;border-radius:50%;flex-shrink:0;background:var(--white);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;border:3px solid var(--teal);box-shadow:0 0 0 6px var(--white)}
.flow-step__circle span{font-size:24px}
.flow-step__content{flex:1;background:var(--cream);border-radius:14px;padding:22px 26px;border:1px solid var(--warm-gray)}
.flow-step__num{font-family:var(--font-display);font-size:22px;color:var(--teal);font-weight:400}
.flow-step__title{font-size:15px;font-weight:600;color:var(--forest);margin:0}
.flow-step__desc{font-size:13px;color:var(--text-mid);line-height:1.8;margin:0}

/* Comparison */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.compare-side{padding:40px;border-radius:20px}
.compare-side--with{background:var(--white);border:1px solid var(--warm-gray)}
.compare-side--without{background:var(--cream);border:1px solid var(--warm-gray)}
.compare-side__title{font-size:16px;font-weight:600;margin-bottom:20px}
.compare-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:13px;color:var(--text-mid);line-height:1.6}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--white);border-radius:18px;padding:28px;border:1px solid var(--warm-gray)}
.testimonial-card__text{font-size:13px;color:var(--text-mid);line-height:2;font-style:italic;margin-bottom:16px}
.testimonial-card__name{font-size:12px;color:var(--forest);font-weight:600}
.testimonial-card__detail{font-size:11px;color:var(--text-light)}

/* ─── Shop finder page ─── */
.shop-search{display:grid;grid-template-columns:260px 1fr;gap:32px}
.shop-filters{position:sticky;top:100px;align-self:start}
.area-btn{display:block;width:100%;padding:12px 16px;text-align:left;font-size:13px;border:none;background:none;color:var(--text-mid);cursor:pointer;border-radius:var(--r-sm);transition:all var(--tr)}
.area-btn:hover,.area-btn.active{background:var(--forest);color:var(--cream)}
.pref-tags{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 8px 16px}
.pref-tag{font-size:11px;padding:4px 12px;border-radius:var(--r-pill);background:var(--cream);color:var(--text-mid);cursor:pointer;border:1px solid var(--warm-gray);transition:all var(--tr)}
.pref-tag:hover,.pref-tag.active{background:var(--teal);color:var(--white);border-color:var(--teal)}

.shop-results{display:flex;flex-direction:column;gap:16px}
.shop-card{background:var(--white);border-radius:16px;padding:24px;border:1px solid var(--warm-gray);transition:all var(--tr-smooth)}
.shop-card:hover{border-color:var(--gold);box-shadow:0 8px 24px rgba(26,46,26,.05)}
.shop-card__name{font-size:16px;font-weight:600;color:var(--forest);margin-bottom:4px}
.shop-card__address{font-size:12px;color:var(--text-mid);margin-bottom:8px}
.shop-card__info{display:flex;gap:16px;font-size:12px;color:var(--text-light)}

/* ─── Column list page ─── */
.column-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.column-filter-btn{padding:6px 18px;border-radius:var(--r-pill);font-size:12px;background:var(--white);border:1px solid var(--warm-gray);color:var(--text-mid);cursor:pointer;transition:all var(--tr)}
.column-filter-btn:hover,.column-filter-btn.active{background:var(--forest);color:var(--cream);border-color:var(--forest)}

/* ─── Product LP page ─── */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.product-hero__image{height:400px;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product-feature{background:var(--white);border-radius:18px;padding:36px 28px;text-align:center;border:1px solid var(--warm-gray);transition:all var(--tr-smooth)}
.product-feature:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,46,26,.05)}
.product-feature__icon{font-size:36px;margin-bottom:16px}
.product-feature__title{font-size:15px;font-weight:600;color:var(--forest);margin:0 0 10px}
.product-feature__desc{font-size:13px;color:var(--text-mid);line-height:2;margin:0}

/* ─── Seicho tester page (dedicated) ─── */
.seicho-hero{position:relative;min-height:80vh;overflow:hidden;background:linear-gradient(160deg,var(--forest) 0%,#0f1f0f 40%,#0f201a 100%);display:flex;align-items:center}
.seicho-hero__inner{max-width:1100px;margin:0 auto;padding:120px var(--pad) 80px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;width:100%}
.seicho-what{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.seicho-flow-steps{display:flex;flex-direction:column;gap:0;position:relative}

/* ─── Responsive additions for subpages ─── */
@media(max-width:1024px){
  .message-grid{grid-template-columns:1fr}
  .message-portrait{margin:0 auto 32px}
  .timeline__item{grid-template-columns:24px 1fr;gap:16px}
  .timeline__line{left:12px}
  .timeline-card{text-align:left;padding-right:0;padding-left:0}
  .timeline-card--right{padding-left:0}
  .strengths-grid{grid-template-columns:repeat(2,1fr)}
  .business-grid{grid-template-columns:1fr}
  .access-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .product-hero{grid-template-columns:1fr}
  .shop-search{grid-template-columns:1fr}
  .seicho-hero__inner{grid-template-columns:1fr}
  .contact-types{grid-template-columns:repeat(2,1fr)}
  .seicho-what{grid-template-columns:1fr}
  .product-features{grid-template-columns:1fr}
}
@media(max-width:768px){
  .page-header h1{font-size:32px}
  .faq-categories{position:static;flex-wrap:wrap}
  .contact-types{grid-template-columns:1fr}
  .strengths-grid{grid-template-columns:1fr}
  .column-filters{justify-content:center}
}