/* Shared portfolio typography. Display and subheads share one face;
   navigation, prose and controls use one quiet sans serif. */
:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "Helvetica Neue", Arial, sans-serif;
  --cobalt: #2046a0;
  --blue: var(--cobalt);
  --ink: #18202a;
  --text-secondary: #475361;
  --type-body: clamp(16px, 1.15vw, 18px);
  --type-small: 13px;
}
body { font-family: var(--font-text); }
button, input, select, textarea { font-family: var(--font-text); }
h1, h2, h3, .wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: -.035em;
}
.nav { padding: 30px 5%; }
.nav .wordmark { font-size: clamp(23px, 1.8vw, 30px); letter-spacing: -.035em; }
.nav nav { font-family: var(--font-text); font-size: 13px; }
.eyebrow { font: 400 13px/1.5 var(--font-text); letter-spacing: 0; color: var(--cobalt); }
.hero-copy { top: 26%; left: 5%; width: 49%; max-width: 820px; }
.hero-copy h1 { font-size: clamp(58px, 6.1vw, 104px); line-height: .98; margin: 0; letter-spacing: -.045em; }
.hero-subtitle { font: 300 clamp(25px, 2.25vw, 36px)/1.15 var(--font-display); color: var(--cobalt); letter-spacing: -.02em; margin: 26px 0 17px; }
.hero-description { font-size: var(--type-body); line-height: 1.65; max-width: 430px; color: var(--text-secondary); margin: 0 0 26px; }
.hero-copy .pill { font: 400 13px/1.2 var(--font-text); padding: 17px 23px; background: #f3f2ec80; border-color: #6e77874d; }
.hero-bottom { font-size: 12px; }
.hero-bottom .scroll-line { width: 50px; }
.scene-caption { display: none; }
.meet { padding: 110px 8% 70px; column-gap: 10%; align-items: center; }
.meet-image { margin-top: 0; }
.meet-copy h2 { font-size: clamp(48px, 5vw, 78px); line-height: 1.02; max-width: 650px; margin-bottom: 30px; }
.meet-copy > p:not(.eyebrow) { font-size: var(--type-body); line-height: 1.75; color: var(--text-secondary); max-width: 550px; margin-bottom: 20px; }
.meet-facts { gap: 36px; padding-top: 24px; margin-top: 30px; }
.meet-facts strong { font: 300 48px/1 var(--font-display); color: var(--cobalt); }
.meet-facts span { font-size: 13px; line-height: 1.5; }
.meet-facts small { font-size: 12px; }
.language-detail { font: 400 12px/1.6 var(--font-text); color: var(--text-secondary); margin-top: 16px; }
.career-line { margin-top: 60px; padding-top: 28px; }
.career-line > span { font-size: 13px; color: var(--text-secondary); }
.offer-index h2 { font: 300 clamp(48px, 5vw, 78px)/1.04 var(--font-display); letter-spacing: -.035em; }
.offer-index-top > p { font-size: var(--type-body); line-height: 1.75; color: var(--text-secondary); max-width: 440px; }
.offer-index nav a > span { font: 400 14px/1.5 var(--font-text); }
.offer-index nav a { color: var(--cobalt); }
.collection-header h1 { font-size: clamp(62px, 7vw, 112px); line-height: .98; letter-spacing: -.04em; }
.collection-deck { align-items: end; margin-top: 32px; }
.collection-deck p { font-size: var(--type-body); line-height: 1.75; max-width: 600px; color: var(--text-secondary); }
.collection-meta h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; }
.collection-card > p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); max-width: 530px; }
.category-filters button, #project-count, .card-kind, .visual-status { font-family: var(--font-text); font-size: 12px; letter-spacing: 0; }
.detail-top .lead, .detail-sections p { font-size: var(--type-body); line-height: 1.75; color: var(--text-secondary); }
.detail-sections h2 { font: 300 32px/1.15 var(--font-display); color: var(--cobalt); letter-spacing: -.02em; margin-bottom: 18px; }
.detail-aside p { font-size: 15px; line-height: 1.75; }
.detail-aside h2 { font-size: 40px; }
.detail-facts, .detail-caption, .detail-back { font-family: var(--font-text); font-size: 12px; }
.collection-invitation { background: var(--cobalt); }
.collection-invitation h2 { font-size: clamp(50px, 6vw, 92px); }
.collection-invitation p:not(.eyebrow) { font-size: var(--type-body); line-height: 1.7; }
.invitation-links a { font-family: var(--font-text); font-size: 13px; }
.site-footer > a:not(.wordmark), .site-footer > span { font-size: 12px; }
.appraisal-description { font: 300 clamp(25px, 2.2vw, 34px)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--cobalt); }
.gallery-heading .eyebrow { color: var(--cobalt); }
.gallery-caption p, .cinema-caption p { font-family: var(--font-text); font-size: 13px; line-height: 1.6; }
.appraisal-result > p { font-size: var(--type-body); line-height: 1.7; }

