@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy-950:#071633;
  --navy-900:#0b2255;
  --navy-800:#10306f;
  --navy-700:#16408e;
  --blue-600:#2258c6;
  --blue-500:#2e6be6;
  --blue-400:#5b8df0;
  --blue-300:#8fb3f5;
  --blue-200:#c4d8fa;
  --blue-100:#e4eefc;
  --blue-050:#f2f7fe;
  --ink:#10214b;
  --ink-soft:#46557a;
  --ink-faint:#7c88a8;
  --surface:#f4f7fc;
  --surface-hi:#fff;
  --line:#dde6f3;
  --on-dark:#fff;
  --on-dark-soft:rgba(255,255,255,.78);
  --on-dark-faint:rgba(255,255,255,.55);
  --danger:#a63b4a;
  --grad-hero:linear-gradient(135deg,#1e4fa8 0%,#123c86 55%,#0b2a66 100%);
  --grad-cta:linear-gradient(120deg,#2e6be6 0%,#1e4fa8 100%);
  --grad-sky:linear-gradient(180deg,#f2f7fe 0%,#e4eefc 100%);
  --neu-raised:-8px -8px 18px rgba(255,255,255,.9),8px 8px 18px rgba(22,64,142,.14);
  --neu-raised-sm:-4px -4px 10px rgba(255,255,255,.85),4px 4px 10px rgba(22,64,142,.12);
  --neu-pressed:inset -4px -4px 9px rgba(255,255,255,.8),inset 4px 4px 9px rgba(22,64,142,.14);
  --neu-floating:-14px -14px 30px rgba(255,255,255,.8),14px 14px 34px rgba(22,64,142,.16);
  --shadow-card:0 10px 30px rgba(11,34,85,.1);
  --shadow-pop:0 20px 50px rgba(11,34,85,.18);
  --glass-bg:rgba(255,255,255,.1);
  --glass-line:rgba(255,255,255,.22);
  --radius-pill:999px;
  --radius-card:24px;
  --radius-panel:32px;
  --radius-section:44px;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4.5rem;
  --space-7:6.5rem;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:160ms;
  --dur-med:280ms;
  --dur-reveal:480ms;
  --container:1240px;
  --gutter:clamp(1.25rem,4vw,3rem)
}

@property --cta-line-shift{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy-950);scroll-padding-top:76px}
body{margin:0;background:var(--surface);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{position:relative;z-index:1;margin-bottom:var(--footer-height,0px);background:var(--surface);box-shadow:0 24px 48px rgba(7,22,51,.16)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--blue-500);color:#fff}
.container{box-sizing:content-box;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;left:16px;top:14px;z-index:200;padding:.65rem 1rem;border-radius:var(--radius-pill);background:var(--navy-950);color:#fff;transform:translateY(-180%)}
.skip-link:focus{transform:none}
:is(a,button,input,textarea):focus-visible{outline:3px solid var(--blue-300);outline-offset:3px}

.nav{position:sticky;top:0;z-index:80;background:rgba(244,247,252,.88);border-bottom:1px solid rgba(221,230,243,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.18rem;font-weight:700;line-height:1;color:var(--navy-900);letter-spacing:-.02em;white-space:nowrap}
.brand-mark{width:28px;height:28px;flex:0 0 28px}
.nav-links{position:relative;display:flex;align-items:center;gap:clamp(1rem,2.7vw,2.25rem)}
.nav-links>a:not(.button){font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.9rem;font-weight:600;color:var(--navy-800);transition:color var(--dur-fast) linear}
.nav-links>a:not(.button):hover{color:var(--blue-500)}
.nav-underline{position:absolute;left:0;top:calc(50% + .85rem);width:var(--nav-line-width,0px);height:2px;border-radius:var(--radius-pill);background:var(--blue-500);opacity:0;transform:translate3d(var(--nav-line-x),0,0);transition:transform 320ms cubic-bezier(.22,1,.36,1),width 260ms cubic-bezier(.22,1,.36,1),opacity 140ms linear;pointer-events:none}
.nav-links.is-hovering .nav-underline{opacity:1}

.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.5rem;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--surface-hi);background-image:linear-gradient(145deg,#fff 10%,#f8faff 100%);background-clip:padding-box;color:var(--blue-500);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.025rem;font-weight:600;line-height:1;padding:1.05rem 2.4rem;cursor:pointer;box-shadow:-10px -10px 24px rgba(255,255,255,.98),11px 11px 26px rgba(22,64,142,.18),inset 1px 1px 2px rgba(255,255,255,.95),inset -1px -1px 1px rgba(143,179,245,.18);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-med) var(--ease-out),color var(--dur-fast) linear}
.button::before,.button::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;--cta-line-shift:0deg;transition:--cta-line-shift 350ms ease-in-out;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.button::before{background:conic-gradient(from var(--cta-line-shift),transparent 0 60deg,rgba(91,141,240,0) 62deg,rgba(91,141,240,.06) 72deg,rgba(91,141,240,.28) 82deg,rgba(46,107,230,.72) 92deg,rgba(91,141,240,.56) 98deg,rgba(91,141,240,.2) 104deg,rgba(91,141,240,0) 110deg,transparent 112deg 360deg)}
.button::after{background:conic-gradient(from var(--cta-line-shift),transparent 0 238deg,rgba(91,141,240,0) 240deg,rgba(91,141,240,.06) 250deg,rgba(91,141,240,.28) 262deg,rgba(46,107,230,.72) 272deg,rgba(91,141,240,.56) 280deg,rgba(91,141,240,.2) 290deg,rgba(91,141,240,0) 299deg,transparent 301deg 360deg)}
.button:hover::before,.button:hover::after{--cta-line-shift:16deg}
.button:active{transform:none;box-shadow:var(--neu-pressed)}
.button-small{min-height:3.25rem;font-size:.9rem;padding:.9rem 1.5rem;white-space:nowrap}
.button-hero{padding:1.1rem 2.5rem}
.button-secondary{background:var(--surface-hi);background-image:linear-gradient(145deg,#fff 10%,#f8faff 100%);color:var(--blue-500)}
.button-secondary:active{box-shadow:var(--neu-pressed)}

.hero-section{position:relative;overflow:hidden;background:#fff}
.hero-grid{box-sizing:border-box;position:relative;min-height:calc(100svh - 76px);padding-block:clamp(2rem,5vh,3.5rem);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);align-items:center;gap:clamp(3rem,7vw,7rem)}
.hero-copy{position:relative;z-index:1}
.eyebrow{margin:0 0 1rem;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.8125rem;font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500)}
.hero-copy h1{margin:0;max-width:11ch;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(2.8rem,5.5vw,4.75rem);font-weight:700;line-height:1.08;letter-spacing:-.035em;color:var(--navy-900);text-wrap:balance}
.hero-dynamic-heading{display:grid;align-items:center;min-height:3.3em;max-width:12.5ch!important}
.hero-heading-line{grid-area:1/1;display:block;opacity:0;filter:blur(8px);transform:translate3d(0,28px,0) scale(.985);transform-origin:left center;will-change:opacity,filter,transform}
.hero-heading-line.is-active{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
.hero-lead{margin:1.75rem 0 0;max-width:38rem;font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.68;color:var(--ink-soft);text-wrap:pretty}
.hero-actions{margin-top:2.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.microcopy{max-width:29ch;font-size:.82rem;line-height:1.55;color:var(--ink-faint)}
.hero-media{position:relative;margin:0}
.hero-sequence{width:100%;max-width:800px;justify-self:end;background:transparent;border:0;box-shadow:none}
.hero-sequence-stage{position:relative;width:100%;aspect-ratio:1;transform-origin:50% 50%;will-change:transform,opacity}
.hero-sequence-canvas,.hero-sequence-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(circle,black 60%,transparent 98%);mask-image:radial-gradient(circle,black 60%,transparent 98%);image-rendering:auto}
.hero-sequence-canvas{z-index:2;opacity:0;transition:opacity 180ms linear}
.hero-sequence-poster{z-index:1;opacity:1;transition:opacity 180ms linear}
.hero-sequence-stage.is-canvas-ready .hero-sequence-canvas{opacity:1}
.hero-sequence-stage.is-canvas-ready .hero-sequence-poster{opacity:0}

@media(min-width:768px){
  .hero-sequence-canvas,.hero-sequence-poster{transform:scale(1.24);transform-origin:center}
}

.section{padding-block:clamp(5.5rem,9vw,var(--space-7))}
.services-section{background:linear-gradient(180deg,#fff 0%,#f2f7fe 20%,#e4eefc 100%)}
.services-heading{display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,.88fr) minmax(260px,.78fr);align-items:end;gap:clamp(2rem,5vw,4.5rem);margin-bottom:var(--space-5)}
.services-heading h2,.section-heading h2,.process-heading h2,.studio-grid h2,.contact-copy h2{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:600;line-height:1.18;color:var(--navy-900);letter-spacing:-.025em;text-wrap:balance}
.services-heading h2{max-width:15ch;font-size:clamp(2rem,3.4vw,2.75rem)}
.services-heading>p:last-child{margin:0;max-width:42ch;color:var(--ink-soft)}
.services-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-3)}
.service-card{grid-column:span 4;min-height:16rem;padding:var(--space-4);border-radius:var(--radius-card);background:var(--surface-hi);box-shadow:var(--shadow-card);transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out)}
.service-card:nth-child(n+4){grid-column:span 6}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop)}
.service-card>span,.process-step>span{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:.35rem .9rem;background:var(--blue-100);color:var(--blue-600);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.8125rem;font-weight:600}
.service-card h3{margin:2.5rem 0 .8rem;max-width:14ch;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(1.3rem,2vw,1.55rem);font-weight:600;line-height:1.2;color:var(--navy-900)}
.service-card p{margin:0;max-width:37ch;font-size:.96rem;line-height:1.68;color:var(--ink-soft)}

.work-section{background:var(--surface)}
.section-heading{display:grid;grid-template-columns:minmax(170px,.38fr) minmax(0,1fr);align-items:end;gap:var(--space-5);margin-bottom:var(--space-5)}
.section-heading h2{max-width:18ch;font-size:clamp(2rem,3.4vw,2.75rem)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.project-card{padding:1.15rem 1.15rem 2rem;border-radius:var(--radius-panel);background:var(--surface);box-shadow:var(--neu-raised);transition:transform var(--dur-med) var(--ease-out)}
.project-card:hover{transform:translateY(-4px)}
.project-media{display:block;overflow:hidden;aspect-ratio:16/10;border-radius:calc(var(--radius-card) - 6px);background:var(--blue-100)}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-out)}
.project-media:hover img{transform:scale(1.018)}
.project-copy{padding:1.65rem .8rem 0}
.project-label{display:inline-flex;border-radius:var(--radius-pill);padding:.35rem .85rem;background:var(--blue-100);color:var(--blue-600);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.78rem;font-weight:600}
.project-copy h3{margin:1rem 0 .8rem;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:600;line-height:1.18;color:var(--navy-900);letter-spacing:-.02em}
.project-copy>p{margin:0;max-width:50ch;font-size:.96rem;color:var(--ink-soft)}
.text-link{display:inline-flex;margin-top:1.5rem;color:var(--blue-600);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.9rem;font-weight:600;transition:color var(--dur-fast) linear}
.text-link:hover{color:var(--navy-800)}

.process-section{padding-top:clamp(2rem,5vw,4rem);background:var(--surface)}
.process-panel{border-radius:var(--radius-section);background:var(--grad-hero);padding:clamp(2.5rem,6vw,5.5rem);color:var(--on-dark);box-shadow:0 24px 60px rgba(11,34,85,.18)}
.on-dark .eyebrow{color:var(--blue-300)}
.process-heading{display:grid;grid-template-columns:minmax(170px,.38fr) minmax(0,1fr);align-items:end;gap:var(--space-5)}
.process-heading h2{max-width:14ch;font-size:clamp(2rem,3.4vw,2.75rem);color:var(--on-dark)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-5)}
.process-step{min-height:16rem;padding:var(--space-4);border:1px solid var(--glass-line);border-radius:var(--radius-card);background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.process-step>span{background:rgba(255,255,255,.12);color:var(--blue-200)}
.process-step h3{margin:2rem 0 .75rem;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.45rem;font-weight:600;color:var(--on-dark)}
.process-step p{margin:0;font-size:.94rem;line-height:1.7;color:var(--on-dark-soft)}

.studio-section{background:var(--surface)}
.studio-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;gap:clamp(3rem,8vw,7rem)}
.studio-grid h2{max-width:10ch;font-size:clamp(2.2rem,4.4vw,3.7rem)}
.studio-lines{display:flex;flex-direction:column;gap:var(--space-2)}
.studio-lines p{margin:0;padding:1.5rem 1.75rem;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--neu-pressed);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:600;line-height:1.35;color:var(--navy-800)}

