/* cu-ra.net integration on top of the Codex particle design (style.css). */

/* News list: sits above the traveling particle field like the news strip. */
.news{position:relative;z-index:3;background:#fff;border-top:1px solid #d1dcd6}
.news-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:56px}
.news-heading>p{font-size:13px;color:#4c6155;line-height:2.2;max-width:380px;padding-bottom:8px}
.news-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.news-list li{border-bottom:1px solid #d1dcd6}
.news-list a{display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:center;padding:26px 0;transition:background .3s,padding .3s}
.news-list time{font-size:12px;color:#52665f;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.news-title{font-size:15px;font-weight:500;line-height:1.8}
.news-arrow{font-size:22px;color:#20836c;transition:transform .3s}
.news-list a:hover{background:#f1f5f2;padding-left:16px;padding-right:16px}
.news-list a:hover .news-arrow{transform:translate(4px,-4px)}
.news .text-link{margin-top:36px}
@media(max-width:760px){
 .news-heading{display:block;padding-bottom:32px}
 .news-heading>p{margin-top:22px;font-size:12px}
 .news-list a{grid-template-columns:1fr auto;gap:6px 16px;padding:20px 0}
 .news-list time{grid-column:1;font-size:11px}
 .news-title{grid-column:1;font-size:13px}
 .news-arrow{grid-column:2;grid-row:1/3;font-size:18px}
 .news-list a:hover{padding-left:0;padding-right:0}
}

/* Casual interview (/company/contact/). */
.contact-page{background:var(--paper)}
.contact-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:8%;align-items:start}
.contact-hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1.4;letter-spacing:-.04em;font-weight:500}
.contact-hero .lead{font-size:clamp(17px,1.6vw,21px);line-height:1.9;margin-top:34px}
.contact-hero .contact-intro>p:not(.section-label):not(.lead){font-size:13px;color:#4c6155;margin-top:22px}
.contact-steps{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid #c5d6ca}
.contact-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid #c5d6ca;font-size:13px;line-height:1.9}
.contact-steps b{font-weight:500;color:#20836c;font-variant-numeric:tabular-nums}
.contact-form{background:#fff;border-radius:24px;padding:clamp(24px,4vw,48px);box-shadow:0 1px 0 #d1dcd6}
.contact-form .hubspot-form-wrapper{min-height:420px}
.contact-back{display:inline-flex;margin-top:40px}
@media(max-width:999px){.contact-hero{display:block}.contact-form{margin-top:48px}}

/* Hide the static logo while WebGL boots; show it only if particles fail (or JS is off). */
@media(prefers-reduced-motion:no-preference){.js-particles .hero:not(.webgl-failed) .particle-fallback{opacity:0}}
/* Fallback logo: cut-out wordmark on the dark hero, no white plate. */
.hero .particle-fallback{background:transparent;padding:0}

/* SP header CTA: compact pill so it doesn't dominate the 72px bar. */
@media(max-width:760px){
 .header-cta{gap:6px;padding:7px 12px 7px 14px;font-size:11px;font-weight:600;line-height:1;border-radius:999px}
 .header-cta span{font-size:12px}
}

/* Footer: contact as a clear button; the big footer wordmark is removed. */
.footer-top{flex-wrap:wrap}
.footer-contact{display:inline-flex;align-items:center;gap:28px;padding:16px 18px 16px 28px;border-radius:999px;background:var(--ink);color:#fff;transition:transform .3s,background .3s}
.footer-contact:hover{transform:translateY(-2px);background:#12313b}
.footer-top a.footer-contact{font-size:15px;font-weight:600}
.footer-contact-text{display:flex;flex-direction:column;gap:4px;line-height:1.2}
.footer-contact-text small{font-size:11px;font-weight:400;color:#a6b8bf}
.footer-contact-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:var(--ink);font-size:18px}
.footer-bottom{padding-top:28px;border-top:1px solid #c5d6ca}
@media(max-width:760px){
 .footer-top{flex-direction:column;align-items:flex-start;gap:22px}
 .footer-contact{width:100%;justify-content:space-between}
}

/* SP menu: contact sits under 採用情報 as a distinct pill. */
.mobile-nav a.mobile-nav-contact{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:16px 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:16px}
.mobile-nav-contact span{color:var(--green)}

/* Wide screens: keep content in a centered 1200px column instead of stretching edge to edge. */
@media(min-width:1101px){
 :root{--gutter:max(8%,calc((100vw - 1200px)/2))}
 .section,.section.team-grid,.news-strip,.footer{padding-left:var(--gutter);padding-right:var(--gutter)}
 .team-wide{margin-left:var(--gutter);margin-right:var(--gutter)}
 .header{padding-left:max(4.2%,calc((100vw - 1320px)/2));padding-right:max(4.2%,calc((100vw - 1320px)/2))}
 .hero-copy{left:var(--gutter)}
 h2{font-size:clamp(31px,3vw,44px)}
 .team-wide img{height:auto;aspect-ratio:16/9;max-height:none}
}

/* Orbits: the two labels ride the ends of the first orbit like satellites. */
.product-visual{container-type:inline-size}
.product-visual .orbit-label{--r:min(43cqw,190px);top:calc(50% - .848*var(--r));left:calc(50% - .53*var(--r));right:auto;bottom:auto;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 2px 10px #07131914}
.product-visual .orbit-label.label-two{top:calc(50% + .848*var(--r));left:calc(50% + .53*var(--r))}
.product-visual .orbit{border-color:#7fb69e99}
@media(min-width:1101px){.product-visual .orbit{border-width:1.5px;border-color:#6fae93b3}}

/* Crisp Phonim wordmark that replaces the particles once they settle (opacity driven by particles.js). */
.particle-logo-clean{position:absolute;z-index:2;opacity:0;pointer-events:none;display:block;object-fit:contain;max-width:none}
.webgl-failed .particle-logo-clean{display:none}
@media(prefers-reduced-motion:reduce){.particle-logo-clean{display:none}}

/* Section particles (sections.js): drawn above section backgrounds, below their content. */
#section-particles{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0}
[data-particles]>*,.footer>*{position:relative;z-index:2}
.news{z-index:auto}
@media(prefers-reduced-motion:reduce){#section-particles{display:none}}
/* The constellation runs behind the whole People section; text blocks carry a feathered
   section-colored backing so the network passes behind words instead of through them. */
.people .people-heading>*,.people .person>:not(.portrait),.team-invitation>*{background:#e3ece6;box-shadow:0 0 22px 14px #e3ece6}
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:8px 10px;border:1px solid #cfdcd6;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1;color:var(--ink);transition:border-color .2s,color .2s}
.lang-switch:hover{border-color:var(--green);color:#018a51}
@media(max-width:760px){.lang-switch{min-width:34px;padding:7px 8px;font-size:11px}}
/* Below 375px the switch would squeeze the logo; it moves into the mobile menu instead. */
.mobile-nav a.mobile-nav-lang{display:none}
@media(max-width:374px){.header .lang-switch{display:none}.mobile-nav a.mobile-nav-lang{display:block}}