
/* Deep teal / mist / mint, inspired by the supplied colour reference. */
:root{--paper:#082b34;--ink:#e0f4ee;--muted:#b0ccca;--blue:#a8e5d7;--line:#31555e;--mist:#c8eee5;--deep:#051e26;--teal:#367c82;--slate:#39738d}
body{background:var(--paper)}::selection{background:var(--mist);color:var(--deep)}
.site-header{background:#082b34df}.site-header.is-scrolled .header-inner{border-color:var(--line)}
.header-contact{border-color:#729a9e}.header-contact:hover{background:var(--mist);color:var(--deep)}
.hero{padding-top:54px;padding-bottom:76px;gap:clamp(36px,5vw,76px)}
.hero-role{color:var(--muted)}.hero-intro{max-width:420px}.hero h1 em{color:var(--mist)}
.hero-aurora::before{background:radial-gradient(ellipse at 15% 30%,#408b8645,transparent 48%),radial-gradient(ellipse at 82% 15%,#99dccb20,transparent 45%)}
.button-dark{background:var(--mist);color:var(--deep)}.button-dark:hover{background:#e5fff5;color:var(--deep)}
.hero-portrait .art-frame{border-radius:160px 160px 8px 8px;background:var(--deep);box-shadow:0 25px 90px #0004;border:1px solid #74ada355}
.hero-portrait .art-frame::before{inset:12px;border-radius:150px 150px 3px 3px;border-color:#c8eee540}
.hero-portrait .art-frame::after{display:block;background:linear-gradient(180deg,#051e264d,transparent 24%,transparent 48%,#051e26f0 100%);z-index:1}
.hero-portrait .art-frame img{filter:saturate(.65);object-position:center 10%}
.intro-top{position:absolute;z-index:3;top:27px;left:28px;right:28px;display:flex;justify-content:space-between;gap:12px;color:#e1f6ef;font-size:.75rem;letter-spacing:.08em;text-align:center}
.intro-top span:last-child{display:none}.intro-top{justify-content:center}
.intro-caption{position:absolute;z-index:3;bottom:88px;left:30px;right:22px;color:#edfff8;min-height:92px}
.intro-kicker{display:block;font-size:.75rem;letter-spacing:.12em;margin-bottom:10px}.intro-word{font:500 clamp(1.8rem,3vw,2.7rem)/1.15 var(--heading);display:block}.intro-word-two,.intro-word-three{display:none}
.intro-controls{position:absolute;left:30px;right:30px;bottom:28px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d2ece8}.intro-duration{font-size:.75rem;line-height:1.5}
.intro-controls button{border:1px solid #b0d1cb80;background:#082b34b3;backdrop-filter:blur(10px);border-radius:30px;color:#edfff8;padding:10px 14px;font:400 .8125rem var(--sans);cursor:pointer;min-height:42px}
.intro-progress{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:4}.intro-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--mist)}
.motion-enabled .portrait-intro.is-playing img{animation:portrait-film 18s ease-in-out both!important;transition:none!important}
.motion-enabled .portrait-intro.is-playing .intro-word{display:block;position:absolute;opacity:0;animation:portrait-words 18s ease both}
.motion-enabled .portrait-intro.is-playing .intro-word-two{animation-delay:6s}.motion-enabled .portrait-intro.is-playing .intro-word-three{animation-delay:12s}
.motion-enabled .portrait-intro.is-playing .intro-progress span{animation:intro-progress 18s linear both}
.portrait-intro.is-paused img,.portrait-intro.is-paused .intro-word,.portrait-intro.is-paused .intro-progress span,.page-hidden .portrait-intro *{animation-play-state:paused!important}
@keyframes portrait-film{0%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.12) translateY(1%)}100%{transform:scale(1.05) translateY(0)}}
@keyframes portrait-words{0%{opacity:0;transform:translateY(15px)}4%,28%{opacity:1;transform:translateY(0)}33%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes intro-progress{to{transform:scaleX(1)}}
.specialty-marquee{background:var(--deep);color:var(--mist)}.marquee-group i{color:#70b1b0}
.project-card{background:#103944;border-color:#41646c}.project-description,.project-details>div{color:var(--muted)}
.project-details,.project-tools>span{border-color:#4d747b}.project-featured{background:linear-gradient(130deg,#174c54,#0a303b);color:var(--ink);border-color:#679d9d}
.project-featured h3 em{color:var(--mist)}.project-short,.project-featured .project-meta,.project-contribution .eyebrow{color:#b0ccca}.project-contribution ul,.project-featured .project-tools>span{color:var(--ink)}.project-contribution{border-color:var(--line)}
.project-card[data-project-number]::before{color:#c8eee509}.project-controls button{color:var(--muted)}.project-steps button[aria-current="true"],.project-steps button[aria-current="true"]:hover{background:var(--mist);color:var(--deep)}
.project-controls button:hover{background:#c8eee516;color:var(--mist)}
.case-study{border-top:1px solid var(--line);background:radial-gradient(ellipse at 0 15%,#367c8220,transparent 50%)}
.case-opening{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end}.case-opening h2{font-size:clamp(2.8rem,4.7vw,4.8rem);line-height:1.15;letter-spacing:-.035em;margin-top:24px}.case-opening h2 em{color:var(--mist)}.case-opening>div:last-child{max-width:385px;justify-self:end;color:var(--muted)}
.case-link{display:inline-flex;gap:22px;align-items:center;color:var(--mist);font-size:.875rem;margin-top:24px;padding-bottom:6px;border-bottom:1px solid #85b8b377}.case-link:hover{border-color:var(--mist)}
.case-process{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(35px,7vw,100px);margin-top:80px;align-items:start}.case-index{position:sticky;top:125px;padding-top:30px}.case-display{font:500 clamp(3.5rem,7vw,6.5rem)/1.2 var(--heading);letter-spacing:-.05em;margin:23px 0 38px}.case-display span{color:#80c2b8}
.case-index nav{display:flex;flex-direction:column;margin:0;gap:0;max-width:350px}.case-index nav a{font-size:1rem;color:#accbc8;padding:17px 0;border-top:1px solid var(--line);display:flex;gap:22px}.case-index nav a span{font-size:.8125rem;align-self:center}.case-index nav a[aria-current="step"]{color:#e8fff6;padding-left:14px;background:linear-gradient(90deg,#71b3a51f,transparent)}.case-index nav a::after{display:none}.case-scope{font-size:.875rem;color:var(--muted);margin-top:34px}.case-scope strong{font-weight:400;color:var(--ink)}
.case-chapter{padding:36px 0 70px;min-height:340px;border-top:1px solid var(--line);scroll-margin-top:130px}.chapter-number{font-size:.75rem;letter-spacing:.13em;color:#9cd2c8}.case-chapter h3{font-size:clamp(2rem,3vw,3rem);line-height:1.2;margin:30px 0 20px;letter-spacing:-.025em}.case-chapter>p{max-width:480px;color:var(--muted);font-size:1.0625rem}.case-chapter .chapter-note{font-size:.875rem;color:#9ec2c0;margin-top:25px}.chapter-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.chapter-tags span{border:1px solid #406b72;border-radius:22px;padding:7px 13px;font-size:.875rem}
.workflow-comparison{background:var(--deep);border:1px solid var(--line);padding:clamp(22px,4vw,52px);margin-top:34px;border-radius:12px}.comparison-heading{max-width:650px}.comparison-heading h3{font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.2;margin:18px 0}.comparison-heading>p:last-child{color:var(--muted);margin-bottom:30px}
.comparison-window{--split:50%;position:relative;border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}.comparison-panel{min-height:420px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:35px}.comparison-after{background:#bfe8df;color:#123c45}.comparison-before{background:#205763;color:#e0f6f0}.comparison-label,.comparison-bottom{font-size:.75rem;letter-spacing:.09em}.comparison-big{font:500 clamp(2rem,4vw,4rem)/1.12 var(--heading);letter-spacing:-.03em}.comparison-panel ul{padding:0;list-style:none;margin:25px 0 0;line-height:1.9;font-size:1rem}.comparison-panel li+li{border-top:1px solid #658f8f55}.comparison-divider{display:none}.comparison-control{margin-top:24px}.comparison-control label{font-size:.875rem;color:var(--muted)}.comparison-control input{width:100%;margin:18px 0 12px;accent-color:#9bdacf;cursor:ew-resize;min-height:24px}.comparison-control>div{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--muted)}
.comparison-ready .comparison-window{display:block}.comparison-ready .comparison-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-ready .comparison-divider{display:block;position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;pointer-events:none}.comparison-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e6fff6;color:var(--deep);box-shadow:0 2px 14px #0004;font-size:1.25rem}
.freelance-card{background:#205763;color:var(--ink)}.retail-card{background:#c8eee5;color:#0c3540}.retail-card .card-content>p:not(.card-category),.retail-card .role-label{color:#345b61}.about{background:#061f29}.background-list,.background-list>div{border-color:var(--line)}
.recruit-panel{background:linear-gradient(125deg,#164d56,#0e3541);border-color:#477d82;box-shadow:none}.recruit-note,.recruit-email,.recruit-strength p{color:var(--muted)}.recruit-strength,.recruit-strengths,.recruit-formats span{border-color:#4f787e}.recruit-strength h3{color:var(--ink)}
.contact{background:#041820}.contact-link h2 em,.contact-link:hover h2{color:var(--mist)}.contact::before{background:radial-gradient(ellipse,#367c8260,transparent 66%)}.contact-top>p:last-child,.contact-bottom{color:var(--muted)}.contact-bottom{border-color:var(--line)}
.motion-toggle{background:#082b34ed;border-color:#5b8388;color:var(--ink)}.motion-toggle:disabled{color:var(--muted)}.reading-progress span{box-shadow:0 0 12px #a8e5d755}.button:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--mist);outline-offset:5px}.project-card::after,.experience-card::after,.recruit-panel::after{box-shadow:inset 0 0 0 1px #b0e2d440}.motion-enabled .project-card.visible:hover{border-color:#97c8c3}
.eyebrow{font-size:.8125rem}.hero-description{color:var(--muted)}
@media(min-width:1100px){.rail-layout .project-featured .case-link{margin-top:12px}.rail-layout .project-featured .project-tools{padding-top:12px}}
@media(max-width:900px){.case-opening{gap:30px}.case-process{gap:35px}.case-index{top:115px}.comparison-panel{padding:24px}.intro-controls{left:20px;right:20px;flex-wrap:wrap}.intro-caption{left:20px;bottom:110px}.intro-kicker{font-size:.6875rem}.intro-word{font-size:1.8rem}}
@media(max-width:760px){.case-process{grid-template-columns:1fr;margin-top:45px}.case-index{position:static;padding:0}.case-display{margin:16px 0 24px;font-size:4.5rem}.case-index nav{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.case-scope{margin-top:22px}.case-chapter{min-height:0;padding:32px 0 45px}.case-opening{grid-template-columns:1fr}.case-opening>div:last-child{justify-self:start}.comparison-panel{min-height:400px}.comparison-window{grid-template-columns:1fr}.hero-portrait .art-frame{border-radius:100px 100px 6px 6px}.hero-portrait .art-frame::before{border-radius:92px 92px 3px 3px}}
@media(max-width:580px){.hero{padding-top:24px}.hero-portrait .art-frame{aspect-ratio:4/5}.intro-caption{bottom:93px;left:24px}.intro-word{font-size:2rem}.intro-controls{left:24px;right:24px;bottom:24px}.intro-duration{font-size:.6875rem}.case-opening h2{font-size:2.65rem}.comparison-panel{padding:22px;min-height:390px;gap:30px}.comparison-big{font-size:2.4rem}.comparison-panel ul{font-size:.875rem}.comparison-bottom{font-size:.6875rem}.case-chapter{scroll-margin-top:155px}.case-index nav a{font-size:.875rem;gap:12px}.workflow-comparison{padding:20px;margin-top:14px}.recruit-intro h2{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.case-index nav a{transition:none}.portrait-intro img,.portrait-intro .intro-word,.portrait-intro .intro-progress span{animation:none!important}}

/* Research, grounded in the owner's conference photograph. */
.research{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,85px);align-items:center;border-top:1px solid var(--line)}
.research-photo{min-width:0}.research-photo>a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)}.research-photo img{width:100%;height:auto}.research-photo figcaption{color:var(--muted);flex-wrap:wrap}
.research-copy{min-width:0}.research-copy h2{font-size:clamp(2.4rem,3.7vw,3.7rem);line-height:1.16;letter-spacing:-.03em;margin:24px 0}.research-copy h2 em{color:var(--mist)}.research-copy>p:not(.eyebrow){color:var(--muted);margin-top:18px}.research-copy>p.research-lead{font-size:1.3rem;line-height:1.5;color:var(--ink)}
.research-facts{margin:30px 0 0}.research-facts>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.6}.research-facts dt{color:var(--muted)}.research-facts dd{margin:0}
@media(max-width:760px){.research{grid-template-columns:1fr}.research-photo{max-width:540px;margin:auto}.research-copy h2{font-size:2.7rem}.research-facts>div{grid-template-columns:100px 1fr}}
@media(max-width:380px){.research-copy h2{font-size:2.3rem}.research-facts>div{grid-template-columns:1fr;gap:4px}}

.workflow-deck{margin-top:36px;padding:clamp(22px,4vw,50px);background:#051e26;border:1px solid #31555e;border-radius:16px}.deck-heading h3{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.15;margin:18px 0}.deck-heading>p:last-child{color:var(--muted)}.deck-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:30px 0 20px}.deck-tabs button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #31555e;border-radius:8px;padding:18px 15px;background:#0c333d;color:#b0ccca;font:400 1rem var(--sans);cursor:pointer;min-height:58px}.deck-tabs button span{font-size:.75rem;color:#85b6b3}.deck-tabs button:hover{border-color:#a8e5d7}.deck-tabs button[aria-selected="true"]{background:#c8eee5;color:#082b34;border-color:#c8eee5}.deck-tabs button[aria-selected="true"] span{color:#366c70}.deck-panel{display:grid;grid-template-columns:1fr 1fr;border:1px solid #31555e;border-radius:10px;overflow:hidden;margin-top:18px}.deck-art{display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:linear-gradient(145deg,#c8eee5,#74b8b5);color:#082b34;min-height:390px;padding:32px;position:relative;overflow:hidden}.deck-stage{font-size:.75rem;letter-spacing:.14em}.deck-number{font:500 clamp(6rem,10vw,9rem)/.9 var(--heading);letter-spacing:-.07em;opacity:.28}.deck-art-title{font:500 clamp(1.8rem,3vw,2.7rem)/1.14 var(--heading);max-width:330px}.deck-line{height:2px;background:#082b3450;width:100%;transform-origin:left}.deck-copy{padding:clamp(25px,4vw,48px);display:flex;flex-direction:column;justify-content:center;background:#103944}.deck-copy h4{font:500 clamp(1.6rem,2.7vw,2.5rem)/1.2 var(--heading);margin:22px 0 18px}.deck-copy>p:not(.eyebrow){color:var(--muted)}.deck-next{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:13px 0;margin-top:30px;background:none;border:0;border-bottom:1px solid #709b9c;color:var(--mist);font:400 .875rem var(--sans);cursor:pointer;min-height:44px}.deck-next:hover{color:white;border-color:white}.motion-enabled .deck-panel:not([hidden]) .deck-copy{animation:deck-enter .4s ease both}.motion-enabled .deck-panel:not([hidden]) .deck-line{animation:deck-line .7s ease both}@keyframes deck-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes deck-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){.deck-panel{grid-template-columns:1fr}.deck-art{min-height:290px;padding:26px}.deck-number{font-size:6rem}.deck-tabs{grid-template-columns:repeat(2,1fr)}.deck-tabs button{padding:14px}.deck-copy{padding:26px}.deck-art-title{max-width:none}}@media(prefers-reduced-motion:reduce){.deck-copy,.deck-line{animation:none!important}}

/* Supplied brand marks: original artwork, contained without cropping. */
.project-brand{display:flex;align-items:center;justify-content:center;width:156px;height:84px;margin-top:22px;border-radius:8px;overflow:hidden;background:#fff;flex-shrink:0}.project-brand img{display:block;width:100%;height:100%;object-fit:contain}.brand-skulta{width:104px;height:104px;margin:0 0 22px;background:#d59aa4}.brand-citrus{width:210px;height:79px}.brand-cloud{width:104px;height:104px}.project-brand+h3{margin-top:22px}.rail-layout .brand-skulta{width:72px;height:72px;margin-bottom:16px}.rail-layout .project-brand{margin-top:14px}.rail-layout .brand-skulta{margin-top:0}.rail-layout .brand-cloud{width:80px;height:80px}.rail-layout .brand-citrus{width:190px;height:72px}.project-brand{max-width:100%}

/* Merck brand colours from the supplied project brief. */
.merck-project{border-top:3px solid #eb3c96;background:linear-gradient(145deg,#50329144,#103944 65%)}.brand-merck{width:190px;height:88px}.merck-project .project-subtitle{color:#ffabd5}.merck-project .merck-detail{margin-top:15px}.merck-signoff{margin-top:18px;color:#f9b3d9}.rail-layout .brand-merck{width:170px;height:78px}

