/* Inner pages (v2). Restyles the client's own content markup in the shared system, so her words,
   links and scripts stay exactly as she wrote them. */

main em,main mark{font-style:normal;color:inherit;background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 94%,transparent 94%);border-radius:.15em;padding-inline:.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scene-svg.is-offscreen,.scene-svg.is-offscreen *{animation-play-state:paused!important}
.closing__lede{max-inline-size:40rem;font-size:var(--fs-lead)}

/* Page hero: her copy on one side, a character scene on the other */
.hero{padding-block:clamp(var(--space-6),6vw,var(--space-8))}
.page-hero{display:grid;gap:clamp(var(--space-5),4vw,var(--space-7));align-items:center}
@media (min-width:900px){.page-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.page-hero h1{margin-block:var(--space-2) var(--space-4);max-inline-size:18ch;font-size:clamp(2.4rem,4.6vw,4rem)}
.page-hero .lead{margin-block-end:var(--space-4);font-weight:600}
.page-hero p:not(.kicker):not(.lead){max-inline-size:36rem}
.page-hero .actions{margin-block-start:var(--space-5)}
.page-hero__art{max-inline-size:420px;justify-self:center;inline-size:100%}
.mrd{display:none}
@media (max-width:700px){
  .hero .clampm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* several paragraphs folded together behind one Read more */
  .hero .clampbox.clampm{display:block;-webkit-line-clamp:unset;max-block-size:8.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .mrd{display:inline-block;background:none;border:0;padding:0;margin-block-start:var(--space-2);font-weight:600;color:var(--color-action);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
}
.section .wrap>h2{margin-block:var(--space-2) var(--space-3)}
.section .wrap>.lead{max-inline-size:42rem}

/* Selected work: filter chips + a scrolling track of case cards (her script drives both) */
.fl{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block:var(--space-5) var(--space-4)}
.fl button{appearance:none;border:1.5px solid var(--color-border-strong);background:transparent;color:var(--color-text);border-radius:var(--radius-pill);padding:.5em 1.1em;min-block-size:44px;font-weight:600;cursor:pointer;transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring)}
.fl button:hover{background:var(--tint-shikon)}
.fl button:active{transform:scale(.96)}
.fl button b{display:inline-grid;place-items:center;min-inline-size:1.6em;margin-inline-start:.3em;padding-inline:.35em;border-radius:var(--radius-pill);background:var(--tint-tanpopo);font-size:.85em}
.fl button.on{background:var(--color-action);border-color:var(--color-action);color:var(--color-on-action)}
.fl button.on b{background:var(--jp-shironeri);color:var(--color-text)}
.trk{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,380px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-3) var(--gutter) var(--space-5);margin-inline:calc(var(--gutter) * -1);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:thin}
.pc{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--color-surface);border:4px solid var(--tc,var(--jp-tanpopo-iro));border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.pc.hide{display:none}
.cvz{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:color-mix(in srgb,var(--tc) 32%,var(--jp-shironeri))}
.cvz .ico{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:12px;background:var(--jp-shironeri)}
.cvz .ico svg{inline-size:20px;block-size:20px}
.cvz .ct{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cvz .nn{margin-inline-start:auto;font-family:var(--font-display);font-weight:800;font-size:1.4rem}
.cbd{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);flex:1}
.cbd h3{font-size:1.25rem}
.cd{max-inline-size:none}
.pv{font-size:var(--fs-small);color:var(--color-text-2)}
.cm{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cm span{padding:.25em .8em;border-radius:var(--radius-pill);background:var(--tint-shikon);font-size:var(--fs-small);font-weight:600}
.hcw{border-block-start:1px solid var(--color-border);padding-block-start:var(--space-3)}
.hcw summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--color-action)}
.hcw summary::-webkit-details-marker{display:none}
.hcw summary i{font-style:normal;display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--color-action);color:var(--color-on-action);transition:transform var(--dur) var(--ease-spring)}
.hcw[open] summary i{transform:rotate(45deg)}
.cw{margin-block-start:var(--space-3);font-size:var(--fs-small);max-inline-size:none}
.tg{margin-block-start:auto;font-size:var(--fs-label);color:var(--color-text-2);max-inline-size:none}
.tctl{display:flex;align-items:center;gap:var(--space-3);margin-block-start:var(--space-2)}
.prog{flex:1;block-size:4px;background:var(--tint-shikon);border-radius:4px;overflow:hidden}
.prog span{display:block;block-size:100%;inline-size:20%;background:var(--jp-nanohana-iro);border-radius:4px;transition:inline-size .2s}
.tctl button{inline-size:48px;block-size:48px;border-radius:50%;border:2px solid var(--color-action);background:transparent;color:var(--color-action);font-size:1.2rem;cursor:pointer;transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring)}
.tctl button:hover{background:var(--tint-aotake)}.tctl button:active{transform:scale(.92)}.tctl button:disabled{opacity:.35;cursor:default}

