/* Responsive correction shared by the live page and Elementor preview. */
.about-v4>*{min-width:0}
@media(max-width:760px){
 .about-title h2{font-size:clamp(42px,12.5vw,60px);overflow-wrap:normal}
 .about-title h2 br:nth-of-type(1){display:initial}
 .hero-intro br{display:initial}
 .about-body,.about-title,.practice-copy,.game-copy{min-width:0}
 .contact-email{overflow-wrap:anywhere}
}
/* Mobile header, introduction and contained project fan. */
@media(max-width:760px){
 .header{transform:none;box-sizing:border-box;left:14px;right:14px;width:auto;top:14px;padding:10px 14px;min-height:64px;gap:10px}
 .header .wordmark{width:clamp(108px,30vw,144px);min-width:0;flex-shrink:1}
 .header-controls{flex:0 0 auto;gap:10px;align-items:center}
 .theme-toggle{box-sizing:border-box;flex:0 0 54px;width:54px;height:32px;padding:5px 6px;align-self:center}
 .theme-knob{width:22px;height:22px;top:4px;left:4px;transform:translateX(22px)}
 .menu-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:58px;min-height:44px;padding:0;font-size:11px;line-height:1;white-space:nowrap}
 .menu-toggle span{font-size:20px;line-height:1}
 .hero{padding:142px 20px 44px;width:100%;box-sizing:border-box;overflow:clip}
 .hero-copy{width:100%;min-width:0}
 .hero h1{font-size:clamp(30px,8.7vw,57px);line-height:1.17;margin:30px 0}
 .hero-intro{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:360px;margin:0 auto}
 .hero-description{font-size:13px;line-height:1.85;max-width:330px;margin:0;text-wrap:pretty}
 .hero-intro br{display:initial}
 .hero-intro .primary-button{margin:0;min-height:54px;padding:17px 25px;gap:28px}
 .fan-gallery{box-sizing:border-box;width:calc(100% + 40px);max-width:none;margin:48px -20px 0;height:370px;overflow:clip;--fan-step:106px;--fan-rise:5px;--fan-angle:6deg}
 .fan-card{top:18px;width:184px;height:278px;border-radius:17px}
 .fan-caption{box-sizing:border-box;min-height:77px;padding:13px 14px;gap:8px}
 .fan-caption strong{font-size:16px;line-height:1.2}
 .fan-image{height:199px;padding:0}
 .fan-image img{width:100%;height:100%;object-fit:contain}
 .fan-hint{left:16px;right:16px;bottom:12px;font-size:7px;line-height:1.7;text-align:center}
 .hero-bottom{margin-top:24px;gap:20px;line-height:1.8}
}
@media(max-width:360px){.header{padding:9px 10px;gap:6px}.header-controls{gap:6px}.header .wordmark{width:108px}.menu-toggle{min-width:51px;font-size:10px}.hero{padding-left:18px;padding-right:18px}.fan-gallery{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px;--fan-step:96px}.hero-description{font-size:12px}}

/* Shared rounded surface system across portfolio and project detail pages. */
:root{--cv-radius-card:24px;--cv-radius-inner:16px;--cv-radius-control:12px}
.work-image,.work-image.portrait,.game-card,.practice-card,.experiment,.embed-slot,.video-dialog{border-radius:var(--cv-radius-card);overflow:hidden}
.project-hero img,.project-hero.portrait img{display:block;width:auto;max-width:100%;height:auto;max-height:83svh;margin-inline:auto;object-fit:contain;border-radius:var(--cv-radius-card);background:transparent}
.next-project img{border-radius:var(--cv-radius-inner)}
.fan-card{border-radius:var(--cv-radius-inner);overflow:hidden}
.project-info .project-note,.load-media{border-radius:var(--cv-radius-control)}
.embed-slot iframe,.embed-slot video{border-radius:var(--cv-radius-inner)}
@media(max-width:760px){:root{--cv-radius-card:20px;--cv-radius-inner:14px}.project-hero img,.project-hero.portrait img{max-height:75svh}}

