@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/roboto-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
:root { --paper:#ffffff; --paper2:#e9e7dd; --ink:#182323; --muted:#59615a; --line:#c9cbc0; --signal:#f26844; --lime:#F6EA00; --blue:#364fdf; --white:#fffdf7; --radius:3px; --serif:'Roboto',Arial,Helvetica,sans-serif; --sans:'Roboto',Arial,Helvetica,sans-serif; }
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px} ::selection{background:var(--lime);color:var(--ink)}
    .wrap{width:min(1380px,calc(100% - 112px));margin-inline:auto}
    .eyebrow{font-size:12px;line-height:1.45;font-weight:800;text-transform:uppercase;letter-spacing:-0.03em}
    .site-nav{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);gap:30px}
    .wordmark{display:flex;align-items:center;gap:13px;min-width:235px}.mark{width:37px;height:37px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;transform:rotate(-12deg)}.mark i{background:var(--ink)}.mark i:nth-child(2){background:var(--signal)}.mark i:nth-child(3){background:var(--lime)}.wordmark strong{font-size:13px;letter-spacing:-0.03em;line-height:1.35}.wordmark small{display:block;font-size:9px;letter-spacing:-0.03em;color:var(--muted);margin-top:2px}
    .nav-items{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:700}.nav-items a{transition:color .2s}.nav-items a:hover{color:var(--signal)}.nav-cta{background:var(--lime);color:#000;border:1px solid var(--lime);padding:14px 20px;white-space:nowrap}.nav-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
    .hero{display:grid;grid-template-columns:1.18fr .82fr;gap:56px;padding:102px 0 105px;align-items:center;min-height:670px}.hero h1{margin:26px 0 34px;max-width:810px}
    .hero-copy{max-width:580px;margin:0 0 32px}.buttons{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:26px;justify-content:space-between;font-weight:800;font-size:13px;padding:18px 22px;border:1px solid var(--ink);transition:background .2s,color .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--ink);color:var(--white)}.button.primary:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}.button.secondary:hover{background:var(--lime)}.arrow{font-size:20px;font-weight:400;line-height:.7}
    .hero-art{position:relative;aspect-ratio: .91;min-width:0;border:1px solid var(--ink);background:#d8e0d3;overflow:hidden;isolation:isolate}.art-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(24,35,35,.14) 1px,transparent 1px),linear-gradient(to bottom,rgba(24,35,35,.14) 1px,transparent 1px);background-size:40px 40px;opacity:.6}.art-circle{position:absolute;width:63%;aspect-ratio:1;border-radius:50%;background:var(--signal);left:-12%;bottom:-17%;border:2px solid var(--ink)}.art-poster{position:absolute;top:15%;left:17%;width:54%;height:64%;background:var(--blue);color:white;border:1px solid var(--ink);box-shadow:24px 24px 0 rgba(24,35,35,.23);transform:rotate(-9deg);padding:20px 21px;display:flex;flex-direction:column;justify-content:space-between}.art-poster .mini{font-size:10px;font-weight:800;letter-spacing:-0.03em}.art-poster .big{font-size:clamp(42px,5.2vw,88px);letter-spacing:-0.03em;line-height:.85;font-weight:900}.art-paper{position:absolute;right:-8%;bottom:8%;width:52%;height:31%;background:var(--lime);border:2px solid var(--ink);transform:rotate(8deg);padding:18px;display:flex;flex-direction:column;justify-content:space-between}.art-paper strong{font-size:clamp(21px,2.9vw,44px);line-height:.98;letter-spacing:-0.03em}.art-sticker{position:absolute;right:6%;top:6%;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);height:105px;width:105px;display:grid;place-items:center;font-size:10px;line-height:1.2;letter-spacing:-0.03em;text-align:center;font-weight:900;transform:rotate(15deg)}.art-foot{position:absolute;left:18px;bottom:13px;z-index:4;font-size:10px;text-transform:uppercase;letter-spacing:-0.03em;font-weight:700}
    .ticker{background:var(--ink);color:var(--white);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.ticker-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;white-space:nowrap;font-weight:800;font-size:12px;letter-spacing:-0.03em}.ticker .cross{color:var(--signal);font-size:22px}
    section{scroll-margin-top:30px}.intro{padding:155px 0 150px;display:grid;grid-template-columns:.44fr .56fr;gap:80px}.section-index{display:flex;gap:12px;align-items:center;color:var(--muted);font-weight:800;letter-spacing:-0.03em;text-transform:uppercase;font-size:12px}.section-index:before{content:'●';font-size:9px;color:var(--signal)}.intro h2{margin:0}.intro-copy{max-width:630px;margin:4px 0 24px}.intro-copy.small{color:var(--muted);max-width:570px}.underlined{border-bottom:1px solid var(--ink);padding-bottom:6px;display:inline-block;font-weight:800;font-size:13px;margin-top:10px}
    .what{padding:74px 0 115px;background:var(--paper2)}.section-top{display:flex;justify-content:space-between;gap:32px;align-items:end;padding-bottom:32px;border-bottom:1px solid var(--ink)}.section-top h2{margin:28px 0 0;max-width:870px}.section-top p{max-width:240px;font-size:14px;color:var(--muted);line-height:1.6}.service-grid{display:grid;grid-template-columns:repeat(3,1fr)}.service{padding:37px 30px 16px 0;min-height:380px;position:relative;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.service + .service{padding-left:30px}.service:last-child{border-right:0}.service-number{font-size:12px;font-weight:800;letter-spacing:-0.03em;color:var(--signal)}.service h3{font-size:clamp(27px,3vw,42px);line-height:1.08;letter-spacing:-0.03em;margin:22px 0 18px}.service p{color:var(--muted);max-width:370px}.service-foot{font-size:12px;border-top:1px solid var(--line);padding-top:18px;font-weight:800;letter-spacing:-0.03em;margin-top:27px}
    .physical{padding:142px 0 150px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.physical h2{margin:22px 0}.physical p{max-width:580px}.physical .note{color:var(--muted)}.physical-art{min-height:530px;position:relative;background:#c7c4bb;border:1px solid var(--ink);overflow:hidden}.booth-back{position:absolute;left:13%;top:13%;height:68%;width:73%;background:var(--ink);transform:skewY(-4deg);display:flex;flex-direction:column;justify-content:space-between;padding:32px;color:var(--white);box-shadow:18px 20px 0 rgba(24,35,35,.13)}.booth-back span{font-size:13px;font-weight:900;letter-spacing:-0.03em}.booth-back strong{font-size:clamp(49px,5vw,84px);line-height:.88;letter-spacing:-0.03em}.booth-back i{height:12px;width:100%;background:var(--signal)}.stand{position:absolute;bottom:4%;right:7%;height:58%;width:21%;background:var(--lime);border:2px solid var(--ink);transform:rotate(4deg);padding:14px;display:flex;align-items:end}.stand b{font-size:clamp(22px,2.1vw,35px);letter-spacing:-0.03em;line-height:.95;writing-mode:vertical-rl;transform:rotate(180deg)}.floor{position:absolute;bottom:0;left:0;right:0;height:12%;background:#aaa79f;clip-path:polygon(0 100%,100% 100%,100% 65%,0 10%)}
    .work{background:var(--ink);color:var(--white);padding:100px 0 125px}.work .section-top{border-color:rgba(255,255,255,.3)}.work .section-index{color:#c3cabf}.work .section-top p{color:#abb2a8}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}.work-card{background:#2b3432;min-height:440px;border:1px solid rgba(255,255,255,.18);overflow:hidden;display:flex;flex-direction:column}.work-visual{height:260px;position:relative;overflow:hidden}.wv1{background:#dce9c8}.wv1:before{content:'Aa';font-family:var(--sans);font-style:normal;position:absolute;left:20%;top:18%;font-size:150px;line-height:1;color:var(--ink);letter-spacing:-0.03em}.wv1:after{content:'IDENTITY / SYSTEM';position:absolute;bottom:19px;left:20px;border:1px solid var(--ink);padding:8px 13px;font-size:10px;font-weight:900;letter-spacing:-0.03em}.wv2{background:#f47554}.wv2:before{content:'';position:absolute;inset:24px 15%;background:#faf7ef;box-shadow:13px 11px 0 #172424;transform:rotate(-5deg)}.wv2:after{content:'A CLEAR STORY.';position:absolute;left:23%;top:24%;width:38%;font-weight:900;font-size:33px;line-height:.95;letter-spacing:-0.03em;color:var(--ink);transform:rotate(-5deg)}.wv3{background:#4f64da}.wv3:before{content:'';position:absolute;left:12%;right:12%;top:14%;bottom:14%;border:10px solid #cde786;border-radius:50%}.wv3:after{content:'REAL / WORLD';position:absolute;top:47%;left:14%;transform:rotate(-11deg);font-size:41px;letter-spacing:-0.03em;font-weight:900;line-height:.9}.work-body{padding:25px 26px 27px;flex:1}.work-body .eyebrow{font-size:10px;color:#b8bfb6}.work-body h3{font-size:25px;letter-spacing:-0.03em;margin:18px 0 12px}.work-body p{color:#c2c9bf;margin:0}.work-note{font-size:13px;color:#b8bfb6;margin-top:20px}
    .how{padding:145px 0}.how-head{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-bottom:65px}.how h2{margin:28px 0 0}.how-head p{align-self:end}.steps{border-top:1px solid var(--ink)}.step{display:grid;grid-template-columns:110px 1fr 1.2fr;align-items:center;gap:35px;padding:27px 0;border-bottom:1px solid var(--line)}.step-num{font-size:12px;letter-spacing:-0.03em;color:var(--signal);font-weight:900}.step-title{font-size:27px;letter-spacing:-0.03em;font-weight:800}.step p{color:var(--muted);margin:0}
    .quote{background:var(--lime);padding:100px 0}.quote blockquote{font-family:var(--serif);font-style:normal;font-size:clamp(39px,5.2vw,77px);line-height:1.15;letter-spacing:-0.03em;margin:0;text-align:center}
    .contact{background:var(--lime);color:var(--ink);padding:clamp(32px,6vw,88px) clamp(22px,4.5vw,68px);margin-bottom:48px}.contact-head{display:grid;grid-template-columns:1.1fr .9fr;gap:90px}.contact h2{margin:24px 0 0}.contact-side{align-self:end;max-width:599.98px}.contact-side p{}.contact-placeholder{padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:13px;color:var(--muted);margin-top:23px}.site-footer{border-top:1px solid var(--ink);padding:28px 0 38px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}
    @media(max-width:1199.98px){.wrap{width:calc(100% - 64px)}.hero{gap:30px}.hero h1{}.art-sticker{width:82px;height:82px;font-size:8px}.intro,.physical{gap:42px}.intro-copy{}}
    @media(max-width:839.98px){.wrap{width:calc(100% - 40px)}.site-nav{height:80px}.nav-items{gap:14px}.nav-items a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding:70px 0}.hero h1{max-width:650px}.hero-art{aspect-ratio:1.15;max-height:500px}.art-poster .big{font-size:clamp(60px,11vw,100px)}.ticker-inner{overflow:hidden;justify-content:flex-start;gap:23px}.intro{padding:100px 0;grid-template-columns:1fr;gap:35px}.intro h2{}.what{padding:65px 0 75px}.section-top{align-items:start;flex-direction:column}.section-top p{max-width:520px}.service-grid{grid-template-columns:1fr}.service,.service + .service{border-right:0;border-bottom:1px solid var(--line);padding:26px 0;min-height:260px}.service:last-child{border-bottom:0}.service p{max-width:620px}.physical{grid-template-columns:1fr;padding:95px 0}.physical-art{min-height:450px}.work{padding:80px 0}.work-grid{grid-template-columns:1fr;max-width:630px}.work-card{min-height:0}.work-visual{height:280px}.how{padding:100px 0}.how-head{grid-template-columns:1fr;gap:30px}.step{grid-template-columns:60px 1fr;gap:12px}.step p{grid-column:2}.quote{padding:75px 0}.contact-head{grid-template-columns:1fr;gap:35px}}
    @media(max-width:599.98px){.wordmark{min-width:0}.wordmark strong{font-size:11px}.wordmark small{font-size:8px}.nav-cta{padding:11px 13px;font-size:11px}.nav-items{gap:5px}.hero h1{}.hero-copy{}.art-sticker{width:72px;height:72px}.hero-art{aspect-ratio:.95}.art-poster{left:13%;top:13%;width:59%}.art-poster .big{font-size:64px}.art-paper strong{font-size:26px}.section-top h2{}.intro h2,.physical h2,.how h2{}.physical-art{min-height:350px}.booth-back{padding:20px}.booth-back strong{font-size:50px}.contact h2{}.site-footer{flex-direction:column}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
  
    .project-cover-image{display:block;width:100%;height:100%;object-fit:cover}.project-link:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.project-link:hover h3{text-decoration:underline;text-underline-offset:4px}.project-gallery{display:grid;gap:24px;padding-bottom:80px}.project-gallery figure{margin:0}.project-gallery img{display:block;width:100%;height:auto;background:var(--paper2)}.project-gallery figcaption{color:var(--muted);padding:10px 0}.project-detail{padding:80px 0 60px}.project-detail h1{margin:25px 0}.project-detail p{max-width:760px}.project-source{font-size:13px!important;color:var(--muted)}
  
/* Shared typography: edit these classes to update the entire website. */
.heading-hero{line-height:1;letter-spacing:-0.03em;font-weight:700}
.heading-section{line-height:1;letter-spacing:-0.03em;font-weight:700}
.heading-project{line-height:1;letter-spacing:-0.03em;font-weight:700}
.text-lead{font-size:19px;line-height:1.6;letter-spacing:-0.03em}
.text-body{font-size:16px;line-height:1.65}
.text-caption{font-size:13px;line-height:1.5}
@media(max-width:599.98px){.text-lead{font-size:17px}}

/* Logo and icon collections */
.collection-nav{display:flex;gap:32px;flex-wrap:wrap;padding-top:32px}
.collection-section{padding:0 0 90px}
.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.collection-item{margin:0;min-width:0}
.collection-item img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--white)}
.collection-item figcaption{padding-top:10px;color:var(--muted)}
@media(max-width:839.98px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:599.98px){.collection-grid{grid-template-columns:1fr}}

/* Consistent Roboto typography across the website. */
h1,h2,h3,h4,h5,h6,.step-title{font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:700;font-style:normal;color:#000}
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em{font-family:inherit;font-weight:inherit;font-style:normal;letter-spacing:-0.03em;color:inherit}
.text-lead,.text-body,.text-caption,p,.quote blockquote{font-family:var(--sans);font-weight:400;font-style:normal}

/* Pill-shaped buttons */
.button,.nav-cta{border-radius:9999px}

/* White headings on dark portfolio sections and cards. */
.work :is(h1,h2,h3,h4,h5,h6,.step-title),.work-card :is(h1,h2,h3,h4,h5,h6){color:#fff}

/* Yellow labels on dark portfolio backgrounds. */
.work .section-index,.work .section-index::before,.work .eyebrow,.work-card .eyebrow{color:var(--lime)}

/* Rounded project cards; clip images to the same corners. */
.work-card{border-radius:15px;overflow:hidden}

/* Warm grey opening section, followed by white introduction. */

/* Black service labels. */
.service-number{color:#000}

/* Reserved space for future hero and physical-work imagery. */
.hero-art.visual-placeholder,.physical-art.visual-placeholder{background:#f2f2f2;border:0}

/* Studio name in the main navigation. */
.wordmark strong{font-size:32px}

/* Navigation and button label sizes. */
.nav-items,.nav-items a,.button,.nav-cta{font-size:19px}

/* Link from selected work to the full archive. */
.work-actions{margin-top:32px}
.archive-button{background:var(--lime);color:#000;border-color:var(--lime)}
.archive-button:hover{background:#fff;border-color:#fff}

/* Smaller logos within the existing four-column grid. */
.logo-grid .collection-item img{box-sizing:border-box;padding:0;background:#f5f5f5}

/* Enlarge logo artwork while retaining the existing grid cells. */
.logo-grid .collection-item img{object-fit:contain;object-position:center;transform:scale(1.35)}
.logo-grid .collection-item{overflow:hidden}

/* Clip logo artwork to the grid cell. */
.logo-frame{overflow:hidden;background:#f5f5f5}
.logo-grid .collection-item img{background:transparent}

/* Two-column icon collection. */
.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.icon-frame{background:#f5f5f5;overflow:hidden}
.icon-grid .collection-item img{background:transparent}
@media(max-width:599.98px){.icon-grid{grid-template-columns:1fr}}

/* Original icon sheets retain their own backgrounds and proportions. */
.icon-frame{background:transparent}
.icon-grid .collection-item img{display:block;width:100%;height:auto;aspect-ratio:auto;background:transparent;transform:none}

/* Enlarge icon sheets within their existing rounded frames. */
.icon-grid .collection-item img{transform:scale(1.5);transform-origin:center}

/* White navigation stays at the top independently of the hero section. */
.site-header{position:sticky;top:0;z-index:100;background:#fff;color:var(--ink)}
.site-header .site-nav{border-bottom:0}
html{scroll-padding-top:110px}
@media(max-width:839.98px){html{scroll-padding-top:90px}}

/* Positioning: client brief, creative direction and finished work. */
.brand-direction-section{background:var(--paper2)}
.brand-direction{padding:100px 0}
.brand-direction > h2{margin:26px 0}
.brand-direction-intro{max-width:820px;margin-bottom:40px}
.direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.direction-card{background:var(--paper2);border-radius:15px;padding:32px}
.direction-card h3{font-size:28px;line-height:1.15;margin:26px 0 20px}
.direction-card p{margin:0}
.direction-card-challenge{background:#fff}
.direction-card-regie{background:var(--lime)}
.direction-card-result{background:var(--ink);color:#fff}
.direction-card-result h3{color:#fff}
.direction-card-result .eyebrow{color:var(--lime)}
@media(max-width:839.98px){.brand-direction{padding:70px 0}.direction-grid{grid-template-columns:1fr}}

/* Repeating creative-direction process beside the introduction. */
.intro{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;align-items:center}
.intro-process{min-width:0}
.process-loop{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:35px auto 0}
.process-ring{position:absolute;inset:0;width:100%;height:100%}
.process-nodes{list-style:none;margin:0;padding:0}
.process-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;padding:10px;font-size:clamp(12px,1.15vw,17px);font-weight:700;line-height:1.15}
.process-node-0{background:#fff;color:#000;border:1px solid #182323}
.process-node-1{background:var(--ink);color:#fff}
.process-node-2{background:var(--lime);color:#000}
.process-step-number{font-size:11px;font-weight:400}
.process-loop-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;text-align:center}
.process-loop-centre strong{display:block;font-size:clamp(18px,2vw,28px);line-height:1.1}
.process-loop-centre span{display:block;font-size:12px;margin-top:12px}
@media(max-width:1199.98px){.intro{gap:30px}.process-node{font-size:12px}.process-loop-centre span{font-size:10px}}
@media(max-width:839.98px){.intro{grid-template-columns:1fr}.process-loop{max-width:500px}.process-node{font-size:clamp(12px,3vw,17px)}}

/* Project evidence: full-width imagery and synchronised floating details. */
.project-proof{position:relative;background:var(--paper2)}
.proof-stage{position:relative;min-height:700px}
.proof-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.8s ease,visibility 1.8s;pointer-events:none}
.proof-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.proof-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.proof-content{position:relative;min-height:700px;display:flex;align-items:center;justify-content:flex-end;padding-top:65px;padding-bottom:100px}
.proof-panel{width:min(420px,100%);background:#fff;border-radius:15px;padding:36px;box-shadow:0 12px 50px #0002}
.proof-panel h3{font-size:34px;line-height:1.1;margin:22px 0}
.proof-panel p{margin:0 0 20px}
.proof-role{margin-bottom:24px;color:var(--muted)}
.proof-panel .eyebrow{font-size:12px}
.proof-controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:16px;align-items:center;padding:8px 12px;border-radius:999px;background:#fff;color:#000}
.proof-controls button{font:inherit;color:inherit;background:transparent;border:0;padding:8px 12px;cursor:pointer;border-radius:999px}
.proof-controls button:hover{background:var(--lime)}
@media(max-width:839.98px){.proof-stage{min-height:850px}.proof-content{min-height:850px;align-items:flex-end;padding-top:330px;padding-bottom:100px}.proof-image{height:430px}.proof-panel{width:100%;padding:28px}}
@media(prefers-reduced-motion:reduce){.proof-slide{transition:none}}

/* Clear section labels with rounded yellow direction arrows. */
.section-index{font-size:19px;letter-spacing:0;color:#000;line-height:1.35;align-items:center}
.section-index::before{content:'';display:block;flex:0 0 32px;width:32px;height:32px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%2016h21M18%207l9%209-9%209%22%20fill%3D%22none%22%20stroke%3D%22%23F6EA00%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.work .section-index{color:#fff}

.section-index{font-family:var(--sans);font-weight:400}

/* Compact homepage hero. */
.hero-shell {
  background: #000;
  color: #fff;
}

.hero {
  display: block;
  min-height: 0;
  padding: clamp(68px, 8.8vw, 127px) 0 clamp(102px, 10.8vw, 155px);
}

.hero h1 {
  max-width: none;
  margin: 0 0 22px;
  font-size: var(--hero-heading-size);
  color: #fff;
}

.hero-copy {
  max-width: 790px;
  margin: 0;
  color: #fff;
}

.hero .hero-heading-accent {
  color: inherit;
}

/* Connected toolkit concept: abstract icon badges, not vendor logos. */
.toolkit-section{background:var(--paper2);padding:100px 0;overflow:hidden}
.toolkit-heading{text-align:center;max-width:900px;margin:auto}
.toolkit-heading .section-index{justify-content:center}
.toolkit-heading h2{margin:28px 0}
.toolkit-heading p{max-width:760px;margin:0 auto}
.toolkit-diagram{margin:65px auto 0;max-width:1199.98px}
.toolkit-result{width:190px;height:190px;border-radius:50%;background:var(--lime);color:#000;margin:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px}
.toolkit-result strong{font-size:36px;font-weight:700}
.toolkit-result span{font-size:16px;line-height:1.35}
.toolkit-stem{height:45px;border-left:2px solid var(--ink);width:0;margin:auto}
.toolkit-row{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;margin:0;position:relative}
.toolkit-row::before{content:'';position:absolute;left:10%;right:10%;top:0;border-top:2px solid var(--ink)}
.toolkit-row li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:35px;text-align:center;font-size:19px;font-weight:400;min-width:0}
.toolkit-row li::before{content:'';position:absolute;top:0;height:35px;border-left:2px solid var(--ink)}
.toolkit-icon{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:32px;font-weight:700;background:#fff;color:#000;border:1px solid var(--ink)}
.toolkit-ai li:nth-child(even) .toolkit-icon{background:var(--ink);color:#fff}
.toolkit-apps .toolkit-icon{background:#fff;border:0}
.toolkit-apps li:nth-child(1) .toolkit-icon{color:#b7472a}
.toolkit-apps li:nth-child(2) .toolkit-icon{color:#185abd}
.toolkit-apps li:nth-child(3) .toolkit-icon{color:#eb1000}
.toolkit-apps li:nth-child(4) .toolkit-icon{color:#000}
.toolkit-apps li:nth-child(5) .toolkit-icon{color:#087f8c}
.toolkit-bridge{height:130px;position:relative;display:flex;align-items:center;justify-content:center}
.toolkit-bridge::before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:2px solid var(--ink)}
.toolkit-bridge span{position:relative;background:var(--ink);color:#fff;border-radius:999px;padding:14px 24px;font-size:16px;text-align:center}
.toolkit-row{padding-bottom:30px}
.toolkit-row::after{content:'';position:absolute;left:10%;right:10%;bottom:0;border-top:2px solid var(--ink)}
.toolkit-row li::after{content:'';height:30px;border-left:2px solid var(--ink);position:absolute;bottom:-30px}
@media(max-width:839.98px){.toolkit-section{padding:70px 0}.toolkit-row li{font-size:13px;gap:10px}.toolkit-icon{width:52px;height:52px;font-size:24px}.toolkit-result{width:150px;height:150px}.toolkit-result strong{font-size:30px}}
@media(max-width:599.98px){.toolkit-icon{width:42px;height:42px;font-size:20px}.toolkit-row li{font-size:11px}.toolkit-bridge span{font-size:13px;padding:12px 16px}.toolkit-heading .section-index{font-size:16px}}

@media (min-width: 840px) {
  #project-support .direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Quick support sits in its own section below the hero. */
.quick-support {
  background: #fff;
  padding-block: clamp(40px, 6vw, 100px);
}

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 30px);
  border-radius: 15px;
  background: #fff;
  color: #000;
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
}

.hero-tile h2 {
  margin: 0;
  font-size: var(--tile-heading-size);
  line-height: 1.12;
}

.hero-tile p {
  margin: 14px 0 24px;
}

.hero-tile-yellow {
  background: var(--lime);
}

.hero-tile-dark {
  background: #000;
  color: #fff;
}

.hero-tile-dark h2 {
  color: inherit;
}

.hero-tile .button {
  margin-top: auto;
  padding: 10px 16px;
  gap: 10px;
  font-size: 15px;
  border-color: currentColor;
}

.hero-tile-dark .button:hover {
  background: #fff;
  color: #000;
}

#campaign-ideas {
  scroll-margin-top: 20px;
}

@media (max-width: 1599.98px) {
  .wrap {
    max-width: 1024px;
  }
}

@media (max-width: 1199.98px) {
  .hero {
    padding-block: clamp(60px, 7.5vw, 83px) clamp(90px, 9.5vw, 105px);
  }
}

@media (width < 840px) {
  .hero-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 840px) and (max-width: 1199.98px) {
  .site-nav {
    gap: 18px;
  }

  .wordmark {
    min-width: 0;
  }

  .wordmark strong {
    font-size: 24px;
  }

  .nav-items {
    gap: 16px;
  }

  .nav-items a {
    font-size: 16px;
  }
}

@media (max-width: 599.98px) {
  .hero-tiles {
    grid-template-columns: 1fr;
  }
}

/* Shared rounded arrow for calls to action and slideshow navigation. */
:root {
  --button-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%2016h21M18%207l9%209-9%209%22%20fill%3D%22none%22%20stroke%3D%22%23F6EA00%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.button::after,
.nav-cta::after,
.proof-prev::after,
.proof-next::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  mask: var(--button-arrow) center / contain no-repeat;
  vertical-align: middle;
}

.button[href^="#"]::after,
.nav-cta[href^="#"]::after {
  transform: rotate(90deg);
}

.proof-prev::after {
  transform: rotate(180deg);
}

/* Black section arrows on warm-grey and yellow backgrounds. */
:is(.brand-direction-section, .toolkit-section, .what, .contact) .section-index::before {
  background: #000;
  mask: var(--button-arrow) center / contain no-repeat;
}

/* Reveal the toolkit in reading order as it enters the viewport. */
.toolkit-ai::before,
.toolkit-ai li::before {
  content: none;
}

.toolkit-ai li {
  padding-top: 0;
}

.toolkit-diagram.has-scroll-reveal .toolkit-stem {
  transition: opacity 350ms ease;
}

.toolkit-diagram.has-scroll-reveal:not(.show-connector) .toolkit-stem {
  opacity: 0;
}

.toolkit-diagram.has-scroll-reveal .toolkit-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
  transition-delay: var(--toolkit-delay, 0ms);
}

.toolkit-diagram.has-scroll-reveal .toolkit-step.is-visible {
  opacity: 1;
  transform: none;
}

.toolkit-diagram.has-scroll-reveal .toolkit-bridge:not(.is-visible),
.toolkit-diagram.has-scroll-reveal .toolkit-result:not(.is-visible) {
  transform: translateY(10px) scale(.94);
}

@media (prefers-reduced-motion: reduce) {
  .toolkit-diagram.has-scroll-reveal .toolkit-step,
  .toolkit-diagram.has-scroll-reveal .toolkit-step:not(.is-visible),
  .toolkit-diagram.has-scroll-reveal .toolkit-stem {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Homepage tiles meet edge to edge within the shared content grid. */
.hero-tiles,
.brand-direction-section > .direction-grid,
#werk > .work-grid {
  gap: 0;
}

.hero-tile,
.brand-direction-section .direction-card,
#werk .work-card {
  border-radius: 0;
}

.hero-tile {
  box-shadow: none;
}

.brand-direction-section {
  padding: 100px 0;
}

.brand-direction-section > .brand-direction {
  padding: 0;
}

#werk .work-card {
  border: 0;
  min-width: 0;
}

#werk .work-visual {
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 839.98px) {
  .brand-direction-section {
    padding: 70px 0;
  }
}

/* Responsive heading roles based on Revolut's H1, H2, H5 and H6 scale. */
:root {
  --hero-heading-size: 2.5rem;
  --section-heading-size: 2.25rem;
  --feature-heading-size: 1.5rem;
  --tile-heading-size: 1.375rem;
}

.heading-section,
.heading-project {
  font-size: var(--section-heading-size);
}

.service h3,
.work-body h3,
.direction-card h3,
.step-title {
  font-size: var(--tile-heading-size);
  line-height: 1.18;
}

.proof-panel h3 {
  font-size: var(--feature-heading-size);
  line-height: 1.2;
}

@media (min-width: 840px) {
  :root {
    --hero-heading-size: 5rem;
    --section-heading-size: 3.75rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --feature-heading-size: 2rem;
    --tile-heading-size: 1.5rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --hero-heading-size: 6rem;
    --section-heading-size: 5rem;
    --feature-heading-size: 2.5rem;
    --tile-heading-size: 2rem;
  }
}

@media (840px <= width < 1200px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Project overview: consistent 16:10 covers on a black canvas. */
.project-overview,
.project-overview .work,
.project-overview .work-card {
  background: #000;
  color: #fff;
}

.project-overview .heading-project,
.project-overview .work-body p {
  color: #fff;
}

.project-overview .work-card {
  border-radius: 0;
}

.project-overview .work-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.project-overview .work-card {
  min-height: 0;
  border: 0;
}

.project-overview .work-visual {
  height: auto;
  aspect-ratio: 16 / 10;
}

.project-overview .project-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-overview .work-body {
  padding-inline: 0;
}

@media (width < 600px) {
  .project-overview .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

/* Keep Work and Big Archive accessible in the compact menu. */
@media (840px <= width < 1600px) {
  .nav-items {
    gap: 18px;
  }
}

@media (840px <= width < 1200px) {
  .nav-items {
    gap: 12px;
  }

  .nav-items a {
    font-size: 15px;
  }
}

@media (width < 840px) {
  .nav-items a.nav-work,
  .nav-items a.nav-archive {
    display: inline;
    white-space: nowrap;
  }

  .site-nav {
    height: auto;
    min-height: 80px;
    padding-block: 12px;
    gap: 8px 16px;
    flex-wrap: wrap;
  }

  .site-nav .wordmark strong {
    font-size: 23px;
  }

  .nav-items {
    gap: 14px;
  }

  .nav-items a {
    font-size: 14px;
  }
}

/* Square, uncropped artwork on Work and in the homepage selection. */
#werk .new-work-grid .work-visual,
.project-overview .new-work-grid .work-visual {
  height: auto;
  aspect-ratio: 1;
}

.new-work-grid .project-cover-image {
  object-fit: contain;
}

.project-overview .new-work-grid .project-cover-image {
  object-fit: contain;
}

@media (width >= 840px) {
  #werk > .new-work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#werk .section-top {
  border-bottom: 0;
}

.hero-tile-ai-draft {
  background: var(--paper2);
}