/* Six things: her six items as illustrated-dot cards */
.sg{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-block:var(--space-6) var(--space-5)}
.si{position:relative;background:var(--color-surface);border:4px solid var(--tc);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-5)}
.si .dot{position:absolute;inset-block-start:var(--space-5);inset-inline-end:var(--space-5);inline-size:22px;block-size:22px;border-radius:50%;background:var(--tc)}
.si .n{font-family:var(--font-display);font-weight:800;font-size:1.6rem;line-height:1}
.si h3{margin-block:var(--space-2)}
.si .q{font-weight:700;margin-block-end:var(--space-2)}
.cap{text-align:center;max-inline-size:none;color:var(--color-text-2)}
.cap a{font-weight:700}

/* Delivery notes */
.hs{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.hi2{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);border-radius:var(--radius-card);background:var(--tint-nanohana)}
.hi2 svg{flex:none;inline-size:40px;block-size:40px;color:var(--jp-aotake-iro)}
.hi2 p{max-inline-size:none}
.cvz .ico svg{fill:none;stroke:var(--jp-shikon-iro);stroke-width:2}

/* ---------- Coaching ---------- */
/* Renovation sequence */
.hg3{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-block:var(--space-6) var(--space-5)}
.hp{margin:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-4)}
.hp svg{inline-size:100%;block-size:auto}
.hp figcaption{margin-block-start:var(--space-2);text-align:center;font-weight:700}
.pull{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;max-inline-size:34ch}
/* Transitions: her quotes as speech bubbles that open in place */
.lb{display:grid;gap:var(--space-3);margin-block:var(--space-6) var(--space-5)}
.lb details{background:var(--color-surface);border:4px solid var(--c);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) ease}
.lb details:hover,.lb details:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.lb summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-radius:var(--radius-card)}
.lb summary::-webkit-details-marker{display:none}
.lb .fg{flex:none;inline-size:34px}.lb .fg svg{inline-size:34px;block-size:auto}
.lb .iq{flex:1;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.35}
.lb .tn{display:table;margin-block-start:var(--space-3);padding:.3em .8em;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--c) 30%,var(--color-surface));font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.lb i.p,.det summary i,.qg i{flex:none;font-style:normal;display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--color-action);color:var(--color-on-action);font-weight:700;transition:transform var(--dur) var(--ease-spring)}
.lb details[open] i.p{transform:rotate(45deg)}
.lb .bd{padding:0 var(--space-5) var(--space-5) calc(var(--space-5) + 34px + var(--space-4))}
.lb .bd p{max-inline-size:none}
.endn{font-weight:600}
/* Testimonial track */
.voices .track{grid-auto-columns:min(86%,400px);align-items:start}
.qc{scroll-snap-align:start;margin:0;background:var(--color-surface);border:4px solid var(--jp-sakura-iro);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-5)}
.qc:nth-child(7n+2){border-color:var(--jp-tanpopo-iro)}.qc:nth-child(7n+3){border-color:var(--jp-mikan-iro)}.qc:nth-child(7n+4){border-color:var(--jp-wasurenagusa-iro)}.qc:nth-child(7n+5){border-color:var(--jp-nanohana-iro)}.qc:nth-child(7n+6){border-color:var(--jp-otan)}.qc:nth-child(7n+7){border-color:var(--jp-shikon-iro)}
.qt{display:flex;gap:var(--space-3);align-items:center;margin-block-end:var(--space-4)}
.av{flex:none;display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:50%;background:var(--tint-asamidori);font-family:var(--font-display);font-weight:800}
.av.l-JA{background:var(--tint-sakura)}
.role{font-weight:700;max-inline-size:none}
.qc .bd{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block-start:var(--space-1)}
.qc .bd span{padding:.1em .7em;border-radius:var(--radius-pill);background:var(--tint-wasurenagusa);font-size:var(--fs-label);font-weight:700}
.qc blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.45}
.qc blockquote p{max-inline-size:none}
.qc blockquote.clamp{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.rd{margin-block-start:var(--space-3);background:none;border:0;padding:0;color:var(--color-action);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* How an engagement works */
.tlw{margin-block:var(--space-5)}
.tlw svg{inline-size:100%;block-size:auto}
.tlw .cp{text-align:center;font-weight:600;max-inline-size:none;margin-block-start:var(--space-2)}
.hw{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-block:var(--space-5) var(--space-6)}
.hw .hi2{background:var(--tint-asamidori)}
.det{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);margin-block-end:var(--space-3)}
.det>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);font-weight:700;border-radius:var(--radius-card)}
.det>summary::-webkit-details-marker{display:none}
.det[open]>summary i{transform:rotate(45deg)}
.det>p,.det>.qg{padding-inline:var(--space-5)}
.det>p{padding-block-end:var(--space-4);max-inline-size:none}
.qg{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));padding-block-end:var(--space-5)}
.qg article{background:var(--tint-asamidori);border-radius:var(--radius-small);padding:var(--space-4)}
.qg h3,.qg h4{font-family:var(--font-display);font-size:1.15rem;font-weight:800;margin-block-end:var(--space-1)}
.qg p{font-size:var(--fs-small);max-inline-size:none}

