/* Figma 89019:53207 + 89027:60750. Major sections share one spacing token. */
:root{--section-space:180px;--hero-client-space:120px}
/* One continuous background from the hero to the cases, matching Figma 89027:54994. */
.opening-story{background:linear-gradient(180deg,#02021e 0%,#02021e 6%,#3063c8 48%,var(--paper) 84%,var(--paper) 100%)}
.intro-story{display:flex;flex-direction:column;gap:var(--section-space);background:transparent}
.intro-story .hero.hero{padding-bottom:0;background:transparent}
.hero #clients.site-clients{margin-top:var(--hero-client-space)}
.intro-story #approach{padding-top:0;padding-bottom:0;background:transparent}
.intro-story .post-letters-stats{padding-top:0;padding-bottom:0;background:transparent;color:#fff}
.intro-story .stats-caption p{color:#ffffffb3}
.intro-story .stats-caption span{background:#ffffff4d}
.intro-story .stats{border-bottom-color:#ffffff4d}
.intro-story .stats span{color:#ffffffcc}
.leadership-letter+.leadership-letter{margin-top:5rem}
.leadership-letter h2{font-family:"Instrument Serif",Georgia,serif;font-size:3.25rem;font-style:italic;font-weight:400;line-height:1.05;margin-bottom:1.75rem}
#teams.section,#discovery-letters.section,#work.section{padding-top:var(--section-space);padding-bottom:0;background:transparent}
#teams>h2{color:#fff}
/* Figma 89027:55030: Suisse Regular 20/28, 2% tracking, 758px text box at 1440px. */
#teams>.lead{max-width:47.375rem;font-family:Suisse,Arial,sans-serif;font-size:1.25rem;font-weight:400;line-height:1.4;letter-spacing:.02em;color:#fff}
#work.section{padding-bottom:var(--section-space)}
.brand-story #contact{margin-top:calc(-1 * var(--wheel-empty-space,0px))}
.brand-story{display:flex;flex-direction:column;gap:var(--section-space)}
.brand-story .site-principles .section.mod--choose{padding-top:var(--section-space);padding-bottom:0}
.brand-story #recognition{padding-top:0;padding-bottom:0}
.brand-story #ongoing-partnership{padding-top:0;padding-bottom:0}
/* Exact card geometry, text boxes and 40px insets at the 1440px design width. */
#teams .card,#teams .card:nth-child(2){height:35.5rem;min-height:35.5rem;padding:2.5rem;border-radius:.75rem}
#teams h3{max-width:28.875rem;line-height:1;margin-top:auto;margin-bottom:1.5rem}
#teams .team-title-last{white-space:nowrap}
#teams .team-title-arrow{display:inline-block;width:.58em;height:.58em;margin-left:.26em;vertical-align:.04em;opacity:0;transform:translate(-.12em,.12em);transition:opacity .3s ease,transform .4s cubic-bezier(.215,.61,.355,1)}
#teams .team-card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
#teams .team-card-link:focus-visible{outline:2px solid #4066dc;outline-offset:-4px}
#teams .card:focus-within .team-title-arrow{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){#teams .card:hover .team-title-arrow{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#teams .team-title-arrow{transition:none}}
#teams .card p{max-width:23.75rem;line-height:1.6}
#teams .glass-unit-art{width:21rem;height:19rem;top:2.75rem;right:2.5rem;margin:0}
#teams .glass-unit-art img{width:100%;height:100%;object-fit:contain}
#teams .card:nth-child(2) .glass-unit-art{width:27rem;right:.5rem}
#teams .card:first-child{background:linear-gradient(180deg,#d8ceef 0%,#f5f3f6 73%,#fff 100%)}
#teams .card:nth-child(2){background:linear-gradient(180deg,#b9d1ed 0%,#f5f7fa 73%,#fff 100%)}
@media(max-width:991px){
 :root{--section-space:120px;--hero-client-space:96px}
 #teams .glass-unit-art{width:19rem;right:1rem}
 #teams .card:nth-child(2) .glass-unit-art{width:23rem;right:.25rem}
}
@media(max-width:600px){
 :root{--section-space:80px;--hero-client-space:72px}
 #teams>.lead{font-size:1rem}
 /* Lift the orbit relative to the copy; envelope alignment keeps the outer
    spacing at 80px while giving the headline room below the project images. */
 .site-cta .final-cta__orbit{bottom:calc(-50vw + 110px)}
 .leadership-letter+.leadership-letter{margin-top:3rem}
 .leadership-letter h2{font-size:2.1rem;margin-bottom:1.25rem}
 #teams .card,#teams .card:nth-child(2){height:auto;min-height:32rem;padding:1.5rem}
 #teams .glass-unit-art,#teams .card:nth-child(2) .glass-unit-art{position:relative;width:100%;height:14rem;top:auto;right:auto;margin:.5rem 0 1.5rem}
 #teams h3{max-width:100%}
 #teams .team-title-arrow{position:absolute;top:.12em;right:0;margin-left:0}
 #teams .card p{max-width:100%}
}

/* Responsive type roles verified against halo-lab.com, 12 October 2026.
   Desktop remains the 1440px Figma scale: 64 / 56 / 20 / 22. */
@media(max-width:991px){
 :root{--h2:2.5rem}
 .hero h1#hero-title{font-size:2.875rem}
 .hero .lead,#teams>.lead{font-size:1rem;line-height:1.4}
 #clients .success__label,.stats-caption p,#work>.eyebrow,.site-principles .h2-label{font-size:1.125rem}
 .site-cta .new-discuss__text{font-size:1rem}
}
@media(max-width:767px){
 :root{--h2:1.5rem}
 .hero h1#hero-title{font-size:2.125rem}
}
@media(max-width:479px){
 .hero h1#hero-title{font-size:2rem}
 .hero .lead,#teams>.lead{font-size:.875rem;line-height:1.4}
 #clients .success__label,.stats-caption p{font-size:.75rem}
 #work>.eyebrow,.site-principles .h2-label{font-size:.875rem}
 .site-cta .new-discuss__text{font-size:.75rem}
}