:root {
  --black: #050505;
  --ink: #0d1119;
  --blue: #2f6dd4;
  --yellow: #f1ee00;
  --orange: #ff9d0a;
  --green: #4ebd43;
  --red: #ff3150;
  --paper: #f7f6f1;
  --cloud: #e7e9e6;
  --muted: #5a6266;
  --line: rgba(5, 5, 5, .16);
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--black); background: var(--paper); font-family: var(--sans); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.label { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.label::before { content: ""; width: 27px; height: 3px; background: var(--red); }
.title { margin: 0; max-width: 760px; font: 900 clamp(47px, 6.2vw, 85px)/.88 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.title .stroke { color: var(--paper); text-shadow: -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black); }
.lede { color: var(--muted); font-size: 15px; line-height: 1.62; }
.button { display: inline-flex; align-items: center; gap: 16px; padding: 13px 14px 13px 18px; color: var(--paper); background: var(--black); border: 1px solid var(--black); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; transition: transform .18s, background .18s, color .18s; }
.button:hover { transform: translateY(-3px); background: var(--yellow); color: var(--black); }
.button i { display: grid; place-items: center; width: 29px; height: 29px; color: var(--black); background: var(--yellow); border-radius: 50%; font-size: 17px; font-style: normal; line-height: 1; }
.button--light { color: var(--black); background: var(--paper); border-color: var(--paper); }
.button--light:hover { background: var(--yellow); border-color: var(--yellow); }

/* Navigation */
.site-header { position: absolute; z-index: 5; inset: 0 0 auto; color: white; }
.nav { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: block; flex: 0 0 auto; width: 176px; line-height: 0; }
.brand img { width: 100%; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 29px; }
.nav-links a { position: relative; padding: 8px 0; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 850; letter-spacing: .115em; text-transform: uppercase; transition: color .18s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.nav-links a:hover, .nav-links a.active { color: white; }
.nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { padding: 11px 14px; border: 1px solid rgba(255,255,255,.4); color: white; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; transition: color .18s, background .18s; }
.nav-cta:hover { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.menu { display: none; padding: 8px 0 8px 8px; border: 0; color: white; background: transparent; }
.menu span { display: block; width: 28px; height: 2px; margin: 6px; background: currentColor; }

/* Shared feature areas */
.hero { position: relative; min-height: 740px; display: flex; align-items: end; padding: 160px 0 80px; color: white; overflow: hidden; background: var(--ink); }
.hero::before { content: ""; position: absolute; z-index: 0; width: min(66vw, 850px); aspect-ratio: 1; right: -8vw; top: 40px; border: 1px solid rgba(255,255,255,.11); border-radius: 49% 51% 58% 42% / 53% 42% 58% 47%; transform: rotate(-10deg); box-shadow: inset 0 0 0 58px rgba(78,189,67,.08), inset 0 0 0 118px rgba(255,157,10,.08), inset 0 0 0 178px rgba(47,109,212,.08); }
.hero::after { content: ""; position: absolute; z-index: 0; right: 10%; bottom: 5%; width: 240px; height: 240px; border: 24px solid var(--yellow); transform: rotate(27deg) skew(-8deg); opacity: .9; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .label { color: rgba(255,255,255,.7); }
.hero .label::before { background: var(--yellow); }
.hero h1 { max-width: 870px; margin: 0 0 28px; font: 900 clamp(64px, 9vw, 126px)/.79 var(--display); letter-spacing: -.065em; text-transform: uppercase; }
.hero h1 .accent { color: var(--yellow); }
.hero-copy { max-width: 485px; margin: 0 0 31px; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.55; }
.hero-tag { position: absolute; right: 0; bottom: 0; width: 231px; padding: 18px 0 10px 22px; border-left: 1px solid rgba(255,255,255,.36); }
.hero-tag b { display: block; color: var(--yellow); font: 900 22px/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.hero-tag span { display: block; margin-top: 7px; color: rgba(255,255,255,.57); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.color-line { height: 14px; background: linear-gradient(90deg, var(--blue) 0 25%, var(--yellow) 25% 50%, var(--orange) 50% 75%, var(--green) 75%); }
.page-intro { position: relative; min-height: 466px; display: flex; align-items: end; padding: 150px 0 67px; overflow: hidden; color: white; background: var(--black); }
.page-intro::after { content:""; position:absolute; right: 2vw; bottom: -85px; width: 420px; height: 420px; border: 72px solid var(--green); border-radius: 50%; opacity: .88; }
.page-intro--services::after { border-color: var(--orange); border-radius: 13% 87% 21% 79% / 38% 16% 84% 62%; transform: rotate(24deg); }
.page-intro--portfolio::after { border-color: var(--blue); border-radius: 0; transform: rotate(25deg); }
.page-intro--contact::after { border-color: var(--red); border-radius: 48% 52% 65% 35% / 37% 48% 52% 63%; }
.page-intro--about::after { border-color: var(--yellow); border-radius: 13% 87% 21% 79% / 38% 16% 84% 62%; transform: rotate(22deg); }
.page-intro .wrap { position: relative; z-index: 1; }
.page-intro .label { color: rgba(255,255,255,.68); }
.page-intro .label::before { background: var(--yellow); }
.page-intro h1 { max-width: 760px; margin: 0; font: 900 clamp(58px, 8vw, 106px)/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.page-intro h1 em { color: var(--yellow); font-style: normal; }
.page-intro p { max-width: 510px; margin: 20px 0 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.55; }
.page-section { padding: 123px 0; }
.page-section--cloud { background: var(--cloud); }
.split-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 55px; }
.split-head .lede { max-width: 335px; margin: 0; }

/* Home */
.service-strip { background: var(--yellow); }
.service-strip .wrap { min-height: 114px; display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); align-items: center; }
.service-strip .intro { font: 900 19px/.96 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.service-strip a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding-left: 24px; border-left: 1px solid rgba(0,0,0,.3); transition: background .18s; }
.service-strip a:hover { background: rgba(255,255,255,.33); }
.service-strip b { font: 900 22px/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.service-strip span { margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .64; }
.home-services { padding: 124px 0 131px; }
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-right: 0; }
.service-card { min-height: 335px; position: relative; padding: 25px 23px; border-right: 1px solid var(--line); transition: background .22s, color .22s; }
.service-card:hover { color: white; background: var(--ink); }
.service-card .number { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.service-card h3 { margin: 62px 0 12px; font: 900 31px/.92 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.service-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.52; transition: color .22s; }
.service-card:hover p { color: rgba(255,255,255,.67); }
.service-card .go { position: absolute; right: 22px; bottom: 21px; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; font-size: 17px; }
.service-card:hover .go { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.home-process { color: white; background: var(--black); padding: 122px 0 124px; }
.home-process .label { color: rgba(255,255,255,.69); }
.home-process .label::before { background: var(--green); }
.home-process .title { max-width: 610px; }
.home-process .title strong { color: var(--green); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 63px; border-top: 1px solid rgba(255,255,255,.24); }
.step { min-height: 202px; padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.24); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; }
.step b { color: var(--yellow); font-size: 10px; letter-spacing: .12em; }
.step h3 { margin: 51px 0 8px; font: 900 27px/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.step p { max-width: 235px; margin: 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.52; }
.home-contact { padding: 116px 0; background: var(--red); }
.home-contact .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 45px; align-items: end; }
.home-contact .label::before { background: var(--black); }
.home-contact h2 { max-width: 680px; margin: 0; font: 900 clamp(45px, 6vw, 82px)/.86 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.home-contact h2 span { color: var(--paper); }
.home-contact .button { justify-self: end; }

/* Services */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.detail { position: relative; min-height: 346px; padding: 28px 30px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.detail:nth-child(2), .detail:nth-child(3) { background: var(--cloud); }
.detail .number { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.detail h2 { max-width: 310px; margin: 53px 0 12px; font: 900 43px/.86 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.detail p { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.56; }
.detail--interactive { cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.detail--interactive:hover, .detail--interactive:focus-visible { z-index: 1; color: white; background: var(--ink); outline: 0; transform: translateY(-4px); }
.detail--interactive:hover p, .detail--interactive:focus-visible p { color: rgba(255,255,255,.68); }
.detail-open { position: absolute; right: 29px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.detail-open i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; font-style: normal; }
.detail--interactive:hover .detail-open, .detail--interactive:focus-visible .detail-open { color: var(--yellow); }
.service-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 28px; visibility: hidden; opacity: 0; transition: opacity .22s, visibility .22s; }
.service-modal.is-open { visibility: visible; opacity: 1; }
.service-modal__backdrop { position: absolute; inset: 0; background: rgba(5,5,5,.76); backdrop-filter: blur(7px); }
.service-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(270px, .95fr) minmax(330px, 1.05fr); width: min(980px, 100%); max-height: min(700px, calc(100vh - 56px)); overflow: auto; color: var(--black); background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.45); transform: translateY(18px) scale(.98); transition: transform .22s; }
.service-modal.is-open .service-modal__dialog { transform: translateY(0) scale(1); }
.service-modal__close { position: absolute; z-index: 2; top: 15px; right: 16px; display: grid; place-items: center; width: 37px; height: 37px; border: 0; color: white; background: var(--black); border-radius: 50%; font-size: 27px; font-weight: 300; line-height: 1; }
.service-modal__close:hover { color: var(--black); background: var(--yellow); }
.service-modal__media { position: relative; min-height: 460px; overflow: hidden; background: var(--ink); }
.service-modal__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.04) 42%, rgba(5,5,5,.7)); }
.service-modal__media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.service-modal__media span { position: absolute; z-index: 1; left: 26px; bottom: 24px; color: var(--yellow); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.service-modal__body { display: flex; flex-direction: column; align-items: flex-start; padding: 60px clamp(27px, 4vw, 54px) 44px; }
.service-modal__body .label { margin-bottom: 26px; }
.service-modal__body h2 { max-width: 390px; margin: 0; font: 900 clamp(43px, 5vw, 64px)/.84 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.service-modal__copy { margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.62; }
.service-modal__list { display: grid; gap: 8px; width: 100%; margin: 26px 0 30px; padding: 0; list-style: none; }
.service-modal__list li { padding: 10px 0 10px 18px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 750; line-height: 1.4; }
.service-modal__list li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px -18px; background: var(--red); transform: rotate(45deg); }
.service-modal__body .button { margin-top: auto; }
body.service-modal-open { overflow: hidden; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.capability { min-height: 276px; padding: 23px; color: white; background: var(--ink); }
.capability:nth-child(2) { background: var(--blue); }
.capability:nth-child(3) { color: var(--black); background: var(--yellow); }
.capability:nth-child(4) { background: var(--green); }
.capability span { font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; opacity: .73; }
.capability h3 { margin: 54px 0 14px; font: 900 28px/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.capability p { margin: 0; font-size: 12px; line-height: 1.55; opacity: .78; }

/* Portfolio */
.portfolio-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.work { position: relative; isolation: isolate; min-height: 330px; padding: 26px; overflow: hidden; color: white; background: var(--ink); }
.work:nth-child(1) { grid-row: span 2; min-height: 676px; background: var(--blue); }
.work:nth-child(2) { background: var(--orange); }
.work:nth-child(3) { background: var(--green); }
.work-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.work:hover .work-image { transform: scale(1.045); }
.work::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.89), rgba(5,5,5,.08) 65%); }
.work::before { content: ""; position: absolute; z-index: 2; width: 290px; height: 290px; right: -92px; top: -63px; border: 28px solid rgba(255,255,255,.26); transform: rotate(37deg); pointer-events: none; }
.work:nth-child(1)::before { width: 460px; height: 460px; right: -134px; top: 58px; border-width: 57px; border-radius: 50%; }
.work:nth-child(2)::before { border-color: rgba(0,0,0,.23); border-radius: 50% 50% 0 0; }
.work:nth-child(3)::before { border-radius: 0 50% 0 50%; }
.work:nth-child(4)::before { border-color: rgba(241,238,0,.55); border-radius: 50%; }
.work-content { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 22px; }
.work small { color: var(--yellow); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.work:nth-child(2) small, .work:nth-child(3) small { color: rgba(0,0,0,.7); }
.work h2 { margin: 8px 0 8px; font: 900 39px/.86 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.work p { max-width: 360px; margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.48; }
.work-gallery-section { padding: 0 0 120px; background: var(--paper); }
.work-gallery-section .split-head { margin-bottom: 44px; }
.work-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 164px; gap: 12px; }
.gallery-card { position: relative; isolation: isolate; overflow: hidden; border: 0; padding: 0; color: white; background: var(--ink); text-align: left; }
.gallery-card--wide { grid-column: span 2; }
.gallery-card--tall { grid-row: span 2; }
.gallery-card img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .42s ease; }
.gallery-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.75), transparent 65%); pointer-events: none; }
.gallery-card span { position: absolute; z-index: 1; right: 13px; bottom: 12px; left: 13px; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.06); }
.gallery-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.gallery-lightbox { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 28px; visibility: hidden; opacity: 0; transition: opacity .18s, visibility .18s; }
.gallery-lightbox.is-open { visibility: visible; opacity: 1; }
.gallery-lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,5,5,.88); cursor: default; }
.gallery-lightbox__figure { position: relative; z-index: 1; display: grid; justify-items: center; max-width: min(1080px, 100%); max-height: calc(100vh - 56px); margin: 0; outline: 0; }
.gallery-lightbox__figure img { display: block; max-width: 100%; max-height: calc(100vh - 111px); object-fit: contain; background: var(--ink); box-shadow: 0 22px 70px rgba(0,0,0,.45); }
.gallery-lightbox__figure figcaption { align-self: start; margin-top: 12px; color: white; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.gallery-lightbox__close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; color: white; background: var(--ink); border-radius: 50%; font-size: 27px; font-weight: 300; line-height: 1; }
.gallery-lightbox__close:hover { color: var(--ink); background: var(--yellow); }
body.gallery-lightbox-open { overflow: hidden; }
.featured-note { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.featured-note .title { font-size: clamp(39px, 4.4vw, 61px); }
.featured-note .lede { max-width: 530px; margin: 0; }
.material-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 67px; border-top: 1px solid var(--line); }
.material-list div { min-height: 142px; padding: 20px 22px; border-right: 1px solid var(--line); }
.material-list div:first-child { padding-left: 0; }
.material-list div:last-child { border-right: 0; }
.material-list b { display: block; font: 900 27px/1 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.material-list span { display: block; max-width: 230px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.client-section { padding: 112px 0 118px; color: white; background: var(--ink); }
.client-section .split-head { margin-bottom: 53px; }
.client-section .label { color: rgba(255,255,255,.65); }
.client-section .label::before { background: var(--yellow); }
.client-section .title { max-width: 620px; }
.client-section .lede { color: rgba(255,255,255,.68); }
.clients-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); }
.client { min-height: 93px; display: flex; align-items: center; padding: 16px 19px; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); color: white; font: 900 22px/.92 var(--display); letter-spacing: -.035em; text-transform: uppercase; transition: background .18s, color .18s; }
.client:hover { color: var(--black); background: var(--yellow); }
.client em { color: var(--yellow); font-style: normal; }
.client:hover em { color: var(--red); }
.testimonials { padding: 118px 0 124px; background: var(--paper); }
.testimonials-head { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 49px; }
.testimonials-head .lede { max-width: 340px; margin: 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial { min-height: 362px; display: flex; flex-direction: column; padding: 25px; color: white; background: var(--blue); }
.testimonial:nth-child(2) { color: var(--black); background: var(--yellow); }
.testimonial:nth-child(3) { background: var(--green); }
.testimonial::before { content: "“"; display: block; height: 55px; font: 900 82px/.66 Georgia, serif; opacity: .68; }
.testimonial blockquote { margin: 25px 0 22px; font: 800 19px/1.28 var(--display); letter-spacing: -.02em; }
.testimonial figcaption { margin-top: auto; padding-top: 12px; border-top: 1px solid currentColor; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.review-source { display: inline-block; margin: 31px 0 0; padding-bottom: 5px; border-bottom: 1px solid var(--black); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.review-source:hover { color: var(--blue); border-color: var(--blue); }

/* About + FAQ */
.story-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(48px, 10vw, 140px); }
.story-mark { position: relative; min-height: 370px; padding: 29px; color: white; overflow: hidden; background: var(--blue); }
.story-mark::before, .story-mark::after { content: ""; position: absolute; border: 34px solid var(--yellow); }
.story-mark::before { width: 250px; height: 250px; right: -115px; top: 43px; transform: rotate(45deg); }
.story-mark::after { width: 177px; height: 177px; left: -91px; bottom: -83px; border-color: var(--red); border-radius: 50%; }
.story-mark b { position: relative; z-index: 1; display: block; max-width: 230px; font: 900 58px/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.story-mark span { position: absolute; z-index: 1; bottom: 26px; left: 29px; right: 29px; font-size: 10px; font-weight: 850; letter-spacing: .12em; line-height: 1.45; text-transform: uppercase; }
.story-photo { position: relative; min-height: 370px; margin: 0; overflow: hidden; background: var(--ink); }
.story-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 44% center; }
.story-photo figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16px 20px; color: white; background: rgba(5,5,5,.8); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.story-copy p { max-width: 605px; margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.66; }
.story-copy p:first-of-type { color: var(--black); font: 900 clamp(28px, 3.2vw, 43px)/.94 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.mission { padding: 105px 0; color: white; background: var(--black); }
.mission .wrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: 57px; }
.mission .label { color: rgba(255,255,255,.68); }
.mission .label::before { background: var(--green); }
.mission h2 { margin: 0; font: 900 clamp(49px, 5.7vw, 78px)/.87 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.mission h2 span { color: var(--green); }
.mission p { max-width: 610px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.58; }
.founder { padding: 108px 0; background: var(--cloud); }
.founder-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: clamp(46px, 10vw, 140px); align-items: start; }
.founder-label { display: inline-block; margin: 0 0 21px; padding: 8px 10px; color: var(--black); background: var(--yellow); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.founder-name { margin: 0; font: 900 clamp(52px, 6vw, 82px)/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.founder-role { margin: 13px 0 0; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.founder-copy { padding-top: 5px; }
.founder-copy > p { max-width: 635px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.64; }
.founder-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--line); }
.founder-fact { min-height: 109px; padding: 18px 17px; border-right: 1px solid var(--line); }
.founder-fact:first-child { padding-left: 0; }
.founder-fact:last-child { border-right: 0; }
.founder-fact b { display: block; font: 900 23px/.96 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.founder-fact span { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.43; }
.about-range { padding: 112px 0; background: var(--paper); }
.about-range .title { max-width: 700px; }
.range-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 53px; border-top: 1px solid var(--line); }
.range-list article { min-height: 213px; padding: 21px 22px; border-right: 1px solid var(--line); }
.range-list article:first-child { padding-left: 0; }
.range-list article:last-child { border-right: 0; }
.range-list b { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.range-list h3 { margin: 33px 0 8px; font: 900 30px/.93 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.range-list p { max-width: 250px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.value { min-height: 263px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value b { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.value h3 { margin: 51px 0 10px; font: 900 30px/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.value p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.faq-section { padding: 116px 0 124px; background: var(--cloud); }
.faq-head { text-align: center; margin-bottom: 54px; }
.faq-head .label { justify-content: center; }
.faq-head .title { margin: 0 auto; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.faq-item { border-top: 1px solid rgba(5,5,5,.18); }
.faq-item:last-child, .faq-item:nth-last-child(2) { border-bottom: 1px solid rgba(5,5,5,.18); }
.faq-item summary { position: relative; padding: 25px 38px 25px 0; list-style: none; font-size: 14px; font-weight: 700; line-height: 1.42; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 5px; top: 16px; color: var(--blue); font-size: 33px; font-weight: 300; line-height: 1; transition: transform .18s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 520px; margin: -6px 35px 24px 0; color: var(--muted); font-size: 13px; line-height: 1.58; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(46px, 10vw, 145px); }
.contact-copy { max-width: 410px; }
.contact-copy .lede { margin: 23px 0 0; }
.contacts { display: grid; gap: 23px; margin-top: 48px; }
.contacts div { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.contacts small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.contacts a, .contacts span { font: 900 22px/1.03 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.contacts a:hover { color: var(--blue); }
.form { padding-top: 4px; }
.field { position: relative; margin-bottom: 30px; }
.field input, .field textarea { width: 100%; padding: 13px 0 9px; border: 0; border-bottom: 1px solid var(--line); outline: 0; color: var(--black); background: transparent; border-radius: 0; font-size: 15px; }
.field textarea { min-height: 115px; resize: vertical; }
.field label { position: absolute; top: 13px; left: 0; pointer-events: none; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; transition: transform .17s, font-size .17s, color .17s; }
.field input:focus, .field textarea:focus { border-color: var(--red); }
.field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { color: var(--red); font-size: 8px; transform: translateY(-16px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feedback { display: none; color: #28862b; font-size: 13px; font-weight: 700; }
.feedback.show { display: block; }
.contact-banner { padding: 69px 0; color: white; background: var(--blue); }
.contact-banner .wrap { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.contact-banner p { max-width: 720px; margin: 0; font: 900 clamp(32px, 4.4vw, 58px)/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.contact-banner .button { flex: 0 0 auto; }

/* Footer */
.footer { padding: 33px 0; color: rgba(255,255,255,.7); background: var(--black); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer .brand { width: 138px; }
.footer-links { display: flex; gap: 21px; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a:hover { color: var(--yellow); }
.footer-links .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.footer-social img { display: block; width: 17px; height: 17px; transition: opacity .2s ease, transform .2s ease; }
.footer-social:hover img { opacity: .72; transform: translateY(-1px); }
.copyright { font-size: 10px; letter-spacing: .08em; }

@media (max-width: 850px) {
  .wrap { width: min(100% - 36px, 680px); }
  .nav { min-height: 80px; }
  .brand { width: 153px; }
  .nav-links, .nav-cta { display: none; }
  .menu { display: block; }
  .site-header.open { position: fixed; bottom: 0; background: rgba(5,5,5,.97); }
  .site-header.open .nav { align-items: start; padding-top: 20px; }
  .site-header.open .nav-links { position: absolute; top: 78px; left: 18px; right: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.open .nav-links a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 14px; }
  .site-header.open .nav-links a::after { display: none; }
  .hero { min-height: 690px; padding: 139px 0 63px; }
  .hero::before { width: 590px; right: -230px; top: 68px; }
  .hero::after { right: 5%; width: 180px; height: 180px; border-width: 19px; }
  .hero-tag { display: none; }
  .service-strip .wrap { grid-template-columns: repeat(3, 1fr); padding: 18px 0; }
  .service-strip .intro { grid-column: 1 / -1; padding-bottom: 18px; }
  .service-strip a:first-of-type { border-left: 0; padding-left: 0; }
  .home-services, .page-section { padding: 83px 0; }
  .split-head { flex-direction: column; align-items: start; margin-bottom: 39px; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 285px; }
  .home-process { padding: 83px 0; }
  .steps { grid-template-columns: 1fr; margin-top: 42px; }
  .step, .step:first-child { min-height: auto; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.23); }
  .step:last-child { border-bottom: 0; }
  .step h3 { margin-top: 34px; }
  .home-contact { padding: 78px 0; }
  .home-contact .wrap { grid-template-columns: 1fr; }
  .home-contact .button { justify-self: start; }
  .page-intro { min-height: 405px; padding: 131px 0 55px; }
  .page-intro::after { width: 310px; height: 310px; border-width: 52px; right: -85px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail { min-height: 290px; }
  .detail:nth-child(2), .detail:nth-child(3) { background: var(--paper); }
  .detail:nth-child(even) { background: var(--cloud); }
  .detail h2 { margin-top: 42px; }
  .service-modal__dialog { grid-template-columns: 1fr; max-width: 630px; }
  .service-modal__media { min-height: 280px; }
  .service-modal__body { min-height: 0; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .work:nth-child(1) { grid-row: auto; min-height: 410px; }
  .work { min-height: 310px; }
  .work-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 185px; }
  .featured-note { grid-template-columns: 1fr; gap: 24px; }
  .clients-list { grid-template-columns: repeat(2, 1fr); }
  .testimonials-head { flex-direction: column; align-items: start; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial { min-height: 285px; }
  .material-list { margin-top: 42px; }
  .contact-grid { grid-template-columns: 1fr; gap: 59px; }
  .story-grid, .mission .wrap, .founder-grid { grid-template-columns: 1fr; gap: 37px; }
  .story-mark, .story-photo { min-height: 280px; }
  .range-list { grid-template-columns: 1fr; margin-top: 39px; }
  .range-list article, .range-list article:first-child { min-height: auto; padding: 19px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .range-list article:last-child { border-bottom: 0; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { gap: 0 30px; }
  .contact-banner .wrap { display: grid; justify-content: start; }
}

@media (max-width: 500px) {
  .wrap { width: min(100% - 32px, 460px); }
  .brand { width: 142px; }
  .hero { min-height: 649px; padding: 129px 0 49px; }
  .hero::before { width: 460px; right: -214px; top: 53px; box-shadow: inset 0 0 0 37px rgba(78,189,67,.08), inset 0 0 0 76px rgba(255,157,10,.08), inset 0 0 0 115px rgba(47,109,212,.08); }
  .hero::after { display: none; }
  .hero h1 { font-size: 60px; }
  .hero-copy { font-size: 14px; }
  .service-strip .wrap { grid-template-columns: 1fr 1fr; }
  .service-strip a { min-height: 58px; padding-left: 12px; }
  .service-strip a:last-child { grid-column: 1 / -1; padding: 14px 0 0; margin-top: 12px; border-top: 1px solid rgba(0,0,0,.25); border-left: 0; }
  .title { font-size: 45px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-card { min-height: 238px; }
  .service-card h3 { margin-top: 39px; }
  .page-intro { min-height: 376px; padding: 128px 0 48px; }
  .page-intro h1 { font-size: 58px; }
  .page-intro p { font-size: 13px; }
  .page-intro::after { width: 235px; height: 235px; right: -95px; bottom: -45px; border-width: 39px; }
  .detail { min-height: 270px; padding: 23px; }
  .detail h2 { font-size: 38px; }
  .detail-open { right: 22px; bottom: 20px; }
  .service-modal { padding: 14px; }
  .service-modal__dialog { max-height: calc(100vh - 28px); }
  .service-modal__media { min-height: 205px; }
  .service-modal__body { padding: 35px 24px 28px; }
  .service-modal__body .label { margin-bottom: 20px; }
  .service-modal__copy { margin-top: 18px; font-size: 13px; }
  .service-modal__list { margin: 20px 0 24px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability { min-height: 210px; }
  .capability h3 { margin-top: 38px; }
  .work:nth-child(1), .work { min-height: 330px; }
  .work h2 { font-size: 34px; }
  .work-gallery-section { padding-bottom: 79px; }
  .work-gallery { grid-template-columns: 1fr; grid-auto-rows: 235px; }
  .gallery-card--wide, .gallery-card--tall { grid-column: auto; grid-row: auto; }
  .gallery-lightbox { padding: 14px; }
  .gallery-lightbox__figure img { max-height: calc(100vh - 85px); }
  .material-list { grid-template-columns: 1fr; }
  .client-section, .testimonials, .founder, .about-range { padding: 79px 0; }
  .clients-list { grid-template-columns: 1fr; }
  .client { min-height: 75px; }
  .founder-facts { grid-template-columns: 1fr; margin-top: 30px; }
  .founder-fact, .founder-fact:first-child { min-height: auto; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .founder-fact:last-child { border-bottom: 0; }
  .material-list div, .material-list div:first-child { min-height: auto; padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .material-list div:last-child { border-bottom: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .values-grid, .faq-grid { grid-template-columns: 1fr; }
  .value { min-height: 204px; }
  .value h3 { margin-top: 34px; }
  .faq-section { padding: 79px 0; }
  .faq-head { text-align: left; margin-bottom: 37px; }
  .faq-head .label { justify-content: start; }
  .faq-head .title { margin: 0; }
  .faq-item:nth-last-child(2) { border-bottom: 0; }
  .contact-banner { padding: 55px 0; }
  .footer-inner { flex-direction: column; align-items: start; gap: 22px; }
  .footer-links { flex-wrap: wrap; }
}