/* 2026-11 refresh: legible type with clear contrast, a shorter TOP, and a rhythm of large type, short text and varied photo sizes. Loaded after site.css. */

/* ---------- Type families (three reviewable pairs) ---------- */
:root{
 --font-ja:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic Medium',Meiryo,sans-serif;
 --font-en:'DM Sans',var(--font-ja);
 --font-head:var(--font-en);
 --w-body:400;--w-head:700;--w-catch:900;--w-label:600;
 --track-head:.03em;
 --ink-soft:#4a5247;
}
.font-b{--font-ja:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic Medium',Meiryo,sans-serif;--font-en:'Manrope',var(--font-ja);--font-head:var(--font-en);--w-catch:800}
.font-c{--font-head:'DM Sans','Zen Old Mincho','Yu Mincho',serif;--w-head:700;--w-catch:900;--track-head:.05em}
:root,body{--sans:var(--font-en);--serif:var(--font-head)}
body{font-family:var(--font-en);font-weight:var(--w-body);font-size:16px;letter-spacing:.03em;font-feature-settings:'palt' 0;text-rendering:optimizeLegibility}
h1,h2,h3,.news-title,.design-navigation>a,.footer-contact-links>a strong,.contact-methods h3,.consultation-methods>a{font-family:var(--font-head);font-weight:var(--w-head);letter-spacing:var(--track-head)}
.section-heading h2,.footer-contact h2,.footer-contact-links>a strong,.hero-project strong{font-weight:var(--w-head);letter-spacing:var(--track-head)}
/* English labels: compact, wide-tracked, in the Latin face. */
.eyebrow,.flow-number,.number,.slide-count,.scroll-cue,.head nav a,.mobile-contact,.menu-toggle,.work-card-meta span,.contact-methods span,.timeline li>span,.process li>span,.performance-grid span,.fees-grid span,.footer-contact-links>a span,.news-date,.hero-project small,.footer-top{font-family:'DM Sans','Manrope',var(--font-ja);font-weight:var(--w-label);letter-spacing:.16em}
.font-b .eyebrow,.font-b .flow-number,.font-b .head nav a,.font-b .news-date{font-family:'Manrope',var(--font-ja)}
.eyebrow,.section-heading .eyebrow,.expertise-heading .eyebrow{font-size:13px;color:#5f6a5a}
.home-consultation .eyebrow,.fees .eyebrow,.footer .eyebrow{color:inherit;opacity:.85}
.hero-project .number,.slide-count{font-size:12px}.hero-project small,.scroll-cue{font-size:11px}
.service-topics span,.service-topics li>span{font-size:13px}

/* Natural Japanese line breaks: break at phrase boundaries where the browser supports it. */
h1,h2,h3,p,figcaption,dd,li,.news-title{word-break:auto-phrase;line-break:strict}
p,li,dd{text-wrap:pretty}
.kdo-ph{display:inline-block}
/* Floating consultation bar: a light outline keeps it visible over green sections. */
.quick-contact{box-shadow:0 0 0 1px #f2f1ebcc,0 10px 28px #0f1a1240}

/* ---------- Scale: catch copy > headings > body ---------- */
.brand-manifesto h2{font-family:var(--font-head);font-weight:var(--w-catch);font-size:clamp(44px,6.4vw,104px);line-height:1.32;letter-spacing:.02em}
.font-c .brand-manifesto h2{font-family:'Zen Old Mincho','Yu Mincho',serif;letter-spacing:.04em;line-height:1.4}
.hero h1{font-family:var(--font-head);font-weight:var(--w-head);font-size:clamp(28px,3.4vw,52px);line-height:1.55;letter-spacing:.06em;text-shadow:0 2px 18px #0006}
.font-c .hero h1,.font-c h1,.font-c h2,.font-c h3:not(.design-field h3){font-family:'Zen Old Mincho','Yu Mincho',serif}
.hero-fields{font-weight:500;letter-spacing:.14em;text-shadow:0 1px 12px #0007}
.page-intro h1{font-size:clamp(34px,4.6vw,64px);line-height:1.45;letter-spacing:.03em}
.design-fields h2,.home-selected h2,.instagram-section h2,.team-section h2,.home-about h2,.essay h2,.closing-cta h2,.home-consultation h2,.news-head h2,.faq-section .section-heading h2,.service-topics h2,.timeline-section .section-heading h2,.office h2,.fees>h2,.related-works .section-heading h2,.contact-options h2,.home-performance h2,.process h2,.perspective-heading h2,.service-overview h2,.form-heading h2{line-height:1.5}
.design-fields h2,.home-selected h2,.instagram-section h2,.home-about h2,.news-head h2{font-size:clamp(30px,3.6vw,52px)}
.essay h2,.process h2{font-size:clamp(26px,2.8vw,40px)}
.home-consultation h2{font-size:clamp(36px,5vw,76px);font-weight:var(--w-catch);line-height:1.35}
/* Body text: larger and darker so thin strokes stay legible on phones. */
.manifesto-copy p,.home-about-copy p,.essay p:not(.eyebrow),.designer-copy>p,.process li p,.fees p,.faq>p,.service-topics p,.closing-cta>p,.team-intro,.page-lead,.service-overview p:not(.eyebrow),.timeline p,.office dl>div,.contact-options>div>p:not(.eyebrow),.contact-methods p,.instagram-intro,.section-intro,.performance-grid p,.legacy-content,.project-original>p,.home-consultation>p:not(.eyebrow),.team-member p{font-size:17px;line-height:2.05}
.manifesto-lead .desktop-break{display:inline}
.manifesto-copy .manifesto-lead{font-family:var(--font-head);font-weight:var(--w-head);font-size:clamp(20px,1.7vw,26px);line-height:1.8;letter-spacing:.04em}
.caption,.photo-caption,.brand-landscape figcaption,.approach-pair figcaption,.designer figcaption,.work-card>a>p,.design-field>p:last-child{font-size:15px;color:var(--ink-soft)}
.link,.filled-link{font-weight:500;font-size:15px}
.work-card-meta h2{font-weight:var(--w-head);font-size:clamp(22px,2vw,28px)}
.design-field h3{font-size:clamp(24px,2.2vw,34px)}

/* ---------- TOP rhythm ---------- */
.brand-manifesto{grid-template-columns:1fr;padding-block:clamp(90px,10vw,150px) clamp(60px,7vw,110px)}
.brand-manifesto h2{grid-column:1/-1}
.manifesto-copy{grid-column:1/-1;max-width:34em;margin-left:auto;margin-top:clamp(40px,5vw,80px);padding-top:0}
/* One large, edge-to-edge photograph after the copy. */
.brand-landscape{margin:0}.brand-landscape .frame{height:min(58vw,760px)}
.brand-landscape figcaption{padding-inline:var(--g)}
/* Company: small portrait photo, short copy. */
.home-about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8vw;align-items:end;padding-block:clamp(80px,9vw,130px)}
.home-about-photo{margin:0;width:78%}.home-about-photo .frame{aspect-ratio:3/4}
.home-about-copy{max-width:36em}.home-about-copy h2{margin:22px 0 30px;font-size:clamp(28px,3.2vw,46px)}.home-about-copy h2 span{display:block;white-space:nowrap}
/* Three services: one large card, two smaller ones. */
.design-field-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto;gap:40px 5vw;margin-top:40px}
.design-field:first-child{grid-row:1/3}.design-field:first-child .frame{aspect-ratio:1/1}
.design-field:nth-child(2){padding-top:0}.design-field:nth-child(2) .frame,.design-field:nth-child(3) .frame{aspect-ratio:16/10}
.design-field .eyebrow{margin:20px 0 8px}
/* Works: a wide lead project and two smaller ones. */
.home-selected .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 5vw}
.home-selected .work-card:first-child{grid-column:1/-1}.home-selected .work-card:first-child .frame{aspect-ratio:21/9}
.home-selected .work-card:not(:first-child) .frame{aspect-ratio:4/3}
.home-selected .work-card:nth-child(3){margin-top:70px}
.home-selected{padding-bottom:60px}
/* Consultation: large copy, three equal methods. */
.home-consultation{padding-block:clamp(90px,10vw,150px)}
.consultation-methods>a{font-family:var(--font-head);font-weight:var(--w-head);font-size:clamp(20px,1.8vw,26px)}
.consultation-methods span{font-family:var(--font-en);font-weight:500;font-size:14px;letter-spacing:.06em}
.footer-main--compact{display:block}
.footer-main--compact .footer-brand{max-width:none;display:grid;grid-template-columns:auto 1fr 1fr;gap:16px 6vw;align-items:start}
.footer-main--compact .footer-brand .logo{grid-row:1/3}

/* ---------- NEWS: one list, newest first, with a type label ---------- */
.news-item{grid-template-columns:130px 88px minmax(0,1fr) auto}
.news-kind{font-size:12px;font-weight:500;letter-spacing:.08em;border:1px solid #9aa391;padding:3px 0;text-align:center;color:var(--ink-soft);white-space:nowrap}
.news-kind-works{background:#dfe2d6;border-color:#dfe2d6}
.news .news-title{font-weight:500;font-size:17px}
.home-news{padding-block:70px}

/* ---------- Instagram tiles: 6 on PC, 4 on phones ---------- */
.instagram-section{padding-block:clamp(80px,9vw,130px)}
.instagram-section .section-heading .link{font-family:var(--font-en)}
/* Smash Balloon only supplies posts; grid, crop and chrome are set here so plugin column/count/header settings do not change the layout */
.kdo-instagram-demo,.kdo-instagram-feed #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;list-style:none;margin:36px 0 0!important;padding:0!important;width:100%!important}
.kdo-instagram-feed #sb_instagram{padding:0!important;width:100%!important}
.kdo-instagram-feed #sb_instagram .sb_instagram_header,.kdo-instagram-feed #sb_instagram #sbi_load,.kdo-instagram-feed #sb_instagram .sbi_follow_btn,.kdo-instagram-feed #sb_instagram .sbi_lightbox_carousel_icon,.kdo-instagram-feed #sb_instagram .sbi_playbtn,.kdo-instagram-feed #sb_instagram .sbi_link{display:none!important}
.kdo-instagram-feed #sb_instagram #sbi_images .sbi_item{width:auto!important;margin:0!important;padding:0!important}
.kdo-instagram-feed #sb_instagram #sbi_images .sbi_item:nth-child(n+7){display:none!important}
.kdo-instagram-feed #sb_instagram .sbi_photo_wrap{position:relative;aspect-ratio:4/5!important;height:auto!important;overflow:hidden;background:#d9d9d0}
.kdo-instagram-feed #sb_instagram .sbi_photo{position:absolute!important;inset:0;aspect-ratio:auto!important;height:100%!important;width:100%!important}
.kdo-instagram-feed #sb_instagram .sbi_photo img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .6s ease}
.kdo-instagram-feed #sb_instagram .sbi_photo:hover img,.kdo-instagram-feed #sb_instagram .sbi_photo:focus-visible img{transform:scale(1.04)}
.kdo-instagram-demo a{display:block;aspect-ratio:4/5;overflow:hidden;background:#d9d9d0}
.kdo-instagram-demo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kdo-instagram-demo a:hover img{transform:scale(1.04)}
.instagram-demo-note{font-size:13px;color:var(--ink-soft);margin-top:14px}

/* ---------- FLOW: a simple diagram first, the details below ---------- */
.flow-overview{padding-block:70px 50px}
.flow-overview ol{gap:0;position:relative}
.flow-overview ol:before{content:'';position:absolute;left:8.33%;right:8.33%;top:72px;border-top:1px solid #9aa391}
.flow-overview li+li:before{display:none}
.flow-overview a{border:0;min-height:0;padding:12px 6px 18px;gap:12px}
.flow-overview svg{box-sizing:content-box;width:34px;height:34px;padding:20px;border-radius:50%;background:var(--paper);border:1px solid #9aa391;position:relative;z-index:1;transition:background .2s,color .2s}
.flow-overview a:hover svg,.flow-overview a:focus-visible svg{background:var(--green);color:var(--paper);border-color:var(--green)}
.flow-overview strong{font-family:var(--font-head);font-weight:var(--w-head);font-size:22px;letter-spacing:.08em}
.flow-overview small{font-size:14px;color:var(--ink-soft)}
.flow-number{font-size:13px;order:-1}

/* ---------- ABOUT: team placeholder for editors only ---------- */
.team-member figure{margin:0}.team-member .frame{aspect-ratio:4/5;max-width:340px}
.team-placeholder .frame{display:grid;place-items:center;border:1px dashed #8d977f;background:#ecede5;color:#6d7765;font-size:14px}
.team-placeholder{outline:1px dashed #b7bdad;outline-offset:18px}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
 .kdo-instagram-demo,.kdo-instagram-feed #sb_instagram #sbi_images{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .flow-overview ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
 .flow-overview ol:before{display:none}
}

/* ---------- Phones ---------- */
@media(max-width:700px){
 body{font-size:16px}
 .brand-manifesto{padding-block:90px 60px}
 .brand-manifesto h2{font-size:clamp(30px,10.4vw,54px);line-height:1.35}
 .brand-manifesto h2 span{white-space:nowrap}
 .manifesto-copy{margin-top:36px}
 .manifesto-copy .manifesto-lead{font-size:clamp(17px,4.7vw,20px)}
 .manifesto-copy p,.home-about-copy p,.essay p:not(.eyebrow),.designer-copy>p,.process li p,.fees p,.faq>p,.service-topics p,.closing-cta>p,.team-intro,.page-lead,.service-overview p:not(.eyebrow),.timeline p,.office dl>div,.contact-options>div>p:not(.eyebrow),.contact-methods p,.instagram-intro,.section-intro,.performance-grid p,.legacy-content,.project-original>p,.home-consultation>p:not(.eyebrow),.team-member p{font-size:16px;line-height:2}
 .hero h1{font-size:clamp(26px,7.4vw,32px);line-height:1.6;letter-spacing:.04em}
 .page-intro h1{font-size:clamp(30px,8.4vw,38px);line-height:1.5}
 .design-fields h2,.home-selected h2,.instagram-section h2,.home-about h2,.news-head h2{font-size:clamp(27px,7.6vw,34px)}
 .essay h2,.process h2{font-size:clamp(24px,6.6vw,28px)}
 .home-consultation h2{font-size:clamp(26px,8vw,42px)}
 .brand-landscape .frame{height:110vw;max-height:620px}
 .home-about{display:block;padding-block:80px}
 .home-about-photo{width:62%;margin:0 0 40px auto}
 .home-about-copy h2 span{white-space:normal}
 .design-fields .section-heading{flex-direction:column;align-items:flex-start}.design-fields .section-heading>div{width:100%}
 .design-field-grid{display:block}
 .design-field+.design-field{margin-top:48px}
 .design-field:first-child .frame{aspect-ratio:4/5}
 .design-field:nth-child(2){width:86%;margin-left:auto}
 .design-field:nth-child(3){width:86%}
 .design-field:nth-child(2) .frame,.design-field:nth-child(3) .frame{aspect-ratio:4/3}
 .home-selected .work-grid{display:block}
 .home-selected .work-card+.work-card{margin-top:44px}
 .home-selected .work-card:first-child .frame{aspect-ratio:4/3}
 .home-selected .work-card:nth-child(2){width:84%;margin-left:auto}
 .home-selected .work-card:nth-child(3){width:84%;margin-top:44px}
 .kdo-instagram-demo,.kdo-instagram-feed #sb_instagram #sbi_images{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .kdo-instagram-demo li:nth-child(n+5),.kdo-instagram-feed #sb_instagram #sbi_images .sbi_item:nth-child(n+5){display:none!important}
 .news-item{grid-template-columns:auto 1fr auto;gap:8px 12px}
 .news-item .news-kind{justify-self:start;padding-inline:8px}
 .news-item .news-title{grid-column:1/3;grid-row:2}
 .news-item .news-arrow{grid-column:3;grid-row:1/3}
 .news .news-title{font-size:16px}
 .flow-overview ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .flow-overview svg{width:28px;height:28px;padding:16px}
 .flow-overview strong{font-size:20px}
 .footer-main--compact .footer-brand{display:block}
 .team-placeholder{outline-offset:10px}
}

/* ---------- Palette B (2026-11-09): deep green leads, sage grounds, filled form CTA ---------- */
:root{--pal-accent:#3d5c47;--pal-accent-on-dark:#b7cbb2;--pal-line:#6f8f74;--pal-cta:#f2f1eb;--pal-cta-ink:#23332a;--pal-dark:#23332a;--pal-ground:#e3e8de}
.home-consultation,.footer{background:var(--pal-dark)!important}
.footer{border-top:1px solid rgba(242,241,235,.14)}
.design-fields,.instagram-section{background:var(--pal-ground)!important}
.eyebrow{color:var(--pal-accent)!important}
main a.link{border-bottom:2px solid var(--pal-line)!important}
.design-field h3 span,.work-card-meta span{color:var(--pal-accent)!important}
.home-consultation .eyebrow,.consultation-methods>a span{color:var(--pal-accent-on-dark)!important}
.consultation-methods>a:nth-child(2){background:var(--pal-cta)!important;color:var(--pal-cta-ink)!important;border-left:0!important;padding-left:25px!important;padding-right:25px!important}
.consultation-methods>a:nth-child(2) span{color:var(--pal-cta-ink)!important}
.consultation-methods>a:nth-child(3){border-left:0!important}
.quick-contact{background:var(--pal-dark)!important}
.quick-contact a:nth-child(2){background:var(--pal-cta)!important;color:var(--pal-cta-ink)!important;border-radius:999px}
@media(max-width:700px){.consultation-methods>a:nth-child(2){padding:22px 20px!important;margin-block:6px}}