:root {
  color-scheme: light;
  --navy: #0b1026;
  --navy-soft: #171735;
  --purple: #7b2ff7;
  --purple-deep: #3b0764;
  --orange: #ff7a00;
  --pink: #ff3d81;
  --ink: #15172a;
  --muted: #686b78;
  --paper: #f8f7f5;
  --white: #fff;
  --line: rgba(21, 23, 42, .13);
  --gradient: linear-gradient(110deg, #ff7a00 0%, #ff3d81 51%, #7b2ff7 100%);
  --heading: "Manrope", "Avenir Next", sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --page: min(1240px, calc(100% - 64px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #ff8b32; outline-offset: 4px; }
img { max-width: 100%; display: block; }
::selection { color: #fff; background: #7b2ff7; }
.page-width { width: var(--page); margin-inline: auto; }
.section-pad { padding-block: clamp(88px, 11vw, 150px); }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 12px; transform: translateY(-150%); padding: 10px 16px; color: #fff; background: var(--navy); border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

.announcement { min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 5px 20px; color: #fff; background: var(--navy); font-size: 11px; letter-spacing: .035em; }
.announcement p { margin: 0; }
.announcement a { color: #ffbf74; font-weight: 700; }
.announcement a span { display: inline-block; margin-left: 3px; }
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(11,16,38,.07); backdrop-filter: blur(15px); transition: box-shadow .25s ease, background .25s ease; }
.site-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(11,16,38,.08); }
.nav-shell { width: var(--page); min-height: 82px; display: flex; align-items: center; justify-content: space-between; margin-inline: auto; }
.brand { width: 76px; height: 76px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; background: #fff; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: clamp(21px, 3vw, 40px); color: #313244; font-size: 13px; font-weight: 600; }
.primary-nav > a:not(.nav-cta) { position: relative; padding-block: 10px; }
.primary-nav > a:not(.nav-cta)::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.primary-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { min-height: 43px; display: inline-flex; align-items: center; gap: 16px; padding: 0 18px; color: #fff; background: var(--navy); border-radius: 999px; transition: background .2s ease, transform .2s ease; }
.nav-cta:hover { background: #32205e; transform: translateY(-2px); }
.nav-cta span { color: #ff9a47; font-size: 16px; }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; min-height: 670px; overflow: hidden; display: flex; align-items: center; color: #fff; background: radial-gradient(ellipse at 79% 40%, rgba(83,24,126,.48) 0, transparent 33%), radial-gradient(ellipse at 100% 100%, rgba(123,47,247,.21) 0, transparent 38%), linear-gradient(135deg, #0b1026 0%, #161230 52%, #24104b 100%); }
.hero::before { position: absolute; z-index: -2; inset: 0; content: ""; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(90deg, transparent 5%, #000 100%); }
.hero::after { position: absolute; z-index: -1; width: 760px; height: 760px; right: -250px; bottom: -500px; content: ""; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.018), 0 0 0 90px rgba(255,255,255,.018), 0 0 0 135px rgba(255,255,255,.018); }
.hero-gridline { position: absolute; top: 0; bottom: 0; left: 52%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.11) 28%, rgba(255,255,255,.08) 75%, transparent); }
.hero-inner { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 35px; padding-block: 76px 90px; }
.hero-copy { position: relative; z-index: 2; padding-block: 15px; }
.eyebrow, .section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #777987; font: 700 10px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: rgba(255,255,255,.68); margin-bottom: 27px; letter-spacing: .12em; }
.eyebrow-spark { color: #ff9b31; font-size: 15px; }
.hero h1 { max-width: 700px; margin: 0; font: 800 clamp(52px, 6.4vw, 88px)/.99 var(--heading); letter-spacing: -.075em; }
.hero h1 span { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
.hero-lede { max-width: 500px; margin: 26px 0 0; color: rgba(255,255,255,.72); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 34px; }
.button { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 21px; padding: 0 23px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 17px; transition: transform .2s ease; }
.button:hover span { transform: translate(2px,-2px); }
.button-bright { color: #fff; background: var(--gradient); box-shadow: 0 10px 34px rgba(255,61,129,.21); }
.button-bright:hover { box-shadow: 0 14px 40px rgba(255,61,129,.32); }
.text-link { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 5px; border-bottom: 1px solid #ff813b; font-size: 13px; font-weight: 700; }
.text-link span { color: #f47b3c; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px,-2px); }
.text-link-light { color: #fff; border-color: rgba(255,255,255,.4); }
.text-link-light span { color: #ff9a47; }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 59px; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .06em; }
.note-line { width: 34px; height: 1px; background: linear-gradient(90deg, var(--orange), var(--pink)); }
.hero-art { position: relative; min-height: 485px; display: grid; place-items: center; }
.art-halo { position: absolute; width: min(34vw, 430px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.2), rgba(255,61,129,.1) 36%, rgba(123,47,247,.07) 59%, transparent 70%); filter: blur(5px); }
.art-ring { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotate(-27deg); }
.art-ring-one { width: 400px; height: 190px; }
.art-ring-two { width: 470px; height: 250px; transform: rotate(31deg); border-color: rgba(255,255,255,.08); }
.hero-logo-card { position: relative; z-index: 1; width: min(350px, 72%); overflow: hidden; background: #fff; border-radius: 25px; box-shadow: 0 35px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.65); transform: rotate(2deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.hero-logo-card:hover { transform: rotate(0) translateY(-6px); }
.hero-logo-card img { width: 100%; height: auto; }
.art-spark { position: absolute; z-index: 2; filter: drop-shadow(0 9px 15px rgba(255,123,0,.25)); }
.art-spark-main { width: 52px; top: 59px; left: 13%; transform: rotate(12deg); }
.art-spark-small { width: 24px; right: 13%; bottom: 91px; transform: rotate(-11deg); }
.float-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 12px 15px; color: #25243a; background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; box-shadow: 0 18px 45px rgba(0,0,0,.18); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.float-note-top { top: 77px; right: -7px; transform: rotate(2deg); }
.float-note-bottom { bottom: 58px; left: -5px; transform: rotate(-2deg); }
.float-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg,#ff7a00,#ff3d81); box-shadow: 0 0 0 4px #fff0e5; }
.mini-spark { color: #7b2ff7; font-size: 16px; }
.art-caption { position: absolute; right: 13px; bottom: 9px; left: 13px; display: flex; justify-content: space-between; color: rgba(255,255,255,.43); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.hero-scroll { position: absolute; right: 50%; bottom: 19px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; transform: translateX(50%); }
.hero-scroll span { width: 1px; height: 24px; background: linear-gradient(#ff8b2c,rgba(255,255,255,.25)); }

.intro-section { overflow: hidden; background: #f8f7f5; }
.intro-layout { display: grid; grid-template-columns: .25fr .75fr; gap: 50px; }
.section-label { margin-bottom: 25px; }
.section-label > span { color: #b0aebb; font: 600 11px var(--heading); letter-spacing: .03em; }
.intro-main h2, .section-heading-row h2, .why-intro h2, .industries-heading h2, .work-heading h2, .process-heading h2, .voices-content h2, .faq-heading h2, .contact-copy h2 { margin: 0; font: 700 clamp(39px, 5.1vw, 66px)/1.08 var(--heading); letter-spacing: -.065em; }
.intro-main h2 { max-width: 840px; }
h2 em { color: #8950e8; font-style: normal; }
.intro-bottom { display: grid; grid-template-columns: 1fr .74fr; gap: clamp(32px, 7vw, 110px); margin-top: 37px; padding-top: 29px; border-top: 1px solid var(--line); }
.intro-lede { max-width: 440px; margin: 0; font: 600 clamp(19px, 2vw, 24px)/1.45 var(--heading); letter-spacing: -.035em; }
.intro-detail p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.intro-ribbon { display: flex; justify-content: space-around; gap: 25px; margin-top: 105px; padding-block: 19px; color: #6d6878; border-top: 1px solid rgba(21,23,42,.09); border-bottom: 1px solid rgba(21,23,42,.09); font: 600 12px var(--heading); letter-spacing: .15em; text-transform: uppercase; }
.intro-ribbon span:nth-child(even) { color: #b34eb1; }

.services-section { background: #fff; }
.section-heading-row, .work-heading { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 55px; }
.section-heading-row h2 { font-size: clamp(40px, 5vw, 60px); }
.section-heading-note { width: min(330px, 33%); margin: 0 0 7px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.services-list { border-top: 1px solid var(--line); }
.service-row { position: relative; display: grid; grid-template-columns: 74px 1.1fr 1fr 46px; align-items: center; gap: 26px; min-height: 162px; padding: 28px 13px; border-bottom: 1px solid var(--line); transition: background .23s ease, padding .23s ease; }
.service-row { isolation: isolate; }
.service-row::before { position: absolute; z-index: 0; inset: 0; content: ""; background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(123,47,247,.09), transparent 70%); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.service-row > * { position: relative; z-index: 1; }
.service-row:hover::before { opacity: 1; }
.service-row:hover { padding-inline: 22px; background: #fbf9ff; }
.service-index { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; align-self: stretch; justify-content: center; }
.service-index > span { color: #9b9bab; font: 600 10px var(--heading); letter-spacing: .08em; }
.service-index svg { width: 34px; height: 34px; fill: none; stroke: #7b2ff7; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.service-row-photo .service-index svg { stroke: #e36429; }
.service-row-marketing .service-index svg { stroke: #d34d9b; }
.service-row-tech .service-index svg { stroke: #446dd6; }
.service-row-growth .service-index svg { stroke: #8f50d3; }
.service-copy h3 { margin: 0 0 7px; font: 700 clamp(19px, 2.15vw, 26px)/1.18 var(--heading); letter-spacing: -.045em; }
.service-copy p { max-width: 250px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.service-tags li { padding: 6px 10px; color: #626372; background: #f6f4f9; border-radius: 999px; font-size: 10px; line-height: 1.35; }
.service-row-photo .service-tags li:nth-child(2n) { background: #fff0e5; color: #9c4a16; }
.service-row-brand .service-tags li:nth-child(2n) { background: #f2eaff; color: #6940a0; }
.service-row-marketing .service-tags li:nth-child(2n) { background: #ffedf4; color: #a03765; }
.service-row-tech .service-tags li:nth-child(2n) { background: #eef2ff; color: #3857a7; }
.service-row-growth .service-tags li:nth-child(2n) { background: #f4edff; color: #6940a0; }
.service-arrow { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(21,23,42,.16); border-radius: 50%; transition: color .2s ease, background .2s ease, border .2s ease, transform .2s ease; }
.service-arrow span { font-size: 17px; }
.service-arrow:hover { color: #fff; background: var(--purple); border-color: var(--purple); transform: rotate(45deg); }
.service-bottom-note { display: flex; align-items: center; gap: 13px; margin-top: 32px; color: var(--muted); font-size: 12px; }
.service-bottom-note p { margin: 0; }
.service-bottom-note a { color: var(--ink); border-bottom: 1px solid #f7894d; font-weight: 700; }
.note-star { color: #e88942; font-size: 21px; }

.why-section { overflow: hidden; color: #fff; background: radial-gradient(ellipse at 16% 93%, rgba(123,47,247,.22), transparent 38%), linear-gradient(135deg,#0b1026,#171431 70%,#20123d); }
.why-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(55px, 10vw, 135px); }
.section-label-light { color: rgba(255,255,255,.55); }
.section-label-light > span { color: rgba(255,255,255,.36); }
.why-intro { position: relative; min-height: 515px; overflow: hidden; }
.why-intro h2 { position: relative; z-index: 1; margin-top: 36px; font-size: clamp(46px, 5.3vw, 68px); }
.why-intro h2 em { color: #f3a5db; }
.why-intro > p { position: relative; z-index: 1; max-width: 340px; margin: 21px 0 29px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.8; }
.button-outline { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.33); }
.button-outline:hover { background: rgba(255,255,255,.08); }
.why-orbit { position: absolute; left: 4px; bottom: -157px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.why-orbit::before, .why-orbit::after { position: absolute; inset: 31px; content: ""; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.why-orbit::after { inset: 74px; }
.orbit-sun { position: absolute; top: 76px; left: 135px; color: #ff8c32; font-size: 34px; }
.orbit-word { position: absolute; padding: 6px 10px; color: rgba(255,255,255,.74); background: #171431; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.orbit-word-one { top: 33px; left: 82px; }.orbit-word-two { top: 112px; right: -9px; }.orbit-word-three { top: 206px; left: 26px; }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
.benefit { position: relative; min-height: 152px; display: grid; grid-template-columns: 47px 1fr; gap: 10px; padding: 25px 17px 22px 0; border-top: 1px solid rgba(255,255,255,.17); }
.benefit:nth-child(odd) { margin-right: 23px; }
.benefit:nth-child(even) { padding-left: 23px; border-left: 1px solid rgba(255,255,255,.13); }
.benefit-no { padding-top: 4px; color: rgba(255,255,255,.38); font: 600 9px var(--heading); letter-spacing: .08em; }
.benefit h3 { max-width: 215px; margin: 0 20px 7px 0; font: 700 16px/1.4 var(--heading); letter-spacing: -.025em; }
.benefit p { max-width: 210px; margin: 0; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }
.benefit-symbol { position: absolute; right: 10px; top: 23px; color: #f495c9; font-size: 17px; }

.industries-section { background: #f1eff3; }
.industries-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 9vw, 120px); align-items: start; }
.industries-heading { position: sticky; top: 135px; }
.industries-heading h2 { font-size: clamp(43px, 5.1vw, 65px); }
.industries-heading h2 em { color: #f07834; }
.industries-heading > p { max-width: 320px; margin: 23px 0 0; color: var(--muted); font-size: 14px; }
.industry-cloud { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 11px; padding-top: 20px; }
.industry { min-height: 57px; display: inline-flex; align-items: center; gap: 20px; padding: 0 18px; background: #fff; border: 1px solid rgba(21,23,42,.08); border-radius: 4px; box-shadow: 0 5px 20px rgba(38,28,56,.035); font: 600 13px var(--heading); transition: transform .22s ease, box-shadow .22s ease; }
.industry:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 25px rgba(38,28,56,.09); }
.industry i { color: #a6a1ad; font: normal 9px var(--body); }
.industry-feature { min-height: 72px; padding-inline: 21px; color: #fff; background: var(--navy); }
.industry-feature i { color: rgba(255,255,255,.48); }
.industry-tall { min-height: 66px; background: #fcf1e7; }
.industry-cloud .industry:nth-of-type(4n) { background: #f4eafc; }
.industry-aside { width: 100%; display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 17px 19px; border-top: 1px solid rgba(21,23,42,.12); border-bottom: 1px solid rgba(21,23,42,.12); }
.industry-aside span { color: #e97936; font-size: 24px; }
.industry-aside p { margin: 0; color: #656171; font-size: 12px; }

.work-section { overflow: hidden; background: #fbfaf8; }
.work-heading { align-items: end; }
.work-heading h2 { font-size: clamp(43px, 5.2vw, 67px); }
.work-heading h2 em { color: #e27840; }
.work-heading > p { max-width: 345px; margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.portfolio-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.portfolio-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.filter-button { padding: 8px 12px; color: #6d6d7a; background: transparent; border: 0; border-radius: 999px; font-size: 11px; cursor: pointer; transition: color .2s ease, background .2s ease; }
.filter-button:hover, .filter-button.is-active { color: #fff; background: var(--navy); }
.filter-button span { margin-left: 5px; color: #ff9a47; font-size: 9px; }
.portfolio-count { flex: 0 0 auto; color: #9a98a2; font-size: 10px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 20px; }
.project { min-width: 0; transition: opacity .25s ease, transform .25s ease; }
.project.is-hiding { display: none; }
.project-link { display: block; }
.project-art { position: relative; height: clamp(210px, 25vw, 310px); overflow: hidden; display: grid; place-items: center; transform: perspective(950px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transform-style: preserve-3d; transition: transform .22s ease; }
.project-art[data-image-reveal]::after { position: absolute; z-index: 4; inset: 0; content: ""; background: linear-gradient(115deg, #ff7a00, #ff3d81 52%, #7b2ff7); transform: scaleX(1); transform-origin: right center; transition: transform .85s cubic-bezier(.76,0,.24,1); pointer-events: none; }
.project-art[data-image-reveal].is-image-revealed::after { transform: scaleX(0); }
.project-placeholder { position: absolute; z-index: 3; top: 13px; left: 13px; padding: 5px 8px; color: rgba(255,255,255,.83); background: rgba(11,16,38,.57); border: 1px solid rgba(255,255,255,.3); border-radius: 2px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.project-art-brand { background: #f2d86e; }
.brand-art-word { position: relative; z-index: 1; color: #182e2b; font: 800 clamp(34px, 5vw, 60px)/.82 var(--heading); letter-spacing: -.1em; transform: rotate(-7deg); }
.brand-art-word span { display: block; margin: 12px 0 0 35px; color: #e54928; font: 600 italic 14px var(--body); letter-spacing: .02em; }
.brand-art-spark { position: absolute; top: 23%; right: 15%; color: #e54928; font-size: 51px; transform: rotate(13deg); }
.brand-art-bar { position: absolute; right: 9%; bottom: 13%; display: flex; gap: 5px; }
.brand-art-bar i { width: 28px; height: 5px; background: #192e2b; }.brand-art-bar i:nth-child(2) { background: #e54928; }.brand-art-bar i:nth-child(3) { background: #f08a37; }
.project-art-photo { background: #cbddd8; }
.photo-art { position: relative; width: 56%; height: 76%; overflow: hidden; background: linear-gradient(180deg,#f5c29a 0%,#fae4b9 49%,#98b9a7 50%,#547d72 100%); border-radius: 150px 150px 0 0; box-shadow: 14px 15px 0 rgba(255,255,255,.35); transform: rotate(-5deg); transition: transform .5s ease; }
.project-link:hover .photo-art { transform: rotate(-2deg) scale(1.04); }
.photo-sun { position: absolute; top: 17%; right: 20%; width: 39px; aspect-ratio: 1; background: #ef7453; border-radius: 50%; }
.photo-hill { position: absolute; bottom: -22%; width: 90%; height: 65%; border-radius: 50%; transform: rotate(-14deg); }.photo-hill-one { left: -25%; background: #55796c; }.photo-hill-two { right: -40%; background: #365b56; transform: rotate(15deg); }
.photo-plant { position: absolute; right: 25%; bottom: 9%; width: 4px; height: 45%; background: #354f43; transform: rotate(8deg); }.photo-plant::before, .photo-plant::after { position: absolute; top: 17px; left: -15px; width: 20px; height: 9px; content: ""; background: #354f43; border-radius: 100% 0 100% 0; transform: rotate(-30deg); }.photo-plant::after { top: 34px; left: 0; transform: rotate(38deg) scaleX(-1); }
.photo-stamp { position: absolute; right: 8%; bottom: 10%; color: #183a36; font: 700 8px/1.4 var(--body); letter-spacing: .14em; }
.project-art-video { background: #d7c9ef; }
.video-frame { position: relative; width: 69%; height: 67%; display: grid; place-items: center; background: linear-gradient(135deg,#ff976e,#eb477f 49%,#6535c2); box-shadow: 17px 17px 0 rgba(64,28,118,.16); transform: rotate(4deg); transition: transform .5s ease; }.project-link:hover .video-frame { transform: rotate(1deg) scale(1.04); }
.play-mark { width: 52px; height: 52px; display: grid; place-items: center; padding-left: 3px; color: #fff; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; font-size: 15px; }
.video-lines { position: absolute; right: 14px; bottom: 12px; left: 14px; display: flex; gap: 5px; }.video-lines i { height: 2px; flex: 1; background: rgba(255,255,255,.85); }.video-lines i:nth-child(2) { opacity: .45; }.video-caption { position: absolute; right: 13px; bottom: 8%; color: #302547; font: italic 600 11px var(--body); transform: rotate(-5deg); }
.project-art-campaign { background: #f6beb3; }
.campaign-card { position: relative; width: 58%; height: 77%; overflow: hidden; display: flex; align-items: center; padding: 17px; color: #ffdb85; background: #ff5d54; box-shadow: -17px 17px 0 rgba(97,32,87,.12); transform: rotate(-4deg); transition: transform .5s ease; }.project-link:hover .campaign-card { transform: rotate(-1deg) scale(1.04); }
.campaign-card > span { position: relative; z-index: 1; font: 800 clamp(22px, 3vw, 36px)/.92 var(--heading); letter-spacing: -.06em; }.campaign-card em { color: #332a69; font-style: normal; }
.campaign-orb { position: absolute; top: -24%; right: -19%; width: 130px; aspect-ratio: 1; border: 18px solid #a233a5; border-radius: 50%; }
.campaign-card b { position: absolute; right: 13px; bottom: 10px; color: #fff; font: 500 7px var(--body); letter-spacing: .1em; }
.campaign-scribble { position: absolute; right: 13%; bottom: 10%; color: #8035a1; font-size: 50px; transform: rotate(45deg); }
.project-art-digital { background: #cfdbff; }
.browser-window { width: 77%; overflow: hidden; background: #fbf9f1; border: 1px solid rgba(31,36,70,.22); border-radius: 7px; box-shadow: 13px 17px 0 rgba(43,53,114,.15); transform: rotate(-3deg); transition: transform .5s ease; }.project-link:hover .browser-window { transform: rotate(-1deg) scale(1.04); }
.browser-top { height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: #f2edf0; }.browser-top i { width: 5px; height: 5px; border-radius: 50%; background: #eb847f; }.browser-top i:nth-child(2) { background: #e6ba5f; }.browser-top i:nth-child(3) { background: #7ab89b; }.browser-top span { margin-left: 15px; color: #878492; font-size: 6px; }
.browser-body { position: relative; min-height: 170px; overflow: hidden; padding: 25px 17px; }.browser-body small { color: #63549d; font-size: 6px; letter-spacing: .13em; }.browser-body strong { position: relative; z-index: 1; display: block; margin-top: 7px; color: #1c2040; font: 800 26px/.95 var(--heading); letter-spacing: -.07em; }.browser-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 5px 8px; color: #fff; background: #6354a2; border-radius: 2px; font-size: 6px; }.browser-shape { position: absolute; top: 24px; right: 6%; width: 37%; height: 145px; background: linear-gradient(140deg,#ff9a77,#d75197,#674bca); border-radius: 60% 35% 8% 8%; transform: rotate(15deg); }
.project-art-social { background: #f1d2ad; }
.social-post { position: relative; width: 51%; height: 80%; overflow: hidden; display: flex; align-items: center; padding: 20px; color: #fff; background: #8667d3; box-shadow: 16px 13px 0 rgba(91,46,119,.13); transform: rotate(4deg); transition: transform .5s ease; }.project-link:hover .social-post { transform: rotate(1deg) scale(1.04); }
.social-kicker { position: relative; z-index: 1; font: 600 13px/1.1 var(--heading); letter-spacing: .06em; }.social-kicker b { font: 800 42px/.95 var(--heading); letter-spacing: -.08em; }
.social-curve { position: absolute; right: -33%; bottom: -32%; width: 180px; height: 180px; background: linear-gradient(140deg,#ff9d73,#ffcf77); border-radius: 50%; }
.social-handle { position: absolute; left: 17px; bottom: 12px; font-size: 7px; letter-spacing: .12em; }.social-side { position: absolute; right: 6%; bottom: 13%; color: #604393; font: 700 7px var(--body); letter-spacing: .14em; writing-mode: vertical-rl; }
.project-caption { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 12px; }.project-type { color: #8a8992; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.project-caption h3 { margin: 4px 0 0; font: 700 15px var(--heading); letter-spacing: -.035em; }.project-action { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 15px; transition: color .2s ease, background .2s ease, transform .2s ease; }.project-link:hover .project-action { color: #fff; background: var(--navy); transform: rotate(45deg); }
.portfolio-empty { margin: 25px 0 0; color: var(--muted); font-size: 13px; }

.process-section { background: #f0ecf8; }
.process-heading { max-width: 650px; margin-bottom: 70px; }
.process-heading h2 { font-size: clamp(44px, 5.5vw, 70px); }.process-heading h2 em { color: #ed753d; }
.process-heading > p { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }.process-track::before { position: absolute; top: 19px; right: 4%; left: 4%; height: 1px; content: ""; background: linear-gradient(90deg,#f5893e,#e8599c,#7445c8); }
.process-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding-top: 50px; }.process-number { position: absolute; top: -2px; left: 0; color: #9b91ad; font: 600 10px var(--heading); letter-spacing: .1em; }.process-dot { position: absolute; top: 11px; left: 6px; width: 17px; height: 17px; background: #f28a40; border: 4px solid #f0ecf8; border-radius: 50%; box-shadow: 0 0 0 1px #e87558; }.process-step:nth-child(2) .process-dot { background: #e5649b; box-shadow: 0 0 0 1px #dd5592; }.process-step:nth-child(3) .process-dot { background: #a952cb; box-shadow: 0 0 0 1px #9448c0; }.process-step:nth-child(4) .process-dot { background: #7247c6; box-shadow: 0 0 0 1px #7247c6; }
.process-step div { grid-column: 2; }.process-step h3 { margin: 0 0 9px; font: 700 20px var(--heading); letter-spacing: -.04em; }.process-step p { max-width: 215px; margin: 0; color: #737080; font-size: 12px; line-height: 1.75; }

.voices-section { background: #fff; }
.voices-layout { position: relative; min-height: 320px; display: grid; grid-template-columns: 90px 1fr 190px; gap: 20px; align-items: center; padding: 42px 45px; background: #f7f4fa; }
.voices-mark { align-self: start; color: #d99be0; font: 800 124px/.85 Georgia,serif; }
.voices-content { max-width: 620px; }.voices-content .section-label { margin-bottom: 17px; }.voices-content h2 { font-size: clamp(36px, 4.4vw, 55px); }.voices-content h2 em { color: #e87742; }.voices-content > p { max-width: 430px; margin: 18px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.voices-note { display: flex; align-items: center; gap: 9px; color: #756e7b; font-size: 10px; letter-spacing: .04em; }.voices-note i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(130deg,#ff7a00,#ff3d81); }
.voices-side { position: relative; min-height: 205px; display: flex; justify-content: center; align-items: center; color: #8b8298; font: 700 9px/1.6 var(--body); letter-spacing: .16em; text-align: center; }.voices-side svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(123,47,247,.17); stroke-width: 1; transform: rotate(-12deg); }

.faq-section { background: #f8f7f5; }
.faq-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(55px, 10vw, 140px); align-items: start; }.faq-heading { position: sticky; top: 130px; }.faq-heading h2 { font-size: clamp(45px, 5vw, 65px); }.faq-heading h2 em { color: #ed753d; }.faq-heading > p { max-width: 280px; margin: 19px 0 22px; color: var(--muted); font-size: 13px; }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 21px 0; font: 700 15px/1.45 var(--heading); letter-spacing: -.02em; list-style: none; cursor: pointer; }.faq-item summary::-webkit-details-marker { display: none; }.faq-icon { position: relative; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid rgba(21,23,42,.23); border-radius: 50%; transition: background .2s ease, border .2s ease, transform .2s ease; }.faq-icon::before, .faq-icon::after { position: absolute; top: 10px; left: 6px; width: 9px; height: 1px; content: ""; background: #5d5c67; transition: transform .2s ease, background .2s ease; }.faq-icon::after { transform: rotate(90deg); }.faq-item[open] .faq-icon { background: var(--purple); border-color: var(--purple); transform: rotate(45deg); }.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: #fff; }.faq-answer { padding: 0 52px 20px 0; }.faq-answer p { max-width: 610px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.contact-section { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(130deg,#0b1026,#24104b 62%,#3b0764); }.contact-glow { position: absolute; z-index: -1; top: -430px; right: -180px; width: 800px; height: 800px; background: radial-gradient(circle,rgba(255,61,129,.22),rgba(123,47,247,.12) 40%,transparent 70%); }.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(55px, 9vw, 125px); align-items: start; }.contact-copy { position: sticky; top: 130px; }.contact-copy h2 { font-size: clamp(55px, 6.8vw, 86px); }.contact-copy h2 em { color: #ff9a4d; }.contact-copy > p { max-width: 360px; margin: 22px 0 37px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.8; }.contact-methods { display: grid; gap: 19px; }.contact-methods > a { display: flex; align-items: center; gap: 13px; color: #fff; font-size: 13px; }.contact-methods > a:hover { color: #ffb675; }.contact-method-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #ffa24f; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; font-size: 16px; }.contact-methods small { display: block; margin-bottom: 3px; color: rgba(255,255,255,.45); font-size: 8px; letter-spacing: .14em; }.social-note { max-width: 330px; margin-top: 32px!important; color: rgba(255,255,255,.4)!important; font-size: 10px!important; }
.contact-form { padding: clamp(24px, 4vw, 45px); color: var(--ink); background: #fff; border-radius: 9px; box-shadow: 0 25px 80px rgba(0,0,0,.18); }.form-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 29px; padding-bottom: 16px; border-bottom: 1px solid rgba(21,23,42,.12); color: #777582; font-size: 9px; font-weight: 700; letter-spacing: .13em; }.form-spark { color: #ef713c; font-size: 19px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 17px; }.form-field { min-width: 0; display: grid; gap: 7px; color: #4d4d5b; font-size: 11px; font-weight: 600; }.form-field > span { color: #555463; }.form-field i { color: #ee6344; font-style: normal; }.form-field small { color: #9996a1; font-size: inherit; font-weight: 400; }.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 46px; padding: 11px 12px; color: #202033; background: #fbfafc; border: 1px solid #e4e1e9; border-radius: 3px; font-size: 12px; font-weight: 400; }.form-field textarea { min-height: 106px; resize: vertical; }.form-field input::placeholder, .form-field textarea::placeholder { color: #a5a2ad; }.form-field select:invalid { color: #8d8994; }.form-field-wide { grid-column: 1/-1; }.form-submit-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; }.form-status { max-width: 260px; margin: 0; color: #7a7785; font-size: 10px; line-height: 1.5; }.form-submit { min-height: 47px; flex: 0 0 auto; padding-inline: 18px; font-size: 11px; }.form-privacy { margin: 17px 0 0; color: #a09ca5; font-size: 9px; }

.site-footer { color: rgba(255,255,255,.77); background: #090d20; }.footer-main { display: grid; grid-template-columns: 1.45fr .7fr .85fr .9fr .8fr; gap: 30px; padding-block: 64px 51px; }.footer-brand { max-width: 300px; }.footer-logo { width: 92px; height: 92px; display: block; overflow: hidden; margin-bottom: 17px; background: #fff; }.footer-logo img { width: 100%; height: 100%; object-fit: contain; }.footer-brand > p { margin: 0 0 13px; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.75; }.footer-tagline { color: #f5a26d; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }.footer-column h2 { margin: 4px 0 9px; color: #fff; font: 700 12px var(--heading); }.footer-column a { color: rgba(255,255,255,.57); font-size: 11px; transition: color .2s ease; }.footer-column a:hover { color: #ffab6a; }.footer-social-note { max-width: 180px; margin-top: 4px; color: rgba(255,255,255,.37); font-size: 9px; line-height: 1.55; }.footer-bottom { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.41); font-size: 9px; }.footer-bottom p { margin: 0; }.footer-bottom a:not(.back-to-top) { color: rgba(255,255,255,.75); }.back-to-top { color: #ffab6a; }.back-to-top span { margin-left: 4px; }.to-top-button { position: fixed; z-index: 50; right: 22px; bottom: 22px; width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: #201339; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 8px 23px rgba(0,0,0,.2); font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, background .2s ease; }.to-top-button.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.to-top-button:hover { background: #7b2ff7; }

[data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.js-ready [data-reveal] { opacity: 0; transform: translateY(22px); }
.js-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
.js-ready [data-text-mask] { clip-path: inset(0 0 100%); transition: clip-path .85s cubic-bezier(.76,0,.24,1); }
.js-ready [data-text-mask].is-text-revealed { clip-path: inset(0); }
.word-group-ready { --word-muted: #6e6b77; --word-highlight: #15172a; }
.word-group-ready[data-word-reveal="light"] { --word-muted: rgba(255,255,255,.6); --word-highlight: #fff; }
.word-reveal { color: var(--word-muted); transition: color .22s ease; }
.word-reveal.is-lit { color: var(--word-highlight); }
[data-parallax] { translate: 0 var(--parallax-y, 0px); will-change: translate; }
.reveal-delay { transition-delay: .12s; }
.services-list .service-row:nth-child(2) { transition-delay: .05s; }
.services-list .service-row:nth-child(3) { transition-delay: .1s; }
.services-list .service-row:nth-child(4) { transition-delay: .15s; }
.services-list .service-row:nth-child(5) { transition-delay: .2s; }
.benefit-grid .benefit:nth-child(2), .portfolio-grid .project:nth-child(2) { transition-delay: .06s; }
.benefit-grid .benefit:nth-child(3), .portfolio-grid .project:nth-child(3) { transition-delay: .12s; }
.benefit-grid .benefit:nth-child(4), .portfolio-grid .project:nth-child(4) { transition-delay: .18s; }
.benefit-grid .benefit:nth-child(5), .portfolio-grid .project:nth-child(5) { transition-delay: .24s; }
.benefit-grid .benefit:nth-child(6), .portfolio-grid .project:nth-child(6) { transition-delay: .3s; }

@keyframes halo-breathe { 0%, 100% { opacity: .72; scale: .96; } 50% { opacity: 1; scale: 1.05; } }
@keyframes ring-drift { from { rotate: -6deg; } to { rotate: 7deg; } }
@keyframes sparkle-float { 0%, 100% { translate: 0 0; rotate: -5deg; } 50% { translate: 0 -10px; rotate: 8deg; } }
.art-halo { animation: halo-breathe 7s ease-in-out infinite; }
.art-ring-one { animation: ring-drift 16s ease-in-out infinite alternate; }
.art-ring-two { animation: ring-drift 20s ease-in-out infinite alternate-reverse; }
.art-spark-main { animation: sparkle-float 5.5s ease-in-out infinite; }
.art-spark-small { animation: sparkle-float 6s ease-in-out infinite reverse; }

@media (min-width: 1500px) { :root { --page: min(1320px, calc(100% - 100px)); } }
@media (max-width: 1050px) {
  :root { --page: min(100% - 48px, 1240px); }
  .primary-nav { gap: 19px; font-size: 12px; }
  .hero { min-height: 630px; }.hero-inner { gap: 10px; }.hero-art { min-height: 440px; }.hero-logo-card { width: min(320px, 72%); }.art-ring-one { width: 340px; height: 170px; }.art-ring-two { width: 390px; height: 220px; }
  .service-row { grid-template-columns: 53px .9fr 1.1fr 42px; gap: 17px; }.service-copy h3 { font-size: 21px; }
  .why-layout { gap: 55px; }.benefit { grid-template-columns: 36px 1fr; }.benefit:nth-child(odd) { margin-right: 15px; }.benefit:nth-child(even) { padding-left: 15px; }
  .contact-layout { gap: 55px; }
}
@media (max-width: 780px) {
  :root { --page: calc(100% - 40px); }
  html { scroll-padding-top: 78px; }
  .announcement { min-height: 33px; font-size: 10px; }
  .nav-shell { min-height: 72px; }.brand { width: 68px; height: 68px; }
  .menu-toggle { display: none; }
  .primary-nav { justify-content: flex-end; flex-wrap: wrap; gap: 9px 15px; padding-block: 10px; }
  .js-ready .menu-toggle { position: relative; z-index: 102; width: 45px; height: 45px; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 0; background: #f5f2f8; border: 0; border-radius: 50%; cursor: pointer; }
  .menu-toggle span { width: 17px; height: 1.5px; background: var(--navy); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .js-ready .primary-nav { position: absolute; z-index: 101; top: 100%; right: 0; bottom: auto; left: 0; max-height: calc(100vh - 105px); max-height: calc(100dvh - 105px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 25px calc(28px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 20px 35px rgba(11,16,38,.12); font-size: 16px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .js-ready .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }.primary-nav > a:not(.nav-cta) { padding: 17px 0; border-bottom: 1px solid rgba(21,23,42,.1); }.primary-nav > a:not(.nav-cta)::after { display: none; }.nav-cta { justify-content: space-between; margin-top: 25px; padding-inline: 20px; }
  .hero { min-height: unset; }.hero-inner { grid-template-columns: 1fr; gap: 18px; padding-block: 68px 77px; }.hero-copy { max-width: 600px; }.hero h1 { font-size: clamp(54px, 10.5vw, 80px); }.hero-lede { max-width: 480px; }.hero-note { margin-top: 35px; }.hero-art { min-height: 420px; margin-top: 12px; }.hero-logo-card { width: min(325px, 72vw); }.art-halo { width: min(72vw, 420px); }.art-ring-one { width: min(74vw, 400px); height: min(35vw, 200px); }.art-ring-two { width: min(84vw, 450px); height: min(45vw, 245px); }.art-spark-main { top: 48px; left: 13%; }.float-note-top { right: 0; }.float-note-bottom { left: 0; }.hero-scroll { display: none; }
  .intro-layout { grid-template-columns: 1fr; gap: 16px; }.intro-layout > .section-label { margin-bottom: 2px; }.intro-bottom { grid-template-columns: 1fr 1fr; gap: 30px; }.intro-ribbon { margin-top: 70px; overflow: hidden; white-space: nowrap; }
  .section-heading-row, .work-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 38px; }.section-heading-note, .work-heading > p { width: 100%; max-width: 480px; }
  .service-row { grid-template-columns: 45px 1fr 42px; gap: 14px; padding: 24px 4px; }.service-index { grid-row: span 2; }.service-copy { grid-column: 2; }.service-tags { grid-column: 2/4; padding-top: 4px; }.service-arrow { grid-column: 3; grid-row: 1; width: 38px; height: 38px; }.service-copy h3 br { display: none; }.service-copy h3 { max-width: 300px; }
  .why-layout { grid-template-columns: 1fr; gap: 20px; }.why-intro { min-height: 405px; }.why-orbit { left: auto; right: -10px; bottom: -190px; }.benefit-grid { grid-template-columns: 1fr 1fr; }
  .industries-layout { grid-template-columns: 1fr; gap: 29px; }.industries-heading { position: static; }.industry-cloud { padding-top: 0; }
  .portfolio-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }.portfolio-filters { gap: 3px; }.filter-button { padding-inline: 9px; font-size: 10px; }.portfolio-grid { grid-template-columns: 1fr 1fr; gap: 30px 14px; }.project-art { height: clamp(195px, 35vw, 280px); }
  .process-heading { margin-bottom: 48px; }.process-track { grid-template-columns: 1fr 1fr; row-gap: 42px; }.process-track::before { top: 10px; right: auto; bottom: 14px; left: 7px; width: 1px; height: auto; background: linear-gradient(#f5893e,#e8599c,#7445c8); }.process-step { grid-template-columns: 33px 1fr; padding: 35px 0 0 22px; }.process-number { top: 0; left: 22px; }.process-dot { top: 6px; left: 0; }.process-step div { grid-column: 2; }
  .voices-layout { grid-template-columns: 58px 1fr; gap: 6px; padding: 32px 24px; }.voices-mark { font-size: 94px; }.voices-side { position: absolute; right: 20px; bottom: 13px; width: 115px; min-height: 116px; opacity: .7; }.voices-content { padding-bottom: 58px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }.faq-heading { position: static; }.faq-heading > p { max-width: 450px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }.contact-copy { position: static; }.contact-copy h2 { font-size: clamp(58px, 11vw, 80px); }.contact-methods { grid-template-columns: repeat(3, 1fr); gap: 15px; }.contact-methods > a { align-items: flex-start; flex-direction: column; font-size: 11px; }.contact-form { max-width: 650px; }
  .footer-main { grid-template-columns: 1.2fr .8fr .9fr; gap: 35px 23px; }.footer-brand { grid-row: span 2; }.footer-bottom { flex-wrap: wrap; padding-block: 16px; }
}
@media (max-width: 520px) {
  :root { --page: calc(100% - 36px); }
  .announcement { gap: 8px; font-size: 9px; }.announcement a { white-space: nowrap; }
  .hero-inner { padding-top: 54px; }.eyebrow { font-size: 8px; }.hero h1 { font-size: clamp(48px, 13vw, 66px); }.hero-lede { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-note { margin-top: 31px; }.hero-art { min-height: 355px; }.hero-logo-card { width: min(280px, 72vw); border-radius: 18px; }.float-note { padding: 10px 11px; font-size: 8px; }.float-note-top { top: 46px; right: -3px; }.float-note-bottom { bottom: 44px; left: -2px; }.art-spark-main { top: 30px; width: 43px; }.art-spark-small { bottom: 58px; }.art-caption { bottom: 0; }
  .intro-main h2, .section-heading-row h2, .why-intro h2, .industries-heading h2, .work-heading h2, .process-heading h2, .voices-content h2, .faq-heading h2 { font-size: clamp(37px, 10vw, 49px); }.intro-bottom { grid-template-columns: 1fr; gap: 20px; }.intro-lede { font-size: 20px; }.intro-ribbon { justify-content: flex-start; gap: 38px; font-size: 9px; }
  .service-row { grid-template-columns: 34px 1fr 34px; gap: 11px; }.service-index svg { width: 28px; height: 28px; }.service-copy h3 { font-size: 19px; }.service-copy p { font-size: 11px; }.service-arrow { width: 33px; height: 33px; }.service-tags { gap: 6px; }.service-tags li { padding: 6px 8px; font-size: 9px; }
  .why-intro { min-height: 430px; }.why-orbit { right: -34px; }.benefit-grid { grid-template-columns: 1fr; }.benefit { min-height: 115px; grid-template-columns: 40px 1fr; padding-right: 25px; }.benefit:nth-child(odd) { margin-right: 0; }.benefit:nth-child(even) { padding-left: 0; border-left: 0; }.benefit h3 { max-width: none; }.benefit p { max-width: 285px; }
  .industry { min-height: 47px; gap: 10px; padding-inline: 12px; font-size: 11px; }.industry-feature { min-height: 57px; }.industry-aside { margin-top: 15px; }
  .portfolio-filters { gap: 1px; }.filter-button { padding: 7px 8px; font-size: 9px; }.portfolio-grid { gap: 26px 12px; }.project-art { height: 190px; }.project-placeholder { top: 8px; left: 8px; padding: 4px 5px; font-size: 6px; }.project-caption { align-items: flex-start; gap: 7px; }.project-caption h3 { font-size: 12px; }.project-type { font-size: 7px; }.project-action { width: 29px; height: 29px; font-size: 13px; }.campaign-card { width: 66%; }.campaign-card > span { font-size: 25px; }.browser-body { min-height: 140px; }.browser-body strong { font-size: 20px; }.social-post { width: 58%; }
  .process-track { grid-template-columns: 1fr; gap: 29px; }.process-track::before { bottom: 11px; }.process-step { min-height: 105px; }.process-step p { max-width: 300px; }
  .voices-layout { grid-template-columns: 1fr; padding: 25px 21px 28px; }.voices-mark { height: 46px; font-size: 78px; }.voices-content { padding-bottom: 77px; }.voices-content h2 { font-size: 36px; }.voices-side { right: 10px; bottom: 7px; width: 100px; min-height: 100px; }
  .faq-item summary { font-size: 13px; }.faq-answer { padding-right: 20px; }.faq-answer p { font-size: 12px; }
  .contact-methods { grid-template-columns: 1fr 1fr; }.contact-methods > a { flex-direction: row; align-items: center; }.contact-method-icon { flex: 0 0 auto; }.contact-form { padding: 23px 18px; }.form-grid { grid-template-columns: 1fr; gap: 15px; }.form-field-wide { grid-column: auto; }.form-submit-row { align-items: flex-start; flex-direction: column; }.form-submit { align-self: stretch; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 20px; }.footer-brand { grid-column: 1/-1; grid-row: auto; }.footer-column { gap: 9px; }.footer-column h2 { margin-bottom: 6px; }.footer-contact { grid-column: auto; }.footer-social-note { font-size: 8px; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 17px; }
  .to-top-button { right: 14px; bottom: 14px; width: 39px; height: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
}

/* Legal pages */
.legal-announcement { justify-content: space-between; padding-inline: max(20px, calc((100% - 1240px) / 2)); color: rgba(255,255,255,.72); background: #0b1026; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.legal-announcement a { color: #ffb878; }
.legal-main { min-height: 70vh; padding-block: 36px 110px; background: #f6f4f7; }
.legal-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 27px; color: #888591; font-size: 10px; }
.legal-breadcrumb a { color: #534c61; }
.legal-breadcrumb span { color: #c1bdc7; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: clamp(24px, 5vw, 70px); }
.legal-sidebar { position: sticky; top: 115px; padding: 18px; background: #fff; border: 1px solid rgba(21,23,42,.07); border-radius: 5px; }
.legal-sidebar > p { margin: 0 0 13px; color: #8a8492; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.legal-links { display: grid; gap: 4px; }
.legal-links a { padding: 9px 10px; color: #686575; border-radius: 3px; font-size: 11px; line-height: 1.4; transition: background .18s ease, color .18s ease; }
.legal-links a:hover { color: #492987; background: #f5f0ff; }
.legal-links a[aria-current="page"] { color: #fff; background: #24104b; }
.legal-content { min-width: 0; padding: clamp(25px, 5vw, 64px); background: #fff; border: 1px solid rgba(21,23,42,.07); border-radius: 6px; box-shadow: 0 15px 50px rgba(30,19,52,.04); }
.legal-title { padding-bottom: 31px; border-bottom: 1px solid rgba(21,23,42,.11); }
.legal-title .section-label { margin-bottom: 16px; }
.legal-title h1 { margin: 0; color: var(--navy); font: 800 clamp(38px, 5.1vw, 64px)/1.06 var(--heading); letter-spacing: -.07em; }
.legal-updated { margin: 14px 0 0; color: #86818d; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.legal-summary { max-width: 720px; margin: 23px 0 0; color: #5f5c68; font: 500 17px/1.7 var(--heading); letter-spacing: -.025em; }
.legal-note { margin-top: 23px; padding: 15px 17px; color: #5d5066; background: #f7f2fc; border-left: 3px solid #9b55df; font-size: 11px; line-height: 1.7; }
.legal-content section { padding-top: 29px; }
.legal-content section + section { margin-top: 1px; border-top: 1px solid rgba(21,23,42,.08); }
.legal-content h2 { margin: 0 0 12px; color: #1b1b2b; font: 700 20px/1.35 var(--heading); letter-spacing: -.035em; }
.legal-content h3 { margin: 19px 0 7px; color: #262436; font: 700 14px/1.4 var(--heading); }
.legal-content p, .legal-content li { color: #686674; font-size: 12px; line-height: 1.85; }
.legal-content p { margin: 0 0 12px; }
.legal-content ul, .legal-content ol { display: grid; gap: 7px; margin: 10px 0 14px; padding-left: 20px; }
.legal-content strong { color: #343140; }
.legal-content a { color: #6035a7; text-decoration: underline; text-decoration-color: rgba(96,53,167,.35); text-underline-offset: 3px; }
.legal-contact-box { margin-top: 34px; padding: 21px 22px; color: #fff; background: linear-gradient(120deg,#17142f,#33205b); border-radius: 4px; }
.legal-contact-box h2 { margin-bottom: 7px; color: #fff; font-size: 16px; }
.legal-contact-box p { margin-bottom: 5px; color: rgba(255,255,255,.7); }
.legal-contact-box a { color: #ffb878; }
.legal-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 25px; }
.legal-footer-brand { color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.7; }
.legal-footer-brand strong { display: block; color: #fff; font: 700 13px var(--heading); }
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.legal-footer-links a { color: rgba(255,255,255,.57); font-size: 10px; }
.legal-footer-links a:hover { color: #ffb878; }
.legal-footer-inner > p { margin: 0; color: rgba(255,255,255,.43); font-size: 9px; }

@media (max-width: 780px) {
  .legal-main { padding-block: 25px 75px; }
  .legal-layout { grid-template-columns: 1fr; gap: 16px; }
  .legal-sidebar { position: static; padding: 13px; }
  .legal-sidebar > p { margin: 0 0 8px 5px; }
  .legal-links { display: flex; overflow-x: auto; gap: 3px; padding-bottom: 1px; scrollbar-width: thin; }
  .legal-links a { flex: 0 0 auto; white-space: nowrap; }
  .legal-content { padding: clamp(24px, 5vw, 42px); }
  .legal-footer-inner { align-items: flex-start; flex-direction: column; gap: 15px; }
}
@media (max-width: 520px) {
  .legal-announcement { gap: 10px; padding-inline: 18px; font-size: 8px; }
  .legal-breadcrumb { font-size: 9px; }
  .legal-title h1 { font-size: clamp(35px, 10vw, 48px); }
  .legal-summary { font-size: 15px; }
  .legal-content { padding: 23px 19px; }
  .legal-content h2 { font-size: 18px; }
  .legal-content p, .legal-content li { font-size: 11px; }
  .legal-footer-links { gap: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-halo, .art-ring-one, .art-ring-two, .art-spark-main, .art-spark-small { animation: none!important; }
  [data-parallax] { translate: none!important; will-change: auto; }
  .project-art { transform: none!important; }
}

/* Typography scale refinement: strengthen reading sizes and hierarchy site-wide. */
body { font-size: 17px; line-height: 1.68; }
.announcement { font-size: 12px; }
.primary-nav { font-size: 14px; }
.nav-cta { font-size: 14px; }
.eyebrow, .section-label { font-size: 12px; letter-spacing: .12em; }
.hero h1 { font-size: clamp(58px, 7vw, 96px); }
.hero-lede { font-size: clamp(17px, 1.5vw, 19px); }
.button { font-size: 15px; }
.text-link { font-size: 15px; }
.hero-note { font-size: 13px; }
.float-note { font-size: 12px; }
.art-caption { font-size: 11px; }
.hero-scroll { font-size: 10px; }
.intro-main h2, .section-heading-row h2, .why-intro h2, .industries-heading h2, .work-heading h2, .process-heading h2, .voices-content h2, .faq-heading h2, .contact-copy h2 { font-size: clamp(44px, 5.6vw, 72px); }
.intro-lede { font-size: clamp(21px, 2.25vw, 27px); }
.intro-detail p, .section-heading-note, .why-intro > p, .industries-heading > p, .work-heading > p, .process-heading > p, .voices-content > p, .faq-heading > p, .contact-copy > p { font-size: 16px; }
.intro-ribbon { font-size: 13px; }
.service-index > span { font-size: 12px; }
.service-copy h3 { font-size: clamp(22px, 2.3vw, 29px); }
.service-copy p { max-width: 290px; font-size: 15px; line-height: 1.6; }
.service-tags li { padding: 7px 11px; font-size: 12px; }
.service-bottom-note { font-size: 14px; }
.benefit-no { font-size: 11px; }
.benefit h3 { font-size: 18px; }
.benefit p { max-width: 230px; font-size: 14px; }
.orbit-word { font-size: 10px; }
.industry { font-size: 15px; }
.industry i { font-size: 11px; }
.industry-aside p { font-size: 14px; }
.filter-button { font-size: 13px; }
.filter-button span { font-size: 11px; }
.portfolio-count { font-size: 12px; }
.project-placeholder { font-size: 10px; }
.photo-stamp { font-size: 10px; }
.campaign-card b, .browser-top span, .browser-body small, .browser-button, .social-handle, .social-side { font-size: 9px; }
.project-type { font-size: 11px; }
.project-caption h3 { font-size: 17px; }
.portfolio-empty { font-size: 15px; }
.process-step h3 { font-size: 22px; }
.process-step p { max-width: 250px; font-size: 15px; }
.voices-note { font-size: 12px; }
.faq-item summary { font-size: 17px; }
.faq-answer p { font-size: 15px; }
.contact-methods > a { font-size: 15px; }
.contact-methods small { font-size: 10px; }
.social-note { font-size: 12px!important; }
.form-heading { font-size: 11px; }
.form-field { font-size: 13px; }
.form-field input, .form-field select, .form-field textarea { font-size: 14px; }
.form-status { max-width: 300px; font-size: 12px; }
.form-submit { font-size: 14px; }
.form-privacy { font-size: 11px; }
.footer-brand > p { font-size: 13px; }
.footer-tagline { font-size: 11px; }
.footer-column h2 { font-size: 14px; }
.footer-column a { font-size: 13px; }
.footer-social-note { font-size: 11px; }
.footer-bottom { font-size: 11px; }
.legal-announcement { font-size: 11px; }
.legal-breadcrumb { font-size: 12px; }
.legal-sidebar > p { font-size: 11px; }
.legal-links a { font-size: 13px; }
.legal-updated { font-size: 11px; }
.legal-note { font-size: 13px; }
.legal-content h2 { font-size: 22px; }
.legal-content h3 { font-size: 16px; }
.legal-content p, .legal-content li { font-size: 14px; }
.legal-contact-box h2 { font-size: 18px; }
.legal-footer-brand { font-size: 12px; }
.legal-footer-brand strong { font-size: 15px; }
.legal-footer-links a { font-size: 12px; }
.legal-footer-inner > p { font-size: 11px; }

@media (max-width: 1050px) {
  .primary-nav { font-size: 13px; }
  .service-tags li { font-size: 11px; }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .announcement { font-size: 11px; }
  .hero h1 { font-size: clamp(56px, 10.7vw, 84px); }
  .hero-lede { font-size: 18px; }
  .eyebrow, .section-label { font-size: 11px; }
  .intro-main h2, .section-heading-row h2, .why-intro h2, .industries-heading h2, .work-heading h2, .process-heading h2, .voices-content h2, .faq-heading h2, .contact-copy h2 { font-size: clamp(42px, 6.6vw, 62px); }
  .service-copy h3 { font-size: 23px; }
  .service-copy p { font-size: 14px; }
  .industry { font-size: 14px; }
  .portfolio-grid .project-caption h3 { font-size: 15px; }
  .contact-methods > a { font-size: 13px; }
  .footer-column a { font-size: 12px; }
}
@media (max-width: 520px) {
  .announcement { font-size: 10px; }
  .eyebrow, .section-label { font-size: 10px; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(48px, 13.3vw, 68px); }
  .hero-lede { font-size: 17px; }
  .hero-note { font-size: 12px; }
  .float-note { font-size: 10px; }
  .art-caption { font-size: 9px; }
  .intro-main h2, .section-heading-row h2, .why-intro h2, .industries-heading h2, .work-heading h2, .process-heading h2, .voices-content h2, .faq-heading h2, .contact-copy h2 { font-size: clamp(38px, 10.2vw, 50px); }
  .intro-lede { font-size: 21px; }
  .intro-detail p, .section-heading-note, .why-intro > p, .industries-heading > p, .work-heading > p, .process-heading > p, .voices-content > p, .faq-heading > p, .contact-copy > p { font-size: 15px; }
  .intro-ribbon { font-size: 11px; }
  .service-copy h3 { font-size: 20px; }
  .service-copy p { font-size: 13px; }
  .service-tags li { padding: 6px 9px; font-size: 11px; }
  .service-bottom-note { font-size: 13px; }
  .benefit h3 { font-size: 17px; }
  .benefit p { font-size: 13px; }
  .industry { min-height: 48px; font-size: 12px; }
  .industry-aside p { font-size: 13px; }
  .filter-button { padding: 7px 8px; font-size: 11px; }
  .project-placeholder { font-size: 8px; }
  .project-caption h3, .portfolio-grid .project-caption h3 { font-size: 13px; }
  .project-type { font-size: 9px; }
  .process-step h3 { font-size: 20px; }
  .process-step p { font-size: 14px; }
  .voices-note { font-size: 11px; }
  .faq-item summary { font-size: 15px; }
  .faq-answer p { font-size: 14px; }
  .contact-methods > a { font-size: 12px; }
  .contact-methods small { font-size: 9px; }
  .form-heading { font-size: 10px; }
  .form-field { font-size: 12px; }
  .form-field input, .form-field select, .form-field textarea { font-size: 14px; }
  .form-status { font-size: 12px; }
  .footer-column a { font-size: 12px; }
  .footer-social-note { font-size: 10px; }
  .footer-bottom { font-size: 10px; }
  .legal-announcement { font-size: 9px; }
  .legal-breadcrumb { font-size: 10px; }
  .legal-title h1 { font-size: clamp(36px, 10.5vw, 50px); }
  .legal-updated { font-size: 10px; }
  .legal-summary { font-size: 16px; }
  .legal-note { font-size: 12px; }
  .legal-links a { font-size: 12px; }
  .legal-content h2 { font-size: 19px; }
  .legal-content p, .legal-content li { font-size: 13px; }
  .legal-footer-links a { font-size: 11px; }
}

/* Hero polish and responsive WhatsApp contact layout. */
.hero { min-height: min(860px, max(680px, calc(100vh - 117px))); }
.hero::before {
  background-image:
    radial-gradient(430px circle at var(--hero-pointer-x, 78%) var(--hero-pointer-y, 38%), rgba(255,122,0,.19), transparent 72%),
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: auto, 66px 66px, 66px 66px;
}
.hero-inner { grid-template-columns: 1.12fr .88fr; gap: clamp(24px, 4vw, 58px); padding-block: clamp(78px, 9vh, 112px) clamp(96px, 11vh, 132px); }
.hero-copy { max-width: 675px; }
.hero h1 { max-width: 720px; font-size: clamp(62px, 6.7vw, 96px); line-height: .96; letter-spacing: -.07em; }
.hero h1 span { filter: drop-shadow(0 8px 26px rgba(255,61,129,.22)); }
.hero-lede { max-width: 540px; font-size: clamp(18px, 1.55vw, 20px); }
.hero-actions { gap: 30px; margin-top: 38px; }
.hero-actions .button { min-height: 56px; }
.hero-note { margin-top: 49px; }
.hero-art { min-height: 560px; }
.hero-logo-card { width: min(390px, 76%); border-radius: 30px; box-shadow: 0 42px 100px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.72), 0 0 80px rgba(255,88,141,.13); }
.hero-logo-card::before { position: absolute; z-index: 1; inset: 9px; content: ""; border: 1px solid rgba(20,18,45,.08); border-radius: 22px; pointer-events: none; }
.art-ring-one { width: 450px; height: 230px; }
.art-ring-two { width: 530px; height: 285px; }
.float-note { min-height: 44px; padding: 12px 16px; font-size: 12px; }
.float-note-top { top: 80px; right: -8px; }
.float-note-bottom { bottom: 64px; left: -8px; }
.art-caption { bottom: 12px; }
.hero-scroll { bottom: 23px; }
.contact-methods { grid-template-columns: 1fr; gap: 12px; }
.contact-methods > a { min-height: 82px; align-items: center; flex-direction: row; gap: 15px; padding: 16px 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; font-size: 15px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.contact-methods > a:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.contact-methods > a strong { display: block; margin-top: 3px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500; }
.contact-methods small { margin-bottom: 4px; font-size: 10px; }
.contact-method-arrow { margin-left: auto; color: #ff9a4d; font-size: 22px; }
.form-field input, .form-field select { min-height: 50px; }
.form-field textarea { min-height: 120px; }

@media (max-width: 1050px) {
  .hero-art { min-height: 500px; }
  .hero-logo-card { width: min(350px, 78%); }
  .art-ring-one { width: 390px; height: 200px; }
  .art-ring-two { width: 460px; height: 250px; }
}
@media (max-width: 780px) {
  .hero { min-height: unset; }
  .hero-inner { grid-template-columns: 1fr; gap: 12px; padding-block: 68px 82px; }
  .hero-copy { max-width: 650px; }
  .hero h1 { max-width: 650px; font-size: clamp(56px, 10.4vw, 82px); }
  .hero-lede { max-width: 550px; font-size: 18px; }
  .hero-art { min-height: 440px; margin-top: 8px; }
  .hero-logo-card { width: min(350px, calc(100vw - 52px)); }
  .art-ring-one { width: min(78vw, 410px); height: min(39vw, 220px); }
  .art-ring-two { width: min(90vw, 480px); height: min(49vw, 260px); }
  .float-note-top { top: 58px; right: 2px; }
  .float-note-bottom { bottom: 50px; left: 2px; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-methods > a { align-items: center; flex-direction: row; font-size: 15px; }
}
@media (max-width: 520px) {
  .hero-inner { padding-block: 54px 68px; }
  .hero h1 { font-size: clamp(48px, 13.3vw, 68px); }
  .hero-lede { font-size: 17px; line-height: 1.7; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 30px; }
  .hero-actions .button { min-height: 54px; }
  .hero-note { margin-top: 34px; }
  .hero-art { min-height: 400px; margin-top: 4px; }
  .hero-logo-card { width: min(300px, calc(100vw - 48px)); border-radius: 22px; }
  .hero-logo-card::before { inset: 7px; border-radius: 16px; }
  .art-ring-one { width: min(88vw, 370px); height: min(43vw, 185px); }
  .art-ring-two { width: min(96vw, 410px); height: min(54vw, 230px); }
  .float-note { min-height: 39px; padding: 9px 11px; font-size: 10px; }
  .float-note-top { top: 42px; right: 0; }
  .float-note-bottom { bottom: 37px; left: 0; }
  .art-spark-main { top: 24px; width: 39px; }
  .art-spark-small { right: 10%; bottom: 48px; width: 20px; }
  .art-caption { display: none; }
  .contact-methods > a { min-height: 76px; padding: 14px; font-size: 14px; }
  .contact-methods > a strong { font-size: 12px; }
  .contact-methods small { font-size: 9px; }
  .form-submit-row { gap: 14px; }
  .form-submit { min-height: 52px; }
}

/* Keep intrinsic content from widening the page on narrow screens. */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { overflow-wrap: break-word; }
main, section, header, footer, .page-width, .nav-shell { max-width: 100%; min-width: 0; }
.page-width > *, .nav-shell > *, .legal-layout > * { min-width: 0; }
.hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.intro-layout { grid-template-columns: minmax(0, .25fr) minmax(0, .75fr); }
.intro-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); }
.section-heading-row, .work-heading, .footer-main, .legal-footer-inner { min-width: 0; }
.service-row { grid-template-columns: 74px minmax(0, 1.1fr) minmax(0, 1fr) 46px; }
.service-row > *, .benefit, .project, .process-step, .faq-item, .form-field { min-width: 0; }
.why-layout { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.industries-layout { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.process-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voices-layout { grid-template-columns: 90px minmax(0, 1fr) 190px; }
.faq-layout { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); }
.contact-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-main { grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr)); }
.primary-nav, .footer-column, .legal-links, .legal-footer-links { min-width: 0; }
.footer-column a, .legal-links a, .legal-footer-links a { overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .service-row { grid-template-columns: 53px minmax(0, .9fr) minmax(0, 1.1fr) 42px; }
}
@media (max-width: 780px) {
  .hero-inner, .intro-layout, .why-layout, .industries-layout, .faq-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .intro-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-row { grid-template-columns: 45px minmax(0, 1fr) 42px; }
  .benefit-grid, .portfolio-grid, .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices-layout { grid-template-columns: 58px minmax(0, 1fr); }
  .contact-methods { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .9fr)); }
}
@media (max-width: 520px) {
  .intro-bottom, .benefit-grid, .process-track, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .service-row { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep the hero artwork sized to its column and prevent narrow screens from scrolling sideways. */
html, body, main { inline-size: 100%; max-inline-size: 100%; }
main { min-inline-size: 0; overflow-x: clip; }
.page-width, .nav-shell { inline-size: min(var(--page), 100%); max-inline-size: 100%; }
.hero { inline-size: 100%; max-inline-size: 100%; overflow: clip; }
.hero-inner { min-inline-size: 0; }
.hero-copy, .hero-art { min-inline-size: 0; }
.hero-art { inline-size: 100%; max-inline-size: 560px; justify-self: center; overflow: clip; }
.hero h1, .hero-lede, .hero-actions, .hero-note { max-inline-size: 100%; }
.hero-logo-card { inline-size: min(390px, calc(100% - 48px)); max-inline-size: 100%; }
.service-row > *, .benefit > *, .project-caption > *, .process-step > *, .faq-item > *, .contact-layout > *, .footer-main > * { min-inline-size: 0; }
.hero .eyebrow-light { inline-size: fit-content; max-inline-size: 100%; padding: 8px 13px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; }
.hero h1 { text-wrap: balance; }
.hero-lede { color: rgba(255,255,255,.78); text-wrap: pretty; }
.art-halo { animation: hero-halo-breathe 8s ease-in-out infinite alternate; }
.art-ring-one { animation: hero-ring-glow 7s ease-in-out infinite alternate; }
.float-note { translate: 0 0; }
.float-note-top { animation: hero-note-drift 6s ease-in-out infinite; }
.float-note-bottom { animation: hero-note-drift 7s ease-in-out -2s infinite reverse; }
@keyframes hero-halo-breathe { from { opacity: .62; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes hero-ring-glow { from { opacity: .45; } to { opacity: .9; } }
@keyframes hero-note-drift { 50% { translate: 0 -7px; } }
@media (max-width: 780px) {
  .hero-art { max-inline-size: 520px; }
  .hero-logo-card { inline-size: min(350px, calc(100% - 48px)); }
  .art-ring-one { inline-size: min(100%, 410px); block-size: clamp(150px, 39vw, 220px); }
  .art-ring-two { inline-size: min(100%, 480px); block-size: clamp(180px, 49vw, 260px); }
}
@media (max-width: 520px) {
  .announcement { flex-wrap: wrap; text-align: center; }
  .hero-inner { inline-size: min(var(--page), 100%); }
  .hero-art { max-inline-size: 420px; }
  .hero-logo-card { inline-size: min(300px, calc(100% - 44px)); }
  .art-ring-one { inline-size: min(94%, 370px); block-size: clamp(135px, 43vw, 185px); }
  .art-ring-two { inline-size: min(100%, 410px); block-size: clamp(160px, 54vw, 230px); }
}

@media (max-width: 780px) {
  .js-ready .primary-nav { scrollbar-width: thin; scrollbar-color: rgba(123,47,247,.35) transparent; }
  .js-ready .primary-nav > a:not(.nav-cta) { min-height: 54px; display: flex; align-items: center; }
  .js-ready .primary-nav .nav-cta { min-height: 52px; flex: 0 0 auto; }
}