:root { --paper:#fff4f7; --white:#fff; --sakura:#ef8eb5; --rose:#d95d91; --rose-dark:#b84071; --navy:#172d3d; --teal:#215d68; --ink-soft:#536573; --line:#efdbe4; --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--navy); background:var(--paper); font-family:var(--sans); font-size:16px; } a { color:inherit; text-decoration:none; } .skip-link { position:fixed; top:-4rem; left:1rem; z-index:20; padding:.75rem 1rem; background:var(--navy); color:white; border-radius:.4rem; } .skip-link:focus { top:1rem; }
.site-header { height:120px; max-width:1340px; padding:18px 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; } .wordmark { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; line-height:.77; letter-spacing:-.05em; } .wordmark em { font-family:var(--serif); font-weight:600; } .blossom-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#ffd7e4; color:var(--rose); font-size:25px; box-shadow:inset 0 0 0 1px #f6b9ce; } nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; } nav > a:not(.nav-cta) { position:relative; } nav > a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--rose); transform:scaleX(0); transform-origin:left; transition:transform .2s; } nav > a:hover::after { transform:scaleX(1); } .nav-cta { padding:11px 15px; border:1px solid var(--navy); border-radius:99px; } .nav-cta span, .card-link span { color:var(--rose); font-size:18px; margin-left:3px; } .menu-button { display:none; }
.hero { max-width:1340px; min-height:640px; margin:0 auto; padding:80px 28px 78px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:48px; } .japanese, .section-kicker, .product-number { color:var(--rose-dark); text-transform:uppercase; letter-spacing:.12em; font:11px var(--mono); font-weight:bold; } h1,h2,h3,p { margin-top:0; } h1 { font:600 clamp(3.2rem,5.7vw,5.9rem)/.96 var(--serif); letter-spacing:-.065em; max-width:720px; margin:17px 0 27px; } h1 i,h2 i { color:var(--rose); font-weight:600; } .hero-text { max-width:500px; font-size:18px; line-height:1.6; color:var(--ink-soft); } .hero-actions { display:flex; align-items:center; gap:27px; margin-top:34px; } .button { display:inline-flex; align-items:center; gap:24px; padding:15px 18px; border-radius:5px; font-size:14px; font-weight:700; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--rose); color:white; box-shadow:0 8px 18px #d95d9130; } .text-link,.card-link { font-size:14px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:4px; } .text-link span { margin-left:4px; color:var(--rose); }
.hanami-art { height:440px; position:relative; overflow:hidden; background:#fde2eb; border-radius:220px 220px 14px 14px; isolation:isolate; } .sun { position:absolute; width:270px; height:270px; border-radius:50%; background:#f5b4ca; bottom:-45px; right:70px; opacity:.75; } .branch { position:absolute; height:10px; border-radius:12px; background:#775363; transform-origin:left; z-index:1; } .branch-one { width:500px; top:132px; right:-50px; transform:rotate(29deg); } .branch-two { width:330px; top:265px; right:73px; transform:rotate(-34deg); } .branch::before,.branch::after { content:""; position:absolute; width:128px; height:7px; border-radius:12px; background:#775363; } .branch::before { transform:rotate(-42deg); top:-40px; left:130px; } .branch::after { transform:rotate(44deg); top:35px; left:245px; } .flower { position:absolute; color:#fff5f8; font-size:65px; line-height:1; z-index:2; text-shadow:0 2px 0 #ed9dbc; } .f1{top:69px;right:251px}.f2{top:152px;right:133px;font-size:76px}.f3{top:186px;right:330px;font-size:51px}.f4{top:286px;right:88px;font-size:49px}.f5{top:335px;right:253px;font-size:74px}.f6{top:44px;right:69px;font-size:44px}.f7{top:233px;right:495px;font-size:43px}.art-caption { position:absolute; z-index:3; left:26px; bottom:25px; color:var(--navy); display:flex; align-items:center; gap:10px; }.art-caption span { font:64px var(--serif); color:var(--rose-dark); }.art-caption p { margin:0; font:12px/1.4 var(--mono); }.art-caption i { color:var(--ink-soft); }
.intro-strip { background:var(--navy); color:white; display:flex; justify-content:center; align-items:center; gap:30px; padding:24px; text-align:center; font:15px var(--serif); }.intro-strip p { margin:0; }.intro-strip span { color:var(--sakura); }
.apps-section { max-width:1340px; margin:auto; padding:124px 28px; }.section-heading { max-width:590px; }.section-heading h2,.about-section h2 { font:600 clamp(2.6rem,4.3vw,4.8rem)/1 var(--serif); letter-spacing:-.06em; margin:15px 0 20px; }.section-heading > p:last-child { color:var(--ink-soft); font-size:17px; line-height:1.55; }.app-list { margin-top:62px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }.app-card { min-height:546px; padding:39px 36px 0; display:flex; flex-direction:column; overflow:hidden; border-radius:9px; }.data-card { background:#f9dce7; }.insights-card { background:#dcebed; }.app-card-copy { max-width:390px; }.app-card h3 { font:600 clamp(2.3rem,3.5vw,3.8rem)/.94 var(--serif); letter-spacing:-.06em; margin:13px 0 18px; }.app-card-copy > p:not(.product-number) { min-height:75px; color:#4e6170; line-height:1.55; }.card-link { align-self:flex-start; }.app-preview { height:255px; background:#fffdfd; border:5px solid white; margin:27px -10px 0; border-radius:7px 7px 0 0; box-shadow:0 -12px 40px #7d344021; font-family:var(--sans); overflow:hidden; color:#395260; }.window-top { height:25px; background:#fff; display:flex; gap:4px; align-items:center; padding-left:8px; font-size:7px; }.window-top span { width:5px; height:5px; border-radius:50%; background:#df7fa5; }.window-top b { margin-left:5px; font-size:7px; }.pink-banner { height:48px; padding:8px 13px; background:#f5a9c3; display:flex; flex-direction:column; justify-content:center; }.pink-banner strong { font-size:13px; }.pink-banner small { font-size:6px; }.preview-body { padding:12px; height:calc(100% - 73px); display:flex; gap:8px; background:#fff9fb; }.preview-panel { padding:8px; flex:1; border:1px solid #f3d4df; border-radius:3px; background:white; font-size:7px; }.tiny-steps { display:flex; gap:4px; margin:7px 0; }.tiny-steps span { padding:3px; background:#fee7ef; border-radius:3px; font-size:5px; }.tiny-table { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }.tiny-table i { height:14px; background:#f9d5e2; }.chart-line { width:52%; height:105px; border-bottom:2px solid #d6e5e7; border-left:2px solid #d6e5e7; background:linear-gradient(164deg,transparent 49%,#e177a3 50%,#e177a3 52%,transparent 53%); }.chart-bars { width:50%; display:flex; align-items:end; gap:8px; height:105px; padding:16px; border-bottom:2px solid #d6e5e7; }.chart-bars i { flex:1; background:#e177a3; }.chart-bars i:nth-child(1){height:34%}.chart-bars i:nth-child(2){height:55%}.chart-bars i:nth-child(3){height:47%}.chart-bars i:nth-child(4){height:77%}.chart-bars i:nth-child(5){height:64%}.chart-bars i:nth-child(6){height:93%}.side { position:absolute; right:21px; bottom:10px; width:110px; height:87px; }.side span { display:block; height:10px; margin-top:7px; background:#f7c9da; }
.experiences-section { padding:116px max(28px,calc((100vw - 1284px)/2)); background:var(--navy); color:white; }.inverse .section-kicker { color:#f4a9c4; }.experience-grid { margin-top:58px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }.experience-card { min-height:386px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; border-radius:7px; transition:transform .2s; }.experience-card:hover { transform:translateY(-5px); }.sakura-study { background:#e790b1; color:#fff; }.amen { background:#2d6670; color:#fff; }.card-japanese { position:absolute; right:19px; top:-32px; opacity:.23; font:180px var(--serif); letter-spacing:-.2em; }.experience-card div { position:relative; z-index:1; }.experience-card p { width:73%; line-height:1.45; }.experience-card h3 { margin:0; font:600 clamp(2rem,3.7vw,3.5rem)/1 var(--serif); letter-spacing:-.055em; }.card-arrow { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--rose-dark); font-size:21px; }
.garden-section { max-width:1110px; margin:0 auto; min-height:555px; padding:106px 28px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:92px; }.garden-image { width:350px; height:350px; border:1px solid #eaa0bb; border-radius:50%; position:relative; background:#fbd9e5; transform:rotate(-8deg); }.garden-image::before,.garden-image::after { content:""; position:absolute; border-radius:50%; background:#f3a9c2; }.garden-image::before { inset:65px; }.garden-image::after { inset:115px; background:#fff4f7; }.petal { position:absolute; z-index:2; color:#fff6f9; font-size:76px; text-shadow:0 2px #e999b7; }.p1{left:5px;top:73px}.p2{right:12px;top:30px;font-size:61px}.p3{bottom:18px;right:42px}.p4{left:66px;bottom:-11px;font-size:53px}.p5{left:111px;top:5px;font-size:39px}.garden-copy { max-width:500px; }.garden-copy h2 { font:600 clamp(2.5rem,4.4vw,4.7rem)/.98 var(--serif); letter-spacing:-.06em; margin:15px 0 22px; }.garden-copy > p:not(.section-kicker) { color:var(--ink-soft); line-height:1.6; max-width:420px; margin-bottom:30px; }
.about-section { background:#f7d4e1; padding:100px max(28px,calc((100vw - 1284px)/2)); display:grid; grid-template-columns:.7fr 1.3fr; gap:38px; }.about-section h2 { max-width:840px; margin-top:0; }.button-dark { background:var(--navy); color:white; margin-top:14px; } footer { max-width:1340px; padding:46px 28px; margin:auto; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; font-size:13px; color:var(--ink-soft); }.footer-links { display:grid; grid-template-columns:repeat(2,auto); gap:10px 25px; color:var(--navy); font-weight:600; }.footer-mark { color:var(--navy); }.footer-mark .blossom-mark { width:29px; height:29px; font-size:20px; } footer p { margin:0; text-align:right; line-height:1.6; }
@media (max-width:760px) { .site-header{height:84px;padding:16px 20px}.menu-button{display:flex;width:42px;height:42px;border:1px solid var(--navy);background:transparent;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-button span{width:15px;height:1px;background:var(--navy)}nav{display:none;position:absolute;top:76px;left:16px;right:16px;padding:20px;background:white;box-shadow:0 12px 30px #172d3d20;flex-direction:column;align-items:flex-start;gap:19px;border-radius:5px}nav.is-open{display:flex}.hero{min-height:0;padding:72px 20px 54px;grid-template-columns:1fr;gap:42px}h1{font-size:3.25rem}.hero-text{font-size:16px}.hero-actions{gap:19px;align-items:flex-start;flex-direction:column}.hanami-art{height:325px;border-radius:160px 160px 8px 8px}.branch-one{width:360px;top:110px}.branch-two{width:250px;top:207px}.f1{top:40px;right:160px}.f2{top:110px;right:55px}.f3{top:150px;right:250px}.f4{top:210px;right:28px}.f5{top:252px;right:148px}.f6{top:24px;right:20px}.f7{display:none}.intro-strip{flex-direction:column;gap:10px;padding:23px 30px}.apps-section{padding:78px 20px}.app-list,.experience-grid{grid-template-columns:1fr}.app-card{min-height:510px;padding:30px 24px 0}.app-card-copy>p:not(.product-number){min-height:auto}.experiences-section{padding:78px 20px}.experience-card{min-height:300px}.garden-section{padding:79px 20px;grid-template-columns:1fr;gap:43px}.garden-image{width:270px;height:270px;margin:auto}.about-section{padding:75px 20px;grid-template-columns:1fr;gap:12px}footer{padding:38px 20px;display:grid;grid-template-columns:1fr 1fr}footer p{text-align:left;grid-column:1/-1}.footer-links{grid-template-columns:1fr}.section-heading h2,.about-section h2{font-size:2.65rem} }
.app-preview .preview-body { position:relative; }
:root { --panel-sakura:#bd4b78; --panel-sakura-deep:#a93867; }
.intro-strip { background:var(--panel-sakura-deep); }
.experiences-section { background:var(--panel-sakura); }
.experiences-section .section-kicker { color:#ffe1ec; }
.experiences-section h2 i { color:#ffe2ec; }
.sakura-study { background:#f7c5d7; color:var(--navy); }
.amen { background:#f3a7c3; color:var(--navy); }
.experience-card .card-arrow { background:var(--navy); color:#fff; }
.about-section { background:#f2bfd2; }
.hanami-art { background:#fff8fb; border-radius:0; height:470px; overflow:hidden; }
.hanami-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.hero { min-height:650px; padding-top:55px; align-items:start; }
.hero-copy { padding-top:70px; position:relative; z-index:1; }
.japanese { color:#c57291; }
.button-primary { background:#e7558d; box-shadow:0 8px 18px #d95d9140; }
@media (max-width:760px) { .hero-copy { padding-top:0; } .hanami-art { height:315px; border-radius:0; } .hanami-art img { object-position:66% center; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* Hero revision: a clean header above a single, rich sakura panel. */
.site-header { max-width:none; background:var(--white); padding-left:max(28px,calc((100vw - 1284px)/2)); padding-right:max(28px,calc((100vw - 1284px)/2)); }
.site-header .wordmark { color:var(--rose-dark); }
nav a { color:var(--rose-dark); }
.nav-cta { border-color:var(--rose-dark); color:var(--rose-dark); }
.nav-cta span { color:var(--rose-dark); }
.hero { max-width:none; min-height:610px; position:relative; overflow:hidden; isolation:isolate; background:var(--panel-sakura-deep); padding:78px max(28px,calc((100vw - 1284px)/2)); grid-template-columns:minmax(0, 630px) 1fr; align-items:center; }
.hero-copy { padding-top:0; color:var(--white); }
.hero .japanese { color:#ffd8e6; }
.hero h1 { max-width:660px; color:var(--white); }
.hero h1 i { color:#ffd4e3; }
.hero-text { color:#ffeaf1; }
.hero .button-primary { background:var(--white); color:var(--rose-dark); box-shadow:none; }
.hero .text-link { color:var(--white); }
.hero .text-link span { color:#ffd4e3; }
.hero-branch { position:absolute; z-index:-1; right:-5vw; top:0; width:min(68vw,1060px); height:100%; pointer-events:none; }
.hero-branch::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--panel-sakura-deep) 0%,transparent 37%); }
.hero-branch img { width:100%; height:auto; display:block; transform:translateY(-2%) rotate(-1deg); filter:drop-shadow(0 12px 19px #6b173842); }
.hero-branch-secondary { width:105vw; right:auto; left:-5vw; top:auto; bottom:-520px; opacity:.35; }
.hero-branch-secondary::after { background:linear-gradient(90deg,transparent 0%,var(--hero-berry) 48%,transparent 100%); }
.hero-branch-secondary img { transform:scaleX(-1) rotate(-2deg); }
.hero-branch-tertiary { width:min(66vw,1040px); right:-18vw; top:132px; opacity:.52; }
.hero-branch-tertiary::after { background:linear-gradient(90deg,var(--hero-berry) 0%,transparent 56%); }
.hero-branch-tertiary img { transform:rotate(5deg); }
.hero-branch-quaternary { width:min(59vw,900px); left:-27vw; right:auto; top:348px; opacity:.23; }
.hero-branch-quaternary::after { background:linear-gradient(90deg,transparent 0%,var(--hero-berry) 67%); }
.hero-branch-quaternary img { transform:scaleX(-1) rotate(-7deg); }
@media (max-width:760px) {
  .site-header { padding-left:20px; padding-right:20px; }
  .hero { min-height:590px; padding:84px 20px 54px; display:block; }
  .hero-copy { position:relative; z-index:1; }
  .hero-branch { width:780px; right:-410px; top:0; opacity:.68; }
  .hero-branch::after { background:linear-gradient(90deg,var(--panel-sakura-deep) 0%,transparent 70%); }
  .hero-branch-secondary { width:920px; left:-300px; right:auto; top:auto; bottom:-430px; opacity:.22; }
  .hero-branch-tertiary { width:760px; right:-430px; top:195px; opacity:.34; }
  .hero-branch-quaternary { width:690px; left:-430px; top:390px; opacity:.16; }
}

/* Refined sakura editorial palette: warm paper, never clinical white. */
:root { --refined-paper:#fff5ee; --hero-berry:#8d2456; --paper:#f7e8de; --white:var(--refined-paper); --panel-sakura-deep:var(--hero-berry); --ink-soft:#6d4d59; }
body { background:var(--paper); }
.site-header { background:var(--refined-paper); }
.hero { background:linear-gradient(118deg,#7d1d51 0%,var(--hero-berry) 52%,#a43467 100%); }
.hero-branch::after { background:linear-gradient(90deg,var(--hero-berry) 0%,transparent 42%); }
.hero .button-primary { background:var(--refined-paper); }
.app-preview { background:var(--refined-paper); border-color:var(--refined-paper); }
.window-top { background:var(--refined-paper); }
.preview-body { background:#fff1ec; }
.preview-panel { background:var(--refined-paper); }
.garden-image::after { background:var(--refined-paper); }
@media (max-width:760px) { .hero-branch::after { background:linear-gradient(90deg,var(--hero-berry) 0%,transparent 70%); } }

/* Return to the quieter original hero: a light editorial page with one blossom image. */
.hero { max-width:1340px; min-height:650px; margin:0 auto; padding:55px 28px 78px; display:grid; grid-template-columns:1.02fr .98fr; align-items:start; gap:48px; overflow:visible; isolation:auto; background:transparent; }
.hero-copy { padding-top:70px; color:var(--navy); }
.hero .japanese { color:#c57291; }
.hero h1 { color:var(--navy); }
.hero h1 i { color:var(--rose); }
.hero-text { color:var(--ink-soft); }
.hero .button-primary { background:#e7558d; color:var(--refined-paper); box-shadow:0 8px 18px #d95d9140; }
.hero .text-link { color:var(--navy); }
.hero .text-link span { color:var(--rose); }
.hanami-art { display:block; height:470px; overflow:hidden; background:var(--refined-paper); border-radius:0; }
.hanami-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.intro-strip { background:#6e3d54; }
.footer-brand-stack .wordmark { line-height:1.05; }
.footer-brand-stack strong,.footer-brand-stack small { display:block; }
.footer-brand-stack strong { font-size:17px; letter-spacing:-.05em; }
.footer-brand-stack small { margin-top:5px; color:var(--ink-soft); font:10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
@media (max-width:760px) {
  .hero { min-height:0; padding:72px 20px 54px; grid-template-columns:1fr; gap:42px; }
  .hero-copy { padding-top:0; }
  .hanami-art { height:315px; }
  .hanami-art img { object-position:66% center; }
}

/* A quiet, centered closing moment borrowed from Sakura Study's publishing layout. */
footer { max-width:none; min-height:430px; padding:78px 28px 54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; text-align:center; background:var(--refined-paper); }
.footer-brand-stack .footer-mark { justify-content:center; }
.footer-brand-stack .blossom-mark { width:58px; height:58px; font-size:36px; }
.footer-brand-stack strong { font:600 29px/1 var(--serif); }
.footer-brand-stack small { text-align:left; }
.footer-tagline { margin:0; color:var(--ink-soft); font-size:15px; }
footer .footer-links { display:flex; grid-template-columns:none; justify-content:center; flex-wrap:wrap; gap:13px 28px; color:var(--navy); }
.footer-copyright { margin:20px 0 0; color:var(--ink-soft); font-size:12px; text-align:center; }
@media (max-width:760px) { footer { min-height:0; padding:65px 20px 44px; } .footer-brand-stack strong { font-size:25px; } footer .footer-links { gap:11px 18px; } }

.social-links { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }
.social-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:99px; background:var(--refined-paper); color:var(--navy); font:700 12px var(--sans); cursor:pointer; transition:.18s; }
.social-button:hover { border-color:var(--rose); background:#fde8ec; color:var(--rose-dark); transform:translateY(-1px); }
.social-button span { font-size:15px; }
.share-status { min-height:18px; margin:-19px 0 0; color:var(--rose-dark); font-size:11px; font-weight:700; }
.contact-section { position:relative; min-height:calc(100vh - 106px); overflow:hidden; padding:108px max(28px,calc((100vw - 1180px)/2)); background:linear-gradient(145deg,#fff6ee 0%,#fdebef 54%,#f8dbe4 100%); }
.contact-section::before,.contact-section::after { content:"✿"; position:absolute; color:rgba(238,120,153,.14); font-size:170px; line-height:1; pointer-events:none; }
.contact-section::before { left:-48px; top:20px; transform:rotate(-14deg); }.contact-section::after { right:-30px; bottom:-38px; transform:rotate(18deg); }
.contact-shell { position:relative; z-index:1; max-width:1180px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:58px; align-items:center; }
.contact-copy h1,.contact-copy h2 { margin:13px 0 0; font:600 clamp(2.8rem,4.7vw,5rem)/1.03 var(--serif); letter-spacing:-.055em; }.contact-copy h1 i,.contact-copy h2 i { color:var(--rose); }
.contact-copy > p:not(.section-kicker) { max-width:470px; margin:22px 0; color:var(--ink-soft); font-size:16px; line-height:1.65; }
.contact-promise { display:flex; align-items:flex-start; gap:12px; max-width:470px; padding:16px; border:1px solid rgba(255,255,255,.88); border-radius:18px; background:rgba(255,245,238,.7); }
.contact-promise > span { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:50%; background:var(--rose); color:var(--refined-paper); }.contact-promise p { margin:0; color:var(--ink-soft); font-size:13px; }.contact-promise strong { color:var(--navy); }
.contact-form { padding:30px; border:1px solid rgba(255,255,255,.92); border-radius:28px; background:rgba(255,245,238,.88); box-shadow:0 22px 55px rgba(105,56,72,.12); backdrop-filter:blur(12px); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.form-grid label { display:grid; gap:7px; color:var(--navy); font-size:12px; font-weight:900; }.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:1px solid var(--line); border-radius:13px; background:var(--refined-paper); color:var(--navy); font:500 14px/1.5 var(--sans); outline:none; transition:.18s; }.form-grid input,.form-grid select { min-height:48px; padding:0 13px; }.form-grid textarea { min-height:150px; padding:12px 13px; resize:vertical; }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--rose); box-shadow:0 0 0 4px rgba(238,120,153,.13); }.form-wide { grid-column:1/-1; }.form-submit { display:flex; align-items:center; gap:18px; margin-top:20px; }.form-submit p { margin:0; color:var(--ink-soft); font-size:11px; }.contact-status { min-height:24px; margin:13px 0 0; color:var(--rose-dark); font-size:13px; font-weight:800; text-align:center; }
.form-submit .button:disabled { cursor:not-allowed; opacity:.58; transform:none; }
.contact-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.form-grid label em { color:var(--ink-soft); font-size:11px; font-style:normal; font-weight:600; }
@media (max-width:900px) { .contact-section { padding:78px 28px; }.contact-shell { grid-template-columns:1fr; gap:30px; }.contact-copy { text-align:center; }.contact-copy > p:not(.section-kicker),.contact-promise { margin-left:auto; margin-right:auto; } }
@media (max-width:620px) { .contact-section { padding:64px 20px; }.contact-form { padding:20px; }.form-grid { grid-template-columns:1fr; }.form-wide { grid-column:auto; }.form-submit { align-items:stretch; flex-direction:column; } }

/* One editorial family: warm paper, sakura blush, and a single deep plum. */
:root { --studio-plum:#5b3448; --studio-blush:#f8dfe6; --paper:#fff5ee; --refined-paper:#fff8f3; --navy:#2e3440; --ink-soft:#735d65; --rose:#df739d; --rose-dark:#b44d77; --line:#f0d6de; --panel-sakura:var(--studio-plum); }
.intro-strip,.experiences-section { background:var(--studio-plum); }
.experiences-section .section-kicker { color:#f8bfd1; }.experiences-section h2 i { color:#f5aac4; }
.data-card,.insights-card { background:var(--studio-blush); }.app-card-copy > p:not(.product-number) { color:var(--ink-soft); }
.sakura-study,.amen { background:#f5cbd8; color:var(--navy); }.experience-card .card-arrow { background:var(--studio-plum); color:var(--refined-paper); }
.about-section { background:var(--studio-blush); }.button-dark { background:var(--studio-plum); }
.garden-image { background:#f8dce6; }.garden-image::before { background:#f1a3c0; }.garden-image::after { background:var(--refined-paper); }
.hanami-art { background:transparent; }.hanami-art img { object-fit:contain; object-position:right center; mix-blend-mode:normal; }
.contact-section { background:linear-gradient(145deg,#fff8f3 0%,#fae5eb 100%); }

/* Dark anchors create deliberate contrast: header and studio promise. */
.site-header { background:var(--studio-plum); }
.site-header .wordmark,nav a { color:var(--refined-paper); }
.studio-logo-mark { width:98px; height:98px; display:block; flex:0 0 auto; object-fit:contain; object-position:center; border:0; border-radius:0; box-shadow:none; }
.site-header .blossom-mark { background:#f3a7c1; color:var(--studio-plum); box-shadow:none; }
.site-header nav > a:not(.nav-cta)::after { background:#f3a7c1; }
.site-header .nav-cta { border-color:#f3a7c1; color:#f8bfd1; }
.about-section { background:var(--studio-plum); color:var(--refined-paper); }
.about-section .section-kicker { color:#f8bfd1; }
.about-section h2 { color:var(--refined-paper); }
.about-section h2 i { color:#f3a7c1; }
.about-section .button-dark { background:#f3a7c1; color:var(--studio-plum); }
.contact-section { background:linear-gradient(145deg,#fff8f3 0%,#fae5eb 100%); color:var(--navy); }
.contact-section .section-kicker { color:var(--rose-dark); }
.contact-copy h2 { color:var(--navy); }
.contact-copy h2 i { color:var(--rose); }
.contact-copy > p:not(.section-kicker),.contact-promise p { color:var(--ink-soft); }
.contact-promise { border-color:rgba(255,255,255,.92); background:rgba(255,245,238,.88); }
.contact-promise strong { color:var(--navy); }.contact-promise > span { background:var(--rose); color:white; }
footer { background:#b84f78; color:#fff8f3; }
footer .footer-mark,footer .footer-brand-stack strong,footer .footer-links { color:#fff8f3; }
footer .studio-logo-mark { width:92px; height:92px; box-shadow:none; }

/* Header logo and navigation need to read immediately at a glance. */
.site-header { height:108px; }
.site-header .wordmark { gap:14px; font-family:"Cormorant Garamond",var(--serif); font-size:29px; font-weight:700; line-height:.71; letter-spacing:-.055em; }
.site-header .wordmark em { font-family:"Cormorant Garamond",var(--serif); font-weight:700; }
.site-header nav { gap:30px; font-size:16px; font-weight:700; }
.site-header .nav-cta { padding:14px 20px; font-size:17px; }
footer .footer-brand-stack small,footer .footer-tagline,footer .footer-copyright { color:#f8dfe6; }
footer .social-button { border-color:#efa6be; background:#fff8f3; color:#78344f; }
footer .social-button:hover { border-color:#fff8f3; background:#f8dfe6; color:#78344f; }

/* The studio promise has room for Hikari's original mascot to bloom beside it. */
.about-section { grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); align-items:center; gap:42px; padding-top:72px; padding-bottom:72px; }
.about-copy { max-width:760px; text-align:left; }
.about-art { min-height:270px; display:grid; place-items:center; overflow:hidden; }
.about-art img { width:min(100%,360px); max-width:none; filter:drop-shadow(0 18px 20px rgba(38,17,29,.2)); }
footer { background:#88566b; }
 .experiences-heading-row { display:flex; align-items:center; justify-content:space-between; min-height:180px; }
 .experiences-mascot { width:210px; max-height:210px; object-fit:contain; filter:drop-shadow(0 13px 16px rgba(22,8,17,.25)); }
 .contact-copy { position:relative; padding-right:160px; }
 .contact-mascot { position:absolute; width:150px; right:-8px; top:45px; filter:drop-shadow(0 12px 15px rgba(105,56,72,.16)); }
@media (max-width:760px) { .about-section { grid-template-columns:1fr; gap:20px; padding-top:62px; padding-bottom:62px; }.about-art { min-height:210px; }.about-art img { width:285px; }.experiences-heading-row { min-height:0; }.experiences-mascot { width:142px; }.contact-copy { padding-right:100px; }.contact-mascot { width:105px; top:38px; right:-4px; } }

/* Mascot scene and placements: clear, large, and deliberately part of each story. */
.hanami-art { height:470px; background:transparent; border-radius:0; }
.hanami-art img { width:min(100%,420px); height:100%; margin:auto; padding:0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 16px 20px rgba(105,56,72,.12)); }
.experiences-heading-row { min-height:230px; }
.experiences-mascot { width:410px; max-height:330px; margin-right:clamp(0px,5vw,80px); transform:translateX(-5%); }

/* Keep the web experiences as an intentional, compact interlude. */
.experiences-section { padding-top:64px; padding-bottom:72px; }
.experiences-heading-row { min-height:270px; position:relative; overflow:visible; }
.experiences-heading-row::before { content:""; position:absolute; z-index:0; right:18%; top:50%; width:430px; height:236px; transform:translateY(-50%); border:2px solid rgba(239,151,184,.72); border-radius:18px; background:url("assets/hikari-bedroom-vignette-crisp.png") 50% 54% / 140% no-repeat; box-shadow:0 12px 26px rgba(46,19,31,.14); pointer-events:none; }
.experiences-heading-row::after { display:none; }
.experiences-mascot { position:absolute; z-index:1; right:calc(18% + 62px); top:43%; width:258px; max-height:none; margin:0; transform:translateY(-18%); filter:drop-shadow(0 10px 12px rgba(50,20,34,.16)); }
.experience-grid { margin-top:64px; }
.experience-card { min-height:302px; padding:28px 30px; justify-content:flex-end; overflow:hidden; }
.experience-card::before { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(180deg,transparent 0%,rgba(255,248,243,.48) 55%,rgba(255,248,243,.72) 100%); pointer-events:none; }
.experience-card > div { position:absolute; z-index:2; inset:28px 30px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:9px; max-width:none; }
.experience-card p { width:auto; max-width:52%; margin:0; color:#684054; font-size:15px; font-weight:650; line-height:1.45; }
.experience-card h3 { margin:0; color:var(--navy); font-size:clamp(2.25rem,3.55vw,3.45rem); line-height:.94; letter-spacing:-.055em; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.experience-card .card-arrow { top:auto; right:auto; bottom:0; left:0; width:auto; height:auto; padding:9px 13px; border:1px solid rgba(91,52,72,.2); border-radius:999px; background:rgba(255,250,245,.78); color:#5b3448; font-size:13px; font-weight:800; }
.sakura-study { background:linear-gradient(135deg,#f8dbe4 0%,#efb8ce 100%); }
.amen { background:linear-gradient(135deg,#f4c7d7 0%,#e9a9c0 100%); }
.card-japanese { z-index:1; opacity:.1; top:18px; right:23px; font-size:clamp(4.25rem,5.5vw,6.5rem); letter-spacing:.12em; }
.experience-visual { position:absolute; z-index:1; display:block; pointer-events:none; }
.study-preview { right:18px; bottom:21px; width:43%; height:55%; object-fit:cover; object-position:center center; border:3px solid rgba(255,244,237,.82); border-radius:12px; box-shadow:0 16px 26px rgba(78,34,52,.2); }
.amen-preview { right:18px; bottom:21px; width:43%; height:55%; object-fit:cover; object-position:30% 14%; border:3px solid rgba(255,244,237,.78); border-radius:12px; box-shadow:0 16px 26px rgba(78,34,52,.25); }

/* These are real Store-media captures, not imitation windows. */
.app-preview { height:auto; aspect-ratio:16 / 9; background:#fff8f3; border:1px solid rgba(91,52,72,.14); border-radius:14px; box-shadow:0 16px 30px rgba(91,52,72,.13); overflow:hidden; }
.app-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.app-card .card-link { display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:10px 14px; border:1px solid rgba(21,49,69,.18); border-radius:999px; background:#fff7f1; color:var(--navy); font-weight:750; }
.app-card .card-link:hover { background:var(--sakura); color:#fff; border-color:var(--sakura); }

@media (max-width:720px) {
  .experiences-section { padding-top:46px; padding-bottom:52px; }
  .experiences-heading-row { min-height:220px; align-items:flex-end; }
  .experiences-heading-row::before { right:-10px; width:255px; height:150px; border-width:1px; border-radius:14px; background-size:140%; }
  .experiences-mascot { right:8px; top:48%; width:160px; max-height:none; margin:0; transform:translateY(-15%); }
  .experience-grid { margin-top:44px; }
  .experience-card { min-height:300px; padding:24px; }
  .experience-card > div { inset:24px; }
  .experience-card h3 { font-size:2.35rem; }
  .experience-card p { max-width:56%; font-size:14px; }
  .study-preview { width:42%; right:14px; height:44%; }
  .amen-preview { width:42%; right:14px; height:44%; }
  .experience-card .card-arrow { left:0; bottom:0; }
}
.about-section { padding-top:28px; padding-bottom:28px; }
.about-art { min-height:0; position:relative; }
.about-art::before { display:none; }
.about-art img { position:relative; z-index:1; width:min(100%,285px); }
.contact-copy { padding-right:190px; }
.contact-speech { position:relative; z-index:1; max-width:430px; margin:14px 0 28px !important; padding:20px 24px 23px; border:1px solid #f3cad8; border-radius:30px 30px 30px 7px; background:#fffaf5; box-shadow:0 16px 32px rgba(125,66,88,.12); font-size:clamp(2.5rem,3.8vw,4.3rem) !important; }
.contact-speech::after { content:""; position:absolute; right:-15px; bottom:30px; width:36px; height:27px; background:#fffaf5; border:1px solid #f3cad8; border-left:0; border-bottom:0; border-radius:0 78% 76% 34%; transform:rotate(-24deg); pointer-events:none; }
.contact-speech::before { content:""; position:absolute; right:-35px; bottom:23px; width:12px; height:12px; background:#fffaf5; border:1px solid #f3cad8; border-radius:50%; pointer-events:none; }
.contact-mascot { width:195px; right:-8px; top:115px; filter:drop-shadow(0 12px 15px rgba(105,56,72,.16)); }
@media (max-width:760px) { .hanami-art { height:340px; }.hanami-art img { width:300px; }.experiences-heading-row { min-height:160px; }.experiences-mascot { width:230px; margin-right:0; transform:translateX(0); }.about-section { padding-top:34px; padding-bottom:34px; }.about-art { min-height:0; }.about-art img { width:245px; }.contact-copy { padding-right:95px; }.contact-speech { padding:16px 17px 19px; margin-bottom:26px !important; }.contact-mascot { width:128px; right:-9px; top:125px; } }
.hanami-art { display:grid; place-items:center; background:radial-gradient(circle at 52% 47%,#f9d3df 0 43%,transparent 44%); }
.hanami-art img { width:min(100%,440px); height:100%; padding:14px 0 0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 17px 20px rgba(91,52,72,.15)); }
@media (max-width:760px) { .menu-button { border-color:#f3a7c1; }.menu-button span { background:#f3a7c1; } nav { background:var(--studio-plum); box-shadow:0 12px 30px #2b132420; } .hanami-art img { width:310px; } }
@media (max-width:760px) { .site-header { height:78px; padding-top:8px; padding-bottom:8px; }.site-header .wordmark { gap:8px; font-size:22px; }.studio-logo-mark { width:52px; height:52px; } footer .studio-logo-mark { width:76px; height:76px; } }

/* Keep the app introduction compact and let the products arrive sooner. */
.apps-section { padding-top:76px; padding-bottom:76px; }
.apps-section .app-list { margin-top:38px; }

/* The studio mark belongs in the actual top-left corner, not a centered content rail. */
.site-header { padding-left:28px; padding-right:28px; }

/* Footer is part of the same deep-plum visual anchor as the studio statement. */
footer { background:var(--studio-plum); }

/* A soft, single-tail speech bubble that clearly belongs to the mascot. */
.contact-speech { border-radius:30px; }
.contact-speech::after { display:none; }
.contact-speech::before { display:none; }
.contact-promise { border-color:#f1cddd; background:linear-gradient(135deg,#fffaf5 0%,#fff0f4 100%); box-shadow:0 12px 25px rgba(161,78,107,.08); }
.contact-promise > span { flex-basis:42px; height:42px; background:linear-gradient(135deg,#ec78a5,#d95d91); box-shadow:0 7px 15px rgba(217,93,145,.22); }
.contact-promise p { line-height:1.45; }

/* Hero mascot: a warm shoji-window vignette rather than a plain pink circle. */
.hanami-art {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #f1d6df;
  border-radius:17px;
  background:linear-gradient(135deg,#fffaf5 0%,#fce8ee 100%);
  box-shadow:0 16px 32px rgba(105,56,72,.10);
}
.hanami-art::before { content:""; position:absolute; inset:16px; z-index:-1; border:1px solid rgba(193,123,147,.22); border-radius:9px; background:repeating-linear-gradient(90deg,transparent 0 calc(33.333% - 1px),rgba(193,123,147,.10) calc(33.333% - 1px) 33.333%),repeating-linear-gradient(0deg,transparent 0 calc(33.333% - 1px),rgba(193,123,147,.10) calc(33.333% - 1px) 33.333%); }
.hanami-art::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 38%,rgba(255,246,214,.48),transparent 45%); }
.hanami-art img { position:relative; z-index:1; }

/* The hero uses the real cozy bedroom vignette—not a CSS approximation. */
.hanami-art { background:#f7d6df; border:4px solid #f3a7c1; border-radius:34px; }
.hanami-art::before,.hanami-art::after { display:none; }
.hanami-art img { width:100%; height:100%; margin:0; padding:0; object-fit:cover; object-position:center; filter:none; }
.hanami-art img { object-position:right center; }

/* Balance the full hero artwork vertically against the text column. */
.hero { align-items:center; }

/* Preserve the full wide illustration instead of cropping it into a tall card. */
.hanami-art { height:auto; aspect-ratio:3 / 2; }
.hanami-art img { object-position:center; }

/* Slightly favor the image side of the Web Experiences heading. */
.experiences-heading-row::before { right:15.5%; }
.experiences-mascot { right:calc(15.5% + 62px); }
@media (max-width:760px) {
  .apps-section { padding-top:56px; padding-bottom:56px; }
  .apps-section .app-list { margin-top:32px; }
  .hanami-art { border-radius:22px; }
}