/* Composition study only. Loaded exclusively by the three concept documents. */
.about-concept{--concept-ink:#02021e;--concept-paper:#f5f5f7;--concept-muted:#c1c9df}
.about-concept .intro-story{gap:0}
.about-concept .hero.concept-hero{position:relative;isolation:isolate;overflow:hidden;padding:0;background:#02021e;min-height:0}
.concept-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:45rem;padding:10rem 2rem 5rem;isolation:isolate}
.concept-optics{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 26%,#14234a 0,transparent 60%);mask-image:linear-gradient(transparent 1.5rem,#000 9rem,#000)}
.concept-canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .6s}
.concept-optics.is-ready .concept-canvas{opacity:1}
.concept-fallback{position:absolute;inset:0;opacity:1;transition:opacity .6s;background:radial-gradient(ellipse 24rem 24rem at 50% 30%,transparent 66%,#a3dff136 69%,#d5efff80 70%,#3779a82b 72%,transparent 80%)}
.concept-optics.is-ready .concept-fallback{opacity:0}
.concept-stars{position:absolute;inset:0;z-index:-1;opacity:.35;background-image:radial-gradient(circle,#d3eaff 0 .6px,transparent .9px),radial-gradient(circle,#6a9dbb 0 .7px,transparent 1px);background-size:187px 163px,311px 269px;background-position:40px 60px,117px 81px;mask-image:linear-gradient(#000,transparent 93%)}
.concept-copy{position:relative;width:100%;z-index:1}
.about-concept .hero.concept-hero h1#hero-title{font-family:Suisse,Arial,sans-serif;font-style:normal;font-size:4rem;line-height:1.1;letter-spacing:-.08rem;font-weight:500;max-width:65rem;margin:0 auto;text-align:center;color:#f5f5f7;text-wrap:balance}
.concept-motto{display:block}
.concept-motto+.concept-motto{margin-top:.65em}
.about-concept .hero.concept-hero #clients{position:relative;margin:0!important;padding:0 1.25rem 2.75rem;background:transparent}
.about-concept .hero.concept-hero #clients .container{max-width:100%}
.about-concept .hero.concept-hero #clients .success__label{color:#c6cbe0}
.about-concept .hero.concept-hero #clients .success-line{background:#ffffff30}
.about-concept .hero.concept-hero #clients .clients__logos{opacity:.8}
/* A: quiet central manifesto, surrounded by an atmospheric optical field. */
.concept-a .concept-stage{padding-top:17rem;min-height:48rem;padding-bottom:4rem}
.concept-a .concept-copy{max-width:71rem}
.concept-a .concept-motto+.concept-motto{color:#d8e0f3}
/* B: one wide refracted horizon; an editorial, left-aligned manifesto. */
.concept-b .concept-stage{min-height:48rem;padding:11rem 5.1rem 5rem;align-items:flex-start}
.about-concept.concept-b .hero.concept-hero h1#hero-title{max-width:72rem;text-align:left;margin:0;font-size:4.25rem}
.concept-b .concept-motto:first-child{max-width:55rem}
.concept-b .concept-motto+.concept-motto{max-width:57rem;margin:.85em 0 0 15rem}
.concept-b .concept-fallback{background:linear-gradient(177deg,transparent 47%,#7faec710 48%,#b7e9f254 49%,#d7f2f2ab 49.5%,transparent 51%)}
/* C: distinct sources meet at one shared focus above the manifesto. */
.concept-c .concept-stage{padding-top:18rem;min-height:48rem;padding-bottom:4.25rem}
.about-concept.concept-c .hero.concept-hero h1#hero-title{max-width:68rem;font-size:4rem}
.concept-c .concept-motto+.concept-motto{max-width:64rem;margin:.65em auto 0}
.concept-c .concept-fallback{background:radial-gradient(ellipse 13rem 8rem at 50% 22%,#f6f3d371,transparent 65%),conic-gradient(from 95deg at 50% 22%,transparent,#457be438 5deg,transparent 20deg,transparent 170deg,#6ee9ee38 185deg,transparent 200deg)}
/* Three themes use the existing six principles. No extra promises or card shells. */
.about-concept #values{background:linear-gradient(#02021e,#0f1d4b);color:#f5f5f7;padding:6rem 3rem 6.5rem}
.values-heading{text-align:center;max-width:50rem;margin:0 auto 4rem}
.values-heading .eyebrow{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.375rem;margin-bottom:1rem;color:#dce6fc}
.values-heading h2{font-family:Suisse,Arial,sans-serif;font-size:3.5rem;line-height:1.1;font-weight:600;letter-spacing:-.02ch;margin:0}
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;max-width:82rem;margin:auto}
.value-theme{min-width:0}
.value-visual{position:relative;height:12rem;overflow:hidden;margin-bottom:2rem;background:#08122a}
.value-visual::before,.value-visual::after{content:"";position:absolute;inset:0}
.value-visual-a{background:radial-gradient(circle at 50% 57%,#d9f1ff 0%,#6aadd1 2%,#39719766 8%,#112541 24%,transparent 58%),#08122a}
.value-visual-a::before{background:radial-gradient(circle at 50% 57%,transparent 34%,#b7d9eb7a 35%,transparent 37%,transparent 51%,#7899ae26 52%,transparent 53%)}
.value-visual-b{background:radial-gradient(ellipse 35% 80% at 30% 50%,#75c9e678,transparent 80%),radial-gradient(ellipse 35% 80% at 70% 50%,#fff0cd85,transparent 80%),#08122a}
.value-visual-b::before{background:linear-gradient(170deg,transparent 45%,#c2e3f60f 46%,#daf3f9b3 48%,#a6c8e122 49%,transparent 51%);transform:rotate(-4deg)}
.value-visual-c{background:radial-gradient(ellipse 65% 10% at 50% 58%,#d8fcffb3,transparent),#08122a}
.value-visual-c::before{background:radial-gradient(ellipse 32% 51% at 40% 46%,transparent 58%,#7dbce670 61%,transparent 65%),radial-gradient(ellipse 32% 51% at 60% 46%,transparent 58%,#e5d5a970 61%,transparent 65%)}
.value-visual::after{background:linear-gradient(90deg,#0a1730,transparent 25%,transparent 75%,#0a1730);mix-blend-mode:screen}
.value-theme h3{font-family:Suisse,Arial,sans-serif;font-weight:500;font-size:1.75rem;line-height:1.15;letter-spacing:-.03rem;color:#fff;margin:0 0 1.25rem;max-width:20rem}
.value-theme p{font-size:1rem;line-height:1.6;margin:0;color:#c8d4ed}
.value-theme details{border-top:1px solid #ffffff30;margin-top:1.75rem;padding-top:1rem}
.value-theme summary{list-style:none;cursor:pointer;display:flex;gap:1rem;justify-content:space-between;align-items:center;min-height:44px;font-size:.875rem;color:#e0e7f4;line-height:1.45;padding:.25rem 0}
.value-theme summary::-webkit-details-marker{display:none}
.value-theme summary::after{content:"+";flex:none}
.value-theme details[open] summary::after{content:"−"}
.value-theme details p{margin-top:1rem;font-size:.875rem}
.value-theme summary:focus-visible{outline:2px solid #bce6ff;outline-offset:5px}
.about-concept .intro-story #approach{padding-top:1rem}
/* Teams become an open editorial section, contrasting with the paper letters. */
.about-concept #teams.section{background:#f5f5f7;color:#02021e;padding:6.25rem 3rem 7rem}
.about-concept #teams>h2{color:#02021e}
.about-concept #teams>.lead{color:#40445e;max-width:48rem}
.team-directions{display:grid;grid-template-columns:1fr 1fr;gap:5rem;max-width:82rem;margin:4rem auto 0;text-align:left}
.team-direction{min-width:0;border-top:1px solid #02021e40;padding-top:1.5rem}
.team-direction .direction-label{font-size:.875rem;line-height:1.4;display:flex;align-items:center;justify-content:space-between;margin-bottom:3rem;color:#414661}
.direction-label span:first-child{font-family:"Instrument Serif",Georgia,serif;font-size:1.375rem;font-style:italic;color:#02021e}
.about-concept #teams .team-direction h3{font-size:2.5rem;line-height:1.1;letter-spacing:-.05rem;font-family:Suisse,Arial,sans-serif;font-style:normal;font-weight:500;max-width:33rem;margin:0 0 1.5rem;color:#02021e}
.team-direction p{font-size:1rem;line-height:1.6;max-width:31rem;margin-bottom:1.75rem;color:#444963}
.direction-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.direction-tags span{display:block;border:1px solid #02021e33;border-radius:999px;padding:.4rem .7rem;font-size:.8125rem;line-height:1.3}
.direction-link{display:inline-flex;align-items:center;gap:1.5rem;font-size:.875rem;padding-bottom:.4rem;border-bottom:1px solid #02021e80;color:#02021e;text-decoration:none}
.direction-link:focus-visible{outline:2px solid #3827c7;outline-offset:5px}
.direction-link span{transition:transform .3s}
.direction-link:hover span{transform:translate(3px,-3px)}
.about-concept #discovery-letters{--rail-start:#f5f5f7;--rail-end:#dde7f7;background:#f5f5f7;padding-top:0}
.about-concept .brand-story .site-love-letters{padding-top:0}
@media(min-width:1801px){.concept-stage{max-height:1100px}}
@media(max-width:991px){
 .concept-stage,.concept-a .concept-stage,.concept-c .concept-stage{min-height:44rem;padding:15rem 2rem 4rem}
 .about-concept .hero.concept-hero h1#hero-title,.about-concept.concept-b .hero.concept-hero h1#hero-title,.about-concept.concept-c .hero.concept-hero h1#hero-title{font-size:3.25rem;max-width:61rem}
 .concept-b .concept-stage{min-height:45rem;padding:10rem 2rem 4rem}
 .concept-b .concept-motto+.concept-motto{margin:1.05em 0 0 6rem;max-width:48rem}
 .about-concept #values{padding:4rem 2rem 4.5rem}
 .values-heading h2{font-size:2.5rem}
 .values-grid{gap:1.5rem}
 .value-visual{height:10rem}
 .value-theme h3{font-size:1.5rem}
 .value-theme p{font-size:.875rem}
 .about-concept #teams.section{padding:4rem 2rem 5rem}
 .team-directions{gap:2rem;margin-top:3rem}
 .about-concept #teams .team-direction h3{font-size:2rem}
 .team-direction p{font-size:.875rem}
}
@media(max-width:767px){
 .values-grid{grid-template-columns:1fr;gap:3rem;max-width:34rem}
 .value-visual{height:12rem;margin-bottom:1.5rem}
 .value-theme h3{max-width:none;font-size:1.75rem}
 .values-heading{margin-bottom:2.5rem}
 .team-directions{grid-template-columns:1fr;gap:3rem;max-width:36rem}
 .team-direction .direction-label{margin-bottom:1.5rem}
 .about-concept #teams .team-direction h3{font-size:2rem}
 .direction-tags{margin-bottom:1.5rem}
}
@media(max-width:479px){
 .concept-stage,.concept-a .concept-stage,.concept-c .concept-stage{padding:10rem 1.1rem 3.5rem;min-height:32rem}
 .about-concept .hero.concept-hero h1#hero-title,.about-concept.concept-b .hero.concept-hero h1#hero-title,.about-concept.concept-c .hero.concept-hero h1#hero-title{font-size:2rem;line-height:1.08;letter-spacing:-.04rem;max-width:100%}
 .concept-motto+.concept-motto{margin-top:.8em}
 .concept-b .concept-stage{padding:8rem 1.1rem 3.5rem;min-height:32rem}
 .concept-b .concept-motto+.concept-motto{margin:1.1em 0 0 1.5rem;max-width:15.5rem}
 .about-concept .hero.concept-hero #clients{padding:0 1.1rem 2.5rem}
 .about-concept #values{padding:3.25rem 1.1rem 3.5rem}
 .values-heading h2{font-size:2rem}
 .values-heading .eyebrow{font-size:1.125rem}
 .about-concept #teams.section{padding:3.5rem 1.1rem}
 .team-directions{margin-top:2.5rem}
 .about-concept #teams .team-direction h3{font-size:1.75rem}
 .direction-label span:first-child{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
 .concept-canvas,.concept-fallback,.direction-link span{transition:none}
}