@media(min-width:1600px) {
  .hero-copy { left: 5%; width: 47%; }
  .hero-description { max-width: 460px; }
}
@media(max-width:1100px) and (min-width:801px) {
  .hero-copy { top: 24%; width: 50%; }
  .hero-copy h1 { font-size: 6.05vw; }
  .hero-subtitle { font-size: 27px; }
  .hero-description { max-width: 370px; font-size: 15px; }
  .meet { padding-left: 6%; padding-right: 6%; column-gap: 7%; }
}
@media(max-width:800px) {
  .nav { padding: 23px 6%; }
  .nav .wordmark { font-size: 21px; max-width: 155px; line-height: 1.1; }
  .nav nav { padding: 10px 14px; gap: 14px; }
  .nav nav a { font-size: 12px; white-space: nowrap; }
  .nav .motion { white-space: nowrap; }
  .integrated-page .hero-stage { min-height: 800px; height: 100svh; }
  .hero-copy { top: 17%; left: 7%; width: 86%; max-width: 560px; }
  .hero-copy h1 { font-size: clamp(47px, 8.8vw, 70px); line-height: .98; letter-spacing: -.04em; }
  .hero-subtitle { font-size: 27px; margin: 24px 0 14px; max-width: 320px; }
  .hero-description { font-size: 15px; line-height: 1.65; max-width: 345px; margin-bottom: 24px; }
  .integrated-page .hero-stage:after { background: linear-gradient(180deg,#eeefeb 0%,#eeefebf7 30%,#eeefebdf 56%,#eeefeb00 85%); }
  .hero-bottom { left: 7%; right: 7%; bottom: 25px; font-size: 11px; }
  .meet { padding: 65px 7% 50px; gap: 35px; }
  .meet-image { width: 190px; }
  .meet-copy h2 { font-size: 49px; margin-bottom: 26px; }
  .meet-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; }
  .meet-facts { gap: 25px; }
  .meet-facts strong { font-size: 42px; }
  .meet-facts span { font-size: 12px; }
  .meet-facts small { font-size: 10px; max-width: 150px; }
  .career-line { margin-top: 15px; gap: 24px; flex-wrap: wrap; }
  .career-line > span { width: 100%; font-size: 12px; }
  .career-line img { max-width: 28%; }
  .offer-index h2 { font-size: 49px; }
  .offer-index-top > p { font-size: 16px; }
  .offer-index nav a > span { font-size: 13px; }
  .collection-header h1 { font-size: 60px; }
  .collection-deck p { font-size: 16px; }
  .collection-meta h2 { font-size: 34px; }
  .collection-card > p { font-size: 15px; }
  .category-filters button { font-size: 12px; padding: 10px 12px; }
  .detail-top .lead, .detail-sections p { font-size: 16px; }
  .detail-sections h2 { font-size: 30px; }
  .collection-invitation h2 { font-size: 52px; }
  .collection-invitation p:not(.eyebrow) { font-size: 16px; }
  .appraisal-description { font-size: 25px; }
  .gallery-caption p, .cinema-caption p { font-size: 12px; }
}
@media(max-width:380px) {
  .nav .wordmark { font-size: 19px; max-width: 160px; }
  .hero-copy h1 { font-size: clamp(35px, 11.2vw, 43px); }
  .hero-description { font-size: 14px; }
}