.contact-section{background:var(--surface)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);gap:clamp(3.5rem,8vw,7rem);align-items:start}
.contact-copy h2{max-width:10ch;font-size:clamp(2.2rem,4.4vw,3.7rem)}
.contact-copy>p:not(.eyebrow){margin:1.4rem 0 2rem;max-width:42ch;color:var(--ink-soft)}
.contact-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.email-link{color:var(--blue-600);font-weight:600;border-bottom:1px solid var(--blue-400);padding-bottom:.15rem}
.form-panel{min-height:31rem;padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--radius-panel);background:var(--surface);box-shadow:var(--neu-floating)}
form{display:flex;flex-direction:column;gap:1.3rem}
.field{display:flex;flex-direction:column;gap:.55rem}
.field label{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.9rem;font-weight:600;color:var(--navy-800)}
input,textarea{width:100%;border:0;border-radius:var(--radius-pill);background:var(--surface);padding:.95rem 1.5rem;outline:0;box-shadow:var(--neu-pressed);transition:box-shadow var(--dur-med) var(--ease-out)}
textarea{min-height:7.5rem;border-radius:var(--radius-card);resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,textarea:focus{box-shadow:var(--neu-pressed),0 0 0 3px var(--blue-200)}
[aria-invalid="true"]{box-shadow:var(--neu-pressed),0 0 0 3px rgba(166,59,74,.18)}
.field-error{padding-inline:.4rem;font-size:.8rem;color:var(--danger)}
.field-error:empty{display:none}
.submit-button{margin-top:.25rem;align-self:flex-start}
.submit-button:disabled{opacity:.65;cursor:wait}
.form-note,.form-status{margin:0;font-size:.79rem;line-height:1.5;color:var(--ink-faint)}
.form-status:empty{display:none}
.form-status.is-error{color:var(--danger)}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.success-state{min-height:24rem;align-content:center;text-align:left}
.success-state:not([hidden]){display:grid;justify-items:start}
.success-state>span{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--surface);box-shadow:var(--neu-raised-sm);color:var(--blue-500);font-size:1.4rem}
.success-state h3{margin:1.5rem 0 .55rem;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:2rem;font-weight:600;color:var(--navy-900)}
.success-state p{margin:0 0 1.5rem;color:var(--ink-soft)}
.text-button{padding:0 0 .15rem;border:0;border-bottom:1px solid var(--blue-400);background:transparent;color:var(--blue-600);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:600;cursor:pointer}

