.hero{padding:4rem 0 2rem;& .container{gap:var(--space-4)}}.hero__heading{color:var(--black);font-size:clamp(2.5rem,6vw,6rem);line-height:1;font-family:var(--heading-font);grid-column:1/-1}.hero__overview{grid-column:1/-1;font-size:1.125rem}.hero__info{grid-column:1/-1;margin:0;padding:0;list-style:none;& li{padding-block-end:var(--space-2)}}@media (width>=800px){.hero{padding:4rem 0}.hero__heading{grid-column:2/-1}.hero__overview{grid-column:2/8}.hero__info{grid-column:9/-2}}@media (width>=1432px){.hero{padding:4rem 0 8rem;& .container{gap:var(--space-10) var(--space-4)}}.hero__overview{font-size:1.125rem}}.article{&>.container>*{grid-column:1/-1}& h2{font-family:var(--heading-font);margin-block:clamp(1.5rem,4vw,3rem) clamp(.75rem,2vw,1.5rem);font-size:2.25rem;line-height:1.2}& h3{margin-block-end:.5rem;font-size:1.25rem;font-weight:700}& p{margin-block-end:var(--space-4)}& a{color:var(--text-color);text-underline-offset:var(--space-1);transition:var(--color-transition), text-underline-offset .2s ease-in-out;text-decoration-style:wavy;&:hover,&:focus{text-underline-offset:.4rem;color:var(--neutral-2)}}}@media (width>=800px){.article>.container>:not(.feature-image):not(.image-block):not(blockquote):not(.case-study-nav){grid-column:2/-2}.article{& p{text-wrap:balance;max-width:90ch}}}@media (width>=1432px){.article p:not(blockquote p),.article ul li{font-size:1.125rem;line-height:1.6875rem}.article{& h2{font-size:3rem}& h3{font-size:1.5rem}}}.project-section{padding-block:clamp(2rem,5vw,3.75rem)}.feature{& p:last-of-type{margin-block-end:0}& h3{color:var(--neutral-3);background:var(--tan-2);border-radius:var(--radius-sm);margin-block-end:var(--space-2);padding:.5rem 1rem;&:has(img){column-gap:var(--space-2);display:flex;& img{width:1.5rem}}}& h4{color:var(--neutral-3);margin-block-start:var(--space-4);margin-block-end:var(--space-3);font-size:1.2rem;font-weight:600}&+&{margin-block-start:clamp(2.5rem,6vw,5rem)}& .grid__col p:first-child{margin-block-end:var(--space-3)}}.process{gap:var(--space-6) var(--space-4);counter-reset:process;padding:0;list-style:none;display:grid}.process__item{counter-increment:process;& h3{align-items:center;column-gap:var(--space-2);margin-block-end:var(--space-3);font-size:1.2rem;font-weight:600;display:flex}}.process__item h3:before{content:counter(process, lower-roman) ".";text-align:center;background-position:50%;background-repeat:no-repeat;background-size:contain;place-items:center;width:2.25rem;height:2.25rem;font-style:italic;font-weight:400;display:grid}.process__item:first-child h3:before,.process__item:nth-child(4) h3:before,.process__item:nth-child(7) h3:before{background-image:url(/assets/images/circle-1.svg)}.process__item:nth-child(2) h3:before,.process__item:nth-child(5) h3:before{background-image:url(/assets/images/circle-2.svg)}.process__item:nth-child(3) h3:before,.process__item:nth-child(6) h3:before{background-image:url(/assets/images/circle-3.svg)}@media (width>=800px){.feature{margin-block:clamp(2rem,4vw,3rem);& h3{margin-block-end:var(--space-4)}& h4{margin-block-start:clamp(1.5rem,4vw,2.5rem);font-size:1.25rem;&+.image-block{margin-block-start:var(--space-6)}}&+&{margin-block-start:clamp(3rem,8vw,6rem)}}}@media (width>=1432px){.goals,.process{grid-template-columns:repeat(2,1fr)}.process--1-col{grid-template-columns:1fr}}@media (width<=799px){.img-shorter-mobile{object-fit:contain;width:auto;max-width:100%;max-height:250px;margin-inline:auto;display:block}}.feature-image{border-radius:var(--radius-lg);background-repeat:no-repeat;background-size:cover;background:var(--bg-other);grid-column:1/-1;justify-content:center;margin-block-start:clamp(1.5rem,4vw,3rem);padding:2rem;display:flex;& img{filter:drop-shadow(2px 10px 8px #00000080)}}.feature-image--ipac-dashboard{background-image:var(--bg-ipac-dashboard)}.feature-image--wide{padding:0;overflow:hidden}.feature-image--other{background:var(--bg-other)}.feature-image--s1-design-portal{background-image:var(--bg-s1-design-portal)}.feature-image--carsgenius{background-image:var(--bg-carsgenius)}.image-block{padding:var(--space-2);justify-content:center;gap:var(--space-4);background:linear-gradient(#48484800 75%,#484848 100%),#48484899;border-radius:1rem;justify-items:center;margin-block:clamp(2rem,6vw,5rem);display:grid;&:has(>figure:nth-child(n+3)){background:linear-gradient(#48484800 75%,#484848 100%),#48484899}&.image-block--general{background:var(--bg-other);padding:var(--space-4);& figcaption{color:var(--text-color)}}& figure{max-width:800px}& img{border-radius:var(--radius-sm);min-width:0;margin-inline:auto}& figcaption{color:var(--white);text-align:center;text-wrap:balance;padding-block-start:var(--space-2);font-size:.875rem;font-style:italic}}@media (width<=1432px){figure.has-mobile img:last-of-type{margin-block-start:1rem}}@media (width>=800px){.image-block{padding:var(--space-8);background:linear-gradient(#48484800 75%,#484848 100%),#48484840;&.image-block--general{padding:var(--space-8)}&:has(figcaption){padding-block-end:1rem}&:has(>figure:nth-child(n+3)){background:linear-gradient(#48484800 75%,#484848 100%),#48484899}}}@media (width>=1432px){.image-block{gap:var(--space-10);grid-template-columns:repeat(2,1fr);&.image-block--general{margin-block:var(--space-10)}&.image-block--full-width{grid-template-columns:1fr}h3+&{margin-block-start:var(--space-10)}&:not(.image-block--general){margin-inline:-7.35rem}&:has(figure:only-child),& figure:only-child,&:not(.image-block--2-col) figure:nth-child(3){grid-column:1/-1}& figure.has-mobile{column-gap:var(--space-5);grid-template-columns:auto 1fr;align-items:end;max-width:100%;display:grid;& figcaption{grid-area:2/1/auto/-1}}}}.checklist{margin:var(--space-4) 0;padding:0;list-style:none;.feature &{margin-block-end:0}h4+&{margin-block-start:0}& li{column-gap:var(--space-3);padding-block-end:var(--space-2);display:flex;position:relative;&:before{content:"";order:-1;width:1.875rem;min-width:1.875rem;height:1.875rem}}}.checklist--solution,.checklist--problem{gap:var(--space-4);flex-direction:column;display:flex;& li{padding:var(--space-4);border-radius:var(--radius-default);align-items:center;min-height:5.5rem;font-weight:500;.checklist--solution &{background-color:#dcecda}.checklist--problem &{background-color:#f2dede}}}.checklist--solution{& li:before{background:url(/assets/images/checkmark-icon.svg) 50%/contain no-repeat}}.checklist--problem{& li:before{background:url(/assets/images/problem-icon.svg) 50%/contain no-repeat}}.checklist--arrow{& li:before{filter:invert();background:url(/assets/images/arrow-circle.svg) 50%/contain no-repeat;translate:0 -.1rem;rotate:270deg}}@media (width>=800px){.checklist{& li{padding-block-end:var(--space-4)}}}.work-list{margin-block-start:var(--space-8);margin-inline:calc(var(--page-margin) * -1);background-color:#dfebea;padding:1.5rem;& .container{row-gap:var(--space-4)}}.work-list__heading{font-family:var(--heading-font);text-align:center;grid-column:1/-1;font-size:2.25rem;line-height:1.2}.work-list__list{column-gap:var(--gutter);display:grid}.work-list__item{row-gap:var(--space-4);scroll-snap-align:center;flex-direction:column;text-decoration:none;display:flex;&:hover,&:focus{outline:none}&:last-of-type{margin-block-end:0}&.work-list__item--private{pointer-events:none;& .work-list__image{position:relative;&:before{content:"Contact me for a private viewing";z-index:2;border-radius:var(--radius-default);text-align:center;color:var(--white);background:#000000bf;justify-content:center;align-items:center;padding:1rem;font-size:1.125rem;font-style:italic;display:flex;position:absolute;inset:0}}& .work-list__info{opacity:.35}}}.work-list__image{background-color:var(--black);border-radius:var(--radius-default);justify-content:center;align-items:center;height:8rem;transition:all .15s;display:flex;overflow:hidden;& img{object-fit:cover;width:100%;height:100%}}.work-list__item:hover .work-list__image,.work-list__item:focus .work-list__image{opacity:.8;scale:.95}.work-list__title{column-gap:var(--space-3);color:var(--text-color);transition:var(--color-transition);margin-bottom:.3rem;font-size:1rem;font-weight:600;line-height:1.2;display:flex;position:relative;&:after{content:"";filter:contrast(0);background:url(/assets/images/arrow-circle.svg) 50%/contain no-repeat;min-width:1.875rem;height:1.875rem;position:relative;top:-.25rem;rotate:270deg}}.work-list__categories{color:var(--neutral-2);font-size:1rem}@media (width<=799px){.work-list__carousel{grid-column:1/-1;position:relative;&:after{content:"";pointer-events:none;background:linear-gradient(90deg,#13131300 0%,#dfebea 100%);width:10rem;height:100%;position:absolute;top:0;right:-1px}}.work-list__list{scroll-snap-type:x mandatory;scroll-snap-align:start;grid-auto-columns:13rem;grid-auto-flow:column;padding-block-end:var(--space-4);padding-inline-end:var(--space-8);overflow-x:scroll}}@media (width>=800px){.work-list{margin-top:100px;padding:2.5rem 1rem}.work-list__carousel{grid-column:1/-1}@supports (display:contents){.work-list__carousel{display:contents}}.work-list__list{grid-column:1/-1;grid-template-columns:subgrid}.work-list__item{grid-column:span 4}.work-list__title{font-size:1.25rem}.work-list__image{height:15rem}}.case-study-nav{display:none}@media (width>=800px){.case-study-nav{z-index:10;-webkit-backdrop-filter:blur(10px);background:#fdf7f2e6;display:block;position:sticky;top:0}.case-study-nav__inner{justify-content:center;align-items:center;padding-block:0;display:flex}.case-study-nav__list{scrollbar-width:none;justify-content:center;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto;&::-webkit-scrollbar{display:none}}.case-study-nav__item{flex-shrink:0}.case-study-nav__link{color:var(--neutral-2);white-space:nowrap;align-items:center;padding:.5rem 1.25rem;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s;display:flex;&:before{content:"";background-color:var(--hover-color);border-radius:50%;block-size:.3125rem;inline-size:0;transition:all .15s ease-in-out;display:inline-block}&:hover,&.is-active{color:var(--neutral-3);font-weight:700;&:before{inline-size:.3125rem;margin-inline-end:.5rem}}}.case-study-nav__progress-bar{padding-block:0}.case-study-nav__progress-track{background:var(--tan-2);height:2px}.case-study-nav__progress-fill{background:var(--neutral-3);width:0%;height:100%;transition:width .1s linear}}@media (width>=1432px){.case-study-nav__link{font-size:15px}}#password-gate{z-index:9999;background:var(--bg-color);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gate-inner{align-items:center;gap:var(--space-6);padding:var(--space-8);text-align:center;flex-direction:column;width:100%;max-width:28rem;display:flex}.gate-title{font-family:var(--heading-font);letter-spacing:.05em;color:var(--text-color);font-size:3rem;line-height:1}.gate-subtitle{font-family:var(--body-font);color:var(--neutral-2);font-size:.9rem;line-height:1.5}#gate-form{gap:var(--space-4);flex-direction:column;width:100%;display:flex}#gate-input{border:1px solid var(--neutral-3);border-radius:var(--radius-default);color:var(--text-color);font-family:var(--body-font);padding:var(--space-4) var(--space-5);box-sizing:border-box;background:0 0;outline:none;width:100%;font-size:1rem;transition:border-color .2s}#gate-input::placeholder{color:var(--neutral-2)}#gate-input:focus{border-color:var(--primary)}.gate-submit{background:var(--primary);border-radius:var(--radius-default);color:var(--black);cursor:pointer;font-family:var(--heading-font);letter-spacing:.05em;padding:var(--space-4) var(--space-5);border:none;width:100%;font-size:1.25rem;transition:opacity .2s}.gate-submit:hover{opacity:.85}#gate-error{color:#ff6b6b;font-family:var(--body-font);font-size:.85rem}.theme-light #gate-input{border-color:var(--neutral-4);color:var(--neutral-3)}.theme-light #gate-input:focus{border-color:var(--primary)}
