/* Mark AI Studios — static shell. Numbers follow the design spec (em-based, 1em = 16px at 1440). */

@font-face{font-family:"Bricolage";src:url("/fonts/BricolageGrotesque.woff2") format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/DMSans.woff2") format("woff2");font-weight:100 1000;font-display:swap}

:root{
  /* palette: variant B Royal, approved 2026-10-26 */
  --primary:#3B0F7A; --primary-deep:#200747; --primary-hi:#9D7BFF; --primary-lo:#12042B;
  --grad:linear-gradient(135deg,var(--primary-lo) 0%,var(--primary) 45%,var(--primary-hi) 100%);
  --grad-soft:linear-gradient(160deg,var(--primary-deep) 0%,var(--primary) 55%,#6B3FB8 100%);
  --bg:#F4F0F9; --surface:#FBF9FD; --tint:#E4DBF5; --ink:#120A1F;
  --faq-q:#EBE2F4;
  --f-display:"Bricolage",sans-serif; --f-body:"DM Sans",sans-serif;
  /* fluid scale (spec §2.1) */
  --size-unit:16; --size-container-ideal:1440; --size-container-min:992px; --size-container-max:1920px;
  --size-container:clamp(var(--size-container-min),100vw,var(--size-container-max));
  --size-font:calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
@media (max-width:991px){:root{--size-container-ideal:834;--size-container-min:768px;--size-container-max:991px}}
@media (max-width:767px){:root{--size-container-ideal:550;--size-container-min:480px;--size-container-max:767px}}
@media (max-width:479px){:root{--size-container-ideal:390;--size-container-min:320px;--size-container-max:479px}}

*{box-sizing:border-box}
html,body{margin:0;position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
body{font-family:var(--f-body);font-size:var(--size-font);line-height:1.25;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
html.scroll-window,html.scroll-window body{position:static;overflow:auto;height:auto}
.page{height:100dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
.page::-webkit-scrollbar{display:none}
.page-inner{overflow-x:clip;width:100%}
html.scroll-window .page{height:auto;overflow:visible}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}

/* type */
.display{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.8;letter-spacing:-.01em}
.display-dark{font-family:var(--f-display);font-weight:700;line-height:.85;letter-spacing:-.01em}
.eyebrow{font-weight:500;text-transform:uppercase;font-size:1.125em;line-height:1}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* placeholders: labelled boxes at the final asset size */
.ph{background:repeating-linear-gradient(45deg,var(--tint) 0 .6em,#DACFEC .6em 1.2em);color:var(--primary);display:grid;place-items:center;text-align:center;font-size:.8em;font-weight:500;text-transform:uppercase;letter-spacing:.05em;width:100%;height:100%;position:relative;overflow:hidden}
.ph span{background:var(--surface);padding:.4em .8em;border-radius:100px;max-width:90%}

/* pills + buttons */
.pill{display:inline-flex;align-items:center;background:var(--ink);color:var(--tint);border-radius:100px;padding:.5em 1.5em;font-weight:500;font-size:1em;white-space:nowrap}
.pill.purple{background:var(--primary);color:var(--surface)}
.cta{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:var(--surface);border-radius:100px;padding:.1875em .1875em .1875em 1.25em;font-size:1em;font-weight:500;border:0;cursor:pointer;font-family:inherit;position:relative;overflow:hidden}
.cta .txt{font-size:.75em;padding-right:.5em}
.cta .dot{width:1.875em;height:1.875em;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:1em;color:#fff}
.cta.light{background:var(--surface);color:var(--primary);border:1px solid var(--primary)}
.cta.light .dot{background:var(--ink)}.cta.light .txt{transition:color .3s}.cta.light:hover .txt,.cta.light:focus-visible .txt{color:var(--surface)}
.navpill{display:inline-flex;align-items:center;height:2.25em;padding:0 1.125em 0 1.25em;border-radius:100px;background:var(--surface);font-size:.875em;font-weight:500}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:999;display:flex;justify-content:space-between;align-items:center;padding:1.25em 1.125em 1.125em}
.nav-links,.nav-right{display:flex;align-items:center;gap:.5em;min-width:17.25em}
.nav-right{justify-content:flex-end;gap:4em}
.nav-logo{width:8.5em;color:var(--primary);display:block;line-height:0}.nav-logo svg{width:100%;height:auto;display:block}
.nav-hours{font-size:.875em;font-weight:500;max-width:7em;line-height:1.2;white-space:pre-line}
.ham{display:none;width:2.5em;height:2.5em;border:2px solid var(--primary);border-radius:.25em;background:var(--tint);cursor:pointer;padding:0;color:var(--primary)}
.ham svg{width:100%;height:100%;display:block;overflow:visible}.ham path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.ham .ham-x{opacity:0}
.nav.minimal .nav-links{min-width:0}

/* layout helpers */
.wrap{width:100%;max-width:var(--size-container);margin:0 auto}
.section-head{position:relative;display:flex;justify-content:center;padding:0 1.125em 0 1.25em;width:100%}
.section-head .eyebrow{position:absolute;top:0;left:1.125em}
.section-head h2{font-size:6.25em;max-width:5em;text-transform:uppercase;text-align:center}
.section-head h2.narrow{max-width:3em}
.gutter{padding-left:1.25em;padding-right:1.125em}

/* hero (home) */
.hero{display:flex;flex-direction:column;align-items:center;padding-top:6em;background:linear-gradient(180deg,var(--tint) 73%,var(--bg));overflow:hidden;position:relative}
.hero-text{position:relative;max-width:64em;margin-bottom:2em;text-align:center}
.hero-text h1{font-size:7em;color:var(--primary);white-space:nowrap}
.hero .pill{position:absolute}
.hero .pill.one{top:40%;left:15%;transform:rotate(-7deg)}
.hero .pill.two{top:4%;right:0;transform:rotate(4deg);z-index:3}
.hero .pill.three{bottom:-7%;right:12%;transform:rotate(-5deg)}
.hero-media{width:100%;max-width:var(--size-container);height:40em;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center}
.hero-art{position:relative;width:100%;max-height:100%}.hero-art .hl{position:absolute;will-change:transform}.hero-art .hl>img{display:block;width:100%;height:auto}.hero-art .fig{z-index:0}.hero-art .part{z-index:1}.hero-art .hl[data-layer$="-tail"]{z-index:-1}.hero-art .lid{z-index:2;opacity:0}.hshadow{position:absolute;aspect-ratio:7/1;border-radius:50%;background:radial-gradient(closest-side,rgba(32,7,71,.2),rgba(32,7,71,0))}
.doodle{position:absolute;width:12.5em;height:35.625em;top:35%;left:0;transform:translate(-30%,-50%)}
.doodle.r{width:20.1875em;height:28.75em;top:25%;left:auto;right:0;transform:translate(35%,-50%)}
.doodle path{fill:none;stroke:url(#grad-stroke);stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.marquee{width:100%;display:block;overflow:visible}
.marquee .ribbon{fill:none;stroke:var(--primary);stroke-width:154;stroke-linecap:round}
.marquee text{font-family:var(--f-display);font-weight:800;font-size:80px;fill:#fff;letter-spacing:.04em}

/* about pinned */
.about{height:100svh;display:flex;align-items:center;justify-content:center;position:relative}
.about-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2em;width:100%}
.about-para{font-family:var(--f-display);font-weight:700;font-size:5em;line-height:1.05;letter-spacing:-1px;max-width:13em;text-align:center}
.about .pill{position:absolute;transform:translate(-50%,-50%)}
.about .pill.a{top:60%;left:9%;transform:rotate(5deg) translate(-50%,-50%)}
.about .pill.b{top:13%;right:7%;transform:rotate(-4deg) translate(-50%,-50%)}
.about .pill.c{bottom:9%;right:10%;transform:rotate(-4.5deg) translate(-50%,-50%)}

/* showcase */
.showcase{padding:10em 0;overflow:hidden}
.showcase-track{display:flex;gap:.25em;width:max-content}
.showcase-tile{width:31.25em;height:31.25em;border-radius:.75em;overflow:hidden;flex-shrink:0}

/* projects grid */
.projects{display:flex;flex-direction:column;align-items:center;gap:2.5em;padding-bottom:10em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;width:100%;padding:0 .5em}
.card{display:flex;flex-direction:column;height:43em;overflow:hidden}
.card-media{position:relative;flex:1;border-radius:1em;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:1em;padding:1em 1em 1em 0}
.card-logo{width:3em;height:3em;border-radius:50%;background:var(--tint);flex-shrink:0;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:1em}
.card-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.5em;line-height:.8}
.card-ind{font-size:.875em;font-weight:500;text-transform:uppercase;color:var(--primary);margin-top:.5em}
.card-arrow{margin-left:auto;width:2.5em;height:2.5em;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.8em}
.projects-end{display:flex;flex-direction:column;align-items:center;gap:3em;padding:5em 1.25em;position:relative;max-width:55em;margin:0 auto}
.projects-end p{font-size:5em;color:var(--primary);max-width:8em;text-align:center;letter-spacing:-1px}
.projects-end .pill{position:absolute}
.pills{display:contents}

/* privacy notice */
.legal{padding:10em 1.25em 8em;display:flex;justify-content:center}
.legal-inner{width:100%;max-width:42em;display:flex;flex-direction:column;gap:1em;color:var(--ink)}
.legal h1{font-size:4.5em;color:var(--primary);margin-bottom:.1em}
.legal h2{font-family:var(--f-display);font-weight:700;font-size:1.75em;line-height:1.1;color:var(--primary);margin-top:1.25em}
.legal p,.legal li{font-size:max(1.125em,15px);line-height:1.55}.legal .legal-date{opacity:.65}
.legal ul{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:.5em}
.legal a,.cform-note a,.footer-rights a{text-decoration:underline;text-underline-offset:.15em}
.cform-note{font-size:max(.875em,12px);opacity:.8;line-height:1.4}
.projects-end .pill:nth-of-type(1){top:2em;right:-4em;transform:rotate(-5deg)}
.projects-end .pill:nth-of-type(2){top:11em;left:-3em;transform:rotate(3deg)}
.projects-end .pill:nth-of-type(3){bottom:8em;right:-6em;transform:rotate(-3deg)}

/* services */
.services{display:flex;flex-direction:column;align-items:center;gap:6em;padding-top:10em}
.services-body{width:100%;max-width:var(--size-container);position:relative;padding:8em 0 10em}
.services-path{position:absolute;inset:0;width:100%;height:100%;opacity:.25;overflow:visible}
.services-path path{fill:none;stroke:var(--primary);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.services-rows{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10em}
.service{display:inline-flex;align-items:center;gap:.5em;position:relative;font-size:.85em}
.service .w{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:5em;line-height:.8;color:var(--primary)}
.service .icon{width:9.5em;height:6.5em;color:var(--primary);display:grid;place-items:center}
.svc{width:100%;height:100%;overflow:visible}
.service .tip{position:absolute;bottom:-2em;right:-4em;max-width:18em;padding:.75em 1.25em;border-radius:100px;background:var(--surface);border:1px solid var(--primary);color:var(--primary);font-size:.875em;font-weight:500;line-height:1.2;transform:rotate(-5deg)}
.service.one{right:-27%}.service.two{left:-17%}.service.three{right:-5%}.service.four{right:-30%}.service.five{left:-10%}.service.six{right:-20%}.service.seven{left:-21%}

/* process stack (testimonial role) */
.process{display:flex;flex-direction:column;align-items:center;gap:2.5em;padding-top:10em}
.process-body{width:100%;height:100svh;padding:1.25em}
.panel{width:100%;height:100%;border-radius:1em;background:var(--grad-soft);display:grid;grid-template-columns:100%;place-items:center;position:relative;overflow:hidden}
.pcard{grid-area:1/1;width:52em;max-width:90%;background:var(--surface);border:1px solid var(--primary);border-radius:1em;padding:2.5em;display:flex;flex-direction:column;gap:3.75em;color:var(--primary)}
.pcard h3{font-family:var(--f-display);font-weight:700;font-size:3.375em;line-height:.85}
.pcard-btm{display:flex;justify-content:space-between;align-items:flex-start;gap:2em}
.pcard-num{width:7.5em;height:7.5em;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.2em;flex-shrink:0}
.pcard p{font-size:1.5em;line-height:1.2;max-width:22.6em}
.pcard:nth-child(2){transform:rotate(-7.5deg)}.pcard:nth-child(3){transform:rotate(6.8deg)}.pcard:nth-child(4){transform:rotate(-5.5deg)}.pcard:nth-child(5){transform:rotate(8.2deg)}
.pcard:nth-child(1){z-index:5}.pcard:nth-child(2){z-index:4}.pcard:nth-child(3){z-index:3}.pcard:nth-child(4){z-index:2}

/* faq */
.faq{display:flex;gap:2em;width:100%;max-width:var(--size-container);margin:0 auto;padding:10em 0}
.faq-left{width:40%;position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:1.25em 0 1.25em 1.25em}
.faq-left h2{font-size:6.25em;max-width:6em;text-transform:uppercase;text-align:left}
.faq-left .eyebrow{margin-bottom:1em}
.faq-cat{width:36em}.faq-cat img{width:100%;height:auto;mix-blend-mode:darken}
.faq-right{width:60%;display:flex;flex-direction:column;align-items:flex-end;gap:1em;padding:4em 1.25em 0 0}
.faq-item{width:100%;display:flex;flex-direction:column;gap:.5em}
.q{width:100%;text-align:left;font:inherit;font-size:1.125em;font-weight:500;background:var(--faq-q);border:1px solid transparent;border-radius:5em 5em 5em 0;padding:1.25em 2em;cursor:pointer;color:var(--ink);transition:width .45s}
.faq-item.open .q{width:50%;border-color:var(--primary)}
.faq-ans{display:none;justify-content:flex-end;align-items:flex-end;gap:.5em}
.faq-item.open .faq-ans{display:flex}
.ans{width:68%;background:var(--bg);border:1px solid rgba(18,10,31,.2);border-radius:2em 2em 0 2em;padding:1.5em 4em 1.5em 2em;font-size:1.125em;line-height:1.32}
.badge{width:3.625em;height:3.625em;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;flex-shrink:0}

/* footer */
footer{background:var(--grad-soft);color:var(--surface);min-height:100svh;position:relative;overflow:hidden;display:flex}
.footer-wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:1.25em}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start}
.footer-left{display:flex;flex-direction:column;align-items:flex-start;gap:1em;max-width:22.125em}
.footer-left h2{font-size:3.75em;line-height:1.05}
.footer-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:3.125em;max-width:35%;height:100%}
.footer-cols{display:flex;gap:15.5em}
.footer-col{display:flex;flex-direction:column;gap:.25em}
.footer-col .hd{opacity:.6;margin-bottom:.65em;font-size:1.125em;font-weight:500}
.footer-col a,.footer-col span{font-size:1.125em;font-weight:500;line-height:1.4;white-space:nowrap}
.footer-btm{display:flex;flex-direction:column;gap:1em;margin-top:4em}
.footer-rights{font-size:.75em;font-weight:500}
.footer-logo{width:100%;display:block;margin-bottom:-2px}.footer-logo svg{width:100%;height:auto;display:block}.footer-logo svg path{fill:rgba(255,255,255,.3)}

/* contact overlay */
.contact{position:fixed;inset:0;z-index:9999;background:var(--grad-soft);color:var(--surface);display:none;flex-direction:column;overflow:hidden}
.contact.open{display:flex}
.contact-nav{display:flex;justify-content:space-between;align-items:center;padding:1.125em}
.contact-nav .nav-logo{color:var(--surface)}
.contact-body{flex:1;display:flex;justify-content:space-between;padding:4em 1.5em 1.5em;position:relative}
.contact-left{width:56%;padding-left:6.4em} /* room for the .r line's -.8em jut at 8em, so it never runs off the left edge */
.contact-left h2{font-size:8em;color:var(--surface)}
.contact-left h2.r{transform:translate(-.8em)}.contact-left h2.l{transform:translate(.3em)}
.contact-left p{font-family:var(--f-display);font-weight:800;font-size:3.375em;opacity:.4;margin-top:.25em;transform:translate(1.3em)}
.contact-right{width:44%;display:flex;flex-direction:column;gap:3.75em}
.contact-right .hd{text-transform:uppercase;font-size:1em}
.contact-right>div>a{font-size:1.75em;display:block;margin-top:.5em}
.cform{display:flex;flex-direction:column;gap:1.25em;align-items:flex-start}.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;width:100%}.cform label{display:flex;flex-direction:column;gap:.4em;font-size:.875em}.cform label.wide{grid-column:1/-1}.cform label.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform input,.cform select,.cform textarea{font:inherit;font-size:max(16px,1.125em);color:var(--surface);background:rgba(255,255,255,.06);border:1px solid rgba(228,219,245,.45);border-radius:.5em;padding:.6em .8em;outline:0;width:100%;resize:vertical}.cform select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E4DBF5' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center;background-size:.7em}.cform select option{color:var(--ink)}
.cform :is(input,select,textarea):focus,.cform .invalid{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.cform-status{font-size:.875em;min-height:1.2em;opacity:.9}.cform button.cta{font-size:1em}
.contact{overflow:hidden auto}
/* the hand shrinks on wide, short windows so the sign stays below "say hi": 35.6em = that line's bottom + 1em, the sign starts 19% down the image */
.contact-img{position:absolute;bottom:0;left:34%;height:min(22em,calc((100% - 35.6em) / .81));aspect-ratio:900/1205;container-type:size;z-index:0}.contact-left,.contact-right{position:relative;z-index:1}.cform{max-width:32em}.contact-img img{height:100%;width:auto;display:block}.contact-card-text{position:absolute;left:21%;top:21%;width:52%;transform:rotate(6deg);font-family:var(--f-display);font-weight:800;font-size:10.9cqh;line-height:.9;color:var(--primary);text-align:center;text-transform:uppercase}
.contact-social{position:absolute;bottom:1.5em;border:1px solid var(--surface);border-radius:100px;padding:.75em 1.25em;font-size:1.4375em}
.contact-social.l{left:1.5em}.contact-social.r{right:1.5em}
/* thank-you popup after a successful send; confetti pieces are added by app.js */
.sent{position:fixed;inset:0;z-index:2;display:grid;place-items:center;padding:1.5em;background:rgba(18,4,43,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sent[hidden]{display:none}
.sent-card{width:min(34em,100%);background:var(--surface);color:var(--ink);border-radius:1.5em;padding:3em 2.5em;display:flex;flex-direction:column;align-items:center;gap:1.25em;text-align:center;box-shadow:0 1.5em 4em rgba(18,4,43,.45)}
.sent-card h3{font-size:4.5em;color:var(--primary)}.sent-card p{font-size:1.25em;max-width:22em}.sent-card .cta{font-size:1.25em}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;left:0;top:0;width:.6em;height:1em;border-radius:.12em}.confetti i.dot{width:.7em;height:.7em;border-radius:50%}
.closebtn{display:inline-flex;align-items:center;gap:.5em;height:2.25em;padding:0 1em;border-radius:100px;background:var(--surface);color:var(--ink);font-size:.875em;font-weight:500;border:0;cursor:pointer;font-family:inherit}

/* mobile menu */
.menu{display:none;position:fixed;inset:0;z-index:998;background:rgba(228,219,245,.95);flex-direction:column;align-items:center;justify-content:center;gap:1em}
.menu.open{display:flex}

/* work + about heroes */
.hero-alt{display:flex;flex-direction:column;align-items:center;padding-top:6em;overflow:hidden;position:relative}
.hero-alt-text{width:100%;max-width:var(--size-container);padding:0 6em 0 1.25em;margin-bottom:2em;position:relative;display:flex;flex-direction:column;align-items:center}
.hero-alt-text h1{font-size:10em;color:var(--primary);width:100%}
.hero-alt-text h1.left{text-align:right}
.hero-alt-text h1.right{text-align:left;max-width:8em}
.hero-alt .pill{position:absolute;z-index:3}
.hero-alt .pill.two{top:35%;right:20%;transform:rotate(3deg)}
.hero-alt .pill.one{bottom:0;left:5%;transform:rotate(-7deg)}
.hero-alt .doodle{top:20%;left:auto;right:0;transform:translate(35%,0);width:20em;height:28em}
.hero-alt-btm{width:100%;max-width:var(--size-container);display:flex;justify-content:space-between;align-items:center;padding:0 7em 4em;gap:3em}
.hero-alt-btm .art{width:35em;min-width:35em}.hero-alt-btm .art img{width:100%;height:auto;mix-blend-mode:darken}
.hero-alt-btm .art.art-about{width:60%;min-width:0}
.hero-alt-btm p{font-size:1.5em;line-height:1.25;color:var(--primary);max-width:22.6667em}

/* about page */
.story{display:flex;flex-direction:column;align-items:center;gap:20em;max-width:var(--size-container);margin:0 auto;padding:12em 0 10em;position:relative}
.story-sec{display:flex;align-items:center;gap:4em;padding:0 3em}
.story-sec .art{width:50%}.story-sec .art img{width:100%;height:auto}
.story-sec .txt{width:50%;display:flex;flex-direction:column;gap:2em;color:var(--primary)}
.story-sec h2{font-size:3em;line-height:.85}
.story-sec p{font-size:1.5em;line-height:1.25}
.values{max-width:var(--size-container);margin:0 auto;padding:5em 1.25em 0 1.125em}
.value{position:sticky;background:var(--bg);border-top:1px solid rgba(59,15,122,.1);min-height:40vh;padding:2em 0 0;display:flex;flex-direction:column;gap:2em}
.value:nth-child(1){top:5em}.value:nth-child(2){top:10em}.value:nth-child(3){top:15em}.value:nth-child(4){top:20em}
.value .row{display:flex;justify-content:space-between;align-items:flex-start;gap:2em}
.value h2{font-size:5em;line-height:.8;color:var(--primary);max-width:6em;text-transform:uppercase}
.value p{max-width:33%;font-size:1.15em;line-height:1.35;font-weight:500}
.values-spacer{height:30vh}
.moodboard{display:flex;flex-direction:column;align-items:center;gap:2.5em;padding:5em 0}
.mood-row{display:flex;gap:.5em;width:max-content}
.mood-tile{width:25em;height:25em;border-radius:1em;overflow:hidden;flex-shrink:0}
.caps{display:flex;flex-direction:column;align-items:center;gap:4em;padding-bottom:5em}
.caps-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1em;max-width:var(--size-container);padding:0 1.125em}
.cap{border:1px solid var(--primary);color:var(--primary);border-radius:100px;padding:1em 2em;font-size:1.375em;font-weight:500;line-height:1}

/* project page */
.prj-hero{height:100svh;position:relative}
.prj-hero .ph{border-radius:0}
.prj-hero h1{position:absolute;left:1.25em;bottom:1.25em;font-size:10.125em;color:var(--surface);z-index:3}
.prj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(0,0,0,.5),transparent 40%);z-index:2}
.prj-content{max-width:var(--size-container);margin:0 auto;padding:10em 1.25em;display:flex;flex-direction:column;gap:1.25em}
.blk{display:flex;justify-content:flex-end;width:100%}
.blk-text{justify-content:space-between;align-items:flex-start;margin-bottom:2em}
.blk-text .topic{font-size:1.125em;font-weight:500;color:var(--primary)}
.blk-text .right{width:65%;display:flex;flex-direction:column;gap:1.75em;color:var(--primary)}
.blk-text h2{font-size:3.375em;line-height:1}
.blk-text p{font-size:1.5em;line-height:1.25}
.blk-tags{width:65%;display:flex;flex-wrap:wrap;gap:1em;margin-bottom:2em;margin-left:auto}
.blk-img{height:49em;border-radius:1em;overflow:hidden}
.blk-video{height:49em;border-radius:1em;overflow:hidden}
.blk-pair{display:flex;gap:1.25em;height:75em}
.blk-pair .ph{border-radius:1em}
.status-chip{display:inline-flex;padding:.35em .75em;border-radius:100px;background:var(--tint);color:var(--primary);font-size:.9em;font-weight:500;text-transform:uppercase;margin-top:.5em}
.more{display:flex;flex-direction:column;align-items:center;gap:2.5em;padding-bottom:10em}

/* responsive (spec §2.1 breakpoints; key overrides only) */
@media (max-width:991px){
  .nav-links,.nav-right{min-width:14em}.nav-logo{width:6em}
  .hero{padding-top:5em}.hero-text h1{font-size:7em;white-space:normal}.hero-media{height:23em}
  .about-para{font-size:3.5em}.showcase-tile{width:20em;height:20em}
  .section-head h2,.faq-left h2{font-size:4em}
  .grid{grid-template-columns:1fr 1fr;gap:.5em}.card{height:40em}
  .services-rows{gap:7em}.service{font-size:.6em}
  .pcard{font-size:.75em}
  .hero-alt-text h1{font-size:8em}
  .value h2{font-size:6em}
  .prj-hero h1{font-size:7em;left:.3em;right:.3em}
  .contact-left{padding-left:4.4em}.contact-left h2{font-size:5.5em}
}
@media (max-width:767px){
  .nav-links,.nav-hours{display:none}.ham{display:block}.nav-logo{width:6.5em}.nav-right{min-width:0;gap:.75em}.hero .doodle{display:none}.faq-cat{width:60%;height:14em}
  .hero-media{height:16em}.hero-text h1{font-size:5.5em}.hero .pill{font-size:.75em}
  .about-para{font-size:min(3em,4.6svh);max-width:9em}.showcase-tile{width:16em;height:16em;border-radius:.5em}
  .section-head h2,.faq-left h2{font-size:3em}.grid{gap:2em}.card{height:35em}
  .services-rows{gap:7em}.pcard{font-size:.6em}
  .faq{flex-direction:column}.faq-left{position:static;width:100%;height:auto;flex-direction:row}.faq-right{width:100%;padding:0 1.25em}.faq-item.open .q{width:75%}.ans{width:80%}
  .footer-top,.footer-cols{flex-direction:column;gap:3em}.footer-right{max-width:none;align-items:flex-start}
  .contact-left h2{font-size:5em}.contact-body{flex-direction:column;gap:2em}.contact-left,.contact-right{width:100%}.contact-left{padding-left:0}.contact-left h2.r{transform:translate(-.2em)}.cform-grid{grid-template-columns:1fr}.cform{max-width:none}.contact-img{display:none}
  .legal{padding:7em 1.25em 5em}.legal h1{font-size:3em}
  .hero-alt-text{padding:0 1.25em}.hero-alt-text h1{text-align:center !important}.hero-alt .doodle{display:none}
  .hero-alt-btm{flex-direction:column;padding:0 2em 4em}.hero-alt-btm .art{width:100%;min-width:0}
  .story{gap:12em;padding:8em 0}.story-sec{gap:2em}
  .value .row{flex-direction:column}.value p{max-width:75%}
  .blk-text{flex-direction:column;gap:1em}.blk-text .right,.blk-tags{width:100%}
  .nav.minimal .nav-links{display:flex}
  .section-head{flex-direction:column;align-items:center;gap:1em}.section-head .eyebrow{position:static;align-self:flex-start}
  /* pills sit in flow beside the copy instead of on top of it, so they never cover words or run off-screen */
  .hero-text{display:flex;flex-direction:column;align-items:center}
  .hero .pill:is(.one,.two),.hero-alt .pill:is(.one,.two){position:static}
  .hero .pill.two,.hero-alt .pill.two{order:-1;align-self:flex-end;margin-bottom:.75em}.hero .pill.one,.hero-alt .pill.one{align-self:flex-start;margin-top:.75em}
  .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;padding:0 1.25em}
  .about .pill:is(.a,.b,.c),.projects-end .pill:nth-of-type(n){position:static;transform:rotate(-3deg)}.about .pill.b,.projects-end .pill:nth-of-type(2){transform:rotate(3deg)}
  /* the drawn snake crosses wrapped service words here; a lighter stroke keeps the letters on top readable */
  .services-path.dark path{stroke:var(--primary-hi)}
  .value h2{font-size:3.5em;max-width:none}
  /* tap targets at least 44px */
  .ham{width:max(2.5em,44px);height:max(2.5em,44px)}.cta{font-size:max(1em,19.6px)}.navpill{height:max(2.25em,44px);white-space:nowrap}
  .nav-logo{padding:14px 0;margin:-14px 0}.footer-col a{padding:max(0px,(44px - 1.4em) / 2) 0}.blk-text a[target="_blank"]{display:inline-block;padding:.6em 0}
  /* readable text: nothing people read drops under 12px on small phones (the card ↗ and step numbers are decorative) */
  .hero .pill{font-size:max(.75em,12px)}.navpill{font-size:max(.875em,12px)}.card-ind{font-size:max(.875em,12px)}
  .pcard p{font-size:max(1.5em,12px)}.footer-rights{font-size:max(.75em,12px)}.footer-rights a{display:inline-block;padding:15px 2px;margin:-15px -2px}
  .closebtn{height:max(2.25em,44px)}.contact-right>div>a{padding:.2em 0}.cform :is(input,select){min-height:44px}.cform button.cta{font-size:max(1em,19.6px)}
  .prj-hero h1{font-size:5em;left:.3em;right:.3em}
  /* rows hug alternate edges instead of offsetting off-screen; the snake still zigzags through them */
  .services-rows{padding:0 1.25em}.services-rows .service{left:auto;right:auto;flex-wrap:wrap;justify-content:center}
  .services-rows .service:is(.one,.three,.four,.six){align-self:flex-end}.services-rows .service:is(.two,.five,.seven){align-self:flex-start}
  .service .tip{top:100%;bottom:auto;right:.5em;margin-top:1em;font-size:max(1.6em,12px);max-width:20em}.service:is(.two,.five,.seven) .tip{left:.5em;right:auto}
}
@media (max-width:479px){
  .hero-text h1{font-size:4.5em}.about-para{font-size:min(2.5em,4.6svh);max-width:none;padding:0 .5em}.showcase{padding:5em 0}
  .grid{grid-template-columns:1fr;gap:3em}.projects-end p{font-size:3.5em}
  .service{font-size:.5em;left:auto;right:auto;flex-wrap:wrap;justify-content:center}.services{padding-top:5em}
  .pcard{font-size:.55em;padding:2em}
  .faq{padding:5em 0}.q,.ans{border-radius:1em;padding:1em}
  .footer-left h2{font-size:2.5em}.footer-logo{font-size:8em}
  .contact-left h2{font-size:4.25em}
  .hero-alt-text h1{font-size:4em}.value h2{font-size:2.5em}.cap{font-size:max(.75em,12px)}
  .nav.minimal .nav-right .cta{display:none} /* back link + 44px CTA + menu don't fit one row; "Let's talk" stays in the menu and footer */
  .prj-hero{height:60svh}.prj-hero h1{font-size:3.5em}.blk-img,.blk-video{height:auto;aspect-ratio:16/9}.blk-pair{height:35svh}
  .story-sec{flex-direction:column !important}.story-sec .art,.story-sec .txt{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---- Phase 2 motion hooks ---- */
.loader{position:fixed;inset:0;z-index:99999;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.loader-bg{position:absolute;inset:0;width:100%;height:100%}
.loader-bg path{fill:none;stroke-linecap:round;stroke-width:3000}
.loader-bg .lb1{stroke:var(--primary)}.loader-bg .lb2{stroke:var(--tint)}
.loader-logo{position:relative;z-index:2;width:min(56vw,52em);color:var(--primary)}.loader-logo svg{width:100%;height:auto;display:block;overflow:visible}
.navpill{position:relative;overflow:hidden}
.navpill span{position:relative;z-index:1}
.scribble{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--primary);stroke-width:0;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.navpill.is-hover span{color:var(--surface)}
.cta .fill{position:absolute;right:.15em;top:50%;width:1.875em;height:1.875em;margin-top:-.9375em;border-radius:50%;background:var(--grad);z-index:0;transform:scale(1)}
.cta .txt,.cta .dot{position:relative;z-index:1}
.line-mask{display:block;overflow:hidden}
.card-hover{position:absolute;inset:0;z-index:3;display:none}
.card-media .brush{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.card-media .brush path{fill:none;stroke:currentColor;stroke-width:0;stroke-linecap:round}
.card-media .ph.alt{background:repeating-linear-gradient(-45deg,#D3C4EC 0 .6em,#C4B2E4 .6em 1.2em)}
.services-path.dark{opacity:1}
.ticks{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:1em;pointer-events:none}
.ticks div{height:2px;border-radius:2px;background:#fff}
.nav-arrow{position:absolute;top:0;left:0;width:3.75em;height:3.75em;border-radius:50%;background:var(--ink);color:var(--tint);display:grid;place-items:center;font-size:1em;pointer-events:none;z-index:50;transform:scale(0)}
.contact-sweep{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.contact-sweep path{fill:none;stroke:var(--primary);stroke-linecap:round;stroke-width:0}
.contact{background:transparent}
.contact-nav,.contact-body{position:relative;z-index:1}
.story{position:relative;overflow:hidden}
.story-wrap{display:flex;flex-direction:column;align-items:center;gap:20em;position:relative;z-index:3;width:100%}
.story-stroke{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--size-container);height:auto;z-index:1;overflow:visible}
.story-stroke path{fill:none;stroke:var(--primary-hi);stroke-width:100;stroke-linecap:round;stroke-linejoin:round}
.cap{position:relative;overflow:hidden}
.cap>span{position:relative;z-index:2;transition:color .35s}
.cap-fill{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cap-fill path{fill:none;stroke:var(--primary);stroke-width:0;stroke-linecap:round}
.footer-logo{transform-origin:bottom center}
.menu .navpill{font-size:1.25em}
@media (max-width:767px){.story{gap:12em}.story-wrap{gap:12em}.loader-logo{width:80vw}}

/* service icon loops (gentle, infinite) */
.a-arrow{transform-origin:118px 22px;animation:svc-nudge 2.4s ease-in-out infinite}
@keyframes svc-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,6px)}}
.a-bulb{transform-origin:38px 24px;animation:svc-pulse 2s ease-in-out infinite}
@keyframes svc-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.a-block{animation:svc-bob 3s ease-in-out infinite}.a2{animation-delay:.3s}.a3{animation-delay:.6s}.a4{animation-delay:.9s}.a5{animation-delay:1.2s}
@keyframes svc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.a-cursor{transform-origin:104px 66px;animation:svc-cursor 2.4s ease-in-out infinite}
@keyframes svc-cursor{0%,100%{transform:translate(0,0)}40%{transform:translate(-14px,-10px)}55%{transform:translate(-14px,-10px) scale(.85)}70%{transform:translate(-14px,-10px)}}
.a-sun{transform-origin:128px 26px;animation:svc-spin 9s linear infinite}
@keyframes svc-spin{to{transform:rotate(360deg)}}
.a-pencil{transform-origin:88px 38px;animation:svc-draw 2.2s ease-in-out infinite}
@keyframes svc-draw{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,8px) rotate(-6deg)}}
.a-clap{transform-origin:20px 44px;animation:svc-clap 2.6s ease-in-out infinite}
@keyframes svc-clap{0%,60%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}}
.a-play{transform-origin:83px 70px;animation:svc-pulse2 2.6s ease-in-out infinite}
@keyframes svc-pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.a-lid{transform-origin:80px 38px;animation:svc-lid 3s ease-in-out infinite}
@keyframes svc-lid{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.a-eye{transform-origin:114px 46px;animation:svc-blink 4s ease-in-out infinite}
@keyframes svc-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.svc *{animation:none !important}}

.card-media>img,.card-hover>img,.showcase-tile>img,.showcase-tile>video,.mood-tile>img,.prj-hero>img,.blk-img>img,.blk-pair>img,.blk-video>video{width:100%;height:100%;object-fit:cover;display:block}
.blk-pair>img{width:50%;border-radius:1em}
.prj-hero>img{position:absolute;inset:0}