/* Yomidori v4 — the "pop" identity layer over site-v2.css.
   Palette, coral accents, grid-line hero and the logo mark with the
   hinomaru dot. Load AFTER site-v2.css and phone.css. */
:root{--paper:#f5f1e8;--paper-warm:#eee7d9;--card:#fffdf8;--card-raised:#fffefa;--card-tint:#f3eee3;--band:#ebe4d7;--border:#ded6c8;--hair:#e5ddcf;--ink:#202d40;--text:#30343b;--muted:#6f6b63;--faint:#a09a8f;--navy:#253956;--navy-deep:#182940;--navy-mid:#71839b;--navy-soft:#dde5ef;--coral:#d53b3f;--coral-soft:#f6dada;--accent-on-dark:#ff9a9d;--warm-soft:#f3dddd;--warm-ink:#9e3438;--shu:#c84e43;--flag-red:#bc002d;--matcha:#84986a;--matcha-soft:#e6ebde;--matcha-ink:#576d3d;--amber:#ba8c45;--amber-soft:#f1e5d3;--kinari-from:#f8f3e9;--kinari-to:#ece3d2;--kinari-edge:#d9cfbd;--r-card:18px;--r-lg:28px;--r-block:34px;--shadow-raised:0 18px 50px rgba(37,57,86,.1),0 2px 4px rgba(37,57,86,.04)}
.wrap{max-width:1180px;padding:0 28px}
.btn{border-radius:13px}
.btn-solid{box-shadow:0 8px 18px rgba(37,57,86,.16)}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,57,86,.2)}
/* the mark: 通 with a hinomaru where the dot goes */
.yomidori-mark{overflow:visible;display:block}
.yomidori-mark path{stroke-width:7.2;stroke-linecap:round;stroke-linejoin:round}
.yomidori-mark .mark-navy{stroke:var(--navy)}
.yomidori-mark .mark-dot{fill:var(--flag-red)}
.mark--animated path{stroke-dasharray:1;stroke-dashoffset:1;animation:mark-draw .42s cubic-bezier(.36,.05,.22,1) forwards;animation-delay:calc(.2s + var(--stroke-index) * .2s)}
.mark--animated .mark-dot{opacity:0;transform:scale(.25);transform-box:fill-box;transform-origin:center;animation:mark-dot-in .4s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.2s + var(--stroke-index) * .2s)}
@keyframes mark-draw{to{stroke-dashoffset:0}}
@keyframes mark-dot-in{to{opacity:1;transform:scale(1)}}
.brand{gap:10px}
.brand-mark{width:38px;height:38px}
.brand span{font-size:18px;letter-spacing:.025em;color:var(--ink)}
.hdr{background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--navy) 10%,transparent)}
.hdr .wrap{height:72px}
/* hero — ruled paper, a coral bloom, and the mark on its disc */
.hero{background:var(--paper);background-image:linear-gradient(rgba(37,57,86,.035) 1px,transparent 1px);background-size:100% 42px;border:0;border-radius:0;overflow:hidden;padding:clamp(52px,7vw,84px) 0 clamp(80px,9vw,110px)}
.hero::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--coral-soft);left:-210px;top:70px;opacity:.6;pointer-events:none}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;position:relative}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,5.4vw,70px);line-height:1.03;letter-spacing:-.03em;max-width:13em}
.hero h1 em{font-style:normal;font-family:var(--f-mincho);color:var(--flag-red);position:relative;white-space:nowrap}
.hero h1 em::after{display:none}
.hero-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:var(--f-head);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.hero-kicker i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#fff;font-family:var(--f-mincho);font-style:normal;font-size:18px;box-shadow:0 0 0 7px var(--coral-soft)}
.hero-vid{position:relative;justify-content:flex-end;align-items:center}
.hero-vid .vid{position:relative;z-index:1;transform:rotate(2.5deg);margin:0 6px 0 auto}
.hero-glyph{position:absolute;left:-116px;top:8px;width:320px;height:320px;display:grid;place-items:center;z-index:0;pointer-events:none}
.hero-glyph::before{content:"";position:absolute;inset:0;border:1px solid rgba(37,57,86,.12);border-radius:50%;background:rgba(255,253,248,.7);box-shadow:0 24px 70px rgba(37,57,86,.08)}
.hero-glyph .yomidori-mark{width:210px;height:210px;position:relative;z-index:1}
.hero .standfirst{max-width:24em;margin-top:46px}
.glyph-caption{position:absolute;left:38px;bottom:18px;display:flex;align-items:baseline;gap:12px;z-index:2;color:var(--navy)}
.glyph-caption b{font-family:var(--f-mincho);font-size:18px;font-weight:500}
.glyph-caption span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* section kickers in coral */
.lbl{color:var(--coral);font-size:12px;letter-spacing:.12em;text-transform:uppercase;gap:11px}
.lbl::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.sec-head.center .lbl{justify-content:center}
.beliefs .n,.steps .n{color:var(--coral)}
/* blocks + cards */
.block{margin:0 14px;border-radius:var(--r-block)}
.read{background:var(--band)}
.world{border-radius:var(--r-lg);transition:transform .2s,box-shadow .2s}
.world:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.plan .badge{background:var(--coral);color:#fff;font-size:12px}
.plan.hero-plan{overflow:hidden}
.plan.hero-plan::after{content:"通";position:absolute;right:-18px;bottom:-34px;font-family:var(--f-mincho);font-size:160px;line-height:1;color:rgba(255,255,255,.05);pointer-events:none}
.method{position:relative;overflow:hidden}
.seal{background:var(--flag-red);border-radius:50%;box-shadow:0 8px 18px rgba(188,0,45,.25)}
/* cta on the coral wash */
.cta{background:var(--coral-soft);border:1px solid color-mix(in srgb,var(--coral) 22%,transparent);border-radius:var(--r-block)}
.cta .cta-mark{width:74px;height:74px;margin-bottom:18px}
.cta .wl input:focus{border-color:var(--coral)}
@media (prefers-reduced-motion:reduce){.mark--animated path{animation:none;stroke-dashoffset:0}.mark--animated .mark-dot{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-vid{justify-content:center;margin-top:48px;min-height:520px;align-items:flex-end}.hero-glyph{left:50%;top:0;transform:translateX(-58%)}.hero-vid .vid{margin:0 0 0 90px}}
@media (max-width:560px){.wrap{padding:0 20px}.hdr .wrap{height:64px}.brand-mark{width:34px;height:34px}.hero h1{font-size:clamp(38px,11vw,52px)}.hero-glyph{width:260px;height:260px}.hero-glyph .yomidori-mark{width:195px;height:195px}.glyph-caption{display:none}.hero-vid .vid{margin-left:56px}.block{margin:0 8px}}