/* Crafted Preview: shared identity and type. Layout/colour/motion remain in route styles. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-400-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
:root {
  --font-display: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: Manrope, 'Helvetica Neue', Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 700;
  --type-hero: clamp(5.25rem, 4.25rem + 3.5vw, 7.5rem);
  --type-section: clamp(3rem, 2.35rem + 2vw, 4.75rem);
  --type-case: clamp(3.5rem, 2.75rem + 2.5vw, 6rem);
  --type-project: clamp(1.625rem, 1.35rem + .75vw, 2.125rem);
  --type-subheading: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  --type-body: clamp(1rem, .93rem + .25vw, 1.125rem);
  --type-ui: .9375rem;
  --type-label: .8125rem;
  --type-small: .75rem;
  --type-input: 1rem;
  --type-menu: clamp(1.625rem, 1.25rem + 2vw, 2.25rem);
  --leading-display: 1.03;
  --leading-section: 1.08;
  --leading-title: 1.25;
  --leading-body: 1.62;
  --leading-ui: 1.45;
  --space-xs: .5rem;
  --space-sm: .875rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}
html { font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: normal;
  font-synthesis: none;
  font-kerning: normal;
}
button, input, textarea, select { font-family: var(--font-ui); }
button, .button, .action, .pill, .text-link, .quiet-link, .booking-link {
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: normal;
  text-transform: none;
}
button, .button, .action, .pill, .quiet-link { min-height: 44px; }
b, strong { font-weight: var(--weight-semibold); }
em { font-style: normal; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-section);
  letter-spacing: -.01em;
  text-transform: none;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--type-case); }
h2 { font-size: var(--type-section); }
h3, h4 {
  font-family: var(--font-ui);
  font-size: var(--type-project);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  letter-spacing: normal;
  text-transform: none;
}
h1 em, h2 em, h3 em { font-family: inherit; font-weight: inherit; font-style: normal; }
p, li, output { font-size: var(--type-body); line-height: var(--leading-body); }
input, select, textarea {
  font-size: var(--type-input);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: normal;
}
label, legend { font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1.5; }
small, figcaption { font-size: var(--type-label); line-height: 1.55; }
.kicker, .eyebrow, .frame-label, .industry-number, .concept-tag,
.hero-topline, .hero-bottom p, .hero-bottom>a {
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.kicker, .section-heading .eyebrow { margin-bottom: var(--space-md); }
.section-heading { column-gap: var(--space-xl); }
.section-heading>p, .section-intro, .hero-side>p, .editorial-lead, .partner-lead,
.large-copy, .contact-intro>p:first-child { font-size: var(--type-body); line-height: var(--leading-body); }
.section-heading>p, .hero-side>p { max-width: 36ch; }
.project-status, .project-meta, .project-meta small, .disclosure,
.portfolio-disclosure, .annish-disclosure, .partner-page .partner-note,
.work-footnote p, .brief-note, .brief-example>div>p, .contact-truth,
.form-note, .contact-form .form-note, .contact-form .optional,
.partner-screen figcaption, .editorial-image figcaption, .school-details figcaption,
.visual-note, .depth-caption, .capacity-foot, .operations-panel p:last-child,
.annish-gallery-copy p, .portfolio-current-gallery .industry-number {
  font-family: var(--font-ui);
  font-size: var(--type-label);
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
}
.project-status { margin-bottom: var(--space-xs); }
.project-caption, .project-context, .work-item, .brief-example { min-width: 0; }
.project-caption>div, .project-context>* { min-width: 0; }
.project-caption h3, .work-item h3, .brief-example h3,
.project-context h3, .annish-gallery-copy h3, .portfolio-current-gallery h3,
.royal-project .project-copy h3, .annish-project .project-copy h3,
.portfolio-current-project .project-copy h3 { font-size: var(--type-project); line-height: var(--leading-title); }
.project-caption h3, .work-item h3, .brief-example h3 { margin-bottom: var(--space-sm); }
.editorial-chapter p, .case-hero>p { max-width: 66ch; }
.features, .project-capabilities, .annish-production dt, .responsibility-tags span {
  font-size: var(--type-label);
  line-height: 1.7;
  letter-spacing: normal;
}
/* One logo component, inline vector paths using each surface's existing colour. */
.brand-identity {
  display: block;
  flex: 0 0 auto;
  width: clamp(180px, 18vw, 240px);
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.brand-svg { display: block; width: 100%; height: auto; overflow: visible; }
.brand-identity.footer-mark { width: 42px; }
.brand-identity.menu-brand { width: 210px; max-width: calc(100% - 66px); margin: 0 66px 24px 0; }
.studio-header, #header { gap: 24px; }
.studio-header nav, #header nav { font-size: var(--type-ui); line-height: var(--leading-ui); }
.studio-header nav a, #header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.studio-header .action, .action.small { font-size: var(--type-ui); }
.menu-button, #menu-toggle, .close-menu, .menu-close {
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
}
#studio-menu { overflow: auto; max-height: 90svh; }
#mobile-menu { overflow: auto; max-height: 100svh; }
#studio-menu .close-menu, #mobile-menu .menu-close { position: absolute; top: 24px; right: 24px; margin: 0; }
#studio-menu>a:not(.brand-identity), #mobile-menu nav a {
  font-family: var(--font-ui);
  font-size: var(--type-menu);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  padding-block: .55rem;
}
#mobile-menu .booking-link { font-size: var(--type-ui); }
/* Main cinematic statements retain the approved composition, with natural font metrics. */
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.hero-side>p { font-size: var(--type-body); }
.hero-side { min-width: 0; }
.hero-actions { column-gap: 1rem; row-gap: 1rem; }
.hero-actions .action, .hero-actions .quiet-link, .hero-bottom button { font-size: var(--type-ui); }
.hero-bottom p, .hero-bottom>a { font-size: var(--type-small); }
.hero-bottom p { max-width: 28ch; }
.hero-bottom button { white-space: nowrap; gap: 12px; }
.hero-topline { align-items: start; }
.hero-topline span { max-width: 48%; }
.hero-topline span:last-child { text-align: right; }
.experience-v17 .section-heading h2, .layers-copy h2, .contact-section>h2 {
  font-size: var(--type-section);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-section);
  text-transform: uppercase;
}
.contact-section>h2 { font-size: clamp(3rem, 2.6rem + 3vw, 5.5rem); }
.layer-labels h3, .approach h3, .process-grid h3 {
  font-size: var(--type-subheading);
  line-height: var(--leading-title);
}
.layer-labels p, .approach p, .process-grid p { font-size: var(--type-body); line-height: var(--leading-body); }
.layer-labels li>span, .approach span, .process-grid article>span,
.layer-plane>span, .layer-caption, .graphic-journey i {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.5;
  letter-spacing: normal;
}
.graphic-journey b { font-size: var(--type-label); }
.category-controls button, .filters button, .commerce-controls button {
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
  grid-template-columns: 1.5em minmax(0,1fr) 1.2em;
}
.category-controls button>span { font-size: var(--type-small); }
.category-controls button>b, .action span, .cap-plus { font-size: 1.125rem; }
.showcase-image>span { font-size: var(--type-small); line-height: 1.5; }
.service-panels h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.3vw, 3rem);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  text-transform: uppercase;
}
.service-panels article p { font-size: var(--type-small); line-height: 1.5; }
.service-panels a { font-size: var(--type-ui); min-height: 44px; }
.brief-controls>label, .brief-controls legend { font-size: var(--type-label); }
.brief-controls select, .brief-controls fieldset label { font-size: var(--type-input); line-height: 1.5; }
.brief-controls input[type=radio] { width: 18px; height: 18px; }
.brief-controls output { font-size: var(--type-body); line-height: var(--leading-body); }
.brief-example>div>p:first-child { font-size: var(--type-small); }
.brief-controls fieldset label { gap: 12px; }
.brief-controls fieldset label span { margin-left: auto; flex-shrink: 0; }
/* Forms preserve the exact prepared-email journey and partner enquiry handlers. */
.contact-form label, .contact label, .partner-fields label { font-size: var(--type-label); line-height: 1.5; }
.contact-form input, .contact-form select, .contact-form textarea,
.contact input, .contact select, .contact textarea,
.partner-fields input, .partner-fields select, .partner-fields textarea {
  font-size: var(--type-input);
  line-height: 1.5;
  min-height: 3rem;
  padding-block: .75rem;
}
.contact-form textarea, .contact textarea, .partner-fields textarea { min-height: 7rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #aebabc; opacity: 1; }
.contact-form .form-intro, .contact form p, .contact-form .enquiry-next p,
.contact-form form>button, .contact form button { font-size: var(--type-ui); line-height: 1.5; }
.contact-form .form-intro span, .contact-form .enquiry-next .eyebrow { font-size: var(--type-label); }
.contact-form #brief-context { font-size: var(--type-label); line-height: 1.6; }
.contact-form .enquiry-next h3 { font-size: var(--type-project); }
.contact-form .enquiry-next .actions { flex-wrap: wrap; }
.contact-email, .email { font-size: clamp(1.125rem, .95rem + .7vw, 1.625rem); line-height: 1.5; letter-spacing: normal; overflow-wrap: anywhere; width: fit-content; }
.phone { font-size: var(--type-ui); line-height: 1.5; }
/* Secondary routes use the same hierarchy; project names and UI stay in Manrope. */
.editorial-hero h1, .case-hero h1, .work-intro h1 { font-size: var(--type-case); line-height: var(--leading-display); }
.editorial-chapter h2, .project-copy h3 { font-family: var(--font-ui); font-size: var(--type-project); line-height: var(--leading-title); }
.editorial-cta h2, .work-collection h2, .portfolio-current-collection h2 { font-size: var(--type-section); }
.related>a, .service-row h3, .partner-models h3, .partner-principles span { font-size: var(--type-subheading); line-height: 1.35; }
.editorial-footer p, .editorial-footer nav, .studio-footer, .footer-links,
.partner-footer p, .partner-footer nav, .closing-top { font-size: var(--type-ui); line-height: 1.6; }
.editorial-footer a, .footer-links a, .partner-footer a { overflow-wrap: anywhere; }
.partner-page h2 { font-size: var(--type-section); }
.partner-hero h1 { font-size: clamp(3.75rem, 3rem + 3vw, 6rem); font-weight: var(--weight-display); line-height: var(--leading-display); }
.partner-page h3 { font-size: var(--type-project); }
.partner-page .partner-lead, .hero-support .partner-lead,
.hero-support>p:not(.partner-lead) { font-size: var(--type-body); line-height: var(--leading-body); }
.partner-protection h2 small { display: block; font-family: var(--font-ui); font-size: var(--type-subheading); line-height: 1.4; }
.partner-capabilities summary, .relationship-controls button { font-family: var(--font-ui); font-size: var(--type-subheading); line-height: 1.35; }
.partner-capabilities details>p, .partner-capabilities li, .partner-terms span { font-size: var(--type-body); line-height: 1.6; }
.cap-number, .relationship-controls>span, .collaboration-rhythm span { font-size: var(--type-label); line-height: 1.5; }
.process-number { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1.05; }
.operations-panel h4 { font-family: var(--font-ui); font-size: var(--type-project); line-height: 1.25; }
.partner-pricing h2, .partner-final h2 { font-size: var(--type-section); line-height: 1.08; }
.type-art, .chapter-word, .outline-name { font-family: var(--font-display); font-size: var(--type-section); font-weight: var(--weight-semibold); line-height: 1.08; }
.browser-bar span, .chapter-bottom { font-size: var(--type-small); line-height: 1.5; }
.browser-bar, .royal-device-pair .browser-bar, .annish-device-pair .browser-bar { min-height: 2rem; height: auto; flex-wrap: wrap; gap: .5rem; }
/* The closing brand statement remains real, selectable text. */
.closing-wordmark {
  font-family: var(--font-ui);
  font-size: clamp(1.75rem, 8.8vw, 9rem);
  font-weight: var(--weight-semibold);
  line-height: 1.08;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.footer-links { align-items: start; }
.footer-links>p, .closing-top>p { font-size: var(--type-ui); line-height: 1.6; }
/* One responsive type scale, aligned with the approved layout breakpoints. */
@media (max-width:1100px) {
  :root { --type-hero: clamp(4.5rem, 3rem + 3vw, 6rem); }
  .hero-side>p { max-width: 38ch; }
  .hero-actions { margin-top: var(--space-md); }
}
@media (max-width:800px) {
  .brand-identity { width: 210px; }
  .studio-header nav, #header nav { gap: 20px; }
  .project-caption { gap: var(--space-md); }
  .project-actions, .contact-actions { flex-wrap: wrap; column-gap: 20px; row-gap: 16px; }
  .graphic-journey { padding: 14px; gap: 6px; }
  .graphic-journey i { padding: 10px 6px; }
}
@media (max-width:700px) {
  :root {
    --type-hero: clamp(2.875rem, 2.3rem + 2.8vw, 4rem);
    --type-section: clamp(2.125rem, 1.6rem + 2.8vw, 2.875rem);
    --type-case: clamp(2.75rem, 2.25rem + 2vw, 4rem);
    --type-project: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
    --type-subheading: 1.25rem;
    --type-body: 1rem;
    --type-ui: .875rem;
  }
  .brand-identity { width: 200px; max-width: 59vw; }
  .brand-identity.menu-brand { max-width: calc(100% - 66px); }
  .hero-side { margin-top: var(--space-md); }
  .hero-side>p { max-width: 32ch; }
  .hero-actions { margin-top: var(--space-md); gap: 16px; flex-wrap: wrap; }
  .hero-actions .action { padding: 14px 16px; gap: 16px; }
  .hero-bottom p { max-width: 18ch; }
  .hero-bottom button { padding: 10px 12px; gap: 8px; }
  .hero-topline { gap: 8px; }
  .hero-topline span { max-width: 100%; }
  .hero-topline span:last-child { font-size: var(--type-small); margin-top: 6px; text-align: left; }
  .hero-copy .hero-break { display: none; }
  .hero-copy h1 { max-width: 12ch; }
  .contact-section>h2 { font-size: var(--type-section); }
  .project-caption>p { margin-top: var(--space-sm); }
  .project-actions { gap: 16px; }
  .category-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-controls button { gap: 8px; padding: 16px 10px; grid-template-columns: 1.5em minmax(0,1fr); }
  .layer-labels h3 { font-size: 1.125rem; }
  .layer-labels p, .approach p { font-size: var(--type-body); }
  .layer-plane>span { padding: 12px; overflow-wrap: anywhere; }
  .graphic-journey { flex-direction: column; justify-content: center; padding: 10px; gap: 2px; }
  .graphic-journey i { border: 0; padding: 0; }
  .graphic-journey b { display: none; }
  .layer-caption { line-height: 1.5; }
  .service-panels h3 { font-size: 2.5rem; overflow-wrap: anywhere; }
  .service-panels article { min-height: 480px; }
  .brief-example h3 { overflow-wrap: anywhere; }
  .contact-email { font-size: 1.25rem; }
  .footer-links { column-gap: 18px; row-gap: 22px; }
  .footer-links>p { grid-column: auto; }
  .footer-links>.footer-mark { grid-column: 1/-1; }
  .closing-top>a { max-width: 42%; }
  .partner-hero h1 { font-size: var(--type-case); }
  .project-context { row-gap: 18px; }
  .partner-footer nav { flex-wrap: wrap; }
  .editorial-footer nav { overflow-wrap: anywhere; }
}