/* ---------- Advisory ---------- */
.bw{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-block-start:var(--space-6)}
.bp2{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;background:var(--tint-wasurenagusa);border-radius:var(--radius-card);padding:var(--space-5)}
.bp2 svg{inline-size:100%;max-inline-size:220px;block-size:auto}
.bp2 p{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.3;max-inline-size:none}
.bp2 p span{display:block;margin-block:var(--space-1);font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-2)}
.hw2{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-block:var(--space-5)}
.hw2 .hi2{background:var(--tint-wasurenagusa);flex-direction:column;gap:var(--space-3)}
.work.band--advisory .pc{background:var(--color-surface)}

/* ---------- Thinking (her own idea cards + dialog, restyled) ---------- */
.icard .ic-n{color:var(--color-text)}
.icard .ic-n::first-letter{color:var(--color-text)}
.ic-n small{color:var(--color-text-2)}
.hyp{color:var(--color-text);background:var(--tint-tanpopo);border-color:transparent}
/* Systems diagram (Thinking 01): bigger, faster, labels always at full strength (AA) */
.pm:has(.sysfig),.mdl #c1 .pm{grid-template-columns:1fr!important;gap:clamp(16px,3vw,32px)}
.pm figure.sysfig{margin-inline:auto!important}
.pm figure.sysfig{max-width:none!important;inline-size:100%!important;justify-self:center!important;max-inline-size:680px!important}
.pm figure.sysfig>svg{max-width:680px!important;inline-size:100%}
@media (max-width:900px){.pm:has(.sysfig){grid-template-columns:1fr}.pm figure.sysfig>svg{max-width:100%!important}}
.sys .sc{transition-duration:.6s}
.sys .sl,.sys .soc,.sys .soct,.sys .flow,.sys .who{transition-duration:.45s}
.sys .fr{transition-delay:.06s}.sys .tm{transition-delay:.12s}.sys .co{transition-delay:.18s}
.sys .sl{font-weight:600}
.sys[data-step="2"] .sl.fa,.sys[data-step="3"] .sl.tm,.sys[data-step="3"] .sl.co{opacity:1}
.sys .who.wa{transition-delay:0s}.sys[data-step="3"] .who.wb{transition-delay:.3s}