/* Original Poppins / Open Sans identity, with theme-specific contrast. */
body{background:var(--bg);color:var(--text);font-family:'Open Sans',Arial,sans-serif}
h1,h2,h3,.fan-caption strong,.about-body .about-lead,.about-facts strong,.video-poster strong,.type-art>span,.practice-art b,.game-art b{font-family:Poppins,Arial,sans-serif;letter-spacing:-.035em}
h1,h2,h3{font-weight:500;line-height:1.22}
.eyebrow,.section-meta,.hero-bottom,.mini-label,.fan-hint{font-family:'Open Sans',Arial,sans-serif}
.header{border-color:var(--line);background:var(--nav)}
.header nav{font-size:12px}.header nav a{transition:color .25s}.header nav a:hover{color:var(--accent)}
/* Icon slots and the moving disc share one exact 28px grid. */
.theme-toggle{display:grid;grid-template-columns:28px 28px;align-items:center;justify-content:start;width:64px;height:36px;padding:3px;border-radius:30px;gap:0;box-sizing:border-box;flex:0 0 64px}
.theme-sun,.theme-moon{display:grid;place-items:center;width:28px;height:28px;position:relative;z-index:2;font-size:0;line-height:0}
.theme-sun svg,.theme-moon svg{display:block;width:17px;height:17px}
.theme-knob{width:28px;height:28px;top:3px;left:3px;background:var(--brand-orange);transform:translateX(28px)}
[data-theme=dark] .theme-sun{color:#c3d3d1}[data-theme=dark] .theme-moon{color:#172f37}
[data-theme=light] .theme-knob{transform:translateX(0)}[data-theme=light] .theme-sun{color:#172f37}[data-theme=light] .theme-moon{color:#52666b}
/* A left-aligned introduction with a separate, reserved logo composition. */
.hero.hero-brand{display:block;max-width:1600px;width:100%;height:auto;min-height:0;padding:175px 6% 44px;overflow:clip;background:radial-gradient(ellipse at 90% 15%,#59ca960d,transparent 48%)}
.hero-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:6%;align-items:center;min-height:390px}
.hero-brand .hero-copy{margin:0;width:100%;max-width:none;text-align:left}
.hero-brand .eyebrow{justify-content:flex-start;font-size:11px;letter-spacing:2px;line-height:1.7}
.hero-brand h1{font-family:Poppins,Arial,sans-serif;font-size:clamp(49px,5.7vw,88px);font-weight:500;line-height:1.18;letter-spacing:-.055em;margin:24px 0 18px;white-space:nowrap}
.hero-brand h1 .hero-name-dot{display:inline;color:var(--brand-orange)}
.hero-role{font-family:Poppins,Arial,sans-serif;font-size:clamp(18px,2.2vw,31px);line-height:1.5;color:var(--text);letter-spacing:-.04em}
.hero-role>span{color:var(--accent)}
.hero-brand .hero-intro{display:flex;align-items:flex-start;flex-direction:column;gap:30px;margin:25px 0 0;max-width:490px}
.hero-brand .hero-description{font-family:'Open Sans',Arial,sans-serif;max-width:46ch;font-size:15px;line-height:1.9;color:var(--muted);margin:0}
.hero-logo-space{display:grid;place-items:center;min-height:320px}
.logo-reserve{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;aspect-ratio:1;width:min(100%,310px);border:1px dashed var(--line);border-radius:50%;color:var(--muted);background:radial-gradient(circle,#59ca960a,transparent 68%)}
.logo-reserve>span:last-child{font-size:9px;letter-spacing:2px}.logo-guide{font-size:35px;font-weight:300;opacity:.45}
.hero-brand .hero-bottom{position:relative;inset:auto;display:flex;margin:12px 0 0;padding-top:24px}
/* Skills use conceptual illustrations, never project thumbnails. */
.skills-fan{margin-top:55px;height:510px}
.skill-card{background:var(--surface);color:var(--text);height:350px;box-shadow:0 12px 35px #071b2225}
.skill-card .fan-caption{min-height:89px;padding:20px 18px 14px}
.skill-card .fan-caption strong{font-family:Poppins,Arial,sans-serif;font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.6px}
.skill-card .fan-caption>span:first-child{font-size:7px;letter-spacing:1.1px}
.skill-visual{height:210px;padding:0 12px;color:var(--brand-mint);background:linear-gradient(150deg,#59ca9609,#00000008)}
.skill-visual .craft-illustration{width:100%;height:100%}
.skill-description{padding:12px 18px;font-size:10px;line-height:1.5;color:var(--muted)}
[data-theme=light] .skill-visual{color:#297653}
.craft-illustration{display:block;max-width:100%;height:100%;overflow:visible}
.craft-illustration .art-play{fill:currentColor;stroke-width:1}
.craft-illustration .art-dot{fill:var(--brand-orange);stroke:none}
.art-object,.art-poster,.art-letter,.art-timeline,.art-playhead,.art-motion-node{transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease)}
.art-orbit{stroke:var(--brand-orange);stroke-dasharray:6 7;opacity:.7;transform-origin:160px 145px}
.skill-card:hover .art-object,.skill-card:focus-visible .art-object,.service-craft:hover .art-object,.service-craft:focus-within .art-object{transform:translateY(-7px) rotate(-4deg)}
.skill-card:hover .art-playhead,.service-craft:hover .art-playhead{transform:translateX(58px)}
.skill-card:hover .art-letter,.service-craft:hover .art-letter{transform:scale(1.08)}
.skill-card:hover .art-poster,.service-craft:hover .art-poster{transform:rotate(-5deg)}
.skill-card:hover .art-motion-node{transform:translate(45px,-30px) rotate(45deg)}
/* Distinct but related surfaces give the long page a quieter rhythm. */
.philosophy{background:var(--section-quiet);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.philosophy .focus-statement{color:var(--text);font-size:clamp(35px,4.3vw,66px);line-height:1.32;letter-spacing:-.045em;font-weight:500;max-width:1100px;margin:auto}
.philosophy .focus-statement strong{color:var(--accent);font-weight:500}
.philosophy>p:last-child{font-size:14px;line-height:1.9;color:var(--muted);max-width:700px;margin:36px auto 0}
.work{background:var(--bg)}.games{background:var(--section-deep)}.capabilities{background:var(--bg)}.story{background:var(--section-quiet)}.playground{background:var(--bg)}.contact{background:var(--section-deep)}
[data-theme=light] .philosophy{background:var(--section-quiet)}
[data-theme=light] .games{background:var(--section-deep)}[data-theme=light] .capabilities{background:#fff}[data-theme=light] .story{background:var(--section-quiet)}[data-theme=light] .playground{background:var(--surface)}[data-theme=light] .contact{background:var(--section-deep)}
.spiral-exit h3,.spiral-exit h3 span{color:var(--text)}
[data-theme=light] .spiral-exit{background:#ffffffe8}
[data-theme=light] .spiral-exit .eyebrow{color:#52666b}
[data-theme=light] .spiral-title h2 span{color:#256147}
.section-heading h2,.work .section-heading h2,.about-title h2{line-height:1.22;letter-spacing:-.045em}
.work .section-heading h2{font-size:clamp(46px,5.5vw,76px)}
.work-caption h3{font-family:Poppins,Arial,sans-serif;font-weight:500;line-height:1.3}
/* Buttons change both fill and text, with an animated directional cue. */
.primary-button,.load-media,.service-enquiry,.more-work>summary{border:1px solid transparent;transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .35s}
.primary-button{background:var(--brand-orange);color:#172f37;font-family:'Open Sans',Arial,sans-serif;font-weight:600;border-radius:40px}
.primary-button>span{color:inherit;transition:transform .35s var(--ease)}
.primary-button:hover,.primary-button:focus-visible,.load-media:hover,.service-enquiry:hover,.more-work>summary:hover{background:var(--button-hover);color:var(--button-hover-text);border-color:var(--line);transform:translateY(-3px);box-shadow:0 10px 25px #00000012}
.primary-button:hover>span,.primary-button:focus-visible>span{color:inherit;transform:translate(3px,-3px)}
.filters button{transition:background .25s,color .25s,border-color .25s,transform .25s}
.filters button:hover{background:var(--text);color:var(--bg);border-color:var(--text);transform:translateY(-2px)}
.filters button[aria-pressed=true]{background:var(--brand-orange);color:#172f37}
.text-link:hover,.text-link:focus-visible,.card-action:hover{color:var(--accent)}
.copy-email,.video-dialog-close,.reset-experiment{transition:color .25s,background .25s}
.copy-email:hover,.video-dialog-close:hover{color:var(--accent);background:var(--surface)}
.more-work{border:0;padding:0;margin:10px 0 34px}
.more-work>summary{display:inline-flex;align-items:center;justify-content:center;gap:24px;width:auto;max-width:100%;padding:17px 25px;border:1px solid var(--line);border-radius:40px;background:var(--surface);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:1.5;font-weight:600;color:var(--text)}
.more-work>summary>span{font-size:9px;letter-spacing:.4px}
.more-work[open]>summary{margin-bottom:35px}
.collection-links{border-top:1px solid var(--line);padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.collection-links h3{font-size:22px;color:var(--text)}.collection-links p{font-size:13px;margin-top:10px;color:var(--muted)}
.collection-actions{display:flex;gap:28px;align-items:center}
/* Motion reflects the four services found on the original portfolio. */
.practice-grid{gap:30px}
.service-craft{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;scroll-margin-top:130px}
.service-craft .practice-art{height:280px;border-radius:0;padding:25px;color:var(--brand-mint);position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#59ca9612,transparent 70%)}
.service-craft .craft-illustration{height:230px;width:270px}
.service-craft .craft-panel-edit{background:linear-gradient(140deg,#f750231a,transparent 75%);color:#f7a087}
.service-craft .craft-panel-design{color:var(--accent);background:linear-gradient(140deg,#f3ff6a09,transparent 75%)}
.service-craft .craft-panel-product{color:var(--brand-mint);background:linear-gradient(140deg,#59ca9617,transparent 75%)}
.craft-panel-label{position:absolute;bottom:18px;left:24px;font-size:9px;letter-spacing:1px;color:var(--muted)}
.service-craft .practice-copy{padding:32px}
.service-craft .practice-copy h3{font-size:28px;line-height:1.35;color:var(--text)}
.service-craft .practice-copy>p:not(.practice-tools){font-size:14px;line-height:1.9;color:var(--muted);max-width:none;margin:18px 0}
.service-craft .practice-tools{font-size:11px;line-height:1.8;color:var(--muted)}
.service-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.service-actions .text-link{font-size:11px}.service-actions .service-enquiry{display:inline-flex;gap:18px;align-items:center;margin:0;font-size:11px;border:1px solid var(--line);padding:12px 17px;border-radius:30px;color:var(--text);background:transparent}
[data-theme=light] .craft-panel-edit{color:#9b391e}[data-theme=light] .craft-panel-model,[data-theme=light] .craft-panel-product{color:#296b50}
.service-craft.is-inview .art-orbit{animation:craft-dash 12s linear infinite}
.service-craft.is-inview .art-playhead{animation:craft-scrub 5s ease-in-out infinite}
@keyframes craft-dash{to{stroke-dashoffset:-100}}
@keyframes craft-scrub{0%,100%{transform:translateX(-42px)}50%{transform:translateX(60px)}}
.contact-bottom>a{font-size:13px;overflow-wrap:anywhere}.contact-layout h2 span{color:var(--accent)}
@media(max-width:1050px){.hero-stage{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:3%}.hero-brand h1{font-size:clamp(42px,6.5vw,68px)}.hero-logo-space{min-height:260px}.logo-reserve{width:240px;max-width:100%}.hero-role{font-size:23px}.header nav{gap:20px}}
@media(max-width:760px){
 .header{padding:10px 13px}.header-controls{gap:8px}.theme-toggle{flex-basis:60px;width:60px;height:34px;grid-template-columns:26px 26px;padding:3px}.theme-sun,.theme-moon{width:26px;height:26px}.theme-knob{width:26px;height:26px;left:3px;top:3px;transform:translateX(26px)}
 .hero.hero-brand{padding:140px 24px 36px}.hero-stage{grid-template-columns:1fr;gap:36px;min-height:0}.hero-brand h1{font-size:clamp(39px,10.3vw,64px);white-space:normal;line-height:1.2;letter-spacing:-.05em;margin:21px 0 20px}
 .hero-brand .eyebrow{font-size:10px;letter-spacing:1.8px}.hero-role{font-size:20px;line-height:1.7;letter-spacing:-.025em;max-width:22ch}.hero-role>span{display:block}
 .hero-brand .hero-intro{gap:29px;margin-top:22px;max-width:100%}.hero-brand .hero-description{font-size:15px;line-height:1.95;max-width:32ch}.hero-brand .primary-button{font-size:13px;padding:18px 24px;gap:30px;min-height:56px}
 .hero-logo-space{min-height:160px;justify-content:end;padding-right:10px}.logo-reserve{width:155px;gap:9px}.logo-guide{font-size:25px}.logo-reserve>span:last-child{font-size:8px;letter-spacing:1.4px}
 .skills-fan{margin-top:30px;height:365px}.skill-card{height:278px}.skill-card .fan-caption{min-height:81px;padding:15px 13px 10px}.skill-card .fan-caption strong{font-size:16px;line-height:1.3}.skill-card .fan-caption>span:first-child{font-size:6px;letter-spacing:.7px}.skill-visual{height:155px;padding:0 8px}.skill-description{font-size:9px;padding:10px 13px}.skills-fan .fan-hint{bottom:10px;font-size:7px}
 .hero-brand .hero-bottom{font-size:7px;letter-spacing:.5px;line-height:1.8;gap:18px;margin-top:15px}
 .section-pad{padding:86px 24px}.section-meta{font-size:8px;line-height:1.8;gap:24px}.section-heading{margin:37px 0}.section-heading h2,.work .section-heading h2,.games .section-heading h2,.capabilities .section-heading h2,.play-layout h2{font-size:clamp(35px,9.3vw,48px);line-height:1.27;letter-spacing:-.045em}
 .section-heading>p,.practice-copy>p,.about-body>p{font-size:15px;line-height:1.95}.section-heading>p{margin-top:27px}
 .philosophy{padding:95px 24px}.philosophy .eyebrow{font-size:9px;line-height:1.8;letter-spacing:1.5px}.philosophy .focus-statement{font-size:clamp(28px,7.7vw,45px);line-height:1.4;letter-spacing:-.04em}.philosophy>p:last-child{font-size:14px;line-height:1.95;margin-top:30px}.philosophy>p:last-child br{display:none}
 .spiral-exit h3{font-size:clamp(37px,9vw,58px);line-height:1.28}.spiral-exit{gap:30px}.spiral-exit .eyebrow{line-height:1.9}
 .work-caption h3{font-size:23px;line-height:1.35}.work-caption p{font-size:12px;line-height:1.85}.card-action{font-size:11px}.work-item{margin-bottom:45px}
 .more-work>summary{font-size:13px;padding:16px 22px;gap:17px}.more-work>summary>span{font-size:8px;max-width:none}
 .collection-links{display:flex;align-items:flex-start;flex-direction:column;gap:25px;padding-top:30px}.collection-links h3{font-size:22px;line-height:1.4}.collection-links p{font-size:14px;line-height:1.9}.collection-actions{gap:28px}.collection-actions .text-link{font-size:12px!important}
 .service-craft .practice-art{height:245px}.service-craft .craft-illustration{height:205px}.service-craft .practice-copy{padding:27px 24px}.service-craft .practice-copy h3{font-size:25px}.service-craft .practice-copy>p:not(.practice-tools){font-size:15px;line-height:1.95}.service-craft .practice-tools{font-size:12px;line-height:1.9}.service-actions{gap:22px;margin-top:25px}.service-actions .service-enquiry,.service-actions .text-link{font-size:12px;line-height:1.7}
 .about-title h2{font-size:clamp(41px,11vw,64px);line-height:1.22}.about-body .about-lead{font-size:27px;line-height:1.45}.about-body>p{margin-bottom:26px}.about-facts{gap:35px}.about-facts span{font-size:12px;line-height:1.7}.game-copy p{font-size:14px;line-height:1.95}
 .contact-layout h2{font-size:clamp(37px,9.5vw,53px);line-height:1.3}.contact-layout p{font-size:15px;line-height:1.95}.contact-bottom{gap:22px}.contact-bottom>a{font-size:14px}.socials{font-size:12px;gap:24px;line-height:1.8}
}
@media(max-width:360px){.hero.hero-brand{padding-left:21px;padding-right:21px}.hero-brand h1{font-size:38px}.hero-role{font-size:18px}.hero-brand .hero-description{font-size:14px}.header .wordmark{width:105px}.header-controls{gap:5px}.menu-toggle{min-width:47px}.theme-toggle{flex-basis:56px;width:56px;grid-template-columns:24px 24px}.theme-sun,.theme-moon,.theme-knob{width:24px;height:24px}.theme-knob{top:4px;transform:translateX(24px)}.theme-sun svg,.theme-moon svg{width:16px;height:16px}.section-pad{padding-left:21px;padding-right:21px}}
@media(prefers-reduced-motion:reduce){.craft-illustration *{animation:none!important;transition:none!important}.primary-button:hover,.more-work>summary:hover,.filters button:hover{transform:none}}
/* Explicit service-button hover wins over component link defaults. */
.service-actions .service-enquiry:hover,.service-actions .service-enquiry:focus-visible{background:var(--button-hover);color:var(--button-hover-text);border-color:var(--text)}

/* Preserve the original fan geometry; only replace its skill artwork. */
.skill-sculpture{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 9px #081e2333)}
.sculpture-object{transform-origin:160px 140px;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.skill-card:hover .sculpture-object,.skill-card:focus-visible .sculpture-object{transform:translateY(-5px) rotate(-3deg)}
.skill-card .skill-visual{background:radial-gradient(ellipse at center,#f7502318,transparent 75%)}
.skill-card:nth-child(n+5) .fan-caption{padding-left:38%;grid-template-columns:1fr;gap:8px;text-align:right}
.skill-card:nth-child(n+5) .fan-caption>span:last-child{display:none}
.skill-card:nth-child(n+5) .fan-caption strong{font-size:17px;overflow-wrap:normal}
.skill-card:nth-child(n+5) .fan-caption>span:first-child{font-size:6px;letter-spacing:.6px}
.skill-card:hover,.skill-card:focus-visible{z-index:30}
@media(max-width:760px){.skill-card:nth-child(n+5) .fan-caption{padding-left:33%}.skill-card:nth-child(n+5) .fan-caption strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sculpture-object{transition:none}.skill-card:hover .sculpture-object{transform:none}}

/* Actual portfolio imagery inside the existing fan cards. */
.skill-card .skill-visual{padding:0 10px;background:transparent;overflow:hidden}
.skill-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .4s;filter:saturate(1.08)}
.skill-photo-product{object-fit:contain;background:#ba7766}
.skill-card:hover .skill-photo,.skill-card:focus-visible .skill-photo{transform:scale(1.035);filter:saturate(1.15)}
@media(max-width:760px){.skill-card .skill-visual{padding:0 7px}.skill-photo{border-radius:9px}}
@media(prefers-reduced-motion:reduce){.skill-photo{transition:none}.skill-card:hover .skill-photo{transform:none}}