:root{--bg:#111210;--panel:#191a17;--ink:#f2f0e9;--muted:#aaa99f;--line:#393a35;--accent:#c6d27c;--page:min(1320px,calc(100% - 100px));font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}.site-header{width:var(--page);height:84px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;position:relative;z-index:2}.wordmark{font-size:15px;letter-spacing:-.04em}.wordmark span{font-size:9px;vertical-align:top;margin-left:4px;color:var(--accent)}nav{display:flex;gap:34px}nav a{color:#d0d0c9}nav a:hover,.nav-contact:hover{color:var(--accent)}.nav-contact{border:1px solid #77796e;padding:9px 14px}.nav-contact span{color:var(--accent);margin-left:10px}.hero{width:var(--page);min-height:calc(100vh - 84px);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:6%;position:relative;padding:55px 0 88px}.eyebrow{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:var(--muted)}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px}h1,h2,h3,p{margin-top:0}.hero h1,.page-intro h1,.about-hero h1{font-size:clamp(66px,8vw,112px);line-height:.96;letter-spacing:-.075em;margin:31px 0 24px;font-weight:650}.hero h1 em,.page-intro h1 em,.about-hero h1 em,.about-note h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.hero-intro{max-width:530px;font-size:18px;line-height:1.7;color:#c5c4bd}.outline-link{display:inline-flex;align-items:center;gap:28px;margin-top:23px;padding:13px 0;border-bottom:1px solid #77796e;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.outline-link b{color:var(--accent);font-size:15px}.hero-image{margin:0;position:relative;height:min(66vh,650px);min-height:440px}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(.78)}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 35%)}.hero-image figcaption{position:absolute;z-index:1;bottom:18px;left:18px;font:10px ui-monospace,monospace;letter-spacing:.1em}.hero-bottom{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:space-between;color:#77796f;font:10px ui-monospace,monospace;letter-spacing:.1em}.home-projects{background:#171815;padding:90px max(50px,calc((100% - 1320px)/2)) 105px}.section-title{display:flex;align-items:end;justify-content:space-between}.section-title h2,.about-note h2{font-size:clamp(42px,5vw,67px);line-height:1.02;letter-spacing:-.06em}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:33px 0 20px}.home-grid img{width:100%;height:310px;object-fit:cover;background:#222}.home-grid span,.site-caption>span{display:block;color:var(--muted);font:10px ui-monospace,monospace;letter-spacing:.1em;margin-top:14px}.home-grid h3{font-size:26px;margin:3px 0}.home-grid h3 b{color:var(--accent);font-size:16px;margin-left:10px}.page-intro{width:var(--page);padding:90px 0 70px;margin:auto;max-width:1320px}.page-intro h1{font-size:clamp(64px,8vw,102px);margin:25px 0}.page-intro>p:last-child{max-width:570px;color:#c3c3bb;font-size:18px}.site-list{width:var(--page);max-width:1320px;margin:0 auto 110px}.site-project{display:grid;grid-template-columns:1.25fr .75fr;gap:6%;align-items:center;padding:34px 0 52px;border-top:1px solid var(--line)}.site-project.reverse{grid-template-columns:.75fr 1.25fr}.site-project.reverse .site-shot{order:2}.site-shot{position:relative;display:block;background:#20211e;overflow:hidden}.site-shot img{display:block;width:100%;height:390px;object-fit:cover;transition:transform .45s}.site-shot:hover img{transform:scale(1.025)}.site-shot span{position:absolute;right:14px;bottom:14px;background:#111d;color:white;padding:9px 12px;font:10px ui-monospace,monospace}.site-caption h2{font-size:42px;letter-spacing:-.055em;margin:12px 0}.site-caption p{color:#c0bfb7;max-width:430px}.site-caption>a,.service-note>a{display:inline-block;border-bottom:1px solid #77796e;padding:8px 0;font:10px ui-monospace,monospace;letter-spacing:.08em;color:var(--accent)}.service-grid{width:var(--page);max-width:1320px;margin:0 auto 110px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-grid article{min-height:280px;padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(145deg,#171815,#111210)}.service-grid article>span{font:11px ui-monospace,monospace;color:var(--accent)}.service-grid h2{font-size:31px;letter-spacing:-.04em;margin:35px 0 10px}.service-grid p{color:#bebdb5;max-width:470px}.service-grid small{font:10px ui-monospace,monospace;color:#888a80;letter-spacing:.08em}.service-grid .service-note{background:#1b1d18}.service-note h2{margin-top:27px}.service-grid .service-note{grid-column:1/-1;display:grid;grid-template-columns:.72fr 1.3fr 2.4fr auto;gap:22px;align-items:center;min-height:auto}.service-grid .service-note h2{margin:0;font-size:21px}.service-grid .service-note p{margin:0}.service-grid .service-note>a{white-space:nowrap}.about-hero{width:var(--page);max-width:1120px;margin:auto;padding:100px 0 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:8%;align-items:center}.about-portrait{margin:0}.about-portrait img{display:block;width:100%;height:480px;object-fit:cover;object-position:64% 50%}.about-portrait figcaption{font:10px ui-monospace,monospace;letter-spacing:.1em;color:#a9aaa2;padding-top:10px}.about-hero h1{font-size:clamp(56px,6vw,84px)}.about-hero>div>.about-story{font-size:17px;color:#c5c4bd;max-width:570px}.about-hero figure{margin:0}.about-hero img{width:100%;height:480px;object-fit:cover}.about-hero figcaption,.photo-grid figcaption{font:10px ui-monospace,monospace;letter-spacing:.1em;color:#a9aaa2;padding-top:10px}.about-details{width:var(--page);max-width:1320px;margin:15px auto 100px;border-top:1px solid var(--line)}.about-details>div{display:grid;grid-template-columns:240px 1fr;padding:20px 0;border-bottom:1px solid var(--line)}.about-details span{font:10px ui-monospace,monospace;letter-spacing:.1em;color:#999b90}.about-details p{margin:0}.about-note{padding:75px max(50px,calc((100% - 1320px)/2));background:#191a17}.about-note h2{margin:24px 0}.about-note>p:last-child{max-width:600px;color:#c0bfb7}.photo-grid{width:var(--page);max-width:1320px;margin:0 auto 110px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:280px;gap:20px}.photo-grid figure{margin:0;min-width:0}.photo-grid img{width:100%;height:calc(100% - 32px);display:block;object-fit:cover;filter:saturate(.83)}.photo-grid .tall{grid-row:span 2}.photo-grid .wide{grid-column:span 2}.site-footer{width:var(--page);max-width:1320px;margin:auto;min-height:76px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#898b82;font:10px ui-monospace,monospace;letter-spacing:.06em}.site-footer a{color:#d9d9d2}@media(max-width:760px){:root{--page:calc(100% - 36px)}.site-header{height:auto;min-height:74px;flex-wrap:wrap;padding:15px 0;gap:14px}.wordmark{width:40%}.site-header nav{order:3;width:100%;justify-content:space-between;gap:8px;font-size:11px}.nav-contact{font-size:11px}.hero{min-height:auto;grid-template-columns:1fr;gap:32px;padding:55px 0 75px}.hero h1{font-size:clamp(60px,14vw,88px)}.hero-image{height:440px;min-height:0}.hero-bottom{bottom:20px;font-size:8px}.home-projects{padding:65px 18px 75px}.section-title{display:block}.home-grid{grid-template-columns:1fr;gap:28px}.home-grid img{height:250px}.page-intro{padding:65px 0 42px}.page-intro h1{font-size:clamp(56px,13vw,80px)}.page-intro>p:last-child{font-size:16px}.site-project,.site-project.reverse{grid-template-columns:1fr;gap:18px;padding:22px 0 38px}.site-project.reverse .site-shot{order:0}.site-shot img{height:250px}.site-caption h2{font-size:34px}.service-grid{grid-template-columns:1fr;margin-bottom:70px}.service-grid article{min-height:230px;padding:24px}.service-grid h2{margin-top:23px}.service-grid .service-note{grid-column:1;display:block;min-height:230px}.service-grid .service-note h2{margin:18px 0 10px}.about-hero{grid-template-columns:1fr;gap:28px;padding:55px 0 44px}.about-portrait img{height:370px}.about-hero h1{font-size:clamp(53px,12vw,76px)}.about-hero img{height:370px}.about-details{margin-bottom:65px}.about-details>div{grid-template-columns:1fr;gap:7px}.about-note{padding:60px 18px}.photo-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px;gap:12px;margin-bottom:70px}.photo-grid .wide{grid-column:span 2}.photo-grid .tall{grid-row:span 2}.site-footer{font-size:8px;gap:12px}.site-footer span{max-width:55%}}
.site-header nav a[aria-current="page"]{color:var(--accent)}
.case-notes{margin:22px 0 15px;border-top:1px solid var(--line)}.case-notes>div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.case-notes b{font:10px ui-monospace,monospace;letter-spacing:.08em;color:var(--accent)}.case-notes span{font-size:12px;line-height:1.6;color:#bdbdb5}.site-caption{padding-block:10px}.site-caption>a{margin-top:12px}@media(max-width:760px){.case-notes>div{grid-template-columns:82px 1fr}}
.case-link{display:inline-block;margin:12px 0 0 18px;font:10px ui-monospace,monospace;letter-spacing:.07em;color:#d0d0c9;border-bottom:1px solid #55574e;padding:8px 0}.case-study{width:var(--page);max-width:1320px;margin:auto}.back-link{display:inline-block;margin:36px 0 24px;color:#bfc0b8;font:11px ui-monospace,monospace;letter-spacing:.08em}.case-heading{padding:30px 0 35px}.case-heading h1{font-size:clamp(64px,9vw,112px);letter-spacing:-.075em;line-height:.95;margin:18px 0}.case-heading>p:last-child{font-size:22px;color:#c4c4bd}.case-visual{margin:0}.case-visual img{width:100%;height:min(65vh,650px);object-fit:cover;object-position:center;background:#20211e}.case-visual figcaption{padding:12px 0;color:#a5a69d;font:10px ui-monospace,monospace;letter-spacing:.1em}.case-visual figcaption a{color:var(--accent)}.case-overview{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;padding:76px 0 85px;border-bottom:1px solid var(--line)}.case-label h2,.case-process h2,.case-cta h2{font-size:clamp(38px,5vw,65px);line-height:1.04;letter-spacing:-.06em}.case-label h2 em,.case-cta h2 em{font-family:Georgia,serif;color:var(--accent);font-weight:400}.case-facts{border-top:1px solid var(--line)}.case-facts>div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}.case-facts b{font:10px ui-monospace,monospace;letter-spacing:.08em;color:var(--accent)}.case-facts p{margin:0;color:#c6c6bf;line-height:1.7}.case-process{padding:80px 0 96px}.case-process h2{margin:18px 0 20px}.case-process>p:not(.eyebrow){max-width:760px;color:#c4c4bd;font-size:16px;line-height:1.8}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-steps>div{padding:20px 18px 16px 0}.process-steps span{display:block;color:var(--accent);font:11px ui-monospace,monospace}.process-steps b{display:block;margin-top:20px;font:10px ui-monospace,monospace;letter-spacing:.1em}.process-steps p{margin:9px 10px 0 0;color:#aeadA5;font-size:12px}.case-cta{padding:68px 0 88px;border-top:1px solid var(--line)}.case-cta h2{margin:18px 0}.case-cta .outline-link{margin-top:0}@media(max-width:760px){.case-heading{padding-top:15px}.case-heading h1{font-size:clamp(56px,13vw,80px)}.case-heading>p:last-child{font-size:18px}.case-visual img{height:320px}.case-overview{grid-template-columns:1fr;gap:24px;padding:52px 0 60px}.case-facts>div{grid-template-columns:92px 1fr;gap:10px}.case-process{padding:56px 0 65px}.process-steps{grid-template-columns:1fr 1fr}.process-steps>div{padding:18px 10px 16px 0}.case-cta{padding:52px 0 66px}.case-link{margin-left:0;margin-right:12px}}

/* Motion and interaction */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{animation:page-arrive .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-arrive{from{opacity:.72;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.motion-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.site-header nav a,.nav-contact,.outline-link,.home-grid>a,.site-shot img,.service-grid article,.photo-grid img,.about-portrait img,.hero-image img,.case-visual img{transition:color .25s ease,border-color .25s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease,opacity .35s ease}
.site-header nav a{position:relative}
.site-header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .28s ease}
.site-header nav a:hover:after,.site-header nav a[aria-current="page"]:after{right:0}
.nav-contact:hover,.outline-link:hover{transform:translateY(-3px);border-color:var(--accent)}
.hero-image img{animation:photo-arrive .9s .12s cubic-bezier(.2,.7,.2,1) both}
@keyframes photo-arrive{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
.hero-image:hover img,.about-portrait:hover img{transform:scale(1.025);filter:saturate(1)}
.home-grid>a,.site-project,.service-grid>article,.photo-grid figure{transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0);transition:transform .3s ease,opacity .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),background-color .3s ease}
.home-grid>a:hover,.site-project:hover,.service-grid>article:hover,.photo-grid figure:hover{transform:translate3d(var(--pointer-x,0px),calc(var(--pointer-y,0px) - 4px),0)}
.home-grid>a:hover img,.site-shot:hover img,.photo-grid figure:hover img{transform:scale(1.025);filter:saturate(1)}
.site-project:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

.service-approach{width:var(--page);max-width:1320px;margin:0 auto 100px;padding:64px 0 72px;border-top:1px solid var(--line)}.service-approach h2{font-size:clamp(42px,5vw,67px);line-height:1.02;letter-spacing:-.06em;margin:20px 0}.service-approach h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.service-approach>p:last-child{max-width:680px;color:#c0bfb7;font-size:17px;line-height:1.8}
@media(max-width:760px){.service-approach{margin-bottom:65px;padding:50px 0 56px}.service-approach h2{font-size:clamp(40px,10vw,58px)}}

.revision-note{width:var(--page);max-width:1320px;margin:0 auto 72px;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.revision-note h2{font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.06em;margin:18px 0}.revision-note h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.revision-note>p:last-child{max-width:680px;color:#c0bfb7;font-size:16px;line-height:1.8;margin-bottom:0}
@media(max-width:760px){.revision-note{margin-bottom:54px;padding:38px 0}.revision-note h2{font-size:clamp(36px,9vw,54px)}}

/* More personal, editorial type: quieter scale, clearer reading */
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:-.035em}
.hero h1{font-size:clamp(52px,6.5vw,88px);line-height:1.01;letter-spacing:-.045em;font-weight:600;margin:28px 0 22px}
.page-intro h1{font-size:clamp(48px,6.1vw,82px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.about-hero h1{font-size:clamp(48px,4.5vw,74px);line-height:1.04;letter-spacing:-.04em;font-weight:600}
.case-heading h1{font-size:clamp(52px,6.5vw,88px);line-height:1.02;letter-spacing:-.045em;font-weight:600}
.hero h1 em,.page-intro h1 em,.about-hero h1 em,.about-note h2 em,.section-title h2 em,.service-grid h2 em,.service-approach h2 em,.revision-note h2 em,.case-heading h1 em,.case-label h2 em,.case-process h2 em,.case-cta h2 em{font-family:inherit;font-style:normal;font-weight:500;color:var(--accent);letter-spacing:inherit}
.section-title h2,.about-note h2,.service-approach h2,.revision-note h2,.case-label h2,.case-process h2,.case-cta h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4.2vw,58px);font-weight:600;line-height:1.08;letter-spacing:-.04em}
.service-grid article{background:#151613}
.service-grid .service-note{background:#191a17}
.service-grid h2{font-size:27px;font-weight:600;letter-spacing:-.025em}
.service-grid p,.about-hero>div>.about-story,.page-intro>p:last-child,.service-approach>p:last-child,.revision-note>p:last-child{line-height:1.75}
.case-heading>p:last-child{font-size:19px;line-height:1.65}
.case-facts p,.case-process>p:not(.eyebrow){line-height:1.78}
.home-grid h3{font-size:23px;font-weight:600;letter-spacing:-.02em}
@media(max-width:760px){.hero h1{font-size:clamp(48px,11vw,72px)}.page-intro h1{font-size:clamp(46px,10vw,68px)}.about-hero h1{font-size:clamp(46px,10vw,68px)}.case-heading h1{font-size:clamp(48px,11vw,72px)}.section-title h2,.about-note h2,.service-approach h2,.revision-note h2,.case-label h2,.case-process h2,.case-cta h2{font-size:clamp(36px,8.5vw,52px)}}

/* Preserve the source proportions of the homepage portrait and site previews */
.hero-image{width:min(100%,calc(min(66vh,650px) * .56266));height:min(66vh,650px);min-height:0;justify-self:center;background:#111210;overflow:hidden}
.hero-image img{object-fit:contain;object-position:center;width:100%;height:100%}
.hero-image figcaption{left:18px}
.hero{grid-template-columns:1fr .78fr;gap:4%}
.hero-image{width:min(100%,calc(min(72vh,740px) * .56266));height:min(72vh,740px);justify-self:end}
.home-grid img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;background:#171815}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-image{width:min(100%,calc(76vh * .56266));height:min(76vh,680px);justify-self:center;min-height:0}.home-grid img{height:auto;aspect-ratio:16 / 9}}

@media(max-width:760px){
  .site-shot img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background:#20211e}
  .case-visual img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;background:#20211e}
}

@media(max-width:900px){
  .site-project,.site-project.reverse{grid-template-columns:1fr;gap:20px;padding:24px 0 38px}
  .site-project.reverse .site-shot{order:0}
  .site-shot img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background:#20211e}
  .case-overview{grid-template-columns:1fr;gap:24px}
  .case-visual img{height:auto;max-height:none;object-fit:contain}
}

/* Neutral text palette across every page */
:root{--ink:#f5f5f3;--muted:#b9b9b5;--accent:#f5f5f3}
.wordmark span,.nav-contact span,.eyebrow i,.hero h1 em,.page-intro h1 em,.about-hero h1 em,.about-note h2 em,.home-grid h3 b,.site-caption>a,.service-note>a,.service-grid article>span,.case-visual figcaption a,.case-label h2 em,.case-cta h2 em,.case-facts b,.process-steps span,.case-process h2 em,.service-approach h2 em,.revision-note h2 em{color:#f5f5f3}
.eyebrow i{background:#f5f5f3}
.site-header nav a:hover,.nav-contact:hover,.outline-link:hover,.nav-contact span,.outline-link b{color:#fff}
.nav-contact:hover,.outline-link:hover{border-color:#f5f5f3}
.site-project:hover{border-color:#f5f5f3}
.service-grid article>span,.case-facts b,.process-steps span{color:#f5f5f3}
.service-grid .service-visual{display:block;width:calc(100% + 64px);height:auto;aspect-ratio:16/10;object-fit:cover;margin:-32px -32px 24px;background:#171815}
@media(max-width:760px){.service-grid .service-visual{width:calc(100% + 48px);margin:-24px -24px 20px}}
@media(max-width:900px){.site-project,.site-project.reverse{grid-template-columns:1fr;gap:20px;padding:24px 0 38px}.site-project.reverse .site-shot{order:0}.site-shot img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background:#20211e}.case-overview{grid-template-columns:1fr;gap:24px}.case-visual img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;background:#20211e}}
@media(max-width:760px){.site-shot img,.case-visual img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;background:#20211e}}
.service-live{position:relative;width:calc(100% + 64px);height:260px;margin:-32px -32px 24px;overflow:hidden;background:#191a17;border-bottom:1px solid var(--line)}
.service-live iframe{display:block;width:100%;height:100%;border:0;background:#111210}
.service-live>a{position:absolute;right:12px;bottom:12px;padding:9px 11px;background:rgba(17,18,16,.92);border:1px solid #656660;color:#f5f5f3;font:10px ui-monospace,monospace;letter-spacing:.06em}
.service-live>a:hover{background:#f5f5f3;color:#111210}
@media(max-width:760px){.service-live{width:calc(100% + 48px);height:220px;margin:-24px -24px 20px}}
/* Live client-site windows used in the home and selected-sites galleries */
.site-shot iframe,.home-grid iframe{display:block;width:100%;aspect-ratio:16 / 10;height:auto;border:0;background:#20211e;pointer-events:none}
@media(max-width:900px){.site-shot iframe{aspect-ratio:4 / 3}}
@media(max-width:760px){.site-shot iframe{aspect-ratio:4 / 5}.home-grid iframe{aspect-ratio:4 / 3}}

.domain-fact a{color:#f5f5f3;text-decoration:underline;text-decoration-color:#77796e;text-underline-offset:4px;font:inherit}
.domain-fact b{color:#f5f5f3!important}
.site-footer{gap:24px}.footer-socials{display:flex;gap:22px;align-items:center;border:0!important}.footer-socials a{color:#f5f5f3!important;font:10px ui-monospace,monospace;letter-spacing:.08em}.footer-socials a:hover{opacity:.65}
@media(max-width:760px){.site-footer{flex-wrap:wrap;padding:14px 0}.footer-socials{gap:16px}}

/* Give embedded sites a true desktop viewport, scaled neatly into each preview frame */
.site-shot{aspect-ratio:16 / 10}
.site-shot iframe{width:133.333%;height:133.333%;aspect-ratio:auto;max-width:none;transform:scale(.75);transform-origin:top left}
.home-grid>a{display:block;overflow:hidden}
.home-grid iframe{width:125%;height:auto;aspect-ratio:16 / 10;transform:scale(.8);transform-origin:top left}
@media(max-width:900px){.site-shot{aspect-ratio:4 / 3}.site-shot iframe{width:125%;height:125%;transform:scale(.8)}}
@media(max-width:760px){.site-shot{aspect-ratio:4 / 5}.site-shot iframe{width:100%;height:100%;transform:none}.home-grid iframe{width:100%;aspect-ratio:4 / 3;transform:none}}
.workflow{padding-top:54px;padding-bottom:54px}
.workflow h2{max-width:900px}
.workflow-intro{max-width:720px!important;margin:0 0 27px;font-size:16px;line-height:1.65;color:#c0bfb7}
.workflow-pipeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative;padding-top:22px}
.pipeline-rail{position:absolute;display:block;overflow:visible;pointer-events:none}
.pipeline-rail path{fill:none;stroke:#565751;stroke-width:2;vector-effect:non-scaling-stroke}
.pipeline-rail path.pipeline-flow{stroke:#f5f5f3;stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;animation:pipeline-drift 2.5s linear infinite}
.pipeline-rail-wide{top:0;left:0;width:100%;height:24px}
.pipeline-rail-tall{display:none}
.workflow-pipeline article{position:relative;z-index:1;min-width:0;padding:0 4px 0 0;background:none!important;border:0!important;min-height:0!important}
.workflow-pipeline article>span{display:grid;place-items:center;width:24px;height:24px;margin:0 0 12px;border:1px solid #777870;border-radius:50%;background:#111210;color:#f5f5f3;font:10px ui-monospace,monospace;box-shadow:0 0 0 4px #111210}
.workflow-pipeline h3{font-size:16px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
.workflow-pipeline p{margin:0;color:#bdbdb5;font-size:12px;line-height:1.5}
@keyframes pipeline-drift{to{stroke-dashoffset:-12}}
@media(max-width:900px){.workflow-pipeline{grid-template-columns:1fr;gap:10px;padding:0 0 0 34px}.pipeline-rail-wide{display:none}.pipeline-rail-tall{display:block;top:0;left:0;width:24px;height:100%;min-height:100%}.workflow-pipeline article{padding:2px 0}.workflow-pipeline article>span{position:absolute;left:-34px;top:0;margin:0}.workflow-pipeline h3{font-size:15px;margin-bottom:2px}.workflow-pipeline p{font-size:12px;line-height:1.45}}
@media(max-width:600px){.workflow{padding-top:42px;padding-bottom:42px}.workflow-intro{font-size:15px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.pipeline-rail path.pipeline-flow{animation:none}}
.workflow-pipeline .pipeline-icon{display:block;width:34px;height:34px;margin:0 0 8px;overflow:visible;fill:none;stroke:#f2f0e9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.workflow-pipeline .pipeline-icon .reveal-line{stroke-dasharray:24;stroke-dashoffset:24;animation:icon-draw 3.2s ease-in-out infinite}
.workflow-pipeline .pipeline-icon .icon-breathe{transform-box:fill-box;transform-origin:center;animation:icon-breathe 2.6s ease-in-out infinite}
.workflow-pipeline .pipeline-icon .icon-route-dot{animation:route-pulse 2.8s ease-in-out infinite}
.workflow-pipeline .pipeline-icon .icon-blink{animation:icon-blink 1.4s steps(2,end) infinite}
.workflow-pipeline article:nth-child(odd) .pipeline-icon *{animation-delay:-.8s}
.workflow-pipeline article:nth-child(3n) .pipeline-icon *{animation-delay:-1.4s}
@keyframes icon-draw{0%,12%{stroke-dashoffset:24;opacity:.35}48%,72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:24;opacity:.35}}
@keyframes icon-breathe{0%,100%{transform:scale(.86);opacity:.48}50%{transform:scale(1.12);opacity:1}}
@keyframes route-pulse{0%,100%{transform:translate(0,0);opacity:.4}50%{transform:translate(0,6px);opacity:1}}
@keyframes icon-blink{0%,45%{opacity:.25}46%,100%{opacity:1}}
@media(max-width:900px){.workflow-pipeline .pipeline-icon{position:absolute;left:-1px;top:0;width:25px;height:25px;margin:0}.workflow-pipeline article>span{left:-34px;top:0}}
@media(prefers-reduced-motion:reduce){.workflow-pipeline .pipeline-icon *{animation:none!important;stroke-dashoffset:0!important}}
@media(min-width:901px){.pipeline-rail-wide{top:10px}}
@media(max-width:900px){.workflow-pipeline article{display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:8px;row-gap:1px;align-items:start}.workflow-pipeline .pipeline-icon{position:static;grid-column:1;grid-row:1 / span 2;width:25px;height:25px;margin:0}.workflow-pipeline h3{grid-column:2;grid-row:1;margin:1px 0 2px}.workflow-pipeline p{grid-column:2;grid-row:2}}
/* Turn the workflow connector into a compact animated pipe */
.pipeline-rail path{stroke:#777870;stroke-width:12;stroke-linecap:round}
/* One continuous travelling highlight sits inside the full-length pipe. */
.pipeline-rail path.pipeline-flow{stroke:#fff;stroke-width:4;stroke-dasharray:19 81;stroke-dashoffset:100;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(245,245,243,.98)) drop-shadow(0 0 9px rgba(245,245,243,.5)) drop-shadow(0 0 18px rgba(198,210,124,.42));animation:pipeline-flow-loop 2.5s linear infinite}
@keyframes pipeline-flow-loop{0%{stroke-dashoffset:100;opacity:.32}12%{opacity:.96}50%{opacity:1}88%{opacity:.96}100%{stroke-dashoffset:0;opacity:.32}}
/* Let the passing highlight briefly wake each step in sequence. */
.workflow-pipeline article .pipeline-icon{animation:pipeline-icon-pass 2.5s linear infinite}
.workflow-pipeline article:nth-of-type(1) .pipeline-icon{animation-delay:.3125s}
.workflow-pipeline article:nth-of-type(2) .pipeline-icon{animation-delay:.65625s}
.workflow-pipeline article:nth-of-type(3) .pipeline-icon{animation-delay:1s}
.workflow-pipeline article:nth-of-type(4) .pipeline-icon{animation-delay:1.34375s}
.workflow-pipeline article:nth-of-type(5) .pipeline-icon{animation-delay:1.6875s}
.workflow-pipeline article:nth-of-type(6) .pipeline-icon{animation-delay:2.03125s}
@keyframes pipeline-icon-pass{0%,12%,100%{filter:none;opacity:.92}2%{filter:drop-shadow(0 0 3px rgba(245,245,243,.58)) drop-shadow(0 0 9px rgba(245,245,243,.25));opacity:1}6%{filter:drop-shadow(0 0 2px rgba(245,245,243,.35));opacity:1}}
.pipeline-rail-wide{top:10px;height:24px}
.pipe-customer{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.pipe-customer .customer-face{position:relative;top:9px;display:block;width:28px;height:28px;margin:0 0 15px;padding:4px;border:2px solid #8b8c84;border-radius:50%;background:#111210;fill:#111210;stroke:#f5f5f3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pipe-customer .face-mouth{stroke-dasharray:24;stroke-dashoffset:0;animation:face-expression 3.8s ease-in-out infinite}
.pipe-customer .face-eye{transform-box:fill-box;transform-origin:center;animation:face-blink 4.6s ease-in-out infinite}
.pipe-customer>span{display:block;margin:0 0 2px;color:#f5f5f3;font:9px ui-monospace,monospace;letter-spacing:.08em}
.pipe-customer small{display:block;color:#bdbdb5;font-size:10px;line-height:1.25}
.face-happy{border-color:#f5f5f3!important}
@keyframes face-expression{0%,35%,100%{stroke-dashoffset:0}50%,80%{stroke-dashoffset:2}}
@keyframes face-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.15)}}
@media(max-width:900px){.pipeline-rail-tall path{stroke-width:12}.pipe-customer{display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:8px;row-gap:0;align-items:start;text-align:left;padding:0 0 4px}.pipe-customer .customer-face{position:absolute;left:-34px;top:0;width:25px;height:25px;margin:0;padding:3px}.pipe-customer>span{grid-column:1 / -1;margin:0 0 1px}.pipe-customer small{grid-column:1 / -1;margin:0}.pipe-customer-start{padding-bottom:6px}.pipe-customer-end{padding-top:4px}}
@media(prefers-reduced-motion:reduce){.pipe-customer .face-mouth,.pipe-customer .face-eye{animation:none!important}.pipeline-rail path.pipeline-flow{animation:none!important;stroke-dashoffset:50;opacity:.98}}
@media(prefers-reduced-motion:reduce){.workflow-pipeline article .pipeline-icon{animation:none!important;filter:none!important}}

@media(min-width:901px){.workflow-pipeline{grid-template-columns:48px repeat(6,minmax(0,1fr)) 72px}.pipe-customer .customer-face{top:-14px}}
.home-workflow{width:var(--page);max-width:1320px;margin:auto;border-bottom:1px solid var(--line)}
.home-workflow .workflow-pipeline{margin-top:4px}
.home-services{width:var(--page);max-width:1320px;margin:0 auto;padding:70px 0 84px}
.home-services .section-title{margin-bottom:28px}
.home-services .section-title h2{margin-bottom:0}
.home-service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.home-service-list>a{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#151613;transition:background .25s ease,transform .25s ease}
.home-service-list>a:hover{background:#1b1c19;transform:translateY(-3px)}
.home-service-list span{font:10px ui-monospace,monospace;color:#f5f5f3}
.home-service-list h3{font-size:20px;letter-spacing:-.025em;margin:16px 0 6px}
.home-service-list p{color:#bdbdb5;font-size:13px;line-height:1.6;margin:0}
@media(max-width:900px){.home-service-list{grid-template-columns:1fr}}
@media(max-width:760px){.home-workflow{width:var(--page);padding-block:42px}.home-services{padding:50px 0 62px}.home-services .section-title{display:flex;align-items:end;gap:12px}.home-services .section-title h2{font-size:clamp(30px,7vw,44px)}.home-service-list>a{padding:17px}.home-service-list h3{margin:10px 0 3px}}

/* BongFoods gets a second, live preview framed at a mobile viewport. */
.bongfoods-project .site-preview-pair{display:grid;grid-template-columns:minmax(0,1fr) clamp(112px,22%,170px);align-items:center;gap:clamp(12px,2vw,24px);min-width:0}
.bongfoods-project .mobile-shot{position:relative;display:block;width:100%;aspect-ratio:9 / 19.5;overflow:hidden;border:1px solid #777870;border-radius:17px;background:#171815;box-shadow:0 12px 38px rgba(0,0,0,.3),inset 0 0 0 4px #171815}
.bongfoods-project .mobile-shot iframe{position:absolute;inset:0;width:278%;height:278%;max-width:none;aspect-ratio:auto;transform:scale(.36);transform-origin:top left;border:0;pointer-events:none;background:#20211e}
.bongfoods-project .mobile-shot>span{position:absolute;top:8px;left:50%;right:auto;bottom:auto;z-index:1;transform:translateX(-50%);white-space:nowrap;background:#111210;color:#f5f5f3;border:1px solid #777870;border-radius:999px;padding:4px 8px;font:8px ui-monospace,monospace;letter-spacing:.08em}
@media(max-width:760px){.bongfoods-project .site-preview-pair{grid-template-columns:minmax(0,1fr) clamp(88px,28vw,130px);gap:12px}}

/* Keep both SP Studios previews side by side, with a clear path to the detailed walkthrough. */
.spstudios-preview-wrap{min-width:0}
.spstudios-preview-pair{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(12px,2vw,24px);min-width:0}
.spstudios-preview-pair .site-shot{aspect-ratio:16 / 10}
.spstudios-preview-pair .site-shot iframe{width:133.333%;height:133.333%;aspect-ratio:auto;max-width:none;transform:scale(.75);transform-origin:top left}
.spstudios-preview-pair .sp-partner-preview-link{min-height:0;aspect-ratio:16 / 10;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(16px,2vw,28px);border:1px solid #777870;background:linear-gradient(145deg,#1c211d,#111210);transition:background .25s ease,border-color .25s ease,transform .35s ease}
.spstudios-preview-pair .sp-partner-preview-link:hover{background:#20241f;border-color:#f5f5f3;transform:translateY(-3px)}
.sp-partner-preview-link>span,.sp-partner-preview-link>b{font:9px ui-monospace,monospace;letter-spacing:.08em;color:#f5f5f3}
.sp-partner-preview-link>strong{font-size:clamp(18px,2.3vw,30px);line-height:1.08;letter-spacing:-.04em}
.sp-partner-preview-link>p{margin:0;color:#bdbdb5;font-size:12px;line-height:1.5}
.spstudios-preview-pair .sp-partner-open,.spstudios-preview-pair .sp-partner-demo{display:block;width:fit-content;border-bottom:1px solid #777870;padding:6px 0;font:9px ui-monospace,monospace;letter-spacing:.07em;color:#f5f5f3}
.spstudios-preview-pair .sp-partner-open:hover,.spstudios-preview-pair .sp-partner-demo:hover{border-color:#f5f5f3}
.sp-partner-preview-link>p{margin-bottom:3px}.sp-partner-demo{opacity:.78}
.sp-partner-detail-button{display:inline-block;margin-top:16px;padding:10px 13px;border:1px solid #777870;color:#f5f5f3;font:10px ui-monospace,monospace;letter-spacing:.07em;transition:background .2s ease,color .2s ease,border-color .2s ease}
.sp-partner-detail-button:hover{background:#f5f5f3;color:#111210;border-color:#f5f5f3}
@media(max-width:900px){.spstudios-preview-pair{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}.spstudios-preview-pair .sp-partner-preview-link{padding:16px}.sp-partner-preview-link>strong{font-size:clamp(16px,2.5vw,25px)}}
@media(max-width:480px){.spstudios-preview-pair{grid-template-columns:1fr 1fr;gap:9px}.spstudios-preview-pair .site-shot{aspect-ratio:1 / 1}.spstudios-preview-pair .site-shot iframe{width:160%;height:160%;transform:scale(.625)}.spstudios-preview-pair .sp-partner-preview-link{aspect-ratio:1 / 1;padding:11px;gap:6px}.sp-partner-preview-link>strong{font-size:16px}.sp-partner-preview-link>p{font-size:10px}.spstudios-preview-pair .sp-partner-open,.spstudios-preview-pair .sp-partner-demo{font-size:7px}.sp-partner-detail-button{margin-top:12px}}

/* Dashboard-style SP Partner preview, kept beside the live public site. */
.sp-partner-preview{position:relative;aspect-ratio:16 / 10;min-width:0;overflow:hidden;background:#f0f3f0;color:#f5f5f3;border:1px solid #d4ddd8;font-family:Arial,Helvetica,sans-serif}
.partner-topbar{height:15%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#fff;color:#183f39;font-size:clamp(9px,.9vw,14px);border-bottom:1px solid #dce4df}
.partner-topbar b{display:flex;align-items:center;gap:8px}.partner-topbar i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#16433c;color:#fff;font-size:11px;font-style:normal}.partner-topbar>span{padding:4px 9px;border-radius:20px;background:#e5f3eb;color:#fff;font-size:9px}
.partner-layout{display:grid;grid-template-columns:24% 1fr;height:85%;color:#fff;background:#f0f3f0}.partner-sidebar{display:flex;flex-direction:column;gap:4%;padding:7% 5%;background:#fff;border-right:1px solid #dce4df;color:#fff;font-size:clamp(7px,.72vw,11px);line-height:1.2}.partner-sidebar b{padding:8px 6px;border-radius:8px;background:#16433c;color:#fff}.partner-sidebar small{margin-top:8%;font-size:.72em;letter-spacing:.1em;color:#fff}
.partner-main{position:relative;padding:5% 5%;color:#fff}.partner-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.partner-heading strong{display:block;color:#fff;font-size:clamp(14px,1.5vw,22px);letter-spacing:-.04em}.partner-heading small{display:block;color:#fff;font-size:clamp(8px,.75vw,11px)}.partner-heading>span{padding:5px 8px;border:1px solid #d6dfda;border-radius:8px;color:#fff;font-size:clamp(6px,.65vw,9px);white-space:nowrap}.partner-updated{display:block;margin-top:6%;color:#fff;font-size:clamp(6px,.64vw,9px)}.partner-tabs{display:flex;gap:5px;margin-top:5%;white-space:nowrap}.partner-tabs>*{padding:6px 8px;border-radius:30px;background:#fff;color:#fff;font-size:clamp(5px,.58vw,8px)}.partner-tabs>b{background:#16433c;color:#fff}.partner-empty{position:absolute;left:12%;right:12%;top:45%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;color:#fff}.partner-empty i{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#e8ede8;color:#fff;font-size:23px;font-style:normal}.partner-empty b{font-size:clamp(8px,.85vw,12px)}.partner-empty span{max-width:270px;color:#fff;font-size:clamp(6px,.62vw,9px);line-height:1.35}.partner-preview-open{position:absolute;right:9px;bottom:8px;padding:5px 7px;background:#111210;color:#f5f5f3;font:8px ui-monospace,monospace;letter-spacing:.04em}.sp-partner-detail-button{display:inline-block;margin-top:14px;padding:9px 12px;border:1px solid #777870;color:#f5f5f3;font:10px ui-monospace,monospace;letter-spacing:.07em;transition:background .2s ease,color .2s ease,border-color .2s ease}.sp-partner-detail-button:hover{background:#f5f5f3;color:#111210;border-color:#f5f5f3}
@media(max-width:760px){.partner-empty{top:42%}.partner-topbar i{width:22px;height:22px}.partner-preview-open{right:5px;bottom:5px;font-size:6px}.partner-tabs>*{padding:5px 4px}.sp-partner-detail-button{font-size:9px}}

/* Show the SP Partner workspace on its detailed case page, not the Sites listing. */
.case-partner-preview{padding:58px 0 0}.case-partner-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:20px}.case-partner-heading h2{font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 0}.case-partner-heading>p{max-width:360px;color:#c4c4bd;margin:0}.case-partner-preview .sp-partner-preview{aspect-ratio:16/8.4}.case-partner-preview .partner-topbar{font-size:clamp(13px,1vw,16px)}.case-partner-preview .partner-layout{grid-template-columns:18% 1fr}.case-partner-preview .partner-sidebar{font-size:clamp(10px,.8vw,13px);gap:3%;padding:4% 5%}.case-partner-preview .partner-main{padding:3% 4%}.case-partner-preview .partner-heading strong{font-size:clamp(24px,2vw,34px)}.case-partner-preview .partner-heading small,.case-partner-preview .partner-updated{font-size:clamp(11px,.8vw,14px)}.case-partner-preview .partner-tabs>*{font-size:clamp(9px,.75vw,12px);padding:8px 12px}.case-partner-preview .partner-empty{top:40%;gap:10px}.case-partner-preview .partner-empty i{width:64px;height:64px;font-size:32px}.case-partner-preview .partner-empty b{font-size:clamp(15px,1.2vw,20px)}.case-partner-preview .partner-empty span{font-size:clamp(11px,.8vw,14px)}.case-partner-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:16px}.case-partner-actions .sp-partner-detail-button{margin:0}.case-partner-actions .sp-partner-open{color:#f5f5f3;border-bottom:1px solid #777870;padding:8px 0;font:10px ui-monospace,monospace;letter-spacing:.06em}.case-partner-actions small{color:#999b90;font:10px ui-monospace,monospace}
.partner-topbar{color:#173f39}.partner-topbar>span{color:#176b53}.partner-layout{color:#193d38}.partner-sidebar{color:#566e68}.partner-sidebar small{color:#96a39c}.partner-heading strong,.partner-heading small,.partner-heading>span,.partner-updated,.partner-tabs>*,.partner-empty{color:#193d38}.partner-tabs>b{color:#fff}.partner-empty span{color:#6b817a}.partner-empty i{color:#748a82}
@media(max-width:760px){.case-partner-preview{padding-top:38px}.case-partner-heading{display:block}.case-partner-heading>p{margin-top:12px}.case-partner-preview .sp-partner-preview{aspect-ratio:4/3}.case-partner-preview .partner-sidebar{font-size:8px}.case-partner-preview .partner-tabs>*{font-size:7px;padding:5px 6px}.case-partner-preview .partner-heading strong{font-size:18px}.case-partner-preview .partner-heading small,.case-partner-preview .partner-updated{font-size:8px}.case-partner-preview .partner-empty i{width:42px;height:42px;font-size:22px}.case-partner-preview .partner-empty b{font-size:11px}.case-partner-preview .partner-empty span{font-size:8px}.case-partner-actions{gap:10px 18px}.case-partner-actions small{width:100%}}

/* Homepage signature: preserve Sohan's handwriting and give it a clearer finish. */
.hero-signature{width:min(100%,620px);min-height:300px;justify-self:end;align-self:center;position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 0 18px;isolation:isolate}
.hero-signature:before{content:"";position:absolute;inset:17% 5% 22%;z-index:-1;background:radial-gradient(ellipse at 50% 52%,rgba(198,210,124,.075),rgba(245,245,243,.025) 34%,transparent 70%);filter:blur(24px);opacity:0;animation:signature-aura 7.8s ease 3.5s both}
.signature-overline,.signature-caption{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:#f5f5f3}
.signature-overline{display:flex;align-items:center;gap:10px;color:var(--accent);opacity:0;animation:signature-meta-in .7s ease 4s forwards}
.signature-overline:before{content:"";width:22px;height:1px;flex:0 0 auto;background:currentColor;box-shadow:0 0 8px rgba(198,210,124,.28)}
.signature-drawing{display:block;width:100%;height:auto;overflow:visible;margin:5px 0 2px;transform-origin:center;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease}.signature-strokes path{fill:none;stroke:#f5f5f3;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 0 rgba(245,245,243,0));animation:signature-pen var(--draw,.25s) cubic-bezier(.4,0,.22,1) var(--delay,0s) forwards}.signature-strokes .signature-underline{stroke-width:8;filter:drop-shadow(0 0 0 rgba(245,245,243,0));animation:signature-pen var(--draw,.8s) cubic-bezier(.4,0,.22,1) var(--delay,3.05s) forwards}
.hero-signature:hover .signature-drawing{transform:translateY(-2px) scale(1.008);filter:drop-shadow(0 5px 16px rgba(198,210,124,.1))}
.signature-caption{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 5px;padding-top:10px;border:0;opacity:0;animation:signature-meta-in .7s ease 4.2s forwards}
.signature-caption:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(198,210,124,.58),rgba(242,240,233,.2) 38%,rgba(242,240,233,.12))}
.signature-caption span:first-child{color:#f2f0e9;font-size:10px;letter-spacing:.14em}
.signature-caption span:last-child{color:#b9b8af;font-size:9px;letter-spacing:.1em;text-align:right}
.signature-cursor{position:absolute;top:51%;left:9%;width:2px;height:22px;background:var(--accent);opacity:0;filter:drop-shadow(0 0 7px rgba(198,210,124,.52));animation:signature-cursor-travel 3.85s cubic-bezier(.56,.02,.32,1) .12s both}
@keyframes signature-pen{to{stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(198,210,124,.18))}}
@keyframes signature-meta-in{to{opacity:.78}}
@keyframes signature-aura{0%{opacity:0}20%{opacity:.72}100%{opacity:.24}}
@keyframes signature-ink-glow{0%{filter:drop-shadow(0 0 0 rgba(245,245,243,0))}45%{filter:drop-shadow(0 0 8px rgba(245,245,243,.28))}100%{filter:drop-shadow(0 0 2px rgba(245,245,243,.14))}}
@keyframes signature-cursor-travel{0%{opacity:0;left:9%}4%{opacity:.9}84%{opacity:.9;left:86%}94%{opacity:.9;left:92%}100%{opacity:0;left:96%}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:20px}.hero-signature{width:min(100%,540px);min-height:200px;justify-self:center;padding:12px 0 22px}.signature-overline{font-size:9px}.signature-caption{font-size:9px;letter-spacing:.1em;padding-top:8px}.signature-caption span:first-child{font-size:9px}.signature-caption span:last-child{font-size:8px}.site-header nav{font-size:9px;gap:6px}}
@media(max-width:420px){.signature-caption{align-items:flex-start;flex-direction:column;gap:3px}.signature-caption span:last-child{text-align:left;font-size:8px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.signature-strokes path{animation:none;stroke-dashoffset:0;filter:none}.signature-overline,.signature-caption{opacity:.78;animation:none}.hero-signature:before{opacity:.24;animation:none}.signature-drawing{transition:none}.hero-signature:hover .signature-drawing{transform:none;filter:none}.signature-cursor{display:none}}

/* Human Intelligence page */
.mind-hero,.mind-section{width:var(--page);max-width:1320px;margin:auto}
.mind-hero{min-height:calc(100vh - 84px);display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:3%;padding:66px 0 90px;position:relative}
.mind-copy{max-width:590px;position:relative;z-index:2}
.space-heading{position:relative;z-index:2;width:100%;max-width:700px;min-height:390px;justify-self:end;display:grid;place-items:center;animation:asteroid-drift 11s ease-in-out infinite alternate}
.asteroid-rock{position:absolute;inset:7% 4%;overflow:hidden;clip-path:polygon(12% 20%,25% 8%,43% 5%,59% 11%,76% 9%,91% 24%,97% 43%,93% 61%,86% 79%,69% 91%,51% 96%,34% 89%,18% 91%,7% 75%,3% 57%,6% 38%);background:radial-gradient(ellipse at 27% 18%,rgba(255,255,255,.76),rgba(210,218,226,.2) 9%,transparent 23%),radial-gradient(ellipse at 34% 26%,#737c85 0%,#515961 20%,#343a40 42%,#1d2227 67%,#080a0d 100%);box-shadow:inset -30px -22px 55px rgba(0,0,0,.92),inset 14px 12px 27px rgba(255,255,255,.15),0 38px 70px rgba(0,0,0,.56);filter:drop-shadow(0 20px 52px rgba(0,0,0,.46));opacity:.97;transform:rotateX(9deg) rotateY(-13deg) rotateZ(-7deg);animation:asteroid-turn 18s ease-in-out infinite alternate}
.asteroid-rock:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 39%,rgba(255,255,255,.25) 0 1%,transparent 1.5%),radial-gradient(ellipse at 82% 56%,rgba(255,255,255,.13) 0 1%,transparent 1.7%),radial-gradient(ellipse at 47% 84%,rgba(0,0,0,.6) 0 2%,transparent 2.7%),radial-gradient(ellipse at 54% 58%,transparent 0 25%,rgba(0,0,0,.34) 72%),repeating-radial-gradient(ellipse at 56% 48%,transparent 0 13px,rgba(255,255,255,.045) 14px 15px,transparent 16px 31px);mix-blend-mode:screen;opacity:.74}
.asteroid-rock:after{content:"";position:absolute;inset:-5%;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.18) 43%,rgba(255,255,255,.04) 48%,transparent 59%),radial-gradient(ellipse at 30% 22%,rgba(255,255,255,.16),transparent 36%);mix-blend-mode:screen;opacity:.7}
.asteroid-rock span{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 36% 32%,rgba(0,0,0,.48),rgba(0,0,0,.12) 46%,transparent 72%);filter:blur(.5px)}
.asteroid-rock span:nth-child(1){width:14%;aspect-ratio:1;left:22%;top:28%}.asteroid-rock span:nth-child(2){width:9%;aspect-ratio:1;left:67%;top:27%}.asteroid-rock span:nth-child(3){width:11%;aspect-ratio:1;left:56%;top:68%}.asteroid-rock span:nth-child(4){width:7%;aspect-ratio:1;left:32%;top:70%}
.asteroid-copy{position:relative;z-index:2;width:76%;transform:rotate(-2deg);text-shadow:0 2px 18px rgba(0,0,0,.48)}
.asteroid-copy>p{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:rgba(167,219,255,.84);margin:0 0 19px}
.asteroid-copy h1{font-size:clamp(48px,5.1vw,82px);line-height:.94;letter-spacing:-.06em;margin:0;color:#f5f5f3}
.asteroid-copy h1 em{font-family:Georgia,serif;font-weight:400;color:#d0bdff}
.mind-copy>p:not(.eyebrow){max-width:520px;color:#c5c4bd;font-size:18px;line-height:1.75}
.mind-manifesto{margin-top:29px;padding-top:19px;border-top:1px solid var(--line);font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;color:#c8c8c2}
.starburst-trigger{display:inline-flex;align-items:center;gap:9px;margin:20px 0 3px;padding:0;border:0;background:none;color:#c8c8c2;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;cursor:pointer;transition:color .2s ease,transform .2s ease}.starburst-trigger:hover,.starburst-trigger:focus-visible{color:#fff;transform:translateY(-2px)}.starburst-trigger:focus-visible{outline:1px solid rgba(181,163,255,.75);outline-offset:6px}.starburst-trigger-icon{color:#d0bdff;font-size:15px;text-shadow:0 0 12px rgba(181,163,255,.8);animation:star-hint 2.4s ease-in-out infinite}
.universe-page{position:relative;background:radial-gradient(ellipse at 14% 24%,rgba(103,75,224,.2),transparent 39%),radial-gradient(ellipse at 86% 28%,rgba(34,163,205,.17),transparent 36%),radial-gradient(ellipse at 61% 76%,rgba(194,66,150,.12),transparent 42%),#070913;animation:none!important;isolation:isolate}
.universe-page:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(222,221,255,.055),transparent 54%),radial-gradient(ellipse at 9% 70%,rgba(43,163,205,.08),transparent 43%),radial-gradient(ellipse at 90% 78%,rgba(176,83,201,.08),transparent 38%),linear-gradient(180deg,rgba(7,8,10,.02),rgba(7,8,10,.18))}
.universe-page>.site-header,.universe-page>main,.universe-page>.site-footer{position:relative;z-index:1}
.universe-page:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;background:url("./human-intelligence-starfield.svg?v=star-density-balanced-20261015c") center/cover no-repeat}
@media(prefers-reduced-motion:reduce){.universe-page:after{opacity:1}}
.universe-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;will-change:transform,opacity;transition:opacity 1.7s ease}
.universe-page.particle-reveal-active>.universe-field{z-index:2;opacity:1}
.universe-page.particle-universe-lingering>.universe-field{z-index:0;opacity:.88}
.neural-constellation{position:absolute;z-index:1;right:-3%;top:50%;width:min(56vw,790px);height:auto;max-height:88%;overflow:visible;transform:translateY(-50%);opacity:.92;pointer-events:none;filter:drop-shadow(0 0 24px rgba(245,245,243,.08));animation:constellation-breathe 8s ease-in-out infinite alternate}
.constellation-links{fill:none;stroke:rgba(245,245,243,.26);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round;animation:constellation-flow 11s linear infinite}
.constellation-stars circle{fill:#f5f5f3;transform-box:fill-box;transform-origin:center;animation:constellation-fire 1.8s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(245,245,243,.55))}
.constellation-stars circle:nth-child(3n){animation-delay:-.9s}.constellation-stars circle:nth-child(4n){animation-delay:-1.7s}
.constellation-labels{fill:rgba(245,245,243,.72);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px}
.neural-signals{fill:#e8dcff;filter:drop-shadow(0 0 7px rgba(188,162,255,.95))}
.neural-signals circle{opacity:.94}
.mind-section{padding:56px 0 76px;border-top:1px solid var(--line)}
.mind-section h2{font-size:clamp(36px,5vw,62px);line-height:1.03;letter-spacing:-.045em;margin:16px 0 30px;max-width:770px}
.mind-section>p:not(.eyebrow){max-width:740px;color:#c2c2ba;font-size:16px;line-height:1.8}
.mind-principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mind-principles article{padding:22px 24px 24px 0;border-right:1px solid var(--line);margin-right:24px}
.mind-principles article:last-child{border:0;margin:0}
.mind-principles span{font:10px ui-monospace,monospace;letter-spacing:.12em;color:#aaa99f}
.mind-principles h3{font-size:21px;margin:18px 0 8px}
.mind-principles p{font-size:13px;color:#aaa99f;line-height:1.7;margin:0}
.mind-quote{font-size:clamp(27px,4.6vw,54px)!important;line-height:1.13!important;letter-spacing:-.035em;color:#f5f5f3!important;max-width:950px!important;margin:0!important}
.mind-cta{margin-top:26px}
@keyframes constellation-flow{to{stroke-dashoffset:-64}}
@keyframes constellation-fire{0%,100%{opacity:.4;transform:scale(.72)}42%{opacity:1;transform:scale(1.65)}}
@keyframes constellation-breathe{from{margin-top:-5px}to{margin-top:5px}}
@keyframes star-hint{0%,100%{transform:scale(.86);opacity:.72}50%{transform:scale(1.2);opacity:1}}
@keyframes asteroid-drift{from{transform:translate3d(0,-9px,0) rotate(-1.5deg)}to{transform:translate3d(0,9px,0) rotate(1.5deg)}}
@media(max-width:760px){.mind-hero{min-height:auto;grid-template-columns:1fr;gap:24px;padding:52px 0 54px}.mind-copy h1{font-size:clamp(48px,12vw,72px)}.mind-copy>p:not(.eyebrow){font-size:16px}.starburst-trigger{margin-top:18px;font-size:9px;min-height:32px}.neural-constellation{position:relative;top:auto;right:auto;transform:none;width:min(100%,520px);max-height:none;opacity:.7;margin:-20px auto -150px;display:block;z-index:0}.space-heading{width:min(100%,520px);min-height:300px;justify-self:center;margin:0 auto;z-index:2}.asteroid-copy{width:78%}.asteroid-copy h1{font-size:clamp(52px,12vw,72px)}.asteroid-copy>p{font-size:9px;letter-spacing:.13em}.mind-section{padding:44px 0 56px}.mind-principles{grid-template-columns:1fr}.mind-principles article{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:18px 0}.mind-principles article:last-child{border:0}.mind-section h2{font-size:clamp(34px,9vw,48px)}}

.universe-page .mind-section{background:transparent}

/* Keep the starfield anchored to the visible viewport as mobile browser chrome moves. */
@supports (height: 100dvh){.universe-field{height:100dvh}}

/* Keep the original traced mark crisp while the new byline carries its accent. */
.signature-drawing{shape-rendering:geometricPrecision}
.signature-strokes path:not(.signature-underline){stroke:#f2f0e9;stroke-width:10.5}
.signature-strokes .signature-underline{stroke:var(--accent);stroke-width:6;opacity:.78;filter:drop-shadow(0 0 5px rgba(198,210,124,.14));animation:signature-pen var(--draw,.8s) cubic-bezier(.4,0,.22,1) var(--delay,3.05s) forwards}
.signature-strokes path:not(.signature-underline){filter:drop-shadow(0 0 2px rgba(198,210,124,.1))}
.signature-cursor{width:1.5px}
@media(max-width:760px){.hero-signature{min-height:0;padding:8px 0 22px}.signature-strokes path:not(.signature-underline){stroke-width:9.5}.signature-caption{padding-top:8px}}


/* Keep the traced signature even, crisp, and entirely white. */
.hero-signature{--signature-ink:#f5f5f3}
.hero-signature:before{background:radial-gradient(ellipse at 50% 52%,rgba(245,245,243,.055),rgba(245,245,243,.02) 34%,transparent 70%)}
.hero-signature .signature-overline{color:var(--signature-ink)}
.hero-signature .signature-overline:before{box-shadow:0 0 8px rgba(245,245,243,.24)}
.hero-signature .signature-strokes path{stroke:var(--signature-ink);stroke-width:10.25}
.hero-signature .signature-strokes .signature-underline{stroke:var(--signature-ink);stroke-width:8;filter:drop-shadow(0 0 4px rgba(245,245,243,.12))}
.hero-signature .signature-caption:before{background:linear-gradient(90deg,rgba(245,245,243,.5),rgba(245,245,243,.2) 38%,rgba(245,245,243,.12))}
.hero-signature .signature-cursor{background:var(--signature-ink);filter:drop-shadow(0 0 7px rgba(245,245,243,.4))}
.hero-signature:hover .signature-drawing{filter:drop-shadow(0 5px 16px rgba(245,245,243,.1))}
@keyframes signature-pen{to{stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(245,245,243,.14))}}
@media(max-width:760px){.hero-signature .signature-strokes path:not(.signature-underline){stroke-width:9.75}.hero-signature .signature-strokes .signature-underline{stroke-width:6.75}}


/* Keep the signature name and byline intact at narrow desktop widths. */
@media(max-width:900px){.hero-signature .signature-caption{align-items:flex-start;flex-direction:column;gap:3px}.hero-signature .signature-caption span:first-child,.hero-signature .signature-caption span:last-child{white-space:nowrap;text-align:left}.hero-signature .signature-caption span:last-child{font-size:8px;letter-spacing:.08em}}


/* Make the complete handwritten mark a clear, keyboard-accessible About link. */
.hero-signature{cursor:pointer}
.hero-signature:focus-visible{outline:1px solid rgba(245,245,243,.72);outline-offset:8px}


/* Open portfolio photos in a focused, full-size lightbox. */
.photo-open{display:block;width:100%;height:calc(100% - 32px);padding:0;border:0;border-radius:0;background:#171815;overflow:hidden;text-align:left;cursor:zoom-in}
.photo-open img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.83);transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.photo-open:hover img{transform:scale(1.025);filter:saturate(1) brightness(1.04)}
.photo-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px;position:relative;z-index:1}
.photo-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;overflow:auto;background:rgba(8,9,8,.96);color:var(--ink);place-items:center}
.photo-lightbox:not([open]){display:none}
.photo-lightbox[open]{display:grid}
.photo-lightbox::backdrop{background:rgba(5,6,5,.88);backdrop-filter:blur(10px)}
.photo-lightbox-figure{display:grid;place-items:center;gap:12px;width:100%;height:100%;margin:0}
.photo-lightbox-image{display:block;max-width:min(92vw,1600px);max-height:calc(88vh - 40px);width:auto;height:auto;object-fit:contain;box-shadow:0 18px 70px rgba(0,0,0,.5)}
.photo-lightbox-caption{max-width:92vw;color:#ddd;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-align:center}
.photo-lightbox-close{position:absolute;top:18px;right:18px;z-index:1;width:44px;height:44px;border:1px solid rgba(245,245,243,.42);border-radius:50%;background:rgba(17,18,16,.7);color:#f5f5f3;font:28px/1 Arial,sans-serif;cursor:pointer}
.photo-lightbox-close:hover{border-color:#f5f5f3;background:#f5f5f3;color:#111210}
@media(max-width:600px){.photo-lightbox{padding:14px}.photo-lightbox-image{max-width:96vw;max-height:82vh}.photo-lightbox-close{top:10px;right:10px}}
@media(prefers-reduced-motion:reduce){.photo-open img{transition:none}.photo-open:hover img{transform:none}.photo-lightbox::backdrop{backdrop-filter:none}}


/* Personal service promise, shared across the portfolio */
.working-promise{width:var(--page);max-width:1320px;margin:0 auto;padding:25px 0 27px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:28px}.working-promise-copy{display:flex;align-items:baseline;gap:22px;min-width:0}.working-promise-copy>.eyebrow{margin:0;white-space:nowrap;color:var(--muted)}.working-promise-copy>p:last-child{margin:0;max-width:760px;color:#c5c4bd;font-size:13px;line-height:1.65}.working-promise strong{color:#f5f5f3;font-weight:600}.working-promise>a{color:#f5f5f3;border-bottom:1px solid #9b9c92;padding:7px 0;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;white-space:nowrap}.working-promise>a span{color:#f5f5f3;margin-left:7px;transition:transform .2s}.working-promise>a:hover span{transform:translate(2px,-2px)}
@media(max-width:760px){.working-promise{align-items:flex-start;flex-direction:column;gap:12px;padding:22px 0}.working-promise-copy{display:block}.working-promise-copy>.eyebrow{margin:0 0 8px}.working-promise-copy>p:last-child{font-size:13px}.working-promise>a{margin:0}}
.photo-grid .portrait-feature .photo-open img{object-position:64% center}
/* Show the complete landscape portrait on About instead of cropping it. */
.about-hero .about-portrait img{height:auto;aspect-ratio:16 / 9;object-fit:contain;object-position:center;background:#111210}

/* Enlarge the portrait gallery feature without cropping the full photo. */
.photo-grid .portrait-feature{grid-column:span 2;grid-row:span 2}
.photo-grid .portrait-feature .photo-open{height:auto;aspect-ratio:16 / 9}
.photo-grid .portrait-feature .photo-open img{object-fit:contain;object-position:center;background:#111210}
@media(max-width:760px){.photo-grid .portrait-feature{grid-row:span 1}}

/* Give the full portrait more room on the About page. */
.about-hero{max-width:1320px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:6%}

/* Blend the portrait lighting gently into the About section. */
.about-hero{position:relative;isolation:isolate}
.about-hero::before{content:"";position:absolute;z-index:-1;inset:-6% -3%;pointer-events:none;background:radial-gradient(ellipse 38% 46% at 69% 47%,rgba(151,135,126,.14),transparent 76%),radial-gradient(ellipse 20% 32% at 51% 24%,rgba(157,143,135,.075),transparent 74%)}
.about-portrait{position:relative;isolation:isolate}
.about-portrait::before{content:"";position:absolute;z-index:-1;inset:-10% -8% -13%;pointer-events:none;background:linear-gradient(90deg,rgba(173,157,148,.16),rgba(17,18,16,0) 55%),url("./assets/sohan-about-portrait.jpg") center/cover no-repeat;filter:blur(30px) saturate(.58);opacity:.56;transform:scale(.94)}
.about-portrait img{position:relative;display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;object-position:center;background:transparent;box-shadow:0 24px 65px rgba(0,0,0,.26)}
@media(max-width:760px){.about-hero::before{inset:-3% -3%;background:radial-gradient(ellipse 85% 24% at 55% 57%,rgba(151,135,126,.11),transparent 76%)}.about-portrait::before{inset:-8% -4% -10%;filter:blur(22px);opacity:.46}}

/* Mixed-media portfolio gallery */
.gallery-filters{width:var(--page);max-width:1320px;margin:0 auto 18px;display:flex;flex-wrap:wrap;gap:8px}
.gallery-filter{border:1px solid var(--line);padding:8px 12px;background:transparent;color:#c8c8c1;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.gallery-filter:hover,.gallery-filter[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:rgba(198,210,124,.07)}
.gallery-filter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gallery-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.photo-grid figure[hidden]{display:none!important}
.photo-grid .gallery-code{min-width:0;min-height:0;padding:15px 16px 14px;border:1px solid #353630;background:linear-gradient(145deg,#1a1c19,#111210);display:flex;flex-direction:column;gap:10px}
.code-window-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a9aa9f;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.code-window-dots{display:flex;gap:4px}
.code-window-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#67685f}
.code-window-dots i:first-child{background:#c6d27c}
.gallery-code pre{min-width:0;margin:0;overflow:auto;color:#e5e3dc;font:9px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
.gallery-code code{font:inherit}
.gallery-code figcaption{margin-top:auto;color:#aaa99f;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.gallery-code figcaption strong{display:block;margin-bottom:3px;color:#f2f0e9;font:600 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}
@media(max-width:760px){.gallery-filters{gap:6px;margin-bottom:14px}.gallery-filter{padding:7px 9px;font-size:9px}.photo-grid .gallery-code{padding:12px 11px}.gallery-code pre{font-size:8px}}
@media(prefers-reduced-motion:reduce){.gallery-filter{transition:none}}


/* Restore a true single-column About layout on phones; keep the full portrait readable. */
@media(max-width:760px){.about-hero{grid-template-columns:minmax(0,1fr);gap:28px}.about-hero>div,.about-hero>.about-portrait{min-width:0;width:100%}.about-hero .about-portrait img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;object-position:center}}


/* Apps portfolio page: customer ordering and private restaurant operations. */
.apps-list{width:var(--page);max-width:1320px;margin:0 auto 110px}
.apps-intro{padding-bottom:58px}
.apps-intro-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted)}
.app-project{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:6%;padding:38px 0 64px;border-top:1px solid var(--line)}
.app-project-reverse{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.app-project-reverse .app-project-media{order:2}
.app-project-media{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:410px;padding:24px;overflow:hidden;border:1px solid #343631;background:radial-gradient(ellipse at 50% 48%,#222820 0%,#171915 50%,#121310 100%)}
.partner-app-screen{width:100%;max-width:720px;overflow:hidden;border:1px solid #cbd5ce;border-radius:8px;background:#f4f7f4;color:#17332c;box-shadow:0 22px 60px #0008;font-family:Arial,Helvetica,sans-serif}
.partner-app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 18px;background:#fff;border-bottom:1px solid #dfe6e0;color:#17332c;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.partner-app-top>span:first-child{display:flex;align-items:center;gap:9px}.partner-app-top b{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#18513f;color:#fff;font-size:11px}.partner-app-top small{margin-left:5px;color:#69786e;font-size:8px}
.partner-app-lock{padding:7px 9px;border:1px solid #dce5de;border-radius:20px;color:#527260;font-size:8px;white-space:nowrap}
.partner-app-layout{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:285px}
.partner-app-sidebar{display:flex;flex-direction:column;gap:8px;padding:19px 13px;background:#edf2ed;border-right:1px solid #dfe6e0;color:#55655a;font-size:11px}
.partner-app-sidebar>span{padding:9px 10px;border-radius:6px}.partner-app-sidebar>.partner-app-active{background:#d9e9df;color:#174d3a;font-weight:700}
.partner-app-sidebar small{margin-top:auto;padding:8px 4px 0;border-top:1px solid #d4dfd6;color:#77867a;font:8px ui-monospace,monospace;letter-spacing:.06em}
.partner-app-main{padding:24px 25px}.partner-app-main .eyebrow{margin-bottom:8px;color:#627467;font-size:8px}.partner-app-main h2{margin-bottom:20px;color:#153b30;font-size:clamp(18px,2.1vw,28px);line-height:1.08;letter-spacing:-.04em}
.partner-app-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.partner-app-cards>div{display:flex;flex-direction:column;gap:13px;min-height:82px;padding:13px;border:1px solid #dce5de;border-radius:6px;background:#fff}.partner-app-cards small{color:#738276;font:8px ui-monospace,monospace;letter-spacing:.06em}.partner-app-cards strong{color:#21473a;font-size:11px;line-height:1.35}
.partner-app-foot{margin:18px 0 0;color:#68786d;font-size:10px;line-height:1.5}
.app-media-caption{position:absolute;right:12px;bottom:12px;padding:8px 10px;background:#111210e8;color:#f5f5f3;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.app-bongfoods-media{background:#181915}.app-bongfoods-media img{display:block;width:100%;max-width:760px;max-height:440px;object-fit:cover;object-position:top;border:1px solid #454741;box-shadow:0 22px 60px #0008}
.app-project-copy .eyebrow{margin-bottom:12px}.app-project-copy h2{margin:0 0 16px;font-size:clamp(38px,4.5vw,62px);line-height:.98;letter-spacing:-.065em}
.app-project-copy>p:not(.eyebrow){max-width:540px;color:#c3c3bb;font-size:16px;line-height:1.75}
.app-facts{margin:24px 0 15px;border-top:1px solid var(--line)}
.app-facts>div{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.app-facts dt{color:var(--muted);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.app-facts dd{margin:0;color:#dadad3;font-size:13px}
.app-project-actions{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.app-project-actions a{display:inline-block;padding:7px 0;border-bottom:1px solid #77796e;color:var(--accent);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em}
.app-project-actions a:hover{border-color:var(--accent)}
@media(max-width:760px){
  .apps-intro{padding-bottom:42px}.apps-intro-meta{gap:10px 18px;font-size:8px}
  .apps-list{margin-bottom:70px}.app-project,.app-project-reverse{grid-template-columns:1fr;gap:22px;padding:24px 0 42px}
  .app-project-reverse .app-project-media{order:0}.app-project-media{min-height:340px;padding:14px}
  .partner-app-layout{grid-template-columns:112px minmax(0,1fr);min-height:260px}
  .partner-app-main{padding:18px 15px}.partner-app-main h2{font-size:20px}
  .partner-app-cards{grid-template-columns:1fr;gap:7px}.partner-app-cards>div{gap:7px;min-height:0;padding:9px}
  .app-project-copy h2{font-size:44px}
}
@media(max-width:390px){
  .site-header nav{gap:5px;font-size:9px}
  .app-project-media{min-height:315px;padding:9px}
  .partner-app-layout{grid-template-columns:88px minmax(0,1fr);min-height:280px}
  .partner-app-top{padding:9px 10px;font-size:8px}.partner-app-top small{display:none}
  .partner-app-lock{font-size:7px}
  .partner-app-sidebar{padding:14px 8px;font-size:9px}
  .partner-app-main{padding:16px 10px}.partner-app-main h2{font-size:18px}
  .partner-app-foot{font-size:9px}
  .app-facts>div{grid-template-columns:90px 1fr}
}

/* Services page: compact service cards and animated industry illustration. */
.service-grid:not(.service-industries-layout)>article:not(.service-note){min-height:250px;padding:26px}
.service-grid:not(.service-industries-layout) .service-visual{width:calc(100% + 52px);aspect-ratio:16/9;object-fit:cover;margin:-26px -26px 18px}
.service-grid:not(.service-industries-layout) h2{font-size:clamp(24px,2.3vw,29px);margin:23px 0 8px}
.service-industries{width:var(--page);max-width:1320px;margin:0 auto 100px;padding:56px 0 0;border-top:1px solid var(--line)}
.service-industries-heading{max-width:760px;margin:0 0 28px}
.service-industries-heading h2{margin:17px 0 14px;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.06em}
.service-industries-heading h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.service-industries-heading>p:last-child{max-width:690px;margin:0;color:#c0bfb7;font-size:16px;line-height:1.7}
.service-industries-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:18px;align-items:stretch}
.service-industry-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:430px;margin:0;padding:18px 14px 12px;overflow:hidden;border:1px solid #343631;background:radial-gradient(ellipse at 50% 48%,rgba(245,245,243,.095),transparent 63%),linear-gradient(145deg,#171915,#111210)}
.industry-art-svg{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.service-industry-art figcaption{position:relative;z-index:1;margin-top:-3px;color:#a7a99c;text-align:center;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.industry-art-orbit{animation:industry-orbit 32s linear infinite}
.industry-art-route{animation:industry-route 12s linear infinite;filter:drop-shadow(0 0 4px rgba(255,255,255,.42))}
.industry-art-center{transform-box:fill-box;transform-origin:center;animation:industry-center 5s ease-in-out infinite}
.industry-art-live{transform-box:fill-box;transform-origin:center;animation:industry-live 1.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.95))}
.industry-art-node{transform-box:fill-box;transform-origin:center;animation:industry-float 4.8s ease-in-out infinite;filter:drop-shadow(0 0 7px rgba(255,255,255,.2))}
.industry-art-node-saas{animation-delay:-1.2s}
.industry-art-node-shop{animation-delay:-2.4s}
.industry-art-node-hospitality{animation-delay:-3.6s}
.industry-art-spark{transform-box:fill-box;transform-origin:center;animation:industry-spark 3.6s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
.industry-art-spark-two{animation-delay:-1.2s}
.industry-art-spark-three{animation-delay:-2.4s}
@keyframes industry-orbit{to{stroke-dashoffset:-88}}
@keyframes industry-route{to{stroke-dashoffset:104}}
@keyframes industry-center{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes industry-live{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.25)}}
@keyframes industry-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes industry-spark{0%,100%{opacity:.28;transform:scale(.7)}50%{opacity:1;transform:scale(1.35)}}
.service-industry-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.industry-card{min-width:0;min-height:112px;padding:15px 17px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(145deg,#171815,#111210);transition:background-color .25s,border-color .25s}
.industry-card:hover{background:linear-gradient(145deg,#1e2119,#141512)}
.industry-card>span{color:var(--accent);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.industry-card h3{margin:6px 0 4px;color:#f2f0e9;font-size:15px;line-height:1.2;letter-spacing:-.025em}
.industry-card p{margin:0;color:#aaa99f;font-size:11px;line-height:1.45}
@media(max-width:900px){.service-industries-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}.service-industry-art{min-height:390px;padding-inline:8px}.industry-card{min-height:106px;padding:13px 12px}.industry-card h3{font-size:14px}}
@media(max-width:760px){.service-grid:not(.service-industries-layout)>article:not(.service-note){min-height:210px;padding:20px}.service-grid:not(.service-industries-layout) .service-visual{width:calc(100% + 40px);aspect-ratio:16/9;margin:-20px -20px 15px}.service-grid:not(.service-industries-layout) h2{font-size:25px;margin:18px 0 7px}.service-industries{margin-bottom:68px;padding-top:42px}.service-industries-heading{margin-bottom:22px}.service-industries-heading h2{font-size:clamp(36px,9vw,50px)}.service-industries-heading>p:last-child{font-size:15px}.service-industries-layout{grid-template-columns:1fr;gap:12px}.service-industry-art{min-height:0;aspect-ratio:1.32/1;padding:8px 8px 10px}.industry-art-svg{width:min(100%,430px)}.service-industry-art figcaption{font-size:8px}.industry-card{min-height:101px;padding:12px}.industry-card h3{font-size:13px}.industry-card p{font-size:10px}}
@media(max-width:380px){.service-industry-list{grid-template-columns:1fr}.industry-card{min-height:0;padding:13px 15px}.industry-card p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.industry-art-orbit,.industry-art-route,.industry-art-center,.industry-art-live,.industry-art-node,.industry-art-spark{animation:none!important}}

/* Give each industry tile a small, recognizable white line illustration. */
.industry-card{position:relative;padding-right:66px}
.industry-illustration{position:absolute;top:50%;right:13px;width:40px;height:40px;overflow:visible;transform:translateY(-50%);fill:none;stroke:#f5f5f3;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.84;filter:drop-shadow(0 0 3px rgba(255,255,255,.2));animation:industry-icon-glow 4.4s ease-in-out infinite}
.industry-illustration .icon-light{fill:#fff;stroke:none;filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}
.industry-card:nth-child(2) .industry-illustration{animation-delay:-.55s}
.industry-card:nth-child(3) .industry-illustration{animation-delay:-1.1s}
.industry-card:nth-child(4) .industry-illustration{animation-delay:-1.65s}
.industry-card:nth-child(5) .industry-illustration{animation-delay:-2.2s}
.industry-card:nth-child(6) .industry-illustration{animation-delay:-2.75s}
.industry-card:nth-child(7) .industry-illustration{animation-delay:-3.3s}
.industry-card:nth-child(8) .industry-illustration{animation-delay:-3.85s}
.industry-card:hover .industry-illustration{opacity:1;filter:drop-shadow(0 0 7px rgba(255,255,255,.5))}
@keyframes industry-icon-glow{0%,100%{opacity:.72;filter:drop-shadow(0 0 2px rgba(255,255,255,.16))}50%{opacity:1;filter:drop-shadow(0 0 7px rgba(255,255,255,.55))}}
@media(max-width:760px){.industry-card{padding-right:60px}.industry-illustration{right:10px;width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.industry-illustration{animation:none!important;opacity:.92;filter:drop-shadow(0 0 3px rgba(255,255,255,.28))}}


/* About page: connect previous live creative work to the experience behind the work. */
.about-details{margin-bottom:46px}
.about-experience{width:var(--page);max-width:1320px;margin:0 auto 86px;padding:0 0 64px;display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:clamp(28px,7vw,100px);border-bottom:1px solid var(--line)}
.about-experience>.eyebrow{margin:5px 0 0}
.about-experience-copy h2{max-width:690px;margin:0 0 19px;font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.05em}
.about-experience-copy>p{max-width:690px;color:#c0bfb7;font-size:16px;line-height:1.78}
.about-experience-copy .outline-link{margin-top:8px}
.about-reels{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px}
.about-reel{min-width:0;margin:0}
.about-reel video{display:block;width:100%;aspect-ratio:16/9;background:#08090c;border:1px solid var(--line);object-fit:contain}
.about-reel figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.about-reel figcaption strong{font-size:13px;font-weight:500;letter-spacing:.025em}
.about-reel figcaption a{color:#a7a69f;text-decoration:none;font-size:9px;letter-spacing:.11em;white-space:nowrap}
.about-reel figcaption a:hover{color:#f4f3ee}
@media(max-width:760px){.about-details{margin-bottom:35px}.about-experience{grid-template-columns:1fr;gap:17px;margin-bottom:58px;padding-bottom:46px}.about-experience>.eyebrow{margin:0}.about-experience-copy h2{margin-bottom:15px;font-size:clamp(34px,9vw,48px)}.about-experience-copy>p{font-size:15px;line-height:1.75}.about-experience-copy .outline-link{margin-top:2px}.about-reels{grid-column:1;grid-template-columns:1fr;gap:22px;margin-top:6px}}

/* Short context makes each featured project legible before opening its case story. */
.home-project-summary{max-width:46ch;margin:8px 0 0;color:#b8b8b1;font-size:14px;line-height:1.6}


/* Portfolio work sections: latest verified milestones first. */
.site-group+.site-group{margin-top:30px}
.site-group-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:28px 0 0;border-top:1px solid var(--line)}
.site-group-heading .eyebrow{margin:0;color:var(--accent);font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.site-group-heading h2{margin:0;font-size:clamp(26px,3.1vw,40px);line-height:1;letter-spacing:-.055em}
.site-caption>span,.home-grid span,.case-heading>.eyebrow{font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.095em;color:#d5d5ce}
@media(max-width:760px){.site-group+.site-group{margin-top:18px}.site-group-heading{align-items:flex-start;flex-direction:column;gap:7px;padding-top:23px}.site-group-heading h2{font-size:clamp(26px,7vw,36px)}.site-group-heading .eyebrow{font-size:10px}.site-caption>span,.home-grid span,.case-heading>.eyebrow{font-size:11px;line-height:1.55;letter-spacing:.075em}}

.site-shot img.portrait-concept,.home-grid img.portrait-concept{object-fit:contain;background:#20211e;padding:10px}.case-visual img.portrait-concept{display:block;width:auto;max-width:100%;height:min(72vh,900px);margin:0 auto;object-fit:contain;background:#171815}.case-visual .concept-image-link{display:block;background:#171815}

/* Put the live M. CUSTOMSSS concept directly in its portfolio preview. */
.site-shot.m-customsss-site-shot{aspect-ratio:16/10}
.site-shot.m-customsss-site-shot iframe{width:133.333%;height:133.333%;aspect-ratio:auto;max-width:none;transform:scale(.75);transform-origin:top left}
.case-visual.case-live-visual iframe{display:block;width:100%;height:min(74vh,760px);min-height:520px;border:1px solid var(--line);background:#111210}
.case-visual.case-live-visual figcaption{line-height:1.8}
@media(max-width:760px){.site-shot.m-customsss-site-shot{aspect-ratio:4/5}.site-shot.m-customsss-site-shot iframe{width:100%;height:100%;transform:none}.case-visual.case-live-visual iframe{height:72svh;min-height:520px}}


/* Plain SP Studios wordmark with a restrained, occasional code-like glitch. */
.site-header .wordmark-glitch{position:relative;display:inline-block;isolation:isolate;width:max-content;flex:0 0 auto;white-space:nowrap;text-decoration:none}
.wordmark-glitch::before,.wordmark-glitch::after{position:absolute;inset:0;content:attr(data-glitch);pointer-events:none;opacity:0;will-change:transform,clip-path,opacity}
.wordmark-glitch::before{color:#9cecff;text-shadow:-1px 0 rgba(156,236,255,.72);animation:sp-wordmark-glitch 7.4s steps(1,end) infinite}
.wordmark-glitch::after{color:#f0a0ff;text-shadow:1px 0 rgba(240,160,255,.62);animation:sp-wordmark-glitch 7.4s steps(1,end) -3.7s infinite}
@keyframes sp-wordmark-glitch{
  0%,94.8%,100%{opacity:0;clip-path:inset(48% 0 48%);transform:translateX(0)}
  95%{opacity:.62;clip-path:inset(0 0 71%);transform:translateX(-1px)}
  95.2%{opacity:.36;clip-path:inset(42% 0 35%);transform:translateX(1px)}
  95.4%{opacity:.56;clip-path:inset(76% 0 0);transform:translateX(-.5px)}
  95.7%{opacity:.22;clip-path:inset(19% 0 63%);transform:translateX(1px)}
  96%{opacity:0;clip-path:inset(48% 0 48%);transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.wordmark-glitch::before,.wordmark-glitch::after{display:none;animation:none!important}}

/* Hover-only white electric traces; the wordmark stays plain at rest. */
.wordmark-electric{position:absolute;z-index:2;inset:-5px -4px;width:calc(100% + 8px);height:calc(100% + 10px);display:block;overflow:visible;pointer-events:none;opacity:0}
.wordmark-electric path{fill:none;stroke:#fff;stroke-width:1.55;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.42));stroke-dasharray:26;stroke-dashoffset:26;opacity:0}
.site-header .wordmark-glitch:focus-visible{outline:1px solid rgba(255,255,255,.36);outline-offset:4px;border-radius:2px}
.wordmark-glitch:hover .wordmark-electric,.wordmark-glitch:focus-visible .wordmark-electric{animation:sp-wordmark-electric-flash 1.05s ease-out both}
.wordmark-glitch:hover .wordmark-electric path,.wordmark-glitch:focus-visible .wordmark-electric path{animation:sp-wordmark-electric-draw .9s ease-out both}
.wordmark-glitch:hover .wordmark-electric path:nth-child(2),.wordmark-glitch:focus-visible .wordmark-electric path:nth-child(2){animation-delay:.07s}
.wordmark-glitch:hover::before,.wordmark-glitch:hover::after,.wordmark-glitch:focus-visible::before,.wordmark-glitch:focus-visible::after{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.76);animation:sp-wordmark-hover-slices .82s steps(1,end) both}
.wordmark-glitch:hover::after,.wordmark-glitch:focus-visible::after{animation-delay:.035s}
@keyframes sp-wordmark-electric-flash{0%,100%{opacity:0}16%{opacity:1}48%{opacity:.86}76%{opacity:.48}}
@keyframes sp-wordmark-electric-draw{0%,100%{stroke-dashoffset:26;opacity:0}14%{stroke-dashoffset:20;opacity:1}54%{stroke-dashoffset:0;opacity:.92}78%{stroke-dashoffset:-3;opacity:.28}}
@keyframes sp-wordmark-hover-slices{0%,100%{opacity:0;clip-path:inset(48% 0 48%);transform:translateX(0)}18%{opacity:.72;clip-path:inset(0 0 69%);transform:translateX(-1px)}34%{opacity:.4;clip-path:inset(43% 0 34%);transform:translateX(1px)}52%{opacity:.82;clip-path:inset(75% 0 0);transform:translateX(-.5px)}68%{opacity:.35;clip-path:inset(18% 0 62%);transform:translateX(1px)}86%{opacity:0;clip-path:inset(48% 0 48%);transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.wordmark-electric{display:none}.wordmark-glitch:hover::before,.wordmark-glitch:hover::after,.wordmark-glitch:focus-visible::before,.wordmark-glitch:focus-visible::after{animation:none!important}}

/* Keep the travelling white highlight unmistakable on the wide desktop rail too. */
@media(min-width:901px){.pipeline-rail-wide path.pipeline-flow{stroke-width:5px;filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 11px rgba(255,255,255,.82)) drop-shadow(0 0 24px rgba(255,255,255,.46))}}


/* Give the complete studio pipeline a visible electric charge on desktop and mobile. */
.workflow-pipeline .pipeline-rail path.pipeline-glow{
  fill:none;stroke:#fff;stroke-width:15px;stroke-dasharray:none;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.86;filter:blur(6px);animation:none
}
.workflow-pipeline .pipeline-rail path:not(.pipeline-flow):not(.pipeline-glow){
  stroke:#d8d8d3;stroke-width:2.4px;filter:drop-shadow(0 0 4px rgba(255,255,255,.72)) drop-shadow(0 0 10px rgba(255,255,255,.34))
}
.workflow-pipeline .pipeline-rail path.pipeline-flow{
  stroke:#fff;stroke-width:4px;stroke-dasharray:2 10;stroke-linecap:round;opacity:1;
  filter:drop-shadow(0 0 7px rgba(255,255,255,1)) drop-shadow(0 0 18px rgba(255,255,255,.92)) drop-shadow(0 0 34px rgba(255,255,255,.58));
  animation:pipeline-drift 2.5s linear infinite
}
.workflow-pipeline .pipeline-rail .pipeline-bolt{
  fill:none;stroke:#fff;stroke-width:2.1px;stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 10px rgba(255,255,255,.92)) drop-shadow(0 0 20px rgba(255,255,255,.62));
  animation:pipeline-bolt-charge 5.2s linear infinite
}
@keyframes pipeline-bolt-charge{
  0%,4%,95%,100%{opacity:0}
  8%,88%{opacity:1}
  92%{opacity:.55}
}
.workflow-pipeline article>span{
  animation:pipeline-object-charge 5.2s ease-in-out infinite;
  box-shadow:0 0 0 4px #111210,0 0 8px rgba(255,255,255,.34),0 0 18px rgba(255,255,255,.2)
}
.workflow-pipeline .pipeline-icon{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.52)) drop-shadow(0 0 7px rgba(255,255,255,.22));
  animation:pipeline-object-charge 5.2s ease-in-out infinite
}
.workflow-pipeline article:nth-of-type(1)>span,.workflow-pipeline article:nth-of-type(1) .pipeline-icon{animation-delay:0s}
.workflow-pipeline article:nth-of-type(2)>span,.workflow-pipeline article:nth-of-type(2) .pipeline-icon{animation-delay:.22s}
.workflow-pipeline article:nth-of-type(3)>span,.workflow-pipeline article:nth-of-type(3) .pipeline-icon{animation-delay:.44s}
.workflow-pipeline article:nth-of-type(4)>span,.workflow-pipeline article:nth-of-type(4) .pipeline-icon{animation-delay:.66s}
.workflow-pipeline article:nth-of-type(5)>span,.workflow-pipeline article:nth-of-type(5) .pipeline-icon{animation-delay:.88s}
.workflow-pipeline article:nth-of-type(6)>span,.workflow-pipeline article:nth-of-type(6) .pipeline-icon{animation-delay:1.1s}
.workflow-pipeline .pipe-customer .customer-face{
  filter:drop-shadow(0 0 3px rgba(255,255,255,.76)) drop-shadow(0 0 10px rgba(255,255,255,.38));
  animation:pipeline-object-charge 5.2s ease-in-out infinite
}
.workflow-pipeline .pipe-customer-end .customer-face{animation-delay:1.3s}
@keyframes pipeline-object-charge{
  0%,72%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}
  78%,88%{filter:drop-shadow(0 0 5px rgba(255,255,255,.96)) drop-shadow(0 0 15px rgba(255,255,255,.72))}
}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline .pipeline-rail path.pipeline-flow,.workflow-pipeline .pipeline-rail .pipeline-bolt,
  .workflow-pipeline article>span,.workflow-pipeline .pipeline-icon,.workflow-pipeline .pipe-customer .customer-face{animation:none!important}
  .workflow-pipeline .pipeline-rail .pipeline-bolt{display:none}
}


/* Preserve the original rail animation; let only its moving current glow. */
.workflow-pipeline .pipeline-rail path:not(.pipeline-flow):not(.pipeline-glow){
  stroke:#565751;stroke-width:2px;filter:none
}
.workflow-pipeline .pipeline-rail path.pipeline-glow{
  fill:none;stroke:#fff;stroke-width:9px;stroke-dasharray:2 10;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.48;filter:blur(4px);animation:pipeline-drift 2.5s linear infinite
}
.workflow-pipeline .pipeline-rail path.pipeline-flow{
  stroke:#f5f5f3;stroke-width:2px;stroke-dasharray:2 10;stroke-linecap:round;opacity:1;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.92)) drop-shadow(0 0 9px rgba(255,255,255,.42));
  animation:pipeline-drift 2.5s linear infinite
}
.workflow-pipeline .pipeline-rail .pipeline-bolt{
  fill:none;stroke:#fff;stroke-width:1.65px;stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;opacity:0;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.48));
  animation:pipeline-bolt-crackle 5.2s linear infinite
}
@keyframes pipeline-bolt-crackle{
  0%,7%,13%,29%,35%,51%,57%,73%,79%,95%,100%{opacity:0}
  10%,32%,54%,76%,92%{opacity:.88}
}
.workflow-pipeline article>span{
  animation:pipeline-object-charge 5.2s ease-in-out infinite;
  box-shadow:0 0 0 4px #111210,0 0 5px rgba(255,255,255,.18)
}
.workflow-pipeline .pipeline-icon{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.3));
  animation:pipeline-object-charge 5.2s ease-in-out infinite
}
.workflow-pipeline .pipe-customer .customer-face{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.45));
  animation:pipeline-object-charge 5.2s ease-in-out infinite
}
@keyframes pipeline-object-charge{
  0%,72%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.2))}
  78%,88%{filter:drop-shadow(0 0 4px rgba(255,255,255,.82)) drop-shadow(0 0 9px rgba(255,255,255,.46))}
}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline .pipeline-rail path.pipeline-glow,.workflow-pipeline .pipeline-rail path.pipeline-flow,
  .workflow-pipeline .pipeline-rail .pipeline-bolt,.workflow-pipeline article>span,
  .workflow-pipeline .pipeline-icon,.workflow-pipeline .pipe-customer .customer-face{animation:none!important}
  .workflow-pipeline .pipeline-rail .pipeline-bolt{display:none}
}


/* Preserve the original workflow markers and icons; rail motion is styled below. */


/* Fast, hover-triggered logo-style electric glitch for each workflow title. */
.workflow-pipeline h3[data-glitch]{
  position:relative;display:table;width:max-content;max-width:100%;isolation:isolate
}
.workflow-pipeline h3[data-glitch]::before,
.workflow-pipeline h3[data-glitch]::after{
  position:absolute;inset:0;content:attr(data-glitch);pointer-events:none;opacity:0;
  will-change:transform,clip-path,opacity
}
.workflow-pipeline h3[data-glitch]::before{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.76)}
.workflow-pipeline h3[data-glitch]::after{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.76)}
.workflow-pipeline h3[data-glitch]:hover::before,
.workflow-pipeline h3[data-glitch]:hover::after{
  animation:sp-wordmark-hover-slices .82s steps(1,end) both
}
.workflow-pipeline h3[data-glitch]:hover::after{animation-delay:.035s}
.workflow-pipeline .pipeline-heading-bolt{
  position:absolute;z-index:2;top:-8px;right:-10px;width:15px;height:19px;overflow:visible;
  pointer-events:none;opacity:0
}
.workflow-pipeline .pipeline-heading-bolt path{
  fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.42));
  stroke-dasharray:40;stroke-dashoffset:40;opacity:0
}
.workflow-pipeline h3[data-glitch]:hover .pipeline-heading-bolt{
  animation:sp-wordmark-electric-flash 1.05s ease-out both
}
.workflow-pipeline h3[data-glitch]:hover .pipeline-heading-bolt path{
  animation:sp-wordmark-electric-draw .9s ease-out both
}
.workflow-pipeline h3[data-glitch]:hover .pipeline-heading-bolt path:nth-child(2){animation-delay:.07s}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline h3[data-glitch]::before,.workflow-pipeline h3[data-glitch]::after{display:none;animation:none!important}
  .workflow-pipeline .pipeline-heading-bolt,.workflow-pipeline .pipeline-heading-bolt path{display:none;animation:none!important}
}


/* Draw hover bolts cleanly with normalized SVG path lengths. */
.workflow-pipeline .pipeline-heading-bolt path{stroke-dasharray:1;stroke-dashoffset:1}
.workflow-pipeline h3[data-glitch]:hover .pipeline-heading-bolt path{
  animation:pipeline-heading-bolt-draw .9s ease-out both
}
@keyframes pipeline-heading-bolt-draw{
  0%,100%{stroke-dashoffset:1;opacity:0}
  18%{stroke-dashoffset:.82;opacity:1}
  62%{stroke-dashoffset:0;opacity:.95}
  84%{stroke-dashoffset:-.08;opacity:.3}
}

/* Keep the original workflow design. Animate only quick, white electric zips along the rail. */
.workflow-pipeline article>span{
  display:grid!important;
  animation:none!important;
  filter:none!important;
  box-shadow:0 0 0 4px #111210!important
}
.workflow-pipeline .pipeline-icon{
  display:block!important;
  animation:none!important;
  filter:none!important
}
.workflow-pipeline .pipe-customer .customer-face{
  animation:none!important;
  filter:none!important
}
.workflow-pipeline .pipeline-rail path.pipeline-glow,
.workflow-pipeline .pipeline-rail .pipeline-bolt{
  display:none!important;
  animation:none!important;
  filter:none!important
}
.workflow-pipeline .pipeline-rail path:not(.pipeline-flow):not(.pipeline-glow){
  stroke:#565751;
  stroke-width:2px;
  filter:none
}
.workflow-pipeline .pipeline-rail path.pipeline-flow{
  stroke:#f5f5f3;
  stroke-width:2.3px;
  stroke-dasharray:2 8 1.5 11 2.2 9 1 13 2 8 1.5 13 2.5 10 1.3 14;
  stroke-linecap:round;
  opacity:1;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.48));
  animation:pipeline-electric-zip 1.32s linear infinite
}
@keyframes pipeline-electric-zip{
  from{stroke-dashoffset:0}to{stroke-dashoffset:-100}
}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline .pipeline-rail path.pipeline-flow{
    animation:none!important;
    stroke-dasharray:2 10;
    stroke-dashoffset:0;
    filter:none
  }
}

/* Retain the original thick gray pipeline track; electric zips stay on top of it. */
.workflow-pipeline .pipeline-rail path:not(.pipeline-flow):not(.pipeline-glow):not(.pipeline-bolt){
  stroke:#777870;
  stroke-width:12px;
  stroke-linecap:round;
  filter:none
}

/* A clearly visible live current: bright streaks with traveling lightning flashes. */
.workflow-pipeline .pipeline-rail path.pipeline-glow{
  display:block!important;fill:none!important;stroke:#fff!important;stroke-width:12px!important;
  stroke-dasharray:5 95!important;stroke-linecap:round!important;vector-effect:non-scaling-stroke;
  opacity:.88!important;
  filter:blur(3px) drop-shadow(0 0 5px rgba(255,255,255,.98)) drop-shadow(0 0 13px rgba(255,255,255,.68))!important;
  animation:pipeline-electric-zip 1.58s linear infinite!important
}
.workflow-pipeline .pipeline-rail path.pipeline-flow{
  display:block!important;fill:none!important;stroke:#fff!important;stroke-width:3.4px!important;
  stroke-dasharray:3 97!important;stroke-linecap:round!important;vector-effect:non-scaling-stroke;
  opacity:1!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 8px rgba(255,255,255,.82))!important;
  animation:pipeline-electric-zip 1.58s linear infinite!important
}
@keyframes pipeline-electric-zip{
  from{stroke-dashoffset:0}to{stroke-dashoffset:-100}
}

/* Staggered lightning bolts keep traveling across the rail; each pass crackles visibly. */
.workflow-pipeline .pipeline-rail path.pipeline-bolt{
  display:block!important;fill:#fff!important;fill-opacity:1!important;stroke:#fff!important;
  stroke-width:1.8px!important;stroke-linejoin:miter!important;vector-effect:non-scaling-stroke;
  opacity:.28!important;
  filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 9px rgba(255,255,255,.78))!important;
  animation:pipeline-bolt-current 4.03s linear infinite!important
}
.workflow-pipeline .pipeline-rail path.pipeline-bolt-alt{animation-delay:2.015s!important}
@keyframes pipeline-bolt-current{
  0%,100%{opacity:.28}
  6%{opacity:.34}
  7%{opacity:.96}
  8%{opacity:.4}
  9%{opacity:.86}
  11%{opacity:.3}
  35%{opacity:.24}
  36%{opacity:.94}
  37%{opacity:.38}
  39%{opacity:.9}
  41%{opacity:.28}
  65%{opacity:.24}
  66%{opacity:.96}
  67%{opacity:.4}
  69%{opacity:.9}
  71%{opacity:.28}
  89%{opacity:.24}
  90%{opacity:.9}
  91%{opacity:.38}
  93%{opacity:.94}
  95%{opacity:.28}
}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline .pipeline-rail path.pipeline-glow,
  .workflow-pipeline .pipeline-rail path.pipeline-flow{
    animation:none!important;stroke-dasharray:2 10!important;stroke-dashoffset:0!important;filter:none!important
  }
  .workflow-pipeline .pipeline-rail path.pipeline-glow{opacity:.2!important}
  .workflow-pipeline .pipeline-rail path.pipeline-flow{opacity:.45!important}
  .workflow-pipeline .pipeline-rail path.pipeline-bolt{display:none!important;animation:none!important}
}

/* Branching current arcs travel inside the rail and glitch like a live wire.
   These are open line illustrations rather than a lightning-logo silhouette. */
.workflow-pipeline .pipeline-rail path.pipeline-bolt{
  display:block!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:1.35px!important;
  stroke-linecap:square!important;
  stroke-linejoin:miter!important;
  vector-effect:non-scaling-stroke;
  opacity:.28;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 7px rgba(255,255,255,.66))!important;
  animation:pipeline-arc-glitch 4.03s steps(1,end) infinite!important
}
.workflow-pipeline .pipeline-rail path.pipeline-bolt-alt{animation-delay:2.015s!important}
@keyframes pipeline-arc-glitch{
  0%,100%{opacity:.28}
  4%{opacity:.34}
  4.5%{opacity:.98}
  5%{opacity:.4}
  6%{opacity:.88}
  7.5%{opacity:.3}
  19%{opacity:.28}
  19.5%{opacity:1}
  20%{opacity:.36}
  21%{opacity:.9}
  22%{opacity:.28}
  39%{opacity:.3}
  39.5%{opacity:.98}
  40%{opacity:.38}
  41%{opacity:.9}
  42%{opacity:.28}
  58%{opacity:.28}
  58.5%{opacity:.96}
  59%{opacity:.34}
  60%{opacity:.88}
  61%{opacity:.28}
  78%{opacity:.3}
  78.5%{opacity:1}
  79%{opacity:.38}
  80%{opacity:.92}
  81%{opacity:.28}
  95%{opacity:.28}
}
@media(prefers-reduced-motion:reduce){
  .workflow-pipeline .pipeline-rail path.pipeline-bolt{display:none!important;animation:none!important}
}
/* Hold a soft halo under the moving arc so the rail glows on wide screens too. */
.workflow-pipeline .pipeline-rail path.pipeline-glow{
  display:block!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:9px!important;
  stroke-dasharray:none!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke;
  opacity:.32!important;
  filter:blur(2.5px) drop-shadow(0 0 5px rgba(255,255,255,.78)) drop-shadow(0 0 12px rgba(255,255,255,.4))!important;
  animation:none!important
}
.workflow-pipeline .pipeline-rail path.pipeline-flow{
  stroke-dasharray:3 97!important;
  opacity:1!important;
  filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 11px rgba(255,255,255,.76))!important
}

/* Strong, continuous desktop halo; mobile keeps the calmer rail treatment above. */
@media (min-width: 901px) {
  .workflow-pipeline .pipeline-rail-wide {
    overflow: visible !important;
  }
  .workflow-pipeline .pipeline-rail-wide path.pipeline-glow {
    display: block !important;
    stroke: #fff !important;
    stroke-width: 20px !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: .72 !important;
    filter: blur(5.5px) drop-shadow(0 0 12px rgba(255,255,255,.98)) drop-shadow(0 0 28px rgba(255,255,255,.82)) drop-shadow(0 0 46px rgba(255,255,255,.56)) !important;
    animation: none !important;
  }
  .workflow-pipeline .pipeline-rail-wide path.pipeline-flow {
    display: block !important;
    stroke-width: 5px !important;
    filter: drop-shadow(0 0 7px rgba(255,255,255,1)) drop-shadow(0 0 18px rgba(255,255,255,.96)) drop-shadow(0 0 34px rgba(255,255,255,.7)) !important;
  }
}


/* SP Studios company navigation, studio imagery and hiring pages. */
.nav-company{position:relative}.nav-company>summary{list-style:none;cursor:pointer;color:#d0d0c9;outline-offset:5px}.nav-company>summary::-webkit-details-marker{display:none}.nav-company>summary::after{content:"⌄";display:inline-block;margin-left:7px;color:var(--muted);transition:transform .2s ease}.nav-company[open]>summary::after{transform:rotate(180deg)}.nav-company-menu{position:absolute;top:calc(100% + 17px);left:-14px;z-index:20;width:200px;padding:7px;background:#171815;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.38);display:grid;gap:0}.site-header nav .nav-company-menu a{display:block;padding:10px 13px;color:#d0d0c9;font-size:13px;white-space:nowrap}.site-header nav .nav-company-menu a:hover{background:#22231f;color:var(--accent)}
.studio-gallery{width:var(--page);max-width:1120px;margin:0 auto 78px;padding-top:25px;border-top:1px solid var(--line)}.studio-gallery-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:22px}.studio-gallery-heading .eyebrow{margin-bottom:8px}.studio-gallery-heading h2{margin:0;font-size:clamp(34px,4.5vw,57px);line-height:1.02;letter-spacing:-.06em}.studio-gallery-heading h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.studio-gallery-heading>p{max-width:360px;margin:0 0 4px;color:#c0bfb7;font-size:15px;line-height:1.7}.studio-gallery-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.studio-gallery-grid figure{min-width:0;margin:0;background:#171815}.studio-gallery-grid img{display:block;width:100%;aspect-ratio:1.4;object-fit:cover}.studio-gallery-grid figcaption{padding:11px 0 2px;color:#a9aaa2;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.hire-offerings{width:var(--page);max-width:1320px;margin:0 auto 82px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hire-offerings article{padding:24px 24px 28px;border-right:1px solid var(--line)}.hire-offerings article:first-child{padding-left:0}.hire-offerings article:last-child{border:0;padding-right:0}.hire-offerings article>span{color:#a9aaa2;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.hire-offerings h2{margin:23px 0 12px;font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.04em}.hire-offerings p{margin:0;color:#c0bfb7;line-height:1.7}.hire-next{width:var(--page);max-width:900px;margin:0 auto 100px;padding:48px 0;border-top:1px solid var(--line)}.hire-next h2,.careers-content h2,.careers-note h2{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.055em;margin:15px 0}.hire-next>p:not(.eyebrow),.careers-content>div:last-child>p{max-width:720px;color:#c0bfb7;font-size:17px;line-height:1.75}.hire-next-links{display:flex;flex-wrap:wrap;gap:34px}.hire-next-links .outline-link{margin-top:13px}.careers-content{width:var(--page);max-width:1120px;margin:0 auto 100px;padding:34px 0 50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,8vw,100px)}.careers-content h2{max-width:420px}.careers-content>div:last-child>p{font-size:16px}.careers-note{width:var(--page);max-width:1120px;margin:0 auto 100px;padding:38px;background:#191a17}.careers-note h2{max-width:680px}.careers-note>a{display:inline-flex;gap:15px;margin-top:14px;padding-bottom:7px;border-bottom:1px solid var(--line);font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.careers-note>a span{color:var(--accent)}
@media(max-width:760px){.nav-company-menu{top:calc(100% + 12px);left:-8px;width:190px}.site-header nav .nav-company-menu a{font-size:12px}.studio-gallery{margin-bottom:58px;padding-top:20px}.studio-gallery-heading{display:block;margin-bottom:18px}.studio-gallery-heading>p{margin-top:13px;font-size:14px}.studio-gallery-grid{grid-template-columns:1fr;gap:16px}.studio-gallery-grid img{aspect-ratio:1.4}.hire-offerings{grid-template-columns:1fr;margin-bottom:62px}.hire-offerings article,.hire-offerings article:first-child,.hire-offerings article:last-child{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.hire-offerings article:last-child{border-bottom:0}.hire-offerings h2{margin:14px 0 9px;font-size:27px}.hire-next{margin-bottom:65px;padding:34px 0}.hire-next>p:not(.eyebrow){font-size:15px}.hire-next-links{gap:14px}.careers-content{grid-template-columns:1fr;gap:18px;margin-bottom:65px;padding:28px 0 35px}.careers-content>div:last-child>p{font-size:15px}.careers-note{margin-bottom:65px;padding:24px 18px}}

/* SP Studios company gallery slideshow */
.studio-gallery-carousel{position:relative}
.studio-gallery-viewport{overflow:hidden;background:#171815}
.studio-gallery-grid{display:flex!important;grid-template-columns:none!important;gap:0!important;transform:translate3d(0,0,0);transition:transform .68s cubic-bezier(.22,.72,.18,1);will-change:transform}
.studio-gallery-grid figure.studio-gallery-slide{flex:0 0 100%;width:100%;min-width:100%;margin:0}
.studio-gallery-grid figure[aria-hidden="true"] figcaption{visibility:hidden}
.studio-gallery-grid img{aspect-ratio:1.4;object-fit:cover}
.studio-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px}
.studio-gallery-count{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#a9aaa2}
.studio-gallery-buttons{display:flex;align-items:center;gap:8px}
.studio-gallery-button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #55574e;background:transparent;color:var(--ink);font:20px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.studio-gallery-button:hover,.studio-gallery-button:focus-visible{border-color:var(--accent);background:var(--accent);color:#111210;transform:translateY(-2px)}
.studio-gallery-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.studio-gallery-next{border-color:#888a80}
@media(prefers-reduced-motion:reduce){.studio-gallery-grid{transition:none}}

/* Company-first About page, founder story, and support page */
.about-company{grid-template-columns:minmax(0,1fr);padding-bottom:55px}
.about-company>div{max-width:1000px}
.about-company>div>.about-story{max-width:850px}
.about-founder{padding-top:80px}
.about-founder h2{font-size:clamp(44px,5.3vw,72px);line-height:1;letter-spacing:-.065em;margin:24px 0}
.about-founder h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.about-founder>div>.about-story{max-width:620px}
.about-founder .about-portrait img{height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 42%}
.about-founder-signature{max-width:660px;margin-top:28px}
.about-founder-signature .hero-signature{display:block}
.studio-gallery-grid figure.studio-gallery-slide{height:100%}
.studio-gallery-grid figure.studio-gallery-slide img{aspect-ratio:1.4}
.studio-gallery-grid figure.studio-gallery-slide figcaption a{color:#d9d9d2;text-decoration:underline;text-underline-offset:3px}
.support-intro{padding-bottom:46px}
.support-intro h1{max-width:900px}
.support-options{width:var(--page);max-width:1120px;margin:0 auto 70px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.support-option{padding:24px 24px 30px;border-right:1px solid var(--line)}
.support-option:first-child{padding-left:0}
.support-option:last-child{border-right:0;padding-right:0}
.support-option>span{color:#a9aaa2;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.support-option h2{margin:24px 0 12px;font-size:clamp(24px,2.5vw,32px);line-height:1.12;letter-spacing:-.04em}
.support-option p{min-height:100px;margin:0;color:#c0bfb7;line-height:1.7}
.support-option .outline-link{margin-top:18px}
.support-note{width:var(--page);max-width:1120px;margin:0 auto 100px;padding:25px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}
.support-note p{max-width:690px;margin:0;color:#c0bfb7;line-height:1.7}
.support-note .outline-link{flex:none;margin:0}
@media(max-width:760px){
 .about-company{padding-top:55px;padding-bottom:35px}
 .about-founder{padding-top:55px}
 .about-founder-signature{margin-top:18px}
 .support-options{grid-template-columns:1fr;margin-bottom:60px}
 .support-option,.support-option:first-child,.support-option:last-child{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
 .support-option:last-child{border-bottom:0}
 .support-option h2{margin:15px 0 9px;font-size:27px}
 .support-option p{min-height:0}
 .support-note{display:block;margin-bottom:65px}
 .support-note .outline-link{margin-top:15px}
}