@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--navy:#101D35;--warm:#F6F2EA;--white:#fff;--sand:#DBBAA5;--muted:#606672;--line:#D7D9DD;--ink:#101827;--shell:1320px;font-family:Manrope,Arial,sans-serif;color:var(--navy)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--warm)}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
p,h1,h2,h3{margin:0}
p{line-height:1.65}
h1,h2,h3{letter-spacing:-.055em;line-height:1.12}
h1{font-size:clamp(42px,5vw,70px);font-weight:500}
h2{font-size:clamp(38px,4vw,56px);font-weight:500}
h3{font-size:clamp(26px,2.6vw,38px);font-weight:500}
.shell{width:min(calc(100% - 96px),var(--shell));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow,.stage-index{font-size:12px;font-weight:700;letter-spacing:.13em;line-height:1.5}
.preview-bar{padding:7px 20px;text-align:center;background:var(--sand);color:var(--navy);font-size:11px}
:focus-visible{outline:3px solid #C78954;outline-offset:4px}
.button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:12px 24px;border:1px solid transparent;border-radius:999px;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button span{font-size:18px;line-height:1}
.button--sand{background:var(--sand);color:var(--navy)}
.button--sand:hover{background:#f0d0ad}
.button--outline{border-color:var(--sand);color:var(--white);background:transparent}
.button--outline:hover{background:#24335a}
.button--navy{background:var(--navy);color:var(--white)}
.button--navy:hover{background:#253465}
.button:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Header and restrained mobile menu */
.site-header{background:var(--warm);border-bottom:1px solid var(--line);position:relative;z-index:10}
.site-header--dark{background:var(--navy);border-color:rgba(255,255,255,.18);color:var(--white)}
.header-inner{min-height:94px;display:flex;align-items:center;gap:40px}
.brand{width:68px;height:68px;display:grid;place-items:center;flex:none}
.brand img{width:62px;height:62px;object-fit:contain}
.site-header--dark .brand img{mix-blend-mode:lighten}
.site-header nav{display:flex;align-items:center;gap:36px;margin-left:auto}
.site-header nav a{font-size:13px;font-weight:600;text-decoration:none}
.site-header nav a:hover,.site-footer a:hover{text-decoration:underline;text-underline-offset:5px}
.button--header{background:var(--navy);color:var(--white);font-size:12px;min-height:48px;padding:10px 20px}
.site-header--dark .button--header{background:var(--sand);color:var(--navy)}
.menu-toggle{display:none}

/* Hero follows the supplied navy screenshot */
.hero-wrap{background:var(--navy);color:var(--white)}
.home-hero{padding:clamp(20px,3vw,42px) 0 clamp(52px,5vw,75px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(32px,4.4vw,68px);align-items:center}
.hero-copy{min-width:0}
.hero-copy .eyebrow{color:var(--sand);font-size:12px}
.hero-copy h1{max-width:560px;margin-top:20px;font-size:clamp(52px,4.35vw,66px);line-height:1.08}
.hero-description{max-width:500px;margin-top:20px;color:#E5E9F2;font-size:16px;line-height:1.58}
.hero-trust{max-width:510px;margin-top:17px;color:#D7DDEA;font-size:13px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.hero-image{width:100%;height:clamp(450px,39vw,560px);min-height:0;border-radius:6px;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Shared media and preview placeholders */
.media{display:block;position:relative;width:100%;min-height:180px;overflow:hidden;padding:0;border:0;background:#EBE9E5;text-align:left}
.media img{width:100%;height:100%;object-fit:cover}
.media--placeholder{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:25px;background:linear-gradient(145deg,#EEECE8,#E3E3E3);border:1px solid #D0D2D4}
.media--placeholder:before{content:'';position:absolute;inset:16px;border:1px solid #C9CDD2;pointer-events:none}
.media--placeholder span,.media--placeholder small{position:relative;z-index:1}
.media--placeholder span{font-size:16px;font-weight:700;line-height:1.25;max-width:260px}
.media--placeholder small{font-size:11px;color:var(--muted)}
.media--image[data-zoom-src]:hover img{transform:none}

/* Short homepage */
.work-section{padding:clamp(90px,9vw,145px) 0;background:var(--warm);scroll-margin-top:40px}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);gap:16px 60px;align-items:end;padding-bottom:45px;border-bottom:1px solid var(--line)}
.section-heading .eyebrow{grid-column:1/-1;color:var(--muted)}
.section-heading p:last-child{color:var(--muted);font-size:17px;max-width:410px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 24px;margin-top:38px}
.project-card{min-width:0;text-decoration:none;display:block}
.project-card--3{grid-column:1/-1}
.project-card__image{height:clamp(310px,31vw,440px);overflow:hidden;background:#E9E7E2}
.project-card--3 .project-card__image{height:clamp(360px,39vw,510px)}
.project-card__image .media{height:100%;min-height:0}
.project-card__image--split{display:grid;grid-template-columns:38% 62%;gap:2px}
.project-card__source img{object-fit:contain;background:var(--white)}
.project-card__main img{object-fit:cover}
.project-card__meta{display:flex;justify-content:space-between;gap:15px;padding-top:21px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em}
.project-card__bottom{display:flex;justify-content:space-between;gap:20px;margin-top:13px}
.project-card h3{font-size:clamp(28px,2.5vw,38px);max-width:650px}
.project-card p{max-width:530px;margin-top:12px;color:var(--muted);font-size:15px}
.project-card__arrow{display:grid;place-items:center;width:45px;height:45px;flex:none;border:1px solid var(--navy);border-radius:50%;font-size:22px}
.project-card__cta{display:inline-block;margin-top:20px;border-bottom:1px solid currentColor;padding-bottom:4px;font-size:12px;font-weight:700}
@media(hover:hover) and (pointer:fine){.project-card img,.gallery-item img{filter:grayscale(100%);transition:filter .3s ease}.project-card:hover img,.project-card:focus-within img,.gallery-item:hover img,.gallery-item:focus-within img{filter:grayscale(0);transform:none}}
.experience-section{padding:clamp(80px,8vw,130px) 0;background:var(--white);scroll-margin-top:40px}
.experience-grid{display:grid;grid-template-columns:26% 1fr;gap:50px}
.experience-grid .eyebrow{color:var(--muted);padding-top:13px}
.experience-grid h2{max-width:830px}
.experience-grid p:not(.eyebrow){max-width:860px;margin-top:32px;color:var(--muted);font-size:18px}
.experience-line{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;font-weight:700}

/* Contact, available from every page */
.contact-section{padding:clamp(80px,8vw,125px) 0;background:var(--warm);scroll-margin-top:40px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.8fr);gap:clamp(50px,7vw,110px)}
.contact-grid .eyebrow{color:var(--muted);margin-bottom:26px}
.contact-grid h2{max-width:720px}
.contact-grid>div>p:not(.eyebrow){max-width:620px;margin-top:28px;color:var(--muted);font-size:17px}
.contact-email{display:inline-block;margin-top:28px;font-size:20px;font-weight:700;text-decoration:none;border-bottom:1px solid}
.contact-pending{font-size:14px!important;border-left:3px solid var(--sand);padding-left:16px}
.contact-form{display:grid;gap:19px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contact-form label{display:grid;gap:9px;font-size:12px;font-weight:700;letter-spacing:.025em}
.contact-form label span{font-weight:400;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:15px 16px;border:1px solid #BCC0C7;border-radius:4px;background:var(--white);color:var(--navy);font-size:15px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--navy)}
.contact-form .button{justify-self:start}
.form-note{font-size:12px;color:var(--muted)}
.site-footer{background:var(--navy);color:var(--white)}
.site-footer .shell{display:flex;align-items:center;gap:28px;min-height:92px;font-size:12px}
.site-footer a{text-decoration:none}
.footer-brand{font-size:18px;font-weight:800;margin-right:auto}
.site-footer small{color:#C3CBDE}

/* Shared case pages */
.case-intro{padding:52px 0 44px}
.back-link{display:inline-flex;gap:12px;text-decoration:none;font-size:13px;font-weight:700;margin-bottom:75px}
.back-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.case-intro .eyebrow{color:var(--muted);margin-bottom:23px}
.case-intro h1{max-width:1050px}
.case-lead{max-width:820px;margin-top:28px;color:var(--muted);font-size:19px}
.case-hero{padding-bottom:85px}
.case-hero .media{height:clamp(400px,55vw,700px);border-radius:6px}
.case-hero .media img{object-fit:cover;background:var(--white)}
.case-hero--drawing .media img{object-fit:cover}
.case-stage{padding:105px 0;background:var(--white)}
.case-stage--warm{background:var(--warm)}
.case-stage__heading{display:grid;grid-template-columns:26% 1fr;gap:28px 55px;margin-bottom:48px}
.stage-index{padding-top:14px;color:var(--muted)}
.case-stage__heading h2{max-width:950px}
.case-stage__heading p{max-width:760px;margin-top:24px;color:var(--muted);font-size:17px}
.case-stage__visuals{margin-left:calc(26% + 55px)}
.case-stage__visuals>.media{height:500px}
.case-stage__visuals .media img{object-fit:cover;background:var(--white)}
.case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-pair .media{height:360px}
.case-pair--catalog:not(:has(.media:nth-child(2))){grid-template-columns:1fr}
.case-pair--catalog:not(:has(.media:nth-child(2))) .media{height:470px}
.case-pair--drawing{grid-template-columns:1.6fr .4fr}
.case-pair--drawing .media{height:420px}
.case-website{display:grid;gap:18px}
.case-website>.media{height:470px}
.case-website__products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.case-website__products .media{height:220px}
.case-video{max-width:760px}
.case-video video,.video-placeholder{display:block;width:100%;height:430px;object-fit:contain;background:var(--navy);color:var(--white)}
.video-placeholder{background:linear-gradient(145deg,#DADDE4,#CACFDB);color:var(--navy)}
.text-link{display:inline-block;margin-top:22px;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid;padding-bottom:4px}
.detail-strip{display:flex;flex-wrap:wrap;gap:10px}
.detail-strip span{padding:12px 18px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.case-note{max-width:680px;padding:26px;border-left:3px solid var(--sand);background:var(--white);font-size:17px}
.published-use{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.published-use .media{height:340px}
.published-use p{margin-top:15px;color:var(--muted)}
.case-result{display:grid;grid-template-columns:26% 1fr;gap:55px;padding:80px 0;border-top:1px solid var(--line)}
.case-result .eyebrow{color:var(--muted)}
.case-result p{font-size:clamp(25px,3vw,42px);line-height:1.25;letter-spacing:-.04em}
.case-cta{padding:75px 0;background:var(--navy);color:var(--white)}
.case-cta .shell{display:flex;align-items:center;justify-content:space-between;gap:35px}
.case-cta h2{max-width:850px;font-size:clamp(31px,3.5vw,52px)}
.case-cta .button{flex:none}
.project-navigation{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;padding-top:45px;padding-bottom:55px}
.project-navigation a{display:flex;flex-direction:column;gap:7px;text-decoration:none;border-top:1px solid var(--line);padding-top:18px;font-size:15px;font-weight:700}
.project-navigation a span{font-size:11px;color:var(--muted);font-weight:600}
.project-navigation a:hover{text-decoration:underline;text-underline-offset:4px}

/* Selected gallery */
.selected-section{padding:0 0 105px}
.selected-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 22px}
.gallery-item{min-width:0}
.gallery-item__media{height:390px;overflow:hidden}
.gallery-item__media .media{height:100%;min-height:0}
.gallery-item__caption{display:flex;justify-content:space-between;gap:15px;padding-top:17px;border-top:1px solid var(--line);margin-top:18px}
.gallery-item__caption span{font-size:12px;color:var(--muted)}
.gallery-item__caption h2{margin-top:9px;font-size:27px}

/* Full-color image viewer */
.lightbox{border:0;padding:20px;max-width:min(94vw,1400px);max-height:94vh;background:var(--white);color:var(--navy);box-shadow:0 20px 100px #0007}
.lightbox::backdrop{background:#07112dcc}
.lightbox img{max-height:calc(94vh - 75px);max-width:100%;width:auto;margin:auto;object-fit:contain;filter:none!important;transform:none!important}
.lightbox p{text-align:center;padding-top:12px;font-size:12px}
.lightbox__close{position:absolute;top:7px;right:8px;width:36px;height:36px;border:0;background:var(--white);font-size:26px}

@media(max-width:1050px){.shell{width:min(calc(100% - 60px),var(--shell))}.site-header nav{gap:21px}.hero-grid{grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:32px}.hero-copy h1{font-size:clamp(44px,5vw,58px)}.hero-image{height:480px}.case-stage__visuals{margin-left:0}.case-stage__heading{grid-template-columns:22% 1fr}.experience-grid{grid-template-columns:22% 1fr}}
@media(max-width:800px){.shell{width:min(calc(100% - 40px),var(--shell))}.header-inner{min-height:76px}.brand,.brand img{width:52px;height:52px}.site-header nav{gap:16px}.site-header nav a{font-size:12px}.button--header{display:none}.hero-grid{grid-template-columns:1fr}.hero-copy h1{max-width:690px;font-size:clamp(43px,7vw,60px)}.hero-image{height:460px}.home-hero{padding-top:45px}.section-heading{grid-template-columns:1fr}.section-heading p:last-child{max-width:650px}.project-grid{gap:50px 18px}.project-card__image{height:300px}.project-card--3 .project-card__image{height:360px}.project-card h3{font-size:28px}.experience-grid{grid-template-columns:1fr;gap:15px}.experience-grid .eyebrow{padding-top:0}.contact-grid{grid-template-columns:1fr;gap:55px}.case-stage__heading{grid-template-columns:1fr;gap:10px}.stage-index{padding-top:0}.case-pair--drawing{grid-template-columns:1.3fr .7fr}.case-result{grid-template-columns:1fr;gap:20px}.case-hero{padding-bottom:55px}}
@media(max-width:600px){.shell{width:min(calc(100% - 32px),var(--shell))}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:18px 16px 22px;background:var(--warm);color:var(--navy);border-bottom:1px solid var(--line);box-shadow:0 15px 25px #101D351c}.site-header--dark nav{background:var(--navy);color:var(--white);border-color:#ffffff30}.site-header nav.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.menu-toggle{display:grid;gap:6px;place-content:center;width:42px;height:42px;margin-left:auto;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit}.menu-toggle span{display:block;width:18px;height:1px;background:currentColor}.header-inner{min-height:72px}.hero-copy .eyebrow{font-size:11px}.home-hero{padding:42px 0 60px}.hero-copy h1{margin-top:20px;font-size:clamp(38px,10.5vw,44px)}.hero-description{margin-top:23px;font-size:16px}.hero-trust{margin-top:20px;font-size:12px}.hero-actions{margin-top:26px}.hero-actions .button{flex:1;gap:8px;min-height:51px;padding:10px 12px;font-size:11px}.hero-image{height:330px}.work-section,.experience-section,.contact-section{padding:75px 0}.section-heading{padding-bottom:30px}.section-heading p:last-child{font-size:16px}.project-grid{grid-template-columns:1fr;gap:46px}.project-card--3{grid-column:auto}.project-card__image,.project-card--3 .project-card__image{height:300px}.project-card__meta{font-size:10px}.project-card h3{font-size:27px}.project-card p{font-size:14px}.experience-grid p:not(.eyebrow){font-size:16px}.experience-line{font-size:12px}.form-row{grid-template-columns:1fr}.site-footer .shell{min-height:110px;flex-wrap:wrap;gap:10px 20px;padding-top:22px;padding-bottom:22px}.site-footer span{order:3;width:100%}.case-intro{padding-top:28px}.back-link{margin-bottom:56px}.case-intro h1{font-size:clamp(38px,10vw,44px)}.case-lead{font-size:16px}.case-hero .media{height:320px}.case-stage{padding:70px 0}.case-stage__heading{margin-bottom:30px}.case-stage__heading p{font-size:16px}.case-pair,.case-pair--drawing{grid-template-columns:1fr}.case-pair .media,.case-pair--drawing .media,.case-pair--catalog:not(:has(.media:nth-child(2))) .media{height:300px}.case-website>.media{height:300px}.case-website__products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.case-website__products .media{height:170px}.case-video video,.video-placeholder{height:300px}.case-cta .shell{flex-direction:column;align-items:flex-start}.case-result{padding:60px 0}.project-navigation{grid-template-columns:1fr 1fr;gap:25px;padding-top:30px}.project-navigation>a:first-child{grid-column:1/-1}.project-navigation a{font-size:12px}.selected-grid{grid-template-columns:1fr;gap:42px}.gallery-item__media{height:300px}}
@media(max-width:800px),(hover:none),(pointer:coarse){.project-card img,.gallery-item img{filter:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.project-card:hover img,.project-card:focus-within img,.gallery-item:hover img,.gallery-item:focus-within img,.button:hover{transform:none}}

/* Full-screen entry and a single 4:3 visual format throughout the portfolio. */
.site-header{border:0}
.header-inner{min-height:116px}
.brand{width:102px;height:102px}
.brand img{width:93px;height:93px}
.hero-wrap{background:var(--navy)}
.home-hero{min-height:calc(100svh - 116px);display:flex;align-items:center;padding:24px 0 42px}
.home-hero>.shell{width:min(calc(100% - 96px),var(--shell))}
.hero-image{aspect-ratio:4/3;height:auto;min-height:0}
.project-grid{gap:64px 24px}
.project-card--3{grid-column:auto}
.project-card__image,.project-card--3 .project-card__image{aspect-ratio:4/3;height:auto}
.project-card__image .media{height:100%;min-height:0}
.project-card__main img{object-fit:cover}
.case-hero .media,.case-stage__visuals>.media,.case-pair .media,.case-pair--catalog:not(:has(.media:nth-child(2))) .media,.case-website>.media,.case-website__products .media,.published-use .media,.gallery-item__media,.video-work__frame,.case-video video,.case-video .video-placeholder{aspect-ratio:4/3;height:auto;min-height:0}
.case-hero .media{max-width:1100;margin-inline:auto}
.case-website__products{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-item__media .media,.video-work__frame .media{height:100%;min-height:0}
.video-work__frame{overflow:hidden;background:#e8e7e4}
.video-work__frame video{display:block;width:100%;height:100%;object-fit:contain;background:var(--navy)}
.video-work .gallery-item__caption p{margin-top:12px;color:var(--muted);font-size:15px}
.lightbox img{aspect-ratio:4/3;width:min(80vw,1060px);height:min(60vw,795px);object-fit:contain}

@media(max-width:1050px){.home-hero>.shell{width:min(calc(100% - 60px),var(--shell))}.hero-image{height:auto}}
@media(max-width:800px){.header-inner{min-height:104px}.brand,.brand img{width:78px;height:78px}.home-hero{min-height:calc(100svh - 104px)}.home-hero>.shell{width:min(calc(100% - 40px),var(--shell))}.hero-image{height:auto}.project-card__image,.project-card--3 .project-card__image{height:auto}}
@media(max-width:600px){.header-inner{min-height:94px}.home-hero{min-height:calc(100svh - 94px);padding:35px 0 54px}.home-hero>.shell{width:min(calc(100% - 32px),var(--shell))}.hero-image{height:auto}.project-card__image,.project-card--3 .project-card__image{height:auto}.case-hero .media,.case-pair .media,.case-pair--drawing .media,.case-pair--catalog:not(:has(.media:nth-child(2))) .media,.case-website>.media,.case-website__products .media,.case-video video,.case-video .video-placeholder,.gallery-item__media{height:auto}.case-website__products{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Align the hero copy with the image and keep the supplied transparent mark. */
.site-header--dark .brand img{mix-blend-mode:normal}
.site-header:not(.site-header--dark) .brand{background:var(--navy);border-radius:50%;overflow:hidden}
.site-header:not(.site-header--dark) .brand img{width:74px;height:84px}
.brand img{width:102px;height:102px;object-fit:contain}
.hero-grid{align-items:stretch}
.hero-copy{display:flex;flex-direction:column;align-self:stretch}
.hero-copy .eyebrow{margin-top:0}
.hero-description{font-size:18px;line-height:1.55}
.hero-trust{font-size:15px;line-height:1.5}
.hero-actions{margin-top:auto;padding-top:26px}
.hero-image{align-self:start}
.header-socials{display:flex;align-items:center;gap:18px;padding-left:22px;border-left:1px solid currentColor}
.footer-brand{display:grid;place-items:center;width:82px;height:92px;flex:none;margin-right:auto}
.footer-brand img{display:block;width:72px;height:88px;object-fit:contain}
.footer-socials{display:flex;align-items:center;gap:20px}
.site-footer .shell{min-height:120px}
@media(hover:hover) and (pointer:fine){.hero-image img{filter:grayscale(100%);transition:filter .3s ease}.hero-image:hover img{filter:grayscale(0)}}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero-copy{display:block}.hero-actions{margin-top:25px;padding-top:0}.hero-description{font-size:17px}.hero-trust{font-size:14px}.hero-image{width:100%}}
@media(max-width:800px){.brand img{width:78px;height:78px}.site-header:not(.site-header--dark) .brand img{width:57px;height:64px}.header-socials{gap:12px;padding-left:12px}.site-header nav{gap:14px}.site-header nav a{font-size:11px}}
@media(max-width:600px){.header-socials{margin-top:6px;padding-left:0;border:0;gap:22px}.site-header nav.is-open{align-items:flex-start}.hero-description{font-size:17px}.hero-trust{font-size:14px}.site-footer .shell{gap:16px 20px}.footer-brand{width:70px;height:82px}.footer-brand img{width:64px;height:78px}.footer-socials{order:4;width:100%;gap:24px}}
@media(max-width:800px),(hover:none),(pointer:coarse){.hero-image img{filter:none!important}}
@media(prefers-reduced-motion:reduce){.hero-image img{transition-duration:.01ms!important}}

/* Project media, brand assets and interactive campaigns. */
.site-header:not(.site-header--dark) .brand{background:transparent;border-radius:0;overflow:visible}
.site-header .brand{width:78px;height:78px}
.site-header--dark .brand img{width:51px;height:51px}
.site-header:not(.site-header--dark) .brand img{width:76px;height:76px}
.header-socials a,.footer-socials a,.video-social__links a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.header-socials img,.footer-socials img,.video-social__links img{display:block;width:22px;height:22px;object-fit:contain}
.header-socials a:hover,.footer-socials a:hover,.video-social__links a:hover{opacity:.65}
.footer-brand{width:45px;height:52px}
.footer-brand img{width:36px;height:44px}
.case-stage__visuals{margin-left:auto;margin-right:auto;width:min(100%,1120px)}
.case-stage__heading{width:min(100%,1120px);margin:0 auto 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px 48px;align-items:start}
.case-stage__heading .stage-index{grid-column:1/-1;padding:0}
.case-stage__heading>div{display:contents}
.case-stage__heading h2{grid-column:1;margin:0}
.case-stage__heading p{grid-column:2;margin:5px 0 0;max-width:520px}
.case-pair--foundation .media{aspect-ratio:4/3}
.case-catalog{width:min(100%,860px);margin-inline:auto}
.case-catalog .media{aspect-ratio:4/3}
.case-website>.media{aspect-ratio:4/3}
.case-website__products{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-website__products .media{aspect-ratio:4/3}
.color-rotator img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;object-fit:contain!important}
.color-rotator img.is-active{opacity:1}
.color-rotator__label{position:absolute;bottom:10px;left:10px;padding:6px 10px;background:#101d35d9;color:#fff;font-size:11px;font-weight:700}
.campaign-carousel{width:min(100%,960px);margin-inline:auto;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:14px;align-items:center}
.carousel-stage{aspect-ratio:5/4;min-width:0;overflow:hidden;background:var(--navy)}
.carousel-slide{display:none;width:100%;height:100%}
.carousel-slide.is-active{display:block}
.carousel-slide>.media,.carousel-slide .video-panel{width:100%;height:100%;min-height:0}
.carousel-slide>.media img{object-fit:contain;background:var(--white)}
.carousel-arrow{width:48px;height:48px;border:1px solid var(--navy);border-radius:50%;background:transparent;color:var(--navy);font-size:25px;cursor:pointer}
.carousel-arrow:hover{background:var(--navy);color:var(--white)}
.carousel-count{grid-column:1/-1;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.12em}
.video-panel{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(150deg,#253b5c,#101d35 60%,#354763)}
.video-panel video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:#101d352f;color:var(--white);cursor:pointer}
.video-play svg{width:78px;height:78px;padding:14px;border:1px solid #ffffffb3;border-radius:24px;background:#101d3599;fill:var(--white);backdrop-filter:blur(6px)}
.video-play span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.video-play:hover svg{background:#101d35db;transform:scale(1.05)}
.video-panel.is-playing .video-play{display:none}
.video-panel--carousel{aspect-ratio:5/4}
.drawing-project{border-top:1px solid var(--line);padding-top:50px}
.drawing-project__label{color:var(--muted)}
.drawing-project__title{margin:14px 0 36px;font-size:clamp(27px,3.5vw,46px)}
.drawing-project .case-hero{padding-bottom:65px}
.drawing-input{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:16px;align-items:start}
.drawing-input>.media{aspect-ratio:4/3;min-height:0}
.drawing-input__references{display:grid;gap:14px}
.drawing-input__references .media{aspect-ratio:4/3;min-height:0}
.case-stage--white{background:var(--white)}
.case-stage--white .case-stage__visuals>.media{aspect-ratio:4/3;width:min(100%,860px);margin-inline:auto}
.gallery-item__media{aspect-ratio:4/3;height:auto}
.gallery-item__media .media{aspect-ratio:4/3;height:100%}
.gallery-item__media .media img{object-fit:cover}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.video-work{min-width:0}
.video-work__frame{aspect-ratio:9/16;height:auto}
.video-work__frame .video-panel{aspect-ratio:9/16}
.video-work .gallery-item__caption h2{font-size:20px}
.video-social{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:80px;padding:42px 0;border-top:1px solid var(--line)}
.video-social>div{max-width:600px}
.video-social .eyebrow{font-size:12px;color:var(--muted);letter-spacing:.12em}
.video-social h2{margin-top:12px;font-size:clamp(27px,2.7vw,40px)}
.video-social p:not(.eyebrow){margin-top:14px;font-size:18px;line-height:1.5;color:var(--muted)}
.video-social__links{display:flex;gap:12px;flex-wrap:wrap}
.video-social__links a{width:auto;height:auto;min-height:52px;gap:10px;padding:10px 15px;border:1px solid var(--navy);border-radius:999px;text-decoration:none;font-size:14px;font-weight:700}
.video-social__links img{width:24px;height:24px}

/* Clear gallery affordance and controls for viewing the full collection. */
.gallery-item__media{position:relative}
.gallery-item__hint{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;background:#101d35ed;color:#fff;font-size:13px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.gallery-item__hint svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gallery-item__media:hover .gallery-item__hint,.gallery-item__media:focus-within .gallery-item__hint{opacity:1;transform:none}
.lightbox__gallery-tools{display:flex;align-items:center;justify-content:center;gap:22px;padding-top:16px}
.lightbox__gallery-tools[hidden]{display:none}
.lightbox__gallery-tools button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--navy);border-radius:50%;background:var(--white);color:var(--navy);font-size:22px}
.lightbox__gallery-tools button:disabled{opacity:.35;cursor:default}
.lightbox__count{min-width:54px;text-align:center;font-size:13px;font-weight:700}
.lightbox__category{padding:0 44px 16px 0;font-size:clamp(22px,2vw,32px);line-height:1.15}
.lightbox__category[hidden]{display:none}
.carousel-arrow{display:grid;place-items:center;padding:0;font-size:0}
.carousel-arrow svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Keep the hero and large single images inside the visible desktop height. */
@media(min-width:1051px){
  .hero-copy .hero-actions{margin-top:clamp(28px,3vw,54px);padding-top:0}
  .hero-actions .button{min-height:64px;padding:16px 30px;gap:36px;font-size:16px}
  .hero-actions .button span{font-size:22px}
  .hero-grid>.hero-image{width:min(94%,calc((100svh - 225px)*4/3));justify-self:end}
}
@media(min-width:801px){
  .section-heading{grid-template-columns:max-content minmax(300px,440px);column-gap:clamp(36px,5vw,90px);justify-content:start}
  .section-heading p:last-child{max-width:440px}
  .case-hero>.media,.case-stage__visuals>.media,.case-website>.media,.case-catalog>.media{width:min(100%,calc((100svh - 150px)*4/3));margin-inline:auto}
  .campaign-carousel{width:min(100%,calc((100svh - 150px)*5/4))}
}

/* Give large desktop displays a wider content canvas. */
@media(min-width:1440px){
  :root{--shell:2400px}
  .shell{width:min(calc(100% - 112px),var(--shell))}
  .hero-grid{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
  .hero-copy h1{max-width:800px;font-size:clamp(66px,4.2vw,88px)}
  .hero-description{max-width:650px;font-size:20px}
  .hero-trust{font-size:16px}
  .case-stage__heading,.case-stage__visuals{width:min(100%,1680px)}
  .case-catalog{width:min(100%,1480px)}
  .case-stage--white .case-stage__visuals>.media{width:min(100%,1400px,calc((100svh - 150px)*4/3))}
  .campaign-carousel{width:min(100%,1460px,calc((100svh - 150px)*5/4))}
  .selected-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Mobile: readable expanded navigation and image-first hero. */
@media(max-width:600px){
  .header-inner{min-height:80px}
  .menu-toggle{width:52px;height:52px;gap:5px;border:0;border-radius:0}
  .menu-toggle span{width:24px;height:2px;border-radius:999px}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .site-header nav.is-open{gap:10px;padding:24px 20px 30px}
  .site-header nav.is-open>a{font-size:21px;line-height:1.35;padding:8px 0}
  .site-header nav.is-open .header-socials{gap:18px;margin-top:14px}
  .site-header nav.is-open .header-socials a{width:46px;height:46px;display:grid;place-items:center}
  .site-header nav.is-open .header-socials img{width:34px;height:34px}
  .home-hero{min-height:calc(100svh - 80px);padding-top:28px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{grid-row:1}
  .hero-copy h1{grid-row:2;max-width:none;margin-top:16px}
  .hero-grid>.hero-image{grid-row:3;margin-top:26px;aspect-ratio:4/3}
  .hero-copy .hero-description{grid-row:4;max-width:none;margin-top:25px}
  .hero-copy .hero-trust{grid-row:5;max-width:none;margin-top:16px}
  .hero-copy .hero-actions{grid-row:6;display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px;padding-top:0}
  .button{min-height:60px;padding:14px 20px;font-size:16px;justify-content:space-between}
  .hero-actions .button{width:100%;min-height:64px;padding:14px 22px;font-size:18px;text-align:left}
  .hero-actions .button span{font-size:18px}
  .case-cta .button,.contact-form .button{width:100%}
  .hero-image img,.project-card__image img,.gallery-item__media img,.case-hero img,.case-stage__visuals img{filter:none!important;transform:none!important}
  .project-card:hover img,.project-card:focus-within img,.gallery-item:hover img,.gallery-item:focus-within img{filter:none!important;transform:none!important}
  .video-panel:not(.is-playing) video{filter:none}
  .lightbox{width:calc(100vw - 20px);padding:18px 12px}
  .lightbox img{width:100%;height:auto;max-height:70svh;aspect-ratio:auto;filter:none!important}
  .gallery-item__hint{opacity:1;transform:none;left:10px;bottom:10px;padding:9px 12px;font-size:12px}
  .gallery-item__hint span{font-size:12px}
}
@media(max-width:950px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.drawing-input{grid-template-columns:minmax(0,1.7fr) minmax(150px,1fr)}}
@media(max-width:700px){.case-stage__heading{display:flex;flex-direction:column;gap:10px}.case-stage__heading>div{display:block}.case-stage__heading p{margin-top:12px}.video-social{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.site-header .brand{width:55px;height:55px}.site-header--dark .brand img{width:42px;height:42px}.site-header:not(.site-header--dark) .brand img{width:55px;height:55px}.footer-brand{width:45px;height:52px}.footer-brand img{width:36px;height:44px}.case-stage__visuals{width:100%}.drawing-input{grid-template-columns:1fr}.drawing-input__references{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.drawing-input__references .media{aspect-ratio:3/4}.campaign-carousel{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}.carousel-arrow{width:38px;height:38px;font-size:20px}.carousel-stage{aspect-ratio:5/4}.video-grid{gap:35px 10px}.video-work .gallery-item__caption h2{font-size:16px}.video-work .gallery-item__caption p{font-size:12px}.video-play svg{width:56px;height:56px;border-radius:18px}.video-play span{font-size:10px}.video-social{margin-top:50px}.gallery-item__media,.gallery-item__media .media{aspect-ratio:4/3}}

/* Keep each category's controls visible while browsing its photos. */
.lightbox{width:min(94vw,1100px);max-height:calc(100svh - 24px)}
.lightbox[open]{display:flex;flex-direction:column;align-items:center;overflow:hidden}
.lightbox__category{align-self:stretch}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 220px);aspect-ratio:auto;object-fit:contain;flex-shrink:1}
@media(max-width:600px){.lightbox{width:calc(100vw - 20px)}.lightbox img{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 210px)}}