/*
 * Connect Studio / Editorial typography refinement — 2026-10-15
 * The 3D scene, project artwork and page behavior are intentionally preserved.
 * Text is organized into: functional label / expressive headline / readable copy.
 */
:root {
  --readable-muted: #555d64;
  --accent-blue: #426cff;
}

/* Carefully legible microcopy; only labels should be tiny. */
.eyebrow, .micro {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .065em;
}
.micro { font-size: 12px; letter-spacing: .025em; }
.text-link { font-size: 16px; }
.desktop-nav { font-size: 14px; }
.nav-count { font-size: 10px; opacity: .78; }

/* The first screen is a true 3D stage, not a banner of fragmented slogans. */
.hero { min-height: 760px; }
.hero-kicker {
  top: 146px;
  max-width: 60%;
  color: #bdc8e1;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .095em;
}
.hero-title {
  position: absolute;
  top: 25%;
  left: var(--gutter);
  z-index: 6;
  width: max-content;
  max-width: min(65vw, 950px);
  font-family: var(--sans);
  font-size: clamp(63px, 7.1vw, 112px);
  font-weight: 600;
  letter-spacing: -.072em;
  line-height: 1.27;
  font-feature-settings: "palt";
  pointer-events: none;
}
.hero-title .line-first,
.hero-title .line-last {
  position: static;
  display: block;
  left: auto;
  top: auto;
  z-index: auto;
  color: #f6f6f8;
  font-size: inherit !important;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  pointer-events: none;
}
.hero-title .line-last { color: #90aaff; }
.hero-caption {
  left: var(--gutter);
  bottom: 145px;
  max-width: 640px;
  z-index: 6;
}
.hero-caption p {
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.9;
  letter-spacing: .025em;
  font-weight: 400;
  color: #d4daea;
  text-wrap: pretty;
}
.hero-index, .hero-zero { display: none !important; }
.interaction-label {
  right: var(--gutter);
  bottom: 149px;
  text-align: right;
  font-size: 13px;
  line-height: 1.5;
  color: #ced6e7;
  letter-spacing: .01em;
}
.interaction-hint-icon {
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  font-family: var(--display);
  color: #9cb8ff;
  font-size: 18px;
  vertical-align: -.08em;
}
.hero-bottom { padding-top: 19px; }
.hero-scroll { font-size: 14px; }
.hero-scroll .micro { font-size: 14px; color: #fff; }
.motion-control { font-size: 13px; }
.motion-control .motion-label { color: #cbd3e2; }

/* Work: visual hierarchy built around a Japanese title, not enormous decorative English. */
.works-section { padding-top: clamp(90px, 9vw, 128px); }
.section-heading {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 78px);
}
.section-heading .eyebrow { margin-bottom: 25px; color: #3159dc; }
.section-title {
  font-family: var(--sans);
  font-feature-settings: "palt";
  font-size: clamp(45px, 4.2vw, 67px);
  letter-spacing: -.07em;
  font-weight: 600;
  line-height: 1.42;
}
.section-title .work-title-accent { color: #182b59; }
.section-aside {
  padding: 0 0 .35em;
  max-width: 470px;
  justify-self: end;
}
.section-aside p {
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.95;
  letter-spacing: .015em;
  margin-top: 0;
  color: var(--readable-muted);
}
.cj-feature-info .eyebrow,
.showcase-kicker,
.showcase-index,
.cj-art-index { font-size: 12px; letter-spacing: .035em; }
.cj-feature-info h3 { font-size: clamp(37px, 4.4vw, 65px); line-height: 1.16; }
.cj-feature-desc { font-size: 16px; line-height: 1.9; margin-top: 16px; }
.showcase-index { gap: 0; }
.showcase-index span { font-size: 12px; color: #c7d6f0; }
.showcase-kicker { color: #a7b9d4; margin-bottom: 16px; }
.showcase-jp {
  font-size: clamp(20px, 2.05vw, 28px);
  line-height: 1.58;
  letter-spacing: -.045em;
  font-weight: 600;
}
.showcase-desc { font-size: 15px; line-height: 1.85; color: #c3c9d2; }
.showcase-foot { font-size: 14px; letter-spacing: .01em; }
.work-all .text-link { font-size: 17px; }

/* The studio section deliberately slows down to make reading effortless. */
.studio-grid { grid-template-columns: .55fr 1.45fr; }
.studio-intro h2 {
  font-size: clamp(39px, 3.4vw, 53px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.047em;
}
.studio-intro>p {
  font-size: clamp(16px, 1.13vw, 18px);
  line-height: 2.05;
  max-width: 660px;
  margin-top: 32px;
  color: #444b51;
  letter-spacing: .005em;
}
.studio-intro .text-link { margin-top: 33px; }
.capability-list { margin-top: 70px; }
.capability-list li {
  grid-template-columns: 38px minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 26px;
  padding-block: 29px;
}
.capability-list .num { font-size: 13px; padding-top: 7px; }
.capability-list h3 { font-size: clamp(20px, 1.55vw, 25px); letter-spacing: -.04em; font-weight: 550; }
.capability-list p { font-size: 16px; line-height: 1.85; letter-spacing: 0; color: #535b60; }

/* Every internal page starts with a human-readable Japanese heading. */
.page-top { padding-top: 185px; padding-bottom: 82px; }
.page-top .eyebrow { font-size: 13px; color: #4965a9; margin-bottom: 24px; }
.page-top h1, .page-top h1.display,
.studio-page .page-top h1, .privacy-page .page-top h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(51px, 5.1vw, 80px);
  line-height: 1.3;
  letter-spacing: -.075em;
  white-space: normal;
}
.page-top-row { gap: 7vw; }
.page-top p:not(.eyebrow) { font-size: 17px; line-height: 2.05; color: #5b6169; max-width: 485px; }
.cj-archive-label { font-size: 13px; letter-spacing: .01em; }

/* Inside case studies: meaningful small labels + balanced project narratives. */
.case-back { font-size: 15px; }
.case-topline { font-size: 13px; letter-spacing: .025em; }
.case-subline { margin-top: 24px; }
.case-subline p { font-size: 17px; }
.case-subline span { font-size: 14px; }
.cj-case-page .case-top .display,
.ff-case-page .case-top .display { font-size: clamp(62px, 8.7vw, 138px); line-height: 1.08; }
.cj-case-hero-head, .ff-case-hero-head { font-size: 12px; letter-spacing: .025em; }
.cj-case-intro { gap: 7vw; }
.cj-case-label { font-size: 14px; letter-spacing: .005em; }
.cj-case-text h2 { font-size: clamp(36px, 3.3vw, 51px); line-height: 1.46; }
.cj-case-text p { font-size: 17px; line-height: 2.06; max-width: 800px; }
.cj-case-facts dt { font-size: 13px; letter-spacing: .015em; }
.cj-case-facts dd { font-size: 16px; line-height: 1.9; }
.cj-capture-head .eyebrow { font-size: 13px; }
.cj-capture-head h2 { font-size: clamp(39px, 3.5vw, 56px); line-height: 1.5; letter-spacing: -.06em; font-family: var(--sans); font-weight: 600; }
.cj-capture-head p { font-size: 17px; line-height: 2; }
.cj-capture-layout figcaption { font-size: 14px; }
.ff-next-work { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: center; }
.ff-next-work>span:first-child { grid-column: 1 / -1; color: #66707b; font-size: 14px; }
.ff-next-work>strong { font: 500 clamp(38px, 4vw, 64px)/1.12 var(--display); letter-spacing: -.06em; }
.ff-next-work>span:last-child { font-size: 30px; }
.cj-back-works { font-size: 15px; }

/* Contact & privacy are functional pages: legible first, elegant second. */
.contact-intro h2 { font-size: clamp(25px, 2.1vw, 35px); line-height: 1.6; letter-spacing: -.05em; font-weight: 550; }
.contact-intro>p { font-size: 17px; line-height: 2.0; max-width: 470px; }
.contact-direct .eyebrow { font-size: 13px; }
.contact-direct a { font-size: clamp(19px, 1.7vw, 26px); }
.field-label { font-size: 15px; }
.field-label small { font-size: 12px; }
.form-field input, .form-field textarea, .form-field select { font-size: 16px; padding: 16px 0; }
.form-explanation { font-size: 13px; line-height: 1.85; }
.form-status { font-size: 14px; }
.contact-submit { font-size: 15px; padding: 23px 25px; }
.privacy-article p, .privacy-article li { font-size: 16px; line-height: 2.0; }
.profile-facts div { font-size: 16px; line-height: 1.9; }
.studio-feature h2 { font-size: clamp(28px, 2.5vw, 39px); line-height: 1.7; font-weight: 600; letter-spacing: -.05em; }
.studio-feature p { font-size: 17px; line-height: 2.08; color: #50575e; }
.studio-service-title { font-family: var(--sans); font-size: clamp(35px, 3.5vw, 54px); font-weight: 600; letter-spacing: -.06em; }
.studio-profile>.eyebrow { font-size: 13px; }

/* One clear CTA, used where appropriate. */
.footer-label { font-size: 13px; letter-spacing: .08em; }
.footer-cta h2 { font-size: clamp(36px, 3.85vw, 56px); }
.footer-description { font-size: 16px; line-height: 1.9; }
.footer-cta-button { font-size: 16px; }
.footer-links { font-size: 13px; }
.back-top { font-size: 13px; }
.footer-copyright { font-size: 12px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-title { font-size: clamp(60px, 7.8vw, 90px); max-width: 70vw; }
  .hero-caption { bottom: 140px; }
  .hero-caption p { font-size: 17px; }
  .section-heading { gap: 25px; }
  .section-title { font-size: clamp(42px, 4.6vw, 55px); }
  .section-aside p { font-size: 16px; }
  .capability-list li { grid-template-columns: 30px 1fr; }
  .capability-list p { grid-column: 2; font-size: 16px; }
  .showcase-desc { font-size: 14px; }
  .cj-feature-desc { font-size: 15px; }
}

@media (max-width: 760px) {
  .eyebrow, .micro { font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
  .brand-logo { width: 166px; }
  .header-inner { height: 83px; }
  .menu-links a { font-size: clamp(38px, 8vw, 64px); letter-spacing: -.045em; }
  .hero { height: max(790px, 100svh); min-height: 790px; max-height: none; }
  .hero-kicker { left: var(--gutter); top: 122px; max-width: 85%; font-size: 11px; letter-spacing: .075em; }
  .hero-title {
    top: 178px;
    left: var(--gutter);
    max-width: 100%;
    font-size: clamp(43px, 10.2vw, 65px);
    letter-spacing: -.07em;
    line-height: 1.35;
  }
  .hero-title .line-first, .hero-title .line-last {
    top: auto !important;
    left: auto !important;
    font-size: inherit !important;
    letter-spacing: inherit;
    white-space: nowrap;
  }
  .hero-caption { left: var(--gutter); right: var(--gutter); bottom: 128px; max-width: none; }
  .hero-caption p { font-size: 16px; line-height: 1.9; letter-spacing: .002em; }
  .hero-caption p br { display: none; }
  .interaction-label { right: var(--gutter); bottom: 263px; font-size: 11px; line-height: 1.5; }
  .interaction-hint-icon { font-size: 15px; margin-right: 4px !important; }
  .hero-bottom { bottom: 24px; padding-top: 17px; }
  .hero-scroll .micro { font-size: 12px; }
  .hero-scroll { gap: 12px; }
  .motion-control { font-size: 11px; gap: 8px; }

  .works-section { padding-top: 76px; padding-bottom: 76px; }
  .section-heading, .cj-home-works .section-heading { display: block; margin-bottom: 34px; }
  .section-heading .eyebrow { margin-bottom: 14px; font-size: 12px; }
  .section-title { font-size: clamp(30px, 8.3vw, 43px); line-height: 1.48; letter-spacing: -.068em; }
  .section-aside { max-width: none; margin-top: 20px; padding: 0; }
  .section-aside p { font-size: 16px; line-height: 1.9; }
  .section-aside p br { display: none; }
  .cj-feature-info .eyebrow { font-size: 11px; }
  .cj-feature-info h3 { font-size: clamp(30px, 8.4vw, 48px); }
  .cj-feature-desc { font-size: 14px; line-height: 1.9; }
  .showcase-intro { min-height: 350px; padding: 26px 23px; }
  .showcase-kicker, .showcase-index span { font-size: 12px; }
  .showcase-jp { font-size: 20px; }
  .showcase-desc { font-size: 14px; line-height: 1.85; }
  .showcase-foot { font-size: 13px; }
  .work-all .text-link { font-size: 15px; }

  .studio-section { padding-block: 78px; }
  .studio-grid { display: block; }
  .studio-intro h2 { font-size: clamp(29px, 7.7vw, 42px); line-height: 1.58; }
  .studio-intro>p { font-size: 16px; line-height: 1.97; letter-spacing: 0; margin-top: 24px; }
  .studio-intro>p br { display: none; }
  .studio-intro .text-link { margin-top: 28px; font-size: 15px; }
  .capability-list { margin-top: 56px; }
  .capability-list li { grid-template-columns: 30px 1fr; gap: 6px 16px; padding-block: 23px; }
  .capability-list .num { font-size: 12px; padding-top: 5px; }
  .capability-list h3 { font-size: 20px; }
  .capability-list p { grid-column: 2; font-size: 14px; line-height: 1.93; }

  .page-top { padding-top: 145px; padding-bottom: 48px; }
  .page-top .eyebrow { font-size: 12px; margin-bottom: 18px; }
  .page-top h1, .page-top h1.display,
  .studio-page .page-top h1, .privacy-page .page-top h1 {
    font-size: clamp(36px, 9vw, 55px);
    letter-spacing: -.078em;
    line-height: 1.35;
  }
  .page-top p:not(.eyebrow) { font-size: 15px; line-height: 1.9; }
  .page-top-row { display: block; }
  .page-top-row p { margin-top: 17px; }
  .cj-archive-label { font-size: 12px; }

  .studio-feature { padding-bottom: 68px; }
  .studio-feature h2 { font-size: 28px; line-height: 1.65; }
  .studio-feature p { font-size: 15px; line-height: 1.98; }
  .studio-feature p br { display: none; }
  .studio-service-title { font-size: 36px; }
  .studio-profile>.eyebrow { font-size: 12px; }
  .profile-facts div { grid-template-columns: 106px 1fr; font-size: 14px; }

  .case-back { font-size: 14px; }
  .case-top { padding-top: 133px; }
  .case-topline { font-size: 12px; }
  .case-subline p { font-size: 15px; }
  .case-subline span { font-size: 12px; }
  .cj-case-page .case-top .display, .ff-case-page .case-top .display {
    font-size: clamp(45px, 10.1vw, 78px);
    line-height: 1.1;
    letter-spacing: -.07em;
  }
  .cj-case-hero-head, .ff-case-hero-head { font-size: 10px; letter-spacing: .01em; }
  .cj-case-label { font-size: 12px; }
  .cj-case-text h2 { font-size: 29px; line-height: 1.55; margin-bottom: 21px; }
  .cj-case-text p { font-size: 15px; line-height: 1.98; }
  .cj-case-facts dt { font-size: 12px; }
  .cj-case-facts dd { font-size: 14px; }
  .cj-capture-head h2 { font-size: 32px; line-height: 1.53; }
  .cj-capture-head p { font-size: 14px; line-height: 1.9; }
  .cj-capture-layout figcaption { font-size: 12px; }
  .ff-next-work>strong { font-size: 37px; }
  .cj-back-works { font-size: 14px; }

  .contact-intro h2 { font-size: 25px; }
  .contact-intro>p { font-size: 15px; line-height: 1.95; }
  .contact-direct .eyebrow { font-size: 12px; }
  .contact-direct a { font-size: 20px; }
  .field-label { font-size: 14px; }
  .field-label small { font-size: 11px; }
  .form-field input, .form-field textarea, .form-field select { font-size: 16px; }
  .form-explanation { font-size: 12px; }
  .contact-submit { font-size: 14px; }

  .footer-label { font-size: 12px; }
  .footer-cta h2 { font-size: 32px; }
  .footer-description { font-size: 15px; }
  .footer-cta-button { font-size: 15px; }
  .footer-links, .back-top { font-size: 12px; }
  .footer-copyright { font-size: 11px; }
}

@media (max-width: 370px) {
  .hero-title { font-size: 10vw; top: 177px; }
  .hero-caption p { font-size: 15px; }
  .hero-scroll .micro { font-size: 11px; }
  .interaction-label { bottom: 276px; }
  .section-title { font-size: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title, .section-title { transition: none; }
}

/* FRESH FLEX: concise, explicit scope caption (home + Works index). */
.showcase-credit {
  display: inline-block;
  width: fit-content;
  margin-top: 21px;
  padding-top: 12px;
  border-top: 1px solid rgba(214,224,245,.42);
  color: #eef4ff;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .045em;
  font-weight: 500;
}
@media (max-width:760px) {
  .showcase-credit { margin-top: 12px; padding-top: 10px; font-size: 12px; }
}
/* Maintain a considered but more balanced headline/body scale on wide monitors. */
@media (min-width:1101px) {
  .hero-title { font-size: clamp(68px, 5.9vw, 90px); }
  .hero-caption p { font-size: clamp(18px, 1.42vw, 21px); }
}

/* 2026-10-15: CAR JOINT project displays FIRST VIEW ONLY in both device previews. */
.cj-desktop-window img,
.cj-phone-window img,
.cj-case-browser-image img,
.cj-case-phone-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Additional support for the new longer but readable Japanese-first headlines. */
@media (max-width:760px) {
  .hero-title {font-size: clamp(36px, 8.8vw, 56px);max-width:calc(100% - 2*var(--gutter));}
  .hero-title .line-first, .hero-title .line-last {white-space:nowrap;}
}


/* =======================================================================
   WORKS / 2026 — shared editorial portfolio component.
   For new work: duplicate a <article class="showcase-feature"> and edit only
   copy, image paths, work number and URL. The layout remains consistent.
   ======================================================================= */
.showcase-feature { margin: 0; width: 100%; }
.showcase-feature + .showcase-feature { margin-top: clamp(34px, 4vw, 62px); }
.showcase-link { grid-template-columns: minmax(0, .43fr) minmax(0, 1fr); }
.showcase-intro { isolation: isolate; }
.showcase-intro h3 { overflow-wrap: normal; word-break: normal; }
.showcase-index { font-size: 12px; }
.showcase-index span { color: #b9c8e0; }
.showcase-kicker { font-size: clamp(11px, .86vw, 13px); margin-bottom: 20px; }
.showcase-desc { max-width: 35ch; }
.showcase-credit { font-size: 13px; line-height: 1.5; }
.showcase-art { transform: translateZ(0); }
.showcase-art .ff-browser-bar { gap: 12px; min-width: 0; }
.showcase-art .ff-browser-bar > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-desktop-window img, .showcase-phone-window img { width:100%; height:auto; max-width:none; display:block; object-fit:cover; object-position:top center; }
.showcase-phone-window { isolation: isolate; }
.showcase-feature--carjoint .showcase-art:before {
  background: radial-gradient(ellipse at 67% 33%, rgba(34, 91, 185, .63), transparent 55%),
              radial-gradient(ellipse at 13% 82%, rgba(36, 70, 123, .6), transparent 48%),
              linear-gradient(133deg,#1b3055,#0a1021 77%);
}
.showcase-feature--carjoint .showcase-art-light { background: radial-gradient(closest-side,rgba(40,100,190,.4),transparent); }
.showcase-feature--carjoint .showcase-desktop-window { background: #00308e; }
.showcase-feature--carjoint .showcase-phone-window { background: #0047af; }
.showcase-feature--carjoint .showcase-jp { max-width: none; }
.showcase-feature--freshflex .showcase-jp { max-width: none; }
.cj-work-archive .showcase-feature { margin-top:0; }
.cj-work-archive .showcase-feature + .showcase-feature {margin-top:clamp(34px,4vw,62px)}
@media (min-width:761px) and (max-width:1100px) {
  .showcase-link { grid-template-columns:minmax(0,.50fr) minmax(0,1fr); }
  .showcase-intro h3 { font-size:clamp(56px,6.6vw,78px); }
  .showcase-credit { font-size:12px; }
}
@media(max-width:760px) {
  .showcase-feature + .showcase-feature { margin-top:24px; }
  .cj-work-archive .showcase-feature + .showcase-feature {margin-top:24px;}
  .showcase-link {display:flex;flex-direction:column;}
  .showcase-intro {order:2; min-height:0; padding:27px 25px 25px; gap:16px;}
  .showcase-intro h3 {font-size:clamp(65px,17vw,98px); letter-spacing:-.083em;}
  .showcase-kicker {margin-bottom:12px; font-size:12px;}
  .showcase-index span {font-size:12px;}
  .showcase-jp {font-size:20px; margin-top:23px;}
  .showcase-desc {font-size:14px; line-height:1.78;}
  .showcase-credit {font-size:12px; margin-top:17px; padding-top:10px;}
  .showcase-art {order:1; height:clamp(300px,91vw,420px);}
  .showcase-desktop {left:6%;top:19%;width:81%;height:64%;}
  .showcase-phone {right:3%;top:29%;width:29%;height:63%;}
  .showcase-foot {padding-top:6px;}
  .showcase-feature--carjoint .showcase-jp {max-width:none;}
}
@media(prefers-reduced-motion:reduce) {
  .showcase-link:hover .showcase-desktop,.showcase-link:hover .showcase-phone {transform:none;}
}

/* Keep Japanese portfolio captions intact on laptops; avoid ch-width truncation. */
@media(min-width:981px) and (max-width:1550px) {
  .showcase-jp { font-size:clamp(23px, 1.7vw, 25px); }
}
/* On tablets there is no room for two balanced columns. Use the same stacked
   artwork-first composition as mobile, with a restrained editorial text panel. */
@media(min-width:761px) and (max-width:980px) {
  .showcase-link { display:flex;flex-direction:column;min-height:0; }
  .showcase-art { order:1;height:clamp(390px,58vw,540px);min-height:0; }
  .showcase-intro { order:2; padding:32px 39px 34px; min-height:0; gap:30px; }
  .showcase-intro h3 { font-size:clamp(64px,9vw,86px); }
  .showcase-jp {font-size:25px;}
  .showcase-desc {font-size:15px;}
  .showcase-desktop {left:7%;top:18%;width:79%;height:66%;}
  .showcase-phone {right:5%;top:27%;width:24%;height:61%;}
  .showcase-feature + .showcase-feature {margin-top:32px;}
}