/* Authoritative type roles. H1 and the identity statement keep independent scales. */
:root{
 --type-display:'Bodoni Moda',Georgia,serif;
 --type-text:Manrope,Arial,sans-serif;
 --type-h1-size:clamp(38px,4.7vw,68px);
 --type-h1-leading:1.1;
 --type-h1-tracking:-.035em;
 --type-field-placeholder:#8c877f;
 --type-section-size:clamp(38px,4.4vw,64px);
 --type-section-leading:1.05;
 --type-section-tracking:-.055em;
 --type-card-size:24px;
 --type-card-leading:1.25;
 --type-card-tracking:-.035em;
 --type-eyebrow-size:12px;
 --type-eyebrow-leading:1.5;
 --type-eyebrow-tracking:.08em;
 --type-body-size:14px;
 --type-body-leading:1.5;
 --type-cta-size:14px;
 --type-cta-leading:1.4;
 --type-cta-weight:500;
 --type-cta-tracking:.06em;
}
/* Independent display statement: never change font family at a size threshold. */
:root body.type-system #statement{font-family:var(--type-display);font-weight:400}
/* Explicit heading roles apply to existing and newly added content on every page. */
:root body.type-system main h1{
 font-family:var(--type-display);font-size:var(--type-h1-size);font-weight:400;
 line-height:var(--type-h1-leading);letter-spacing:var(--type-h1-tracking);font-style:normal;
}
:root body.type-system main h2:not(#statement):not(.eyebrow):not(.card-title){
 font-family:var(--type-display);font-size:var(--type-section-size);font-weight:400;
 line-height:var(--type-section-leading);letter-spacing:var(--type-section-tracking);text-transform:uppercase;
}
body .project-text{min-width:0}
body .project-text h2{transition:transform .25s}
body .project-row:hover .project-text h2{transform:translateX(8px)}
/* Press and portfolio card titles share the same fixed scale on every screen. */
:root body.type-system main h3:not(.eyebrow),
:root body.type-system main h2.card-title{
 font-family:var(--type-text);font-size:var(--type-card-size);font-weight:400;
 line-height:var(--type-card-leading);letter-spacing:var(--type-card-tracking);text-transform:uppercase;
}
/* Eyebrows are labels rather than body paragraphs. */
:root body.type-system :is(.eyebrow,.section-label,.hero-descriptor,.logo-heading .eyebrow){
 font-family:var(--type-text);font-size:var(--type-eyebrow-size);font-weight:500;
 line-height:var(--type-eyebrow-leading);letter-spacing:var(--type-eyebrow-tracking);text-transform:uppercase;
}
body{font-family:var(--type-text);font-size:var(--type-body-size);font-weight:400;line-height:var(--type-body-leading)}
:root body.type-system p:not(.eyebrow):not(.hero-descriptor){
 font-family:var(--type-text);font-size:var(--type-body-size);font-weight:400;
 line-height:var(--type-body-leading);letter-spacing:normal;
}
:root body.type-system .contact :is(input,select,textarea){font-family:var(--type-text);font-size:var(--type-body-size);font-weight:400;line-height:var(--type-body-leading)}
/* Shared CTA text; the button treatment and hover behaviour remain role-specific. */
:root body.type-system :is(.pill,.text-link,.small-link,.press-card-cta,.press-feature-cta,.work-panel-cta,.portfolio-image-action,.footer-booking){
 font-family:var(--type-text);font-size:var(--type-cta-size);font-weight:var(--type-cta-weight);
 line-height:var(--type-cta-leading);letter-spacing:var(--type-cta-tracking);text-transform:uppercase;font-style:normal;
}
:root body.type-system .nav .pill{font-size:12px}
:root body.type-system .mobile-menu .mobile-booking-cta{font-size:14px}
/* Footer labels and form labels use the small label role. */
:root body.type-system .footer-links h2{
 font-family:var(--type-text);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.08em;
}
:root body.type-system .contact label{font-family:var(--type-text);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.08em}
/* Keep long eyebrow descriptors on one readable line without squeezing the text. */
body .section-label{flex-wrap:wrap}
@media(max-width:991px){:root{--type-h1-size:clamp(34px,5.1vw,54px)}}
@media(max-width:767px){
 :root{--type-h1-size:clamp(26px,8.4vw,58px);--type-h1-tracking:-.045em;--type-section-size:clamp(34px,9vw,48px);--type-cta-size:12px}
 body .section-label{align-items:flex-start;gap:12px}
 body .section-label>span:last-child{max-width:none}
 #intro .section-label,#press .section-label{flex-direction:column;align-items:flex-start}
 #intro .section-label>span:last-child,#press .section-label>span:last-child{text-align:left;white-space:nowrap}
 body .hero-descriptor{max-width:calc(100vw - 40px);margin-inline:auto}
 body .logo-heading .eyebrow{max-width:none}
 body .project-row:hover .project-text h2{transform:none}
 :root body.type-system :is(.logo-heading button,.about-portrait figcaption,.work-meta,.project-number,.footer-links a,.footer-bottom,.footer-legal a,.contact .email-note,.film-chip,.film-cover-top,.film-cover-bottom,.scroll-cue,.work-photo-note){font-size:12px}
}
@media(prefers-reduced-motion:reduce){body .project-text h2{transition:none}}

:root body.type-system :is(.footer-links a,.footer-bottom,.press-feature-meta){line-height:1.5}
@media(max-width:359px){
 body .hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
 body .hero-actions :is(.pill,.text-link){white-space:nowrap}
}

/* Neutral placeholders are shared by every website enquiry form. */
:root body.type-system .contact :is(input,textarea)::placeholder{color:var(--type-field-placeholder);opacity:1}
:root body.type-system .contact select:required:invalid{color:var(--type-field-placeholder)}
:root body.type-system .contact select:required:valid,
:root body.type-system .contact select option{color:var(--ink)}
:root body.type-system .contact select option[value=""]{color:var(--type-field-placeholder)}
body .portfolio-title-row h2{min-width:0}

/* Give long project names their own full-width row on the narrowest phones. */
@media(max-width:359px){
 body .projects .project-row{grid-template-columns:minmax(0,1fr) 24px;gap:16px}
 body .projects .project-number{grid-column:1;grid-row:1;padding-top:0}
 body .projects .project-arrow{grid-column:2;grid-row:1;margin:0;justify-self:end}
 body .projects .project-text{grid-column:1/-1;grid-row:2}
 body .projects .project-static{grid-column:1/-1;grid-row:3}
}