/* Shared reading scale for both portfolios. Brand fonts and colours stay local. */
@media screen {
  :root {
    --type-title: clamp(2.5rem, 4.5vw, 4rem);
    --type-section: clamp(1.875rem, 3.2vw, 2.75rem);
    --type-card: clamp(1.375rem, 2vw, 1.75rem);
    --type-body: 1rem;
    --type-small: .8125rem;
  }
  body { font-size: var(--type-body); line-height: 1.75; }
  .hero h1, .hero-title-wrap h1, .inner-hero h1, .legal-hero h1,
  .inner-hero-grid h1, .compact-head h1, .article-head h1,
  .page-heading h1, .case-hero h1, .notfound h1 {
    font-size: var(--type-title); line-height: 1.12;
    letter-spacing: -.035em; white-space: normal; overflow-wrap: break-word;
  }
  .section-heading h2, .intro-right h2, .collab-copy h2, .footer-main h2,
  .story-grid h2, .personal-note-body h2, .last-cta h2, .campaign-grid h2,
  .kit-intro h2, .kit-details h2, .package-layout h2, .kit-cta h2,
  .contact-layout > div:first-child h2, .timeline-content h2, .callout h2,
  .about-copy h2, .article-part h2, .legal-body h2 {
    font-size: var(--type-section); line-height: 1.2; letter-spacing: -.025em;
  }
  .photo-card-content h3, .values-grid h3, .offer-grid h3, .process-grid h3,
  .journal-card h3, .inquiry-panel h3, .project-content h3, .service-card h3,
  .exp-entry h2, .portfolio-item-meta h2, .case-section h2 {
    font-size: var(--type-card); line-height: 1.3; letter-spacing: -.02em;
  }
  .hero-intro, .section-heading p, .intro-right p, .collab-copy > p,
  .footer-main p, .inner-hero p, .rich-copy, .values-grid p, .personal-note-body > p,
  .last-cta p, .offer-grid p, .process-grid p, .faqs p, .kit-intro p,
  .kit-details p, .package-layout p, .kit-cta p, .journal-card p,
  .article-part p, .contact-layout > div:first-child > p, .inquiry-panel > p,
  .legal-body p, .notfound p, .project-content p, .service-card p,
  .timeline-content p, .mini-row p, .callout p, .footer-about p,
  .page-heading p, .note-panel, .exp-aside p, .exp-entry p, .bullet-clean,
  .case-section .bullet-clean, .edu-item p, .about-copy p, .principle p,
  .contact-method p, .contact-note, .case-hero p, .case-section p {
    font-size: var(--type-body); line-height: 1.75;
  }
  .btn, .nav-cta, .main-nav > a, .nav-links a, .text-link, .underline-link,
  .filter-btn, .read-more, .back-link, .card-bottom .text-link,
  .footer-col a, .case-side a, .case-nav a, .copy-btn {
    font-size: .875rem; line-height: 1.5;
  }
  .eyebrow, .tiny-label, .announcement, .hero-status, .hero-bottom,
  .hero-meta div, .photo-card-content > span, .section-end, .mini-list div,
  .instagram-note, .footer-bottom, .footer-name span, .photo-corner-label,
  .pill-list span, .portfolio-item-meta > span, .portfolio-item-meta p,
  .portfolio-caption, .offer-num, .offer-grid small, .stats-grid span,
  .stats-foot, .category-lines > span, .category-lines > span b,
  .package-list b, .package-list span, .package-list i, .package-list small,
  .journal-meta, .journal-bottom, .contact-method > span,
  .contact-method > div span, .inquiry-panel label, .form-buttons .text-link,
  .inquiry-result p, .project-meta, .tag, .micro-detail, .stat-box span,
  .mini-row .year, .footer-col h4, .page-subnav, .exp-date, .exp-org,
  .edu-item span, .skills-cloud span, .copy-status, .case-fact span,
  .case-fact strong, .result span, .disclaimer {
    font-size: var(--type-small); line-height: 1.6;
  }
  .inquiry-panel label input:not([type=checkbox]), .inquiry-panel label select,
  .inquiry-panel label textarea, .inquiry-result textarea {
    font-size: 1rem; line-height: 1.6;
  }
  .consent-check { font-size: .8125rem !important; }
  .quote-section blockquote { font-size: var(--type-section); line-height: 1.4; }
  .article-head > p, .article-lead { font-size: 1.125rem; line-height: 1.7; }
  .contact-big { font-size: clamp(1.375rem, 2.4vw, 2rem); letter-spacing: -.02em; }
  .hero-title-wrap h1 { margin: 24px 0; }
  .hero-copy { padding-top: 64px; padding-bottom: 42px; }
  .hero-home { min-height: 620px; max-height: none; }
  .hero-bottom { padding-top: 40px; gap: 20px; flex-wrap: wrap; }
  .hero-actions { flex-wrap: wrap; gap: 18px; }
  .hero-sparkle { right: 2%; top: 50%; font-size: 30px; }
  .main-nav { gap: clamp(12px, 1.25vw, 22px); }
  .main-nav .nav-contact { padding: 12px; }
  .announcement { min-height: 38px; height: auto; padding-top: 8px; padding-bottom: 8px; letter-spacing: .06em; }
  .ticker { font-size: var(--type-small); letter-spacing: .1em; }
  .section-pad { padding-top: 88px; padding-bottom: 88px; }
  .hero .line { max-width: 100%; }
  .project-meta, .card-bottom, .stat-box { overflow-wrap: anywhere; }
  .project-meta { flex-wrap: wrap; }
  .case-fact { flex-wrap: wrap; }
  .stat-row { align-items: stretch; }
  .portfolio-item-meta > span { width: auto; }
  .wordmark-name { font-size: 12px; max-width: 85px; letter-spacing: .08em; }
  .brand-name small { font-size: 11px; letter-spacing: 1px; }
  .photo-card-content, .portfolio-item-meta { overflow-wrap: break-word; }
  .form-buttons, .footer-bottom, .package-list li { flex-wrap: wrap; }
  .footer-name { flex-wrap: wrap; gap: 10px; }
  .footer-links { flex-wrap: wrap; }
  @media (min-width: 901px) and (max-width: 1190px) {
    .header-inner { flex-wrap: wrap; height: auto; padding-top: 16px; padding-bottom: 16px; gap: 18px; }
    .main-nav { flex: 1 1 auto; justify-content: flex-end; gap: 12px; }
    .main-nav > a { font-size: 13px; }
  }
  @media (max-width: 900px) {
    .main-nav > a { font-size: 16px; }
    .hero-home { min-height: 0; }
  }
  @media (max-width: 680px) {
    .hero-copy { padding: 42px 6%; }
    .hero-art { min-height: 350px; height: 55vh; max-height: 500px; }
    .section-pad { padding-top: 60px; padding-bottom: 60px; }
    .world-grid, .portfolio-grid, .offer-grid, .process-grid { grid-template-columns: 1fr; }
    .world-grid > .photo-card:first-child { grid-column: auto; }
    .world-grid > .photo-card, .world-grid > .photo-card.tall { min-height: 360px; }
    .portfolio-item > .photo-shell, .portfolio-item:nth-child(3n+2) > .photo-shell,
    .portfolio-item:nth-child(3n+3) > .photo-shell { height: 380px; }
    .portfolio-item-meta { display: block; }
    .portfolio-item-meta h2 { margin-top: 10px; }
    .section-end, .journal-meta, .journal-bottom { flex-wrap: wrap; }
    .stat-row { grid-template-columns: 1fr; }
    .stat-box { padding: 22px; }
    .stats-grid strong { font-size: 36px; }
    .case-facts { grid-template-columns: 1fr; }
    .hero-status { max-width: 100%; flex-wrap: wrap; }
    .contact-method > a, .contact-method > div { font-size: 24px; overflow-wrap: anywhere; }
    .photo-card-content h3 { max-width: calc(100% - 25px); }
  }
}