/* Direction 05: framed ideas. The approved logo SVG and animated scenes stay intact. */
:root{--ink:#24272b;--lime:#d4f05a;--chalk:#f3f4ed;--white:#30353a;--olive:#d4f05a;--muted:#b6bdb5;--line:#596067}
html{scroll-padding-top:120px}
body{background:#24272b;color:var(--chalk)}
p{color:#bfc5bb}
h1,h2,h3{letter-spacing:.005em;line-height:1.14}
h1{letter-spacing:0}
h1 span{color:var(--lime)}
h2{letter-spacing:.005em}
h3{letter-spacing:.008em}
.eyebrow,.index{color:var(--lime)}
.wordmark{color:var(--chalk);letter-spacing:.065em}
.strapline{color:#d2d8cc}
.site-header{background:#191c1f;border-color:#40454a}
.site-header nav>a:not(.button):hover{color:var(--lime)}
.mobile-toggle{color:var(--chalk);border-color:#5a6065}
.brand img{background:#363a3c;border-radius:4px;padding:2px}
.button.dark{background:#41474c;color:var(--chalk);border-color:#646b70}
.button.dark:hover{background:#515a5d}
.button.dark span{color:var(--lime)}
.underlink{border-color:#737f72}
.underlink:hover{border-color:var(--lime)}
.skip-link{color:var(--ink)}
.mega-menu{background:#292d32;border-color:#62686b;box-shadow:0 20px 40px #1012149a}
.mega-intro{background:#171a1d}
.mega-title{color:var(--chalk);letter-spacing:-.025em}
.mega-links a:hover,.mega-links a[aria-current]{background:#40484a}
.mega-links small{color:#bbc1b8}
.nav-index{color:var(--lime)}
.chevron{color:var(--lime)}
.hero{background:#24272b}
.hero h1{letter-spacing:0;line-height:1.12}
.hero h1 span{font-weight:420}
.hero-intro{color:#e0e3da}
.hero-support{color:#aeb6ad}
.hero-bottom{border-color:#535b5a;color:#c6cec3}
.hero-bottom i{color:var(--lime)}
.illustration-frame{background:#171a1d;border:1px solid #5e6567}
.illustration-frame:before{background-image:radial-gradient(#f7f7f01d .75px,transparent .75px)}
.illustration-frame figcaption{color:#cbd0c6}
.hero-illustration{border-radius:5px}
.framed-hero{padding-top:76px}
.framed-hero .hero-copy{padding:0}
.framed-hero-intro{display:grid;grid-template-columns:1.65fr .7fr;gap:55px;align-items:end}
.framed-hero h1{max-width:850px;font-size:clamp(56px,5.8vw,86px)}
.framed-hero .hero-intro{margin:0;font-size:19px}
.framed-hero .hero-support{margin-top:17px}
.hero-tiles{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:14px;margin-top:47px}
.hero-tiles .hero-illustration{max-width:none;width:100%;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.hero-tiles .scene{margin:4px 0;height:290px}
.hero-tile{min-height:385px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #667073;transition:transform .2s,background .2s}
.hero-tile:hover{transform:translateY(-4px)}
.hero-tile:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.hero-tile strong{font-size:clamp(30px,2.8vw,43px);font-weight:450;letter-spacing:.003em;line-height:1.08}
.hero-tile>span:last-child{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;font-weight:600}
.hero-tile b{font-size:26px;font-weight:400}
.tile-kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.lime-tile{background:var(--lime);color:#252b24;border-color:var(--lime)}
.lime-tile:hover{background:#c8e845}
.dark-tile{background:#171a1d;color:var(--chalk)}
.dark-tile:hover{background:#32383b}
.dark-tile .tile-kicker,.dark-tile b{color:var(--lime)}
.framed-hero .hero-bottom{margin-top:45px}
.services-section{background:#30353a}
.section-heading>p{color:#bfc6bc}
.accordions{border-color:#7c8585}
.service-accordion{border-color:#5c6566}
.service-accordion[open]>summary h3,.service-accordion>summary:hover h3{color:var(--lime)}
.service-group{color:#a8b1aa}
.plus:before,.plus:after{background:var(--lime)}
.service-description>p{color:#d5dad1}
.tag-list li{color:#dce9a6;border-color:#78835c}
.process{background:#292e32}
.process-grid li{border-color:#667071}
.process-grid p{color:#bbc3ba}
.about{background:#292e32}
.about .large-copy{color:#e2e6dd}
.hand-note{color:var(--lime)}
.closing-cta{background:#d4f05a;color:#24272b}
.closing-cta .eyebrow,.closing-cta p:not(.eyebrow){color:#3f492a}
.closing-cta .dark{background:#24272b;border-color:#24272b}
.site-footer{background:#171a1d}
.footer-bottom{border-color:#4a5054;color:#bbc2b8}
.page-intro .lead{color:#d4dad0}
.breadcrumbs{color:#afb7af}
.breadcrumbs a:hover{color:var(--lime)}
.detail-hero .lead{color:#cfd5cb}
.fit-section{background:#343a3e}
.two-col .large-copy{color:#e1e5dc}
.deliverables article{border-color:#667071}
.deliverables p{color:#bec5bd}
.dark-section{background:#1c2023}
.dark-section .eyebrow{color:var(--lime)}
.detail-steps li{border-color:#515b5d}
.detail-steps p{color:#bbc3ba}
.faq-section{background:#343a3e}
.faq-item,.faq-item:first-child{border-color:#667071}
.related-grid a{background:#343a3e;border:1px solid #5b6365}
.related-grid a:hover{background:#444c4c}
.related-grid small{color:#bfc6bc}
.contact-note{border-color:var(--lime)}
.contact-prompts{border-color:#60686a}
.contact-prompts ul{color:#c5cbc1}
.project-form{background:#343a3e;border-color:#60686a}
.project-form input,.project-form select,.project-form textarea{background:#22262a;color:var(--chalk);border-color:#697278}
.project-form input::placeholder,.project-form textarea::placeholder{color:#a1aba4}
.form-status{color:var(--lime)}
.form-note{color:#c0c6bd}
.project-form-fallback{border-color:#60686a}
.frame-section{background:#1c2023}
.idea-frames{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:14px;margin:46px 0 30px}
.idea-frames article{min-height:335px;padding:27px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #687273;background:#343a3f}
.idea-frames article:nth-child(2){background:#d4f05a;color:#24272b;border-color:#d4f05a}
.idea-frames article:nth-child(2) .index,.idea-frames article:nth-child(2) p{color:#38452c}
.idea-frames article:nth-child(3){background:#171a1d}
.idea-frames h3{font-size:clamp(31px,3.4vw,48px);line-height:1.05;letter-spacing:-.025em}
.idea-frames p{font-size:14px;max-width:265px}
.frame-section>.wrap>.underlink{margin-top:12px}
@media(max-width:850px){.idea-frames{grid-template-columns:1fr 1fr}.idea-frames article:first-child{grid-column:1/-1;min-height:260px}}
@media(max-width:1050px){.framed-hero-intro{grid-template-columns:1fr .75fr;gap:35px}.framed-hero h1{font-size:60px}.hero-tiles{grid-template-columns:1.45fr 1fr}.hero-tiles .hero-illustration{grid-column:1/-1}.hero-tile{min-height:245px}.hero-tiles .scene{height:270px}}
@media(max-width:700px){
  .header-inner{gap:10px}
  .site-header .wordmark{font-size:28px;letter-spacing:.04em}
  .site-header .brand{gap:10px}
  .site-header nav>a:not(.button),.services-menu>summary{border-color:#50585b}
  .mega-menu{background:transparent;border:0;box-shadow:none}
  .mega-links a:hover,.mega-links a[aria-current]{background:#3c4447}
  .hero h1{letter-spacing:0;line-height:1.13}
  .framed-hero{padding-top:42px}
  .framed-hero-intro{grid-template-columns:1fr;gap:24px}
  .framed-hero h1{font-size:clamp(43px,9.7vw,62px)}
  .framed-hero .hero-intro{font-size:18px}
  .hero-tiles{grid-template-columns:1fr;gap:12px;margin-top:34px}
  .hero-tiles .hero-illustration{grid-column:auto}
  .hero-tiles .scene{height:auto}
  .hero-tile{min-height:225px;padding:23px}
  .hero-tile strong{font-size:37px}
  .framed-hero .hero-bottom{margin-top:30px}
  .section{padding:70px 0}
  .idea-frames{grid-template-columns:1fr;margin-top:30px}
  .idea-frames article,.idea-frames article:first-child{min-height:230px;grid-column:auto}
  .idea-frames h3{font-size:37px}
}
@media(max-width:370px){.header-inner{gap:7px}.site-header .brand{gap:6px}.site-header .wordmark{font-size:23px;letter-spacing:.035em}}