/* ---------- About ---------- */
.mapw{overflow:visible!important}
/* On phones the map is wider than the screen: let it scroll sideways */
@media (max-width:620px){.mapw{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}}
.maphint{display:none}
@media (max-width:620px){.maphint{display:flex;justify-content:center;gap:.4em;margin-block-start:var(--space-2);font-size:var(--fs-small);color:var(--color-text-2);max-inline-size:none}}
.mapw .tip{max-inline-size:min(320px,80vw);white-space:normal!important}
/* Heroes render immediately (the first screen shouldn't wait for a fade-in); later sections still reveal on scroll. */
.hero .rv,.hero.s .rv{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- 404 and the "What is coaching?" article ---------- */
.page-hero--404{grid-template-columns:1fr}
@media (min-width:900px){.page-hero--404{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.article-top .eyebrow,.article-top .kicker{margin-block-end:var(--space-3)}
.article-top .kicker a{text-decoration:none;font-weight:700}
.ltabs{display:flex;gap:var(--space-2);margin-block:var(--space-4) var(--space-3)}
.ltabs button{appearance:none;border:1.5px solid var(--color-border-strong);background:transparent;color:var(--color-text);border-radius:var(--radius-pill);padding:.5em 1.3em;min-block-size:44px;font-weight:600;cursor:pointer;transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring)}
.ltabs button:hover{background:var(--tint-shikon)}.ltabs button:active{transform:scale(.96)}
.ltabs button.on{background:var(--color-action);border-color:var(--color-action);color:var(--color-on-action)}
.lnote{font-size:var(--fs-small);color:var(--color-text-2);max-inline-size:44rem}
.post[hidden],.lnote[hidden]{display:none}
.post{max-inline-size:44rem}
.post h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.15;margin-block-end:var(--space-5)}
.post h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;margin-block:var(--space-7) var(--space-3)}
.post h3{font-size:1.35rem;margin-block:var(--space-5) var(--space-2)}
.post p,.post li{font-size:1.0625rem;line-height:1.85;max-inline-size:none}
.post p{margin-block-end:var(--space-4)}
.post ul,.post ol{padding-inline-start:1.3em}
.post li{margin-block-end:var(--space-3)}
.post[lang=ja] p,.post[lang=ja] li{line-height:2.05;font-family:var(--font-ja)}
.post[lang=ja] h1,.post[lang=ja] h2,.post[lang=ja] h3{font-family:var(--font-ja);font-weight:700;line-height:1.5}
.postfig{margin-block:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-4)}
.postfig svg{inline-size:100%;block-size:auto}
.postwrap em{background:none;color:inherit;font-style:normal;font-weight:700}

/* About hero: keeps her two-column layout; only spacing and the rotating word are aligned with the other pages */
#hero:has(#rot) h1{margin-block:var(--space-2) var(--space-4);font-size:clamp(2.4rem,4.6vw,4rem)}
#hero:has(#rot) .lead{margin-block-end:0;font-weight:600}
#hero:has(#rot) .actions{margin-block-start:var(--space-5)}
#rot{display:inline;min-height:0;padding-inline:.04em;color:inherit;background:linear-gradient(transparent 58%,var(--jp-tanpopo-iro) 58%,var(--jp-tanpopo-iro) 92%,transparent 92%);border-radius:.15em;transition:opacity .5s ease}
#rot.out{opacity:0;transform:none}
@media (prefers-reduced-motion:reduce){#rot{transition:none}}
/* Hero CTA: same 32px gap below the text as the homepage, on every page */
.page-hero .actions,#hero:has(#rot) .actions{margin-block-start:var(--space-6)}
.page-hero .lead,.page-hero p.b,#hero:has(#rot) .lead{margin-block-end:0}