footer{position:fixed;left:0;right:0;bottom:0;z-index:0;padding-block:2.3rem;background:var(--navy-950);color:var(--on-dark-soft)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem}
.footer-wordmark{font-size:1rem;color:var(--on-dark)}
.footer-wordmark .brand-mark{width:24px;height:24px;flex-basis:24px}
.footer-inner>a:not(.wordmark){color:var(--blue-200)}

.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:3rem}
  .services-heading{grid-template-columns:160px 1fr}
  .services-heading>p:last-child{grid-column:2}
  .service-card{grid-column:span 6}
  .service-card:nth-child(n+4){grid-column:span 6}
  .service-card:last-child{grid-column:span 12;min-height:auto}
  .contact-grid{grid-template-columns:.8fr 1.2fr;gap:3rem}
}

@media(max-width:767px){
  html{scroll-padding-top:68px}
  .nav-inner{min-height:68px}
  .nav-links>a:not(.button){display:none}
  .nav-underline{display:none}
  .hero-grid{min-height:auto;padding-block:4.5rem 5.5rem;grid-template-columns:1fr;gap:3.5rem}
  .hero-copy h1{max-width:11.75ch;font-size:clamp(2.7rem,12vw,4rem)}
  .hero-sequence{width:min(100%,36rem);justify-self:center}
  .hero-sequence-stage{max-height:min(62vw,24rem);aspect-ratio:1}
  .hero-sequence-poster{position:relative;transform:scale(1.24);transform-origin:center}
  .hero-sequence-canvas{display:none}
  .services-heading,.section-heading,.process-heading,.studio-grid,.contact-grid{grid-template-columns:1fr}
  .services-heading,.section-heading,.process-heading{align-items:start;gap:1rem}
  .services-heading>p:last-child{grid-column:auto;margin-top:.5rem}
  .service-card,.service-card:nth-child(n+4),.service-card:last-child{grid-column:span 12;min-height:auto}
  .project-grid,.process-grid{grid-template-columns:1fr}
  .process-panel{border-radius:2rem;padding:2rem 1.25rem}
  .process-step{min-height:auto}
  .studio-grid,.contact-grid{gap:3rem}
}

@media(max-width:430px){
  .container{padding-inline:1.25rem}
  .wordmark{font-size:1rem}
  .nav .button-small{font-size:.75rem;padding:.7rem .9rem}
  .hero-actions,.contact-links{align-items:flex-start;flex-direction:column}
  .hero-media{border-radius:1.5rem}
  .project-card{border-radius:1.5rem}
  .form-panel{padding:1.35rem;border-radius:1.5rem}
  .footer-inner{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .button:hover,.service-card:hover,.project-card:hover{transform:none}
  .button::before,.button::after{transition:none}
  .hero-sequence-canvas{display:none}
}