:root {
  --paper: #f7f7f5;
  --white: #ffffff;
  --ink: #101010;
  --muted: #676767;
  --line: #bdbdb8;
  --primary: #2947da;
  --secondary: #5ee545;
  --primary-rgb: 41, 71, 218;
  --secondary-rgb: 94, 229, 69;
  --shell: min(1220px, calc(100vw - 64px));
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.34; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; width: 100%; height: auto; }
.shell { width: var(--shell); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 13px; background: var(--ink); color: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { width: var(--shell); min-height: 112px; margin-inline: auto; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 24px; }
.wordmark { font-size: 1.8rem; font-weight: 720; letter-spacing: -.075em; text-decoration: none; }
.site-header nav { display: flex; gap: clamp(20px, 3vw, 44px); }
.site-header nav a { font-size: .84rem; font-weight: 650; letter-spacing: .065em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover, .site-header nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

.colour-control { position: relative; display: block; width: 70px; height: 14px; cursor: ew-resize; }
.colour-control input { appearance: none; display: block; width: 70px; height: 14px; margin: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, var(--primary) 0 76%, var(--secondary) 76% 100%); cursor: ew-resize; }
.colour-control input::-webkit-slider-thumb { appearance: none; width: 3px; height: 22px; border: 0; background: var(--ink); opacity: 0; transition: opacity .18s ease; }
.colour-control input::-moz-range-thumb { width: 3px; height: 22px; border: 0; border-radius: 0; background: var(--ink); opacity: 0; transition: opacity .18s ease; }
.colour-control:hover input::-webkit-slider-thumb, .colour-control input:focus-visible::-webkit-slider-thumb { opacity: .72; }
.colour-control:hover input::-moz-range-thumb, .colour-control input:focus-visible::-moz-range-thumb { opacity: .72; }
.colour-control input:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

.hero { min-height: 830px; padding: clamp(110px, 12vw, 175px) 25px 85px; }
.kicker, .problems h2, .section-intro h2, .services > h2, .ways > h2, .about > h2, .footer-label, .case-type, .case-services { color: var(--muted); font-size: .86rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 1150px; margin: clamp(105px, 12vw, 170px) 0 105px; font-size: clamp(4.5rem, 8.25vw, 7.8rem); font-weight: 430; letter-spacing: -.072em; line-height: .89; }
.hero h1 span, .problem-list span { color: var(--primary); }
.hero-copy { max-width: 850px; margin-top: 30px; color: #555; font-size: clamp(1.15rem, 1.9vw, 1.65rem); font-weight: 560; line-height: 1.18; }
.engagements { margin-top: 68px; color: var(--muted); font-size: 1.05rem; font-weight: 650; letter-spacing: .12em; line-height: 1.8; text-transform: uppercase; }

.energy-line { position: relative; width: 100%; height: 14px; overflow: hidden; background: var(--primary); }
.energy-line.split { background: linear-gradient(90deg, var(--primary) 0 82%, var(--secondary) 82% 100%); }
.energy-line.secondary { background: var(--secondary); }
.energy-line::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  background: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 58%, var(--secondary)) 56%, var(--secondary) 100%);
  clip-path: inset(0 100% 0 0);
  content: "";
}
.energy-line.is-charged::after { animation: pull-colour 2.4s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes pull-colour { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.problems { padding: 40px 25px clamp(130px, 14vw, 190px); }
.problems h2 { margin: 0 0 70px; }
.problem-list { margin-left: 22%; }
.problem-list p { padding: 28px 0 31px; border-top: 1px solid var(--line); color: #5e5e5e; font-size: clamp(2rem, 3.7vw, 4rem); font-weight: 520; letter-spacing: -.045em; line-height: 1.03; }
.problem-list p:last-child { border-bottom: 1px solid var(--line); }

.selected { padding: 0 0 125px; background: var(--white); }
.selected > .energy-line { height: 18px; }
.section-intro { padding: 72px 25px 55px; display: flex; align-items: flex-start; justify-content: space-between; }
.section-intro p { color: #555; }
.case-study { border-top: 1px solid var(--line); }
.case-study:first-of-type { border-top: 0; }
.case-image-link { display: block; overflow: hidden; }
.case-image-link img { width: 100%; max-height: 710px; object-fit: cover; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.case-image-link:hover img { transform: scale(1.012); }
.case-copy { min-height: 520px; padding: 60px 65px 52px; display: flex; flex-direction: column; }
.case-type { margin-bottom: auto; }
.case-copy h3 { margin-top: 95px; font-size: clamp(3.2rem, 6vw, 6.3rem); font-weight: 430; letter-spacing: -.065em; line-height: .92; }
.case-copy h3 a { text-decoration: none; }
.case-copy h3 a:hover, .case-copy h3 a:focus-visible { color: var(--primary); }
.case-copy > p:not(.case-type,.case-services) { max-width: 1050px; margin-top: 26px; color: #555; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 520; }
.case-copy .energy-line { height: 13px; margin-top: auto; }
.case-services { margin-top: 24px; }

.services { padding: 150px 25px 110px; }
.services > h2 { margin-bottom: 100px; }
.service { padding-bottom: 150px; }
.service:last-child { padding-bottom: 0; }
.service > .energy-line { height: 16px; }
.service h3 { margin-top: 55px; font-size: clamp(3.5rem, 6.5vw, 6.6rem); font-weight: 430; letter-spacing: -.065em; line-height: .93; }
.service > p { margin-top: 30px; color: #555; font-size: clamp(1.08rem, 1.6vw, 1.45rem); font-weight: 520; }
.service ul { margin: 65px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.service li { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; font-weight: 600; }

.ways { padding: 0 25px 95px; background: var(--primary); transition: background-color .25s ease; }
.ways > .energy-line { width: calc(100% + 50px); height: 18px; margin-left: -25px; }
.ways > h2 { padding-top: 105px; color: rgba(255,255,255,.76); }
.ways-grid { padding: 80px 0 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }
.ways-grid article + article { margin-top: 170px; }
.ways-grid h3 { color: #fff; font-size: clamp(3.4rem, 6.2vw, 6.4rem); font-weight: 430; letter-spacing: -.067em; line-height: .93; }
.ways-grid p { max-width: 560px; margin-top: 28px; color: rgba(255,255,255,.88); font-size: 1.15rem; }
.ways .energy-line { background: var(--secondary); }

.about { padding: 150px 25px 145px; }
.about-statement { max-width: 1080px; margin: 85px 0 110px; color: #5b5b5b; font-size: clamp(4rem, 8vw, 8rem); font-weight: 430; letter-spacing: -.07em; line-height: .87; }
.about-statement span { color: rgba(var(--primary-rgb), .28); }
.about .energy-line { height: 14px; }
.about-copy { max-width: 1050px; margin-top: 32px; color: #565656; font-size: clamp(1.05rem, 1.55vw, 1.35rem); font-weight: 530; }

footer { margin-bottom: 0; padding: 135px 25px 48px; background: var(--secondary); transition: background-color .25s ease; }
.footer-label { color: rgba(10,10,10,.7); }
footer h2 { margin: 105px 0 105px; font-size: clamp(4.4rem, 9vw, 9rem); font-weight: 430; letter-spacing: -.073em; line-height: .88; }
.footer-links { padding: 25px 0; border-top: 1px solid rgba(10,10,10,.42); border-bottom: 1px solid rgba(10,10,10,.42); display: flex; flex-direction: column; gap: 8px; }
.footer-links a { width: fit-content; font-size: clamp(1.35rem, 2.3vw, 2.25rem); font-weight: 650; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.footer-brand { margin-top: 65px; display: flex; align-items: flex-start; gap: 24px; }
.footer-brand > i { width: 48px; height: 12px; margin-top: 8px; background: var(--primary); }
.footer-brand p { font-size: 1.35rem; font-weight: 720; letter-spacing: -.055em; }
.footer-brand span { font-size: .9rem; font-weight: 600; }

.work-index { padding: 0 0 120px; }
.work-index-hero { padding: clamp(110px, 12vw, 175px) 25px 90px; }
.work-index-hero > p, .project-category, .project-back, .project-story-label, .project-pagination span { color: var(--muted); font-size: .86rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.work-index-hero h1 { margin: clamp(90px, 10vw, 140px) 0 85px; font-size: clamp(4.5rem, 8.5vw, 8.2rem); font-weight: 430; letter-spacing: -.072em; line-height: .87; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; }
.work-card { padding-bottom: 48px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.work-card:nth-child(odd) { border-right: 1px solid var(--line); }
.work-card figure { aspect-ratio: 1.16 / 1; overflow: hidden; background: #e7e7e3; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.work-card:hover img, .work-card:focus-visible img { transform: scale(1.018); }
.work-card > div { padding: 28px 28px 0; }
.work-card h2 { font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 430; letter-spacing: -.055em; line-height: .96; }
.work-card p { margin-top: 12px; color: var(--muted); font-size: .85rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

.project-page { padding-bottom: 125px; }
.project-hero { padding: 95px 25px 75px; }
.project-back { display: inline-block; margin-bottom: 110px; text-decoration: none; }
.project-back::before { content: "← "; }
.project-back:hover, .project-back:focus-visible { color: var(--primary); }
.project-category { margin-bottom: 28px; }
.project-hero h1 { max-width: 1180px; font-size: clamp(4.7rem, 9.5vw, 9.5rem); font-weight: 430; letter-spacing: -.075em; line-height: .82; }
.project-lede { max-width: 930px; margin: 70px 0 62px; color: #555; font-size: clamp(1.5rem, 2.8vw, 2.65rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.project-visual { background: var(--white); }
.project-visual:empty { display: none; }
.project-visual figure { width: 100%; }
.project-visual img { width: 100%; max-height: 790px; object-fit: cover; }
.project-story { padding: 110px 25px 120px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); gap: 70px; }
.project-story-copy { max-width: 930px; }
.project-story-copy h2 { margin: 70px 0 25px; font-size: clamp(2.25rem, 4.3vw, 4.5rem); font-weight: 430; letter-spacing: -.055em; line-height: .95; }
.project-story-copy h2:first-child { margin-top: 0; }
.project-story-copy p { margin-top: 28px; color: #505050; font-size: clamp(1.08rem, 1.65vw, 1.45rem); line-height: 1.35; }
.project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project-image, .project-video { min-width: 0; background: #e7e7e3; }
.project-image--wide, .project-video { grid-column: 1 / -1; }
.project-image img { width: 100%; height: 100%; max-height: 900px; object-fit: cover; }
.project-image:not(.project-image--wide) { aspect-ratio: 1 / 1; }
.project-video { position: relative; aspect-ratio: 16 / 9; }
.project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.project-pagination { margin-top: 120px; padding: 36px 25px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.project-pagination a { font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.project-pagination a:last-child { text-align: right; }
.project-pagination span { display: block; margin-bottom: 16px; }
.project-pagination a:hover, .project-pagination a:focus-visible { color: var(--primary); }
.project-footer { width: var(--shell); padding: 100px 25px 45px; background: var(--secondary); }
.project-footer p { max-width: 850px; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 430; letter-spacing: -.06em; line-height: .94; }
.project-footer a { display: inline-block; margin-top: 55px; font-size: 1.35rem; font-weight: 650; text-underline-offset: 5px; }

@media (max-width: 760px) {
  :root { --shell: calc(100vw - 24px); }
  body { font-size: 16px; }
  .site-header { min-height: 88px; align-items: flex-start; padding: 22px 10px 18px; }
  .brand { gap: 11px; }
  .wordmark { font-size: 1.3rem; }
  .colour-control, .colour-control input { width: 44px; height: 9px; }
  .site-header nav { max-width: 205px; flex-wrap: wrap; justify-content: flex-end; gap: 7px 17px; }
  .site-header nav a { font-size: .65rem; }
  .hero { min-height: 760px; padding: 75px 14px 70px; }
  .kicker { font-size: .72rem; }
  .hero h1 { margin: 100px 0 75px; font-size: clamp(3.15rem, 14.8vw, 5.1rem); }
  .energy-line { height: 10px; }
  .hero-copy { margin-top: 22px; }
  .engagements { margin-top: 50px; font-size: .82rem; }
  .problems { padding: 60px 14px 110px; }
  .problems h2 { margin-bottom: 45px; }
  .problem-list { margin-left: 0; }
  .problem-list p { font-size: 2rem; }
  .section-intro { padding: 52px 20px 40px; flex-direction: column; gap: 25px; }
  .case-image-link img { min-height: 52vw; }
  .case-copy { min-height: 440px; padding: 42px 20px 38px; }
  .case-copy h3 { margin-top: 75px; }
  .services { padding: 110px 14px 85px; }
  .services > h2 { margin-bottom: 70px; }
  .service { padding-bottom: 110px; }
  .service ul { margin-top: 48px; }
  .ways { padding: 0 20px 75px; }
  .ways > .energy-line { width: calc(100% + 40px); margin-left: -20px; }
  .ways > h2 { padding-top: 75px; }
  .ways-grid { padding: 62px 0 78px; grid-template-columns: 1fr; gap: 75px; }
  .ways-grid article + article { margin-top: 0; }
  .about { padding: 110px 18px 100px; }
  .about-statement { margin: 65px 0 75px; }
  footer { padding: 90px 20px 36px; }
  footer h2 { margin: 80px 0; }
  .footer-brand { margin-top: 50px; }
  .work-index { padding-bottom: 80px; }
  .work-index-hero { padding: 80px 14px 65px; }
  .work-index-hero h1 { margin: 80px 0 65px; font-size: clamp(3.4rem, 15vw, 5.2rem); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card:nth-child(odd) { border-right: 0; }
  .work-card > div { padding: 22px 14px 0; }
  .project-hero { padding: 65px 14px 55px; }
  .project-back { margin-bottom: 75px; }
  .project-hero h1 { font-size: clamp(4rem, 18vw, 6rem); }
  .project-lede { margin: 50px 0 45px; font-size: 1.55rem; }
  .project-story { padding: 75px 14px 85px; grid-template-columns: 1fr; gap: 45px; }
  .project-gallery { grid-template-columns: 1fr; gap: 8px; }
  .project-image--wide, .project-video { grid-column: auto; }
  .project-image:not(.project-image--wide) { aspect-ratio: auto; }
  .project-pagination { margin-top: 80px; padding: 28px 14px 0; gap: 22px; }
  .project-footer { padding: 75px 20px 35px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .energy-line::after { display: none; }
}