/* Selected work: visitor-controlled gallery, with live sites kept in place. */
.work-section .section-top{align-items:end;gap:28px}
.work-tools{display:flex;align-items:center;justify-content:flex-end;gap:32px;flex:none}
.work-tools>.text-link{font-size:14px}
.gallery-controls{display:flex;align-items:center;gap:14px}
.gallery-arrow{display:grid;place-items:center;width:46px;height:46px;flex:none;padding:0;border:1px solid #414854;border-radius:50%;color:#fff;transition:border-color .2s,background .2s,color .2s}
.gallery-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gallery-arrow:hover:not(:disabled),.gallery-arrow:focus-visible{border-color:var(--cyan);color:var(--cyan);background:#08d9f410}
.gallery-next:hover:not(:disabled),.gallery-next:focus-visible{border-color:var(--pink);color:var(--pink);background:#f20aaa10}
.gallery-arrow:disabled{opacity:.3;cursor:default}
.gallery-count{min-width:77px;text-align:center;font:500 11px/1.5 var(--body);font-variant-numeric:tabular-nums;color:#fff}
.gallery-total{color:#89929e}
.gallery-stage{--preview-height:390px;position:relative}
.gallery-stage>.gallery-arrow{position:absolute;z-index:2;top:calc(var(--preview-height)/2);transform:translateY(-50%);background:#0b1017}
.gallery-stage>[data-project-prev]{left:-60px}
.gallery-stage>[data-project-next]{right:-60px}
.project-carousel{--gallery-visible:2;position:relative;display:flex;align-items:stretch;gap:32px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 1px 16px;margin:-3px -1px 0}
.project-carousel::-webkit-scrollbar{display:none}
.project-carousel:focus-visible{outline:1px solid var(--cyan);outline-offset:7px;border-radius:10px}
.project-carousel>.project-card{flex:0 0 calc((100% - 32px)/2);min-width:0;scroll-snap-align:start}
.project-carousel .project-cover{height:390px;aspect-ratio:auto;border:1px solid #2a303a;border-radius:10px}
.project-carousel .project-caption{gap:16px}
.project-carousel .project-caption h3{font-size:clamp(20px,1.7vw,27px);line-height:1.2}
.project-carousel .project-card-link:hover h3{color:var(--cyan)}
.project-carousel .project-description{max-width:95%;min-height:3.3em;line-height:1.65}
.project-state{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:10px;color:#c4ccd5}
.project-state:before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--cyan)}
.project-state.is-development:before{background:var(--pink)}
.gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}
.gallery-footer p{color:#cbd2da;font-size:15px}
.gallery-footer .text-link{font-size:15px}

/* Six clear offers with a shared visual rhythm and a concrete customer benefit. */
.solutions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.solution-card{--solution-accent:var(--cyan);--solution-tint:#08d9f410;position:relative;display:flex;flex-direction:column;min-width:0;min-height:330px;padding:28px;border:1px solid #272e38;border-radius:12px;background:radial-gradient(ellipse at 100% 0,var(--solution-tint),transparent 60%),#0d1117;transition:transform .25s,border-color .25s,background .25s}
.solution-card:nth-child(2n){--solution-accent:var(--pink);--solution-tint:#f20aaa0d}
.solution-card:hover,.solution-card:focus-visible{transform:translateY(-3px);border-color:var(--solution-accent);background:radial-gradient(ellipse at 100% 0,var(--solution-tint),transparent 85%),#111720}
.solution-card:focus-visible{outline-color:var(--solution-accent);outline-offset:4px}
.solution-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.solution-icon{display:grid;place-items:center;width:46px;height:46px;color:var(--solution-accent)}
.solution-icon svg{display:block;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.solution-number{align-self:flex-start;font:500 11px/1 var(--body);letter-spacing:.08em;color:#727f8e}
.solution-category{font:600 9px/1.5 var(--body);letter-spacing:.12em;color:#b9c2cd;margin-bottom:12px}
.solution-card h3{font:500 clamp(24px,2vw,31px)/1.2 var(--body);letter-spacing:-.035em;max-width:320px;color:#f8f9fb}
.solution-description{font-size:13px;line-height:1.75;margin-top:18px;margin-bottom:26px;max-width:340px;color:#aeb8c5}
.solution-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid #ffffff12}
.solution-meta{font-size:10px;line-height:1.6;color:#c4cdd8}
.solution-open{display:grid;place-items:center;flex:none;width:30px;height:30px;font:24px/1 Arial,sans-serif;color:var(--solution-accent)}
@media(max-width:1280px){.gallery-stage{padding-inline:58px}.gallery-stage>[data-project-prev]{left:0}.gallery-stage>[data-project-next]{right:0}}
@media(max-width:1100px){.work-tools{gap:20px}.solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.solution-card{min-height:315px}}
@media(max-width:900px){.work-section .section-top{display:block}.work-tools{justify-content:space-between;margin-top:26px}.gallery-controls{gap:12px}}
@media(max-width:760px){.project-carousel{--gallery-visible:1;gap:20px}.project-carousel>.project-card{flex-basis:100%}.project-carousel .project-cover{height:340px}.project-carousel .project-description{min-height:0}.gallery-arrow{width:44px;height:44px}.gallery-footer{margin-top:22px;padding-top:20px}.gallery-footer p{font-size:13px;max-width:175px}.gallery-footer .text-link{font-size:13px;gap:12px}.solution-card{padding:24px}.solution-card h3{font-size:26px}}
@media(max-width:560px){.solutions-grid{grid-template-columns:minmax(0,1fr);gap:16px}.solution-card{min-height:0}.solution-card-top{margin-bottom:20px}.solution-card h3,.solution-description{max-width:none}.solution-description{margin-bottom:22px}.gallery-footer{flex-wrap:wrap;gap:14px}.gallery-footer p{max-width:none}.work-tools{gap:12px}.work-tools>.text-link{font-size:12px;gap:10px}.gallery-count{min-width:68px;font-size:10px}.gallery-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.solution-card:hover,.solution-card:focus-visible{transform:none}}

/* The biography pairs a quiet, responsive video player with a short introduction. */
.about-teaser,.about-story{grid-template-columns:minmax(0,1fr);gap:40px}
.brand-showreel{width:100%;max-width:none;min-width:0;margin:0;align-self:center;overflow:hidden;border:0;border-radius:0;background:#05070a}
.brand-showreel-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#05070a}
.brand-showreel-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px var(--pad);border-top:1px solid #23303c}
.brand-showreel-caption>div:first-child{min-width:0}
.brand-showreel-label{font-size:9px;line-height:1.6;letter-spacing:.13em;color:var(--cyan)}
.brand-clip-title{font-size:13px;line-height:1.5;margin-top:6px;color:#fff;overflow-wrap:anywhere}
.brand-showreel-controls{display:flex;align-items:center;flex:none;gap:8px}
.brand-showreel-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #354353;border-radius:50%;color:#fff;font:26px/1 var(--body);transition:color .2s,border-color .2s,background .2s}
.brand-showreel-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brand-showreel-controls .play-icon{fill:currentColor;stroke:none}
.brand-showreel-controls [data-playing=true] .play-icon,.brand-showreel-controls [data-playing=false] .pause-icon,.brand-showreel-controls [data-muted=true] .sound-on-icon,.brand-showreel-controls [data-muted=false] .sound-off-icon{display:none}
.brand-showreel-controls button:hover{color:var(--cyan);border-color:var(--cyan);background:#08d9f40b}
.brand-showreel-controls button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.brand-showreel-controls [data-brand-count]{min-width:49px;text-align:center;font-size:10px;font-variant-numeric:tabular-nums;color:#c4ccd7}
.brand-video-notice{padding:0 20px 20px;font-size:12px;line-height:1.6;color:#f7bfdc}
.about-teaser-copy{min-width:0;width:calc(100% - 2 * var(--pad));max-width:920px;margin-inline:auto;text-align:center}
.about-teaser-copy>p.bio-role{font-size:16px;font-weight:500;line-height:1.75;color:#f3f6fa;max-width:780px}
.about-teaser-copy>p:not(.eyebrow){max-width:780px;margin-inline:auto}
.about-teaser-copy>.text-link{margin-inline:auto}
.about-story>.story-copy{max-width:860px;width:calc(100% - 2 * var(--pad));margin-inline:auto}
.brand-showreel:fullscreen{width:100%;height:100%;max-width:none;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;background:#05070a}
.brand-showreel:fullscreen .brand-showreel-video{flex:1;min-height:0;max-height:calc(100% - 100px);object-fit:contain}
.brand-showreel:fullscreen .brand-showreel-caption{flex:none;min-height:90px;width:100%}
@media(max-width:1100px){.brand-showreel-caption{flex-wrap:wrap;gap:15px;padding:18px}}
@media(max-width:760px){.brand-showreel-caption{flex-wrap:wrap}.about-teaser,.about-story{gap:30px}.about-teaser-copy>p.bio-role{font-size:14px}}
@media(max-width:560px){.brand-showreel-caption{padding:16px}.brand-showreel-controls{width:100%;justify-content:center;gap:6px}.brand-showreel-controls [data-brand-count]{min-width:42px;font-size:9px}.brand-showreel-controls button{width:40px;height:40px}.brand-showreel:fullscreen .brand-showreel-video{max-height:calc(100% - 155px)}}
@media(max-width:380px){.brand-showreel-controls{flex-wrap:wrap}.brand-showreel-controls [data-brand-count]{flex-basis:100%;margin-bottom:4px}.brand-showreel:fullscreen .brand-showreel-video{max-height:calc(100% - 180px)}}

/* A personal origin story, with the same reading width as the biography. */
.brand-origin{max-width:860px;margin-inline:auto;padding-top:30px;border-top:1px solid #293541}
.brand-origin h2,.brand-origin h3{font-family:var(--body);font-weight:400;letter-spacing:-.035em;line-height:1.25}
.brand-origin h2{font-size:clamp(28px,3vw,42px)}
.brand-origin h3{font-size:23px}
.brand-origin>p:not(.eyebrow){margin-top:20px;font-size:14px;line-height:1.9;color:#b7c0cb}
.brand-origin .eyebrow{margin-bottom:16px;color:var(--cyan)}
.brand-origin-compact{max-width:780px;margin-top:34px;padding-top:28px}
.brand-origin-compact>p{font-size:13px}
.about-story{padding-bottom:55px}
.brand-origin-section{padding-bottom:90px}
@media(max-width:760px){.about-story{padding-bottom:35px}.brand-origin-section{padding-bottom:55px}.brand-origin{padding-top:25px}.brand-origin h3{font-size:21px}.brand-origin>p:not(.eyebrow){font-size:13px}.brand-origin-compact{margin-top:28px}}

/* The process follows the services and leads to a free, personal consultation. */
.home-page .services-section{padding-bottom:45px}
.home-page .services-section .section-intro{max-width:410px}
.workflow-section{padding-block:35px 90px}
.workflow-section h2{max-width:740px;font:400 clamp(31px,3.3vw,51px)/1.18 var(--body);letter-spacing:-.045em}
.workflow-section .eyebrow{color:#a2a8b1;margin-bottom:17px}
.workflow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}
.workflow-step{padding-top:25px;border-top:1px solid #343e4b}
.workflow-number{display:block;font:400 30px/1 var(--body);letter-spacing:-.05em;color:var(--cyan)}
.workflow-step:nth-child(even) .workflow-number{color:var(--pink)}
.workflow-step h3{margin-top:23px;font:500 19px/1.35 var(--body);letter-spacing:-.025em;color:#f5f7fa}
.workflow-step p{font-size:13px;line-height:1.8;margin-top:13px;color:#aeb8c5}
.consultation-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:36px;margin-top:46px;border:1px solid #31424e;border-radius:12px;background:radial-gradient(ellipse at 0 0,#08d9f40c,transparent 70%),radial-gradient(ellipse at 100% 100%,#f20aaa08,transparent 55%),#0d1117}
.consultation-kicker{font-size:10px;line-height:1.5;letter-spacing:.12em;color:var(--cyan);font-weight:600}
.consultation-panel h3{margin-top:13px;font:400 clamp(24px,2.3vw,32px)/1.25 var(--body);letter-spacing:-.035em}
.consultation-description{max-width:610px;margin-top:15px;font-size:13px;line-height:1.8;color:#bdc6d1}
.consultation-button{max-width:100%;font-size:17px;gap:20px;min-height:56px;padding:16px 22px}
@media(max-width:1100px){.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media(max-width:900px){.consultation-panel{grid-template-columns:minmax(0,1fr);gap:26px}.consultation-button{justify-self:start}}
@media(max-width:760px){.gallery-stage{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-inline:0}.gallery-stage>.project-carousel{grid-column:1/-1;grid-row:1;min-width:0}.gallery-stage>.gallery-arrow{position:static;transform:none;grid-row:2}.gallery-stage>[data-project-prev]{grid-column:1;justify-self:end}.gallery-stage>[data-project-next]{grid-column:2;justify-self:start}.home-page .services-section{padding-bottom:25px}.workflow-section{padding-block:25px 55px}.workflow-section h2{font-size:34px}.consultation-panel{padding:26px;margin-top:32px}}
@media(max-width:560px){.workflow-steps{grid-template-columns:minmax(0,1fr);gap:22px}.workflow-step{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:16px;padding-top:22px}.workflow-number{grid-row:1/3;font-size:26px}.workflow-step h3{margin-top:0;font-size:18px}.workflow-step p{grid-column:2;margin-top:9px}.consultation-panel{padding:24px}.consultation-button{width:100%;font-size:16px;gap:14px;padding-inline:18px}}