/* One scale for readable copy. rem bounds respect user text-size preferences. */
:root {
  font-size:100%;
  --type-body:clamp(1rem,.94rem + .22vw,1.25rem);
  --type-small:clamp(.875rem,.82rem + .16vw,1rem);
  --type-meta:clamp(.8125rem,.76rem + .14vw,.9375rem);
  --type-heading:clamp(2.125rem,1.45rem + 2.6vw,5rem);
  --type-title:clamp(2.5rem,1.55rem + 3.8vw,6.5rem);
  --type-subtitle:clamp(1.375rem,1.1rem + .8vw,2rem);
  --type-tile:clamp(1.875rem,1.35rem + 1.9vw,3.875rem);
  --tile-pad:clamp(1.5rem,1.1rem + 1.1vw,2.75rem);
}
body{font-size:var(--type-body);line-height:1.65}
button,input,select,textarea{font-size:inherit}
.header nav,.page-home .header nav,.header-contact,.page-home .header-contact{font-size:var(--type-small)}
.header-contact{min-height:3rem;line-height:1.4}
.header nav{flex-wrap:wrap}.header{height:auto;min-height:5.5rem;padding-block:.75rem}
.page-home .header{height:auto;min-height:4.75rem;padding-block:.75rem}
.button,.text-link,.back-link,.service-link{font-size:var(--type-small);line-height:1.5}
.button{min-height:3.25rem;height:auto;white-space:normal}
.text-link{min-height:2.75rem}.back-link{display:inline-flex;align-items:center;min-height:2.75rem}
.eyebrow,.direction-hero .eyebrow,.brand-section-label,.page-home .brand-section-label,.brand-section-label>span:last-child,.academy-kicker,.route-heading,.route-pilot small,.brand-founder,.service-index,.steps article>span,.included>div>span,.route-step>span:first-child{font-size:var(--type-small);line-height:1.6;letter-spacing:.04em}
.brand-work-heading h2,.academy-layout h2,.brand-about h2,.contact-copy h2{font-size:var(--type-heading);line-height:1.08;letter-spacing:-.045em}
.direction-hero h1,.service-hero h1{font-size:var(--type-title);line-height:1.08;letter-spacing:-.045em;overflow-wrap:break-word}
.section-heading h2,.outcomes h2,.faq h2,.cost h2,.service-details h2,.case-detail h2{font-size:clamp(1.875rem,1.4rem + 1.5vw,3.25rem);line-height:1.15}
.brand-project-info h3,.route-step h3,.service-card h3,.page-academy .service-card h3,.steps h3{font-size:var(--type-subtitle);line-height:1.3}
.brand-work-heading>p,.brand-project-info p,.academy-layout>div>p,.route-step p,.brand-about p,.contact-copy p,.direction-hero .hero-description p,.service-card p,.case-card>p,.steps p,.outcomes p,.service-details>div>p,.result p,.included h3,.cost p,.faq summary,.faq details p,.case-detail p,.case-detail li,.legal p,.not-found p,dialog p{font-size:var(--type-body);line-height:1.65}
.brand-work-heading>p{max-width:30rem}.brand-about p,.direction-hero .hero-description p,.case-detail p,.legal p{max-width:65ch}
.brand-project-info>a,.route-pilot>span:last-child,.audience,.proof-note,.form-note,.contact-form label,.contact-form [role=status],.footer,.footer>div,.footer p,.footer>span{font-size:var(--type-small);line-height:1.6}
.brand-project-info{flex-wrap:wrap;row-gap:.5rem}.brand-project-info>div{flex:1;min-width:12rem}.brand-project-info>a{min-height:2.75rem;display:flex;align-items:center}
.route-pilot{flex-wrap:wrap}.brand-section-label{flex-wrap:wrap}
.contact-form select,.contact-form textarea,.contact-form input:not([type=checkbox]),dialog textarea{font-size:var(--type-body);line-height:1.5;min-width:0}
.contact-form .consent{font-size:var(--type-small)}.contact-form .consent input{flex-shrink:0}
.contact>*,.service-details>*,.case-detail>*,.cost>*,.faq>*,.outcomes>*,.hero-description>*{min-width:0}
.stage-category,.stage-note{font-size:var(--type-meta);line-height:1.4;letter-spacing:.03em;max-width:calc(100% - 5.5rem)}
.spark-title p{font-size:var(--type-small)}.carera-tagline,.scribe-title>span{font-size:var(--type-body);line-height:1.6}
/* The miniature product UI is an illustration, not website navigation. */
.direction-screen{height:auto;min-height:calc(100svh - 4.75rem)}
.direction-screen-heading{gap:2rem;margin-bottom:1.5rem}
.direction-screen-heading h1{font-size:clamp(2rem,1.7rem + 1.4vw,4rem);line-height:1.12;letter-spacing:-.05em}
.direction-screen-heading>p{font-size:var(--type-small);line-height:1.6;max-width:24rem;flex-shrink:0}
.flip-grid{grid-template-rows:repeat(2,minmax(19rem,1fr))}
.flip-front{display:flex;flex-direction:column;justify-content:flex-end;padding:var(--tile-pad);gap:1.5rem;min-height:100%}
.tile-brand{top:var(--tile-pad);left:var(--tile-pad);font-size:1.375rem;line-height:1.4}
.tile-brand strong{font-size:var(--type-small);letter-spacing:0}
.tile-number{font-size:var(--type-meta);top:calc(var(--tile-pad) + .375rem);right:var(--tile-pad)}
.tile-copy{position:relative;left:auto;bottom:auto;width:60%;z-index:2}
.tile-copy h2{font-size:var(--type-tile);line-height:1.08;letter-spacing:-.045em}
.tile-caption{position:relative;left:auto;bottom:auto;font-size:var(--type-small);line-height:1.5;max-width:calc(100% - 3.5rem);z-index:2}
.tile-open{width:2.75rem;height:2.75rem;right:calc(var(--tile-pad) - .375rem);bottom:calc(var(--tile-pad) - .375rem);font-size:1.5rem}
.flip-back{padding:var(--tile-pad)}.tile-back-top,.is-open .tile-back-top{font-size:var(--type-small);line-height:1.5;margin-bottom:1rem;flex-shrink:0}
.flip-back h2,.is-open .flip-back h2{font-size:clamp(1.625rem,1.2rem + 1.1vw,2.625rem);line-height:1.2;max-width:100%;flex-shrink:0}
.tile-summary,.is-open .tile-summary{font-size:var(--type-body);line-height:1.6;margin-top:1rem;max-width:60ch;flex-shrink:0}
.tile-actions,.is-open .tile-actions{flex-wrap:wrap;gap:.75rem;padding-top:1.5rem;flex-shrink:0}
.tile-actions a,.is-open .tile-actions a{font-size:var(--type-small);line-height:1.4;min-height:3rem;padding:.75rem 1.125rem;gap:.875rem;white-space:normal;flex:0 1 auto}
.tile-close,.is-open .tile-close{width:2.75rem;height:2.75rem;font-size:1.5rem;flex-shrink:0}
.direction-screen-foot{font-size:var(--type-meta);line-height:1.6;letter-spacing:.025em;flex-wrap:wrap;row-gap:.5rem;padding-block:1rem}
.direction-screen-foot>a{font-size:var(--type-small);min-height:2.75rem;align-items:center}
@media(min-width:1800px){.flip-grid{grid-template-rows:repeat(2,minmax(23rem,1fr))}}
@media(max-width:1000px){
 .direction-screen-heading{align-items:flex-start}.direction-screen-heading>p{max-width:18rem}
 .flip-grid{grid-template-rows:repeat(2,minmax(22rem,1fr))}
 .tile-copy{width:78%}.tile-art{opacity:.8}
 .tile-support .tile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#edf0f4bb,transparent 75%)}
 .tile-academy .tile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1743d577,transparent 75%)}
 .tile-ai .tile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07090f88,transparent 75%)}
 .tile-actions a{flex-basis:100%}.tile-detail{min-width:0}
}
@media(max-width:760px){
 .direction-screen-heading{flex-direction:column;gap:.625rem}.direction-screen-heading>p{max-width:none;flex-shrink:1}
 .direction-screen-heading>p br{display:none}.direction-screen-heading>p>span{display:none}
 .header nav,.page-home .header nav{font-size:var(--type-small);gap:1rem}
 .brand-section-label>span:last-child{font-size:var(--type-small)}
 .tile-copy{width:100%}.tile-caption{padding-right:0;max-width:calc(100% - 2.75rem)}
 .tile-brand strong{font-size:var(--type-small)}
 .tile-editorial-art{height:85%;object-position:60% 50%;mask-image:linear-gradient(#000 5%,transparent 100%)}
 .tile-art:after{display:none!important}.tile-ampersand{opacity:.7}
 .tile-actions a{white-space:normal}
}
@media(max-width:640px){
 .page-home .header{min-height:4.75rem;padding-block:.75rem}.page-home .header-contact{font-size:var(--type-small);min-height:2.75rem;padding:.625rem .875rem}
 .header nav{font-size:var(--type-small);margin-top:1rem}.header{row-gap:.5rem}
 .direction-screen{min-height:calc(100svh - 4.75rem);height:auto;padding-top:1.25rem}
 .direction-screen-heading{margin:0 .3125rem 1.5rem}
 .direction-screen-heading h1{font-size:clamp(2rem,1.7rem + 1.4vw,4rem)}
 .direction-screen-heading>p{font-size:var(--type-small)}
 .flip-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(22rem,auto);gap:1rem}
 .flip-card{min-height:22rem}
 .flip-card.is-open{position:relative;inset:auto;z-index:2}
 .flip-tilt,.flip-rotor{min-height:22rem}
 .flip-front{gap:1.25rem}.tile-copy{width:75%}
 .tile-copy h2{font-size:clamp(2rem,1.6rem + 1.5vw,2.5rem)}
 .tile-brand{font-size:1.375rem;top:var(--tile-pad);left:var(--tile-pad)}
 .tile-brand strong{font-size:var(--type-small);margin-left:.4rem}
 .tile-caption{font-size:var(--type-small);max-width:calc(100% - 3rem)}
 .tile-open{width:2.75rem;height:2.75rem;font-size:1.5rem;bottom:calc(var(--tile-pad) - .375rem);right:calc(var(--tile-pad) - .375rem)}
 .tile-editorial-art{height:100%;object-position:60% 50%;mask-image:linear-gradient(#000 0%,#000a 35%,transparent 95%)}
 .tile-ampersand{height:108%;right:-10%;top:-5%;mask-image:linear-gradient(#000 10%,transparent 93%)}
 .tile-art{opacity:.8}
 .is-open .flip-back{padding:var(--tile-pad)}
 .is-open .tile-back-top{margin-bottom:1rem}
 .is-open .tile-actions{gap:.75rem;padding-top:1.25rem;flex-direction:row}
 .is-open .tile-actions a{flex-basis:100%;font-size:var(--type-small);min-height:3rem;padding:.75rem 1rem}
 .direction-screen-foot{font-size:var(--type-meta);padding:1rem .25rem;gap:.5rem}
 .direction-screen-foot>span{max-width:none}.direction-screen-foot>a{font-size:var(--type-small)}
 .brand-work-heading>p,.academy-layout>div>p,.brand-about p,.contact-copy p,.route-step p,.brand-project-info p,.direction-hero .hero-description p{font-size:var(--type-body)}
 .brand-project-info>a,.route-pilot>span:last-child,.brand-founder,.academy-kicker,.brand-section-label,.footer>div{font-size:var(--type-small)}
 .brand-work-heading h2,.academy-layout h2,.brand-about h2,.contact-copy h2{font-size:var(--type-heading)}
 .stage-category,.stage-note{font-size:var(--type-meta)}
 .route-pilot>span:last-child{white-space:normal}.route-step{gap:1rem}.route-step h3{overflow-wrap:anywhere}
 .carera-tagline,.scribe-title>span{font-size:var(--type-body)}
 .brand-project-info>div{min-width:0;flex-basis:70%}.brand-project-info>a{flex-shrink:1}
}
@media(min-width:761px){
 .tile-ai .tile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07090f 0%,#07090fc9 32%,#07090f55 48%,transparent 64%)}
}
/* Both faces contribute intrinsic height, so enlarged copy never gets a tiny scroll box. */
.flip-rotor{display:grid;grid-template-columns:minmax(0,1fr)}
.flip-face{position:relative;inset:auto;grid-area:1 / 1;min-width:0}
.flip-front,.flip-back{min-height:19rem}
.flip-back{padding-block:1.5rem;overflow:visible}
@media(max-width:1000px){.flip-front,.flip-back{min-height:22rem}}
@media(max-width:640px){.is-open .flip-back{padding-block:1.5rem}}