/* C′ retains C's layout and motion, with A's palette and heading scale.
   The Japanese company heading has its own compact scale and wider tracking.
   Every solid color below comes from A's actual CSS. */
.concept-c-prime{--paper:#f5f2eb;--ink:#242820;--muted:#676b61;--line:#c8ccc0;--accent:#527356;background:var(--paper)}
.concept-c-prime .site-utility{background:#20211e}
.concept-c-prime .header{background:#f5f2ebef;color:#242820;border-color:#c8ccc0}
.concept-c-prime .header .nav-contact{color:#527356}
.concept-c-prime .hero-topline .eyebrow{color:#676b61}
.concept-c-prime .kinetic-title em{color:#527356}
.concept-c-prime .hero .arrow-link{color:#527356}
.concept-c-prime .hero-coordinate>i{background:#c8ccc0}
.concept-c-prime .profile-image .caption{color:#676b61}
.concept-c-prime .history-archive{background:#f5f2eb}
.concept-c-prime .design-section,.concept-c-prime .company-section{--paper:#f5f2eb;--ink:#242820;--line:#c8ccc0;--muted:#676b61;--accent:#527356;color:var(--ink)}
/* A's own note color keeps small text above 4.5:1 on its tinted panels. */
.concept-c-prime .design-section{--muted:#61695b}
.concept-c-prime .design-section{background:#e7e9df}
.concept-c-prime .company-section{background:#f5f2eb}
.concept-c-prime .service:not(.own-brand) .service-image:after{border-color:#24282012}
.concept-c-prime .branding-section{--paper:#252c24;--ink:#f5f2eb;--line:#545c50;--muted:#b5bdae;--accent:#c0d7b3;background:#252c24;color:#f5f2eb}
.concept-c-prime .service.own-brand .service-image{background:#d8ddce}
.concept-c-prime .service.own-brand .service-image>img{box-shadow:14px 20px 30px #2c3d2525}
.concept-c-prime .contact-section{--paper:#f5f2eb;--ink:#242820;--line:#c8ccc0;--muted:#61695b;--accent:#527356;background:#e7e9df;color:#242820}
.concept-c-prime .form-field input,.concept-c-prime .form-field select,.concept-c-prime .form-field textarea{background:#f7f5ee;border-color:#b0b9a6}
.concept-c-prime .form-field input::placeholder,.concept-c-prime .form-field textarea::placeholder{color:#676b61}
.concept-c-prime .contact-section .arrow-link:hover{color:#405b38}
.concept-c-prime .form-review-button{background:#242820;border-color:#242820}
.concept-c-prime .form-review-button:hover{background:#46533f}
.concept-c-prime footer{--ink:#242820;--muted:#676b61;--line:#c8ccc0}
.concept-c-prime .reading-progress>span{background:#527356}
.concept-c-prime .motion-switch{border-color:#b5bdae;color:#f5f2eb}
@media(max-width:760px){.concept-c-prime .header .main-nav{background:#f5f2eb}}

/* Heading scale follows the approved A CSS at every breakpoint.
   C's title-word wrappers, transforms, reveals and motion controls stay intact. */
.concept-c-prime .hero h1{font-size:clamp(78px,8.3vw,137px);line-height:.98;letter-spacing:-.065em}
.concept-c-prime .profile-info h3{font-size:clamp(32px,4vw,56px);line-height:1.15;letter-spacing:-.04em}
.concept-c-prime .section-heading h2{font-size:clamp(70px,8vw,116px);line-height:1;letter-spacing:-.055em}
.concept-c-prime .section-heading h2>span{font-size:17px;letter-spacing:.09em}
.concept-c-prime .service h3{font-size:clamp(31px,3.6vw,48px);line-height:1.1;letter-spacing:-.035em}
.concept-c-prime .branding-section .service h3{font-size:39px}
.concept-c-prime .company-layout h2{font-size:42.9px;line-height:1.04;letter-spacing:.07em}
.concept-c-prime .inquiry-intro h2{font-size:clamp(58px,6.7vw,98px);line-height:1.02;letter-spacing:-.05em}
@media(max-width:1100px){.concept-c-prime .hero h1{font-size:8.2vw}.concept-c-prime .section-heading h2{font-size:77px}}
@media(max-width:760px){
 .concept-c-prime .hero h1{font-size:clamp(63px,16vw,112px);line-height:1.01}
 .concept-c-prime .profile-info h3{font-size:39px}
 .concept-c-prime .section-heading h2{font-size:64px}
 .concept-c-prime .section-heading h2>span{font-size:14px}
 .concept-c-prime .service h3,.concept-c-prime .branding-section .service h3{font-size:35px;line-height:1.1}
 .concept-c-prime .company-layout h2{font-size:38.5px}
 .concept-c-prime .inquiry-intro h2{font-size:57px}
}

/* Selected 04 centered hero. Only the actual C′ page opts in, so all studies
   retain their original compositions. Typography, copy and palette are intact. */
.concept-c-prime.hero-centered .hero-text-layout{grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px;text-align:center;transform:translate3d(0,var(--hero-drift,0px),0)}
.concept-c-prime.hero-centered .hero h1{width:max-content;max-width:100%;text-align:center;transform:none}
.concept-c-prime.hero-centered .hero-overview{padding:0;max-width:30rem;min-width:0}
.concept-c-prime.hero-centered .hero .hero-jp{margin-bottom:18px}
.concept-c-prime.hero-centered .hero .hero-description{margin-bottom:12px}
.concept-c-prime.hero-centered .hero .arrow-link{min-height:44px}
.concept-c-prime.hero-centered.motion-paused .hero-text-layout{transform:none!important}
@media(prefers-reduced-motion:reduce){.concept-c-prime.hero-centered .hero-text-layout{transform:none!important}}
@media(max-width:760px){
 .concept-c-prime.hero-centered .hero-text-layout{grid-template-columns:minmax(0,1fr);gap:22px;padding:37px 0 34px;transform:none!important}
 .concept-c-prime.hero-centered .hero .hero-jp{margin-bottom:15px}
}

/* Mobile C′ tagline: two complete phrases, with desktop typography unchanged. */
@media(max-width:760px){
 .concept-c-prime.hero-centered .hero-topline .eyebrow{max-width:none;font-size:12px;text-align:left}
 .concept-c-prime.hero-centered .hero-tagline-phrase{display:block;white-space:nowrap}
}

/* C′ service menus: one native horizontal row at every screen size. */
.concept-c-prime .service-carousel{min-width:0}
.concept-c-prime .service-carousel-controls[hidden]{display:none}
.concept-c-prime .service-carousel-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;color:var(--muted);font-size:.875rem;line-height:1.5}
.concept-c-prime .service-carousel-navigation{display:flex;align-items:center;gap:8px}
.concept-c-prime .service-carousel-position{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.concept-c-prime .service-carousel-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:.875rem;line-height:1.5;touch-action:manipulation}
.concept-c-prime .service-carousel-controls button[aria-disabled="true"]{opacity:.45;cursor:default}
.concept-c-prime .service-carousel-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.concept-c-prime .service-carousel-track{position:relative;display:flex;align-items:flex-start;gap:24px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior-x:contain;padding-bottom:18px;scrollbar-width:thin}
.concept-c-prime .service-carousel-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.concept-c-prime .service-carousel.is-enhanced .service-carousel-track{height:var(--service-height,auto);scrollbar-width:none}
.concept-c-prime .service-carousel.is-enhanced .service-carousel-track::-webkit-scrollbar{display:none}
.concept-c-prime .service-carousel-track>.service,.concept-c-prime .branding-section .service-carousel-track>.service{flex:0 0 100%;min-width:0;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,76px);margin:0;padding:0;border:0;scroll-snap-align:start;scroll-snap-stop:normal}
/* Slide changes stay fully visible; the image hover and other C′ motion remain. */
.concept-c-prime .service-carousel-track>.service{opacity:1!important;transform:none!important}
.concept-c-prime .service-carousel-track>.service>.service-image{clip-path:none!important;transform:none!important}
.concept-c-prime .service-carousel .service-content{min-width:0}
.concept-c-prime .service-carousel .service h3{overflow-wrap:anywhere}
@media(max-width:760px){
 .concept-c-prime .design-section .section-heading{align-items:flex-end;text-align:right}
 .concept-c-prime .design-section .section-heading>.body-copy{margin-left:auto}
 .concept-c-prime .branding-section .section-heading{align-items:flex-start;text-align:left}
 .concept-c-prime .branding-section .section-heading>.body-copy{margin-right:auto}
 .concept-c-prime .service-carousel-controls button{padding:9px 7px}
 .concept-c-prime .service-carousel-track{gap:16px}
 .concept-c-prime .service-carousel-track:after{content:'';flex:0 0 20px}
 .concept-c-prime .service-carousel-track>.service,.concept-c-prime .branding-section .service-carousel-track>.service{flex:0 0 calc(100% - 36px);grid-template-columns:minmax(0,1fr);gap:22px}
 .concept-c-prime .service-carousel .service-content{padding:0}
 .concept-c-prime .service-carousel .service-tag{font-size:.75rem;line-height:1.7;overflow-wrap:anywhere}
 .concept-c-prime .service-carousel .service .body-copy{font-size:1rem;line-height:1.9;letter-spacing:.02em}
 .concept-c-prime .service-carousel .service-prices{margin-top:22px}
 .concept-c-prime .service-carousel .service-prices>summary{min-height:56px;font-size:.875rem;line-height:1.7;padding-block:16px}
 .concept-c-prime .service-carousel .price{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}
 .concept-c-prime .service-carousel .price strong{font-size:1.125rem}
 .concept-c-prime .service-carousel .note{font-size:.875rem;line-height:1.9;overflow-wrap:anywhere}
 .concept-c-prime .service-carousel .arrow-link{min-height:44px;max-width:100%;gap:18px;font-size:.875rem}
 .concept-c-prime .service-carousel .sample-link{font-size:.875rem;gap:12px}
 .concept-c-prime .service-carousel .sample-link small{font-size:.75rem;overflow-wrap:anywhere}
 .concept-c-prime .service-carousel .sample-play{flex:0 0 40px}
}

/* Actual C′ hero CTA: a compact centered button with its arrow beside the label. */
.concept-c-prime.hero-centered .hero .arrow-link{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;min-height:44px;margin:8px auto 0;padding:10px 18px;gap:12px;border:1px solid currentColor;font-size:12px;line-height:1.5;vertical-align:middle}
.concept-c-prime.hero-centered .hero .arrow-link span:last-child{font-size:18px;transform:none}
.concept-c-prime.hero-centered .hero .arrow-link:hover span:last-child,.concept-c-prime.hero-centered .hero .arrow-link:focus-visible span:last-child{transform:translateY(3px)}
.concept-c-prime.hero-centered.motion-paused .hero .arrow-link span:last-child{transform:none!important}
@media(prefers-reduced-motion:reduce){.concept-c-prime.hero-centered .hero .arrow-link span:last-child{transform:none!important}}