:root {
  --bg: #07090f;
  --panel: #10141e;
  --text: #f2f3f5;
  --muted: #aab2c2;
  --line: rgba(255, 255, 255, .12);
  --gold: #ffc56e;
  --coral: #ff8452;
  --sunrise: linear-gradient(110deg, #ffc56e, #ff8452);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
[id] { scroll-margin-top: 92px; }
.container { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 68px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 3.2vw, 38px); }
h3 { font-size: 25px; }
h4 { font-size: 17px; }
.kicker { color: var(--gold); font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
.skip-link { position: fixed; left: 16px; top: 12px; padding: 10px 18px; background: var(--gold); color: var(--bg); z-index: 110; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px; border: 1px solid transparent; border-radius: 100px; font: 500 15px/1.4 var(--display); text-align: center; transition: background .18s, border-color .18s, box-shadow .18s; }
.btn--primary { background: var(--sunrise); color: #281506; }
.btn--primary:hover { box-shadow: 0 0 25px rgba(255, 157, 77, .25); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .2); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(255, 197, 110, .04); }
.btn--small { min-height: 40px; padding: 8px 20px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: rgba(7, 9, 15, .93); backdrop-filter: blur(18px); }
.nav__inner { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--display); white-space: nowrap; }
.brand img { flex: none; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; color: var(--muted); }
.nav__toggle { display: none; width: 42px; height: 42px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav__toggle span { height: 1px; width: 17px; background: var(--text); transition: transform .15s; }
.nav__toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__mobile { display: grid; padding-block: 8px 20px; }
.nav__mobile a { padding: 10px 0; font-size: 15px; border-top: 1px solid var(--line); }
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(640px, 78svh, 820px); padding-block: 96px 104px; }
.hero__inner { position: relative; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
h1 { font-size: clamp(42px, 5.2vw, 64px); line-height: 1.08; font-weight: 500; letter-spacing: -.045em; }
.grad-text { background: var(--sunrise); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero__intro { max-width: 550px; margin-block: 30px 34px; color: #bac1ce; font-size: 17px; line-height: 1.65; }
.hero__art { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hero__art::before { content: ''; position: absolute; top: 10%; right: -100px; width: 640px; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 142, 75, .12), transparent 68%); }
.hero__sun { position: absolute; width: 320px; height: 320px; right: max(30px, calc((100vw - 1120px) / 2)); top: calc(50% - 160px); border-radius: 50%; background: linear-gradient(180deg, #ffbd78 0%, #ee8255 35%, #6a352c 65%, #171216 85%); box-shadow: 0 -15px 100px rgba(255, 146, 72, .12); opacity: .85; }
.hero__horizon { position: absolute; right: 0; left: 51%; top: calc(50% + 15px); bottom: 0; border-top: 1px solid rgba(255, 190, 135, .22); background: linear-gradient(180deg, rgba(7, 9, 15, .83), var(--bg) 45%); }
.hero__horizon::after { content: ''; display: block; height: 90px; background: repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(255, 197, 110, .06) 13px, transparent 14px); mask-image: linear-gradient(90deg, transparent, black 45%, transparent); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 30px; }
.section-head > p { color: var(--muted); font-size: 15px; padding-bottom: 2px; }
.scope-note { max-width: 90ch; color: var(--muted); font-size: 12px; margin-top: 18px; }
.faq { padding-top: 52px; }
.faq__heading { display: flex; gap: 20px; align-items: baseline; padding-top: 34px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.faq__heading h2 { font-size: 27px; }
.faq__heading p { color: var(--muted); font-size: 13px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 17px; font-size: 14px; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 21px; line-height: 1; color: var(--gold); font-weight: 300; }
.faq details[open] summary::after { content: '−'; }
.faq details > p { max-width: 85ch; color: var(--muted); font-size: 13px; padding-bottom: 18px; }
.contact { padding-top: 0; padding-bottom: 48px; }
.contact__panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 45px; border: 1px solid rgba(255, 197, 110, .23); border-radius: 20px; padding: 40px; background: radial-gradient(ellipse at 0 100%, rgba(255, 157, 77, .13), transparent 60%), #0d1119; }
.contact h2 { font-size: 38px; }
.contact__intro { font-size: 14px; color: var(--muted); max-width: 39ch; margin-top: 18px; }
.contact__name { font: 16px var(--display); margin-bottom: 5px; }
.contact__email { display: inline-block; font: 500 clamp(17px, 2vw, 23px)/1.5 var(--display); letter-spacing: -.03em; color: var(--gold); text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; max-width: 100%; }
.contact .actions { margin-top: 22px; }
.contact__note { font-size: 12px; line-height: 1.75; color: var(--muted); margin-top: 18px; }
.copy-status { font-size: 12px; color: var(--gold); margin-top: 8px; }
.footer { border-top: 1px solid var(--line); padding-block: 28px; }
.footer__inner { display: flex; gap: 25px; align-items: center; justify-content: space-between; }
.footer .brand { font-size: 14px; }
.footer nav { display: flex; gap: 24px; font-size: 12px; color: var(--muted); }
.footer p { font-size: 12px; color: var(--muted); }
@media (min-width: 1500px) { .hero__sun { right: calc((100vw - 1120px) / 2 + 20px); } }
@media (max-width: 1099px) {
  .nav__inner { gap: 22px; }
  .nav__links { gap: 22px; }
  .hero__sun { right: -90px; opacity: .5; }
  .hero__horizon { left: 65%; }
}
@media (max-width: 899px) {
  .container { width: calc(100% - 48px); }
  .nav__inner { height: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .hero { min-height: min(660px, calc(100svh - 64px)); padding-block: 72px 80px; }
  .hero__sun, .hero__horizon { display: none; }
  .hero__intro { max-width: 540px; }
  .section { padding-block: 50px; }
  .section-head { align-items: start; }
  .section-head > p { max-width: 26ch; font-size: 13px; }
  .desktop-break { display: none; }
  .contact__panel { gap: 25px; padding: 30px; }
  .contact h2 { font-size: 32px; }
  .contact .btn { padding-inline: 18px; font-size: 14px; }
  .faq { padding-top: 40px; }
  .contact { padding-top: 0; }
}
@media (max-width: 599px) {
  .container { width: calc(100% - 40px); }
  .brand { font-size: 14px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .nav__inner { gap: 12px; }
  .hero { min-height: min(600px, calc(100svh - 64px)); padding-block: 56px 64px; }
  .eyebrow { font-size: 11px; gap: 6px; margin-bottom: 26px; }
  h1 { font-size: clamp(33px, 9.2vw, 49px); line-height: 1.08; letter-spacing: -.045em; }
  .hero__intro { font-size: 14px; margin-block: 24px 30px; }
  .hero__sun, .hero__horizon, .hero__art::before { display: none; }
  .hero__art { background: radial-gradient(ellipse at 110% 10%, rgba(255, 157, 77, .09), transparent 60%); }
  .hero .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .hero .btn { font-size: 12px; padding: 11px 10px; }
  .section { padding-block: 40px; }
  .section-head { display: block; margin-bottom: 24px; }
  .section-head > p { margin-top: 13px; max-width: 44ch; }
  .contact__panel { grid-template-columns: 1fr; }
  .scope-note { font-size: 11px; }
  .faq { padding-top: 40px; }
  .contact { padding-top: 0; }
  .faq__heading { display: block; padding-top: 26px; margin-bottom: 12px; }
  .faq__heading p { margin-top: 9px; }
  .faq summary { font-size: 13px; }
  .contact__panel { padding: 26px; gap: 25px; }
  .contact h2 { font-size: 31px; }
  .contact h2 br { display: none; }
  .contact__intro { margin-top: 13px; font-size: 13px; }
  .contact__details { border-top: 1px solid var(--line); padding-top: 23px; }
  .contact__email { font-size: 20px; }
  .contact .actions { gap: 9px; }
  .contact .btn { font-size: 12px; padding-inline: 16px; }
  .footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
  .footer nav { grid-column: 1; grid-row: 2; gap: 23px; }
  .footer .brand { grid-column: 1 / 3; font-size: 14px; }
  .footer p { grid-column: 2; grid-row: 2; }
}
@media (max-width: 359px) {
  .eyebrow { font-size: 10px; }
  .hero .btn { font-size: 11px; padding-inline: 8px; }
  .contact__panel { padding: 22px; }
  .contact__email { font-size: 18px; }
  .contact .btn { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Illustrated expertise cards. Artwork remains complete without motion. */
.expertise.section { padding-bottom: 0; }
.expertise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.expertise-card { --art-rgb: 255, 197, 132; min-width: 0; overflow: hidden; border: 1px solid rgba(var(--art-rgb), .18); border-radius: 22px; background: #10131c; transition: border-color .4s; }
.expertise-card--development { --art-rgb: 138, 184, 255; }
.expertise-card--marketing { --art-rgb: 223, 172, 255; }
.expertise-card--sales { --art-rgb: 158, 211, 180; }
.expertise-art { position: relative; aspect-ratio: 560 / 300; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 65%, rgba(var(--art-rgb), .12), transparent 68%), linear-gradient(150deg, rgba(var(--art-rgb), .035), transparent 65%), #0d111a; }
.expertise-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -28px 35px -30px rgba(0,0,0,.6); }
.expertise-art svg { width: 100%; height: 100%; overflow: visible; font-family: var(--body); }
.expertise-art .art-main, .expertise-art .art-back, .expertise-art .art-front, .marketing-waves, .dev-connection, .sales-route { transform-box: fill-box; transform-origin: center; transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .75s, stroke-dashoffset 1s; }
.expertise-copy { position: relative; padding: 27px 30px 30px; border-top: 1px solid rgba(var(--art-rgb), .1); background: linear-gradient(110deg, rgba(var(--art-rgb), .025), transparent 70%); }
.expertise-copy h3 { font-size: 32px; letter-spacing: -.04em; margin-bottom: 17px; }
.expertise-copy ul { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; line-height: 1.65; }
.expertise-copy li { position: relative; padding-left: 12px; }
.expertise-copy li::before { content: ''; position: absolute; left: 0; top: .65em; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--art-rgb)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .expertise-card:hover { border-color: rgba(var(--art-rgb), .45); }
  .expertise-card--research:hover .research-lens { transform: translate(-18px, 5px) rotate(-5deg); }
  .expertise-card--research:hover .art-back { transform: translate(-5px, -4px) rotate(-2deg); }
  .expertise-card--research:hover .art-front { transform: translateY(4px); }
  .expertise-card--development:hover .dev-editor { transform: translate(-8px, -5px); }
  .expertise-card--development:hover .dev-phone { transform: translate(10px, -9px) rotate(3deg); }
  .expertise-card--development:hover .dev-model { transform: translateY(8px); }
  .expertise-card--development:hover .dev-connection { stroke-dashoffset: -22; }
  .expertise-card--marketing:hover .marketing-media { transform: translate(-17px, 5px) rotate(-5deg); }
  .expertise-card--marketing:hover .marketing-creator { transform: translate(17px, -4px) rotate(5deg); }
  .expertise-card--marketing:hover .marketing-campaign { transform: translateY(-7px) rotate(3deg); }
  .expertise-card--marketing:hover .marketing-waves { transform: scale(1.05); opacity: .65; }
  .expertise-card--sales:hover .sales-contact { transform: translate(15px, -11px) rotate(-3deg); }
  .expertise-card--sales:hover .sales-pipeline { transform: translate(-5px, -3px); }
  .expertise-card--sales:hover .sales-team { transform: translateX(8px); }
  .expertise-card--sales:hover .sales-route { stroke-dashoffset: -20; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-revealing .research-lens { animation: research-scan 1.1s cubic-bezier(.2,.7,.2,1); }
  .is-revealing .dev-editor { animation: development-assemble 1.1s cubic-bezier(.2,.7,.2,1); }
  .is-revealing .marketing-campaign { animation: marketing-unfold 1.1s cubic-bezier(.2,.7,.2,1); }
  .is-revealing .sales-contact { animation: sales-connect 1.1s cubic-bezier(.2,.7,.2,1); }
}
@keyframes research-scan { 0% { transform: translate(-42px, 13px) rotate(-9deg); } 65% { transform: translate(5px, -2px) rotate(2deg); } 100% { transform: none; } }
@keyframes development-assemble { 0% { transform: translate(-14px, 22px) rotate(5deg); } 100% { transform: none; } }
@keyframes marketing-unfold { 0% { transform: translateY(18px) rotate(8deg) scale(.96); } 100% { transform: none; } }
@keyframes sales-connect { 0% { transform: translate(-40px, 5px) rotate(-4deg); } 100% { transform: none; } }
@media (max-width: 899px) {
  .expertise-grid { gap: 20px; }
  .expertise-copy { padding: 24px; }
  .expertise-copy h3 { font-size: 28px; }
  .expertise-copy ul { gap: 7px 16px; }
}
@media (max-width: 699px) {
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { border-radius: 19px; }
  .expertise-copy { padding: 24px; }
  .expertise-copy h3 { font-size: 30px; margin-bottom: 14px; }
  .expertise-copy ul { font-size: 12px; }
}
@media (max-width: 359px) {
  .expertise-copy { padding: 21px; }
  .expertise-copy h3 { font-size: 28px; }
  .expertise-copy ul { font-size: 11px; gap: 7px 14px; }
}
/* Large cards with real product material and progressive disclosure. */
.section { padding-block: 88px; }
.section-head { margin-bottom: 34px; }
.section-head > p { font-size: 14px; }
.section--tint { background: #0a0e16; border-block: 1px solid var(--line); }
.text-link { border: 0; padding: 0; background: transparent; color: var(--gold); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { color: #ffe0b5; }
.project-grid, .offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-card { --project-rgb: 103, 118, 255; position: relative; min-width: 0; overflow: hidden; background: #10141e; border: 1px solid var(--line); border-radius: 23px; }
.project-card--flymy { --project-rgb: 183, 156, 244; }
.project-card--planmasta { --project-rgb: 176, 154, 236; }
.project-card--bootstrap { --project-rgb: 182, 142, 250; }
.project-card__visual { background: radial-gradient(ellipse at 60% 100%, rgba(var(--project-rgb), .24), transparent 70%), #10131f; border-bottom: 1px solid var(--line); overflow: hidden; }
.project-brand { display: flex; align-items: center; gap: 12px; padding: 27px 28px 0; }
.project-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.project-brand h3 { font-size: 27px; }
.project-brand > span { margin-left: auto; color: #c0c5d1; font-size: 11px; }
.project-stage { height: 265px; position: relative; overflow: hidden; padding: 36px 28px 0; }
.project-stage .product-capture { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 16px 50px rgba(0,0,0,.35); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project-card__body { padding: 27px 28px; }
.project-card__body > p { font-size: 15px; }
.project-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 24px; padding-block: 22px; border-block: 1px solid var(--line); }
.project-metrics > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.project-metrics dt { order: 1; color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 24ch; }
.project-metrics dd { font: 500 clamp(25px,3vw,34px)/1.1 var(--display); letter-spacing: -.045em; }
.project-card__bottom { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 22px; }
.project-card__bottom > span { color: var(--muted); font-size: 12px; }
.card-open { display: inline-flex; align-items: center; gap: 14px; flex: none; padding: 10px 14px; min-height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; background: transparent; font: 500 13px/1.4 var(--display); }
.card-open > span { color: var(--gold); font-size: 17px; }
.card-open::after, .expertise-open::after { content: ''; position: absolute; inset: 0; }
.card-open:hover { border-color: var(--gold); background: rgba(255,197,110,.05); }
.project-card:has(.card-open:focus-visible), .offer-card:has(.card-open:focus-visible), .expertise-card:has(.expertise-open:focus-visible) { outline: 2px solid var(--gold); outline-offset: 5px; }
.card-open:focus-visible, .expertise-open:focus-visible { outline: none; }
.phone-gallery { display: flex; align-items: start; justify-content: center; gap: 15px; }
.phone-gallery img { width: calc((100% - 15px)/2); max-width: 280px; height: auto; border-radius: 12px; }
.project-stage .phone-gallery { padding-inline: 18px; gap: 14px; }
.project-stage .phone-gallery img { width: 43%; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translateY(18px) rotate(-5deg); transition: transform .6s; }
.project-stage .phone-gallery img:nth-child(2) { transform: translateY(-12px) rotate(2deg); }
.project-stage .phone-gallery img:nth-child(3) { transform: translateY(25px) rotate(7deg); }
.bootstrap-art { position: relative; display: grid; place-items: center; height: 230px; margin-top: -12px; }
.bootstrap-art > img { width: 105px; height: 105px; position: relative; z-index: 1; filter: drop-shadow(0 14px 30px #050711); transition: transform .6s; }
.bootstrap-orbit { position: absolute; width: 260px; height: 180px; border: 1px solid rgba(186,153,247,.3); border-radius: 50%; transform: rotate(-18deg); box-shadow: 0 0 0 32px rgba(186,153,247,.035),0 0 0 64px rgba(186,153,247,.025); }
.bootstrap-art > span { position: absolute; padding: 7px 14px; color: #d9c6ff; background: #211b33; border: 1px solid #514167; border-radius: 99px; font-size: 12px; }
.bootstrap-art > span:nth-of-type(1) { top: 19px; left: 17%; }
.bootstrap-art > span:nth-of-type(2) { right: 4%; top: 95px; }
.bootstrap-art > span:nth-of-type(3) { bottom: 9px; left: 15%; }
.founder { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 34px; margin-top: 48px; padding-top: 42px; border-top: 1px solid var(--line); }
.founder > img { width: 150px; height: 174px; border-radius: 16px; object-fit: cover; object-position: 50% 26%; }
.founder .kicker { margin-bottom: 10px; font-size: 12px; }
.founder h3 { font-size: 28px; }
.founder div > p:not(.kicker) { color: var(--muted); max-width: 60ch; font-size: 14px; margin: 12px 0 14px; }
.founder .text-link { font-size: 13px; }
.offer-card { --offer-color: #ffc56e; position: relative; padding: 30px; min-height: 370px; border: 1px solid var(--line); border-radius: 23px; background: #10141e; overflow: hidden; }
.offer-card--launch { --offer-color: #ff9b77; background: radial-gradient(ellipse at 100% 0,rgba(255,142,83,.13),transparent 70%),#10141e; border-color: rgba(255,171,114,.32); }
.offer-card--strategy { --offer-color: #b1c8ef; }
.offer-card--audit { --offer-color: #c4b1ec; }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 13px; }
.offer-index { font: 13px var(--display); opacity: .6; }
.offer-duration { position: relative; display: flex; align-items: baseline; gap: 17px; min-height: 172px; padding-block: 25px 27px; color: var(--offer-color); }
.offer-duration > span:first-child { font: 500 108px/.95 var(--display); letter-spacing: -.07em; }
.offer-duration > span:nth-child(2) { font: 500 21px/1 var(--display); letter-spacing: -.03em; }
.offer-duration i { position: absolute; right: -60px; top: -28px; width: 210px; height: 210px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 24px rgba(255,255,255,.025), 0 0 0 48px rgba(255,255,255,.02); pointer-events: none; }
.offer-bottom { position: relative; display: flex; gap: 18px; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 25px; }
.offer-bottom h3 { font-size: 27px; }
.offer-bottom p { max-width: 28ch; font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.offer-bottom .card-open::after { display: none; }
.offer-card > .offer-bottom { position: static; }
.offer-bottom .card-open::after { display: block; }
.scope-note { font-size: 13px; margin-top: 22px; }
.expertise.section { padding-top: 0; padding-bottom: 72px; }
.expertise-card { position: relative; }
.expertise-copy { position: static; display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.expertise-copy h3 { font-size: 30px; }
.expertise-copy ul { font-size: 13px; gap: 6px 16px; }
.expertise-open { flex: none; align-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0 8px 10px; margin-top: -3px; border: 0; background: none; font-size: 12px; color: #d0d4de; }
.expertise-open > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-size: 19px; color: rgb(var(--art-rgb)); }
.expertise-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 30px 0; color: var(--muted); font-size: 14px; }
.expertise-cta .text-link { flex: none; }
.faq.section { padding-top: 0; }
.faq__heading { border-top: 1px solid var(--line); padding-top: 38px; }
.faq summary { font-size: 16px; padding-block: 22px; }
.faq details > p { max-width: 80ch; font-size: 14px; line-height: 1.8; padding-bottom: 23px; }
.contact.section { padding-top: 0; padding-bottom: 70px; }
.contact__panel { padding: 50px; min-height: 320px; }
.contact__email { font-size: clamp(17px,2vw,23px); }
.contact__note { font-size: 13px; margin: 24px 0 5px; }
.contact-links { display: flex; gap: 24px; font-size: 13px; margin-top: 18px; }
.footer nav .text-link { color: var(--muted); text-decoration: none; }
/* Native dialogs keep essential detail accessible on touch and keyboard. */
body.dialog-open { overflow: hidden; }
.detail-dialog { position: fixed; margin: auto; padding: 0; width: min(720px,calc(100% - 40px)); max-height: calc(100svh - 56px); border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: #10141e; color: var(--text); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.case-dialog { width: min(860px,calc(100% - 40px)); }
.detail-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(8px); }
.dialog-close { position: sticky; z-index: 4; top: 16px; display: grid; place-items: center; margin: 16px 16px -60px auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #171d29; color: var(--text); font: 30px/1 var(--body); }
.dialog-close:hover { border-color: var(--gold); }
.dialog-body { padding: 44px; }
.dialog-category { font-size: 12px; color: var(--gold); margin-bottom: 12px; padding-right: 40px; }
.detail-dialog h2 { font-size: clamp(29px,4vw,43px); max-width: 17ch; padding-right: 20px; }
.dialog-overview { color: #c3cad7; font-size: 16px; line-height: 1.7; margin-top: 18px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; margin-top: 17px; }
.case-figure { margin-top: 30px; }
.case-figure > .product-capture { width: 100%; height: auto; border-radius: 12px; }
.case-figure .phone-gallery { max-width: 660px; margin: auto; padding: 0; }
.case-figure figcaption { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 12px; }
.case-figure figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.case-story { display: grid; gap: 24px; margin-block: 30px; }
.case-story h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 9px; }
.case-story p, .case-story li { color: #c3cad7; font-size: 14px; line-height: 1.8; }
.case-story ul { padding-left: 20px; display: grid; gap: 7px; }
.case-story li::marker { color: var(--gold); }
.attribution { color: var(--muted); font-size: 12px; line-height: 1.75; padding-top: 20px; border-top: 1px solid var(--line); }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.dialog-actions .text-link { font-size: 14px; }
.related-case { position: relative; display: flex; flex-direction: column; align-items: start; gap: 7px; width: 100%; text-align: left; border: 1px solid var(--line); background: #171c29; border-radius: 12px; padding: 20px 48px 20px 20px; margin-bottom: 25px; }
.related-case > span:first-child { font-size: 11px; color: var(--muted); }
.related-case strong { font: 500 16px/1.5 var(--display); }
.related-case > span:last-child { position: absolute; right: 20px; top: 30px; color: var(--gold); }
.brief-dialog { width: min(650px,calc(100% - 40px)); }
.brief-dialog h2 { max-width: 17ch; }
#briefForm { margin-top: 27px; }
#briefForm > label { display: block; font-size: 13px; margin-bottom: 8px; margin-top: 20px; }
#briefForm input, #briefForm select, #briefForm textarea { display: block; width: 100%; padding: 13px 15px; border: 1px solid #3c4555; border-radius: 9px; background: #0b0f17; color: var(--text); font: 16px/1.5 var(--body); color-scheme: dark; }
#briefForm textarea { resize: vertical; min-height: 126px; }
#briefForm input::placeholder, #briefForm textarea::placeholder { color: #7f8a9c; }
#briefForm .btn { width: 100%; margin-top: 22px; gap: 12px; }
#briefForm .btn:disabled { cursor: wait; opacity: .65; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 15px; }
.form-privacy .text-link { font-size: inherit; }
.form-status { color: #ffbd95; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.form-status:empty { display: none; }
.form-fallback { font-size: 12px; color: var(--muted); text-align: center; margin-top: 18px; overflow-wrap: anywhere; }
.form-fallback a { text-decoration: underline; text-underline-offset: 3px; }
.brief-success { padding-block: 40px 5px; }
.brief-success > span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #7eaa87; border-radius: 50%; font-size: 25px; color: #b4d9ba; margin-bottom: 23px; }
.brief-success p { color: var(--muted); margin-block: 17px 28px; font-size: 14px; line-height: 1.8; }
.brief-success strong { color: var(--text); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
}
@media (max-width:1099px) {
 .offer-bottom { flex-direction: column; align-items: start; gap: 22px; }
 .offer-bottom p { max-width: 38ch; }
 .project-brand > span { font-size: 10px; }
 .project-brand h3 { font-size: 24px; }
 .project-stage { height: 230px; padding-inline: 22px; }
 .expertise-copy { padding: 23px; gap: 9px; }
 .expertise-open { font-size: 0; gap: 0; }
 .expertise-open > span { font-size: 19px; }
}
@media (max-width:899px) {
 .section { padding-block: 64px; }
 .project-brand { padding: 23px 22px 0; }
 .project-brand > span { display: none; }
 .project-card__body { padding: 23px; }
 .project-card__bottom { align-items: start; flex-direction: column; gap: 14px; }
 .offer-card { padding: 25px; }
 .offer-duration > span:first-child { font-size: 94px; }
 .offer-duration > span:nth-child(2) { font-size: 18px; }
 .offer-duration { gap: 13px; }
 .contact__panel { padding: 36px; }
 .expertise.section { padding-bottom: 60px; }
}
@media (max-width:699px) {
 .project-grid, .offer-grid { grid-template-columns: 1fr; gap: 22px; }
 .project-brand > span { display: inline; font-size: 11px; }
 .project-stage { height: 265px; padding: 32px 26px 0; }
 .project-card__bottom { flex-direction: row; align-items: center; }
 .offer-card { min-height: 345px; }
 .offer-duration { min-height: 165px; }
 .offer-bottom { flex-direction: row; align-items: end; }
 .offer-bottom h3 { font-size: 24px; }
 .expertise-copy ul { font-size: 13px; }
 .expertise-copy h3 { font-size: 29px; }
 .expertise-open { font-size: 12px; gap: 8px; }
 .founder { grid-template-columns: 105px 1fr; gap: 22px; align-items: start; }
 .founder > img { width: 105px; height: 135px; border-radius: 12px; }
 .founder h3 { font-size: 24px; }
 .founder div > p:not(.kicker) { font-size: 13px; }
 .founder .kicker { font-size: 11px; }
 .expertise-cta { align-items: start; flex-direction: column; gap: 12px; }
 .case-dialog, .detail-dialog, .brief-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); border-radius: 18px; }
 .dialog-body { padding: 36px 25px 28px; }
 .detail-dialog h2 { font-size: 31px; padding-right: 15px; }
 .dialog-category { font-size: 11px; }
 .dialog-overview { font-size: 14px; }
 .dialog-close { top: 10px; margin: 10px 10px -54px auto; }
 .case-figure .phone-gallery { gap: 8px; }
 .case-figure .phone-gallery img { width: calc((100% - 8px)/2); border-radius: 6px; }
 .case-figure figcaption { font-size: 11px; }
 .dialog-actions { gap: 20px; }
 .dialog-actions .btn { width: 100%; }
 .faq summary { font-size: 14px; line-height: 1.55; }
 .faq details > p { font-size: 13px; }
}
@media (max-width:599px) {
 .section { padding-block: 54px; }
 .section-head { margin-bottom: 27px; }
 .section-head > p { font-size: 13px; }
 .project-brand { gap: 9px; }
 .project-brand h3 { font-size: 24px; }
 .project-brand img { width: 30px; height: 30px; }
 .project-card__body > p { font-size: 14px; }
 .project-card__bottom > span { font-size: 12px; max-width: 17ch; }
 .card-open { font-size: 12px; padding-inline: 12px; gap: 10px; }
 .project-metrics { gap: 15px; }
 .project-metrics dd { font-size: 29px; }
 .project-stage { height: 235px; padding: 25px 21px 0; }
 .bootstrap-art { height: 210px; }
 .bootstrap-art > img { width: 95px; height: 95px; }
 .offer-bottom { flex-direction: column; align-items: start; gap: 20px; }
 .offer-bottom p { max-width: 34ch; }
 .offer-duration > span:first-child { font-size: 100px; }
 .offer-duration > span:nth-child(2) { font-size: 20px; }
 .offer-card { min-height: 370px; }
 .expertise.section { padding-bottom: 50px; }
 .expertise-copy { padding: 24px; }
 .expertise-copy h3 { font-size: 29px; }
 .expertise-open { font-size: 0; gap: 0; }
 .expertise-copy ul { gap: 6px 14px; }
 .scope-note { font-size: 12px; }
 .contact__panel { padding: 29px; gap: 29px; }
 .contact__details { padding-top: 26px; }
 .contact .btn { font-size: 14px; width: 100%; }
 .contact__email { font-size: 20px; }
 .contact.section { padding-bottom: 44px; }
 .footer nav { gap: 19px; flex-wrap: wrap; }
}
@media (max-width:359px) {
 .project-brand > span { display: none; }
 .project-card__body { padding: 21px; }
 .project-card__bottom { gap: 8px; }
 .project-card__bottom > span { font-size: 11px; }
 .project-metrics dd { font-size: 25px; }
 .project-stage { height: 210px; }
 .founder { grid-template-columns: 1fr; gap: 20px; }
 .founder > img { width: 110px; height: 125px; }
 .contact__panel { padding: 23px; }
 .contact__email { font-size: 17px; }
 .offer-card { padding: 23px; }
 .offer-duration > span:first-child { font-size: 92px; }
 .expertise-copy { padding: 21px; }
 .expertise-copy h3 { font-size: 27px; }
 .dialog-body { padding-inline: 22px; }
}

/* Straight product views, four service columns, and the people behind the work. */
.project-stage { height: 330px; display: flex; align-items: center; justify-content: center; padding: 30px 26px; }
.project-stage .product-capture { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; transform: none; }
.project-stage .phone-gallery { width: 100%; height: 100%; padding: 0; gap: 15px; align-items: center; }
.phone-screen { position: relative; flex: none; overflow: hidden; aspect-ratio: 416 / 900; border-radius: 16px; background: #eceaff; box-shadow: 0 10px 30px #0004; }
.project-stage .phone-screen { width: calc((100% - 30px) / 3); height: auto; max-width: 124px; }
.phone-gallery .phone-screen > img { position: absolute; width: 144.2308%; height: auto; max-width: none; left: -22.1154%; top: -30.5556%; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.case-figure .phone-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: none; }
.case-figure .phone-screen { width: 100%; }
.team-grid { scroll-margin-top: 105px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px; margin-top: 58px; padding-top: 44px; border-top: 1px solid var(--line); }
.team-card { display: grid; grid-template-columns: 138px 1fr; gap: 24px; align-items: start; }
.team-photo { width: 138px; height: 176px; object-fit: cover; border-radius: 14px; }
.team-copy { min-width: 0; }
.team-role { color: var(--gold); font-size: 11px; line-height: 1.6; margin: 0 0 9px; }
.team-copy h3 { font-size: 23px; line-height: 1.18; letter-spacing: -.035em; }
.team-copy > p:not(.team-role) { font-size: 12px; line-height: 1.65; color: var(--muted); margin-top: 10px; }
.team-copy .team-credential { color: var(--text); }
.team-credential span { color: var(--muted); }
.team-copy .text-link { font-size: 12px; margin-top: 16px; min-height: 30px; }
.offer-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.offer-card { padding: 26px 22px; min-height: 400px; display: flex; flex-direction: column; }
.offer-top { min-height: 40px; font-size: 12px; align-items: start; }
.offer-duration { display: flex; flex-direction: column; align-items: start; gap: 8px; min-height: 160px; padding-block: 16px 28px; }
.offer-duration > span:first-child { font-size: clamp(66px,6vw,88px); }
.offer-duration > span:nth-child(2) { font-size: 17px; }
.offer-duration i { width: 145px; height: 145px; right: -88px; top: -25px; }
.offer-bottom { flex: 1; flex-direction: column; align-items: start; gap: 24px; padding-top: 23px; }
.offer-bottom h3 { font-size: 22px; line-height: 1.2; min-height: 53px; }
.offer-bottom p { font-size: 13px; max-width: 29ch; }
.offer-bottom .card-open { margin-top: auto; }
@media (max-width:1099px) {
 .offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
 .offer-card { padding: 28px; min-height: 385px; }
 .offer-duration { flex-direction: row; align-items: baseline; gap: 15px; min-height: 145px; }
 .offer-duration > span:first-child { font-size: 90px; }
 .offer-bottom h3 { min-height: 0; font-size: 25px; }
 .team-grid { gap: 28px; }
 .team-card { grid-template-columns: 112px 1fr; gap: 18px; }
 .team-photo { width: 112px; height: 151px; }
 .team-copy h3 { font-size: 21px; }
 .project-stage { height: 280px; padding: 26px 22px; }
}
@media (max-width:799px) {
 .team-grid { grid-template-columns: 1fr; gap: 32px; }
 .team-card { grid-template-columns: 138px 1fr; gap: 24px; }
 .team-photo { width: 138px; height: 176px; }
 .team-copy h3 { font-size: 26px; }
 .team-copy > p:not(.team-role) { font-size: 13px; }
 .project-stage { height: 240px; padding: 25px 18px; }
}
@media (max-width:699px) {
 .offer-grid { grid-template-columns: 1fr; }
 .project-stage { height: 310px; padding: 26px 22px; }
 .offer-card { min-height: 370px; }
 .offer-duration { min-height: 140px; }
 .offer-bottom h3 { font-size: 25px; }
 .phone-screen { border-radius: 12px; }
 .case-figure .phone-gallery { gap: 8px; }
 .case-figure .phone-screen { border-radius: 8px; }
 .team-grid { margin-top: 40px; padding-top: 34px; }
}
@media (max-width:449px) {
 .project-stage { height: 260px; padding: 24px 18px; }
 .project-stage .phone-gallery { gap: 10px; }
 .project-stage .phone-screen { max-width: calc((100% - 20px) / 3); }
 .team-card { grid-template-columns: 104px 1fr; gap: 19px; }
 .team-photo { width: 104px; height: 142px; }
 .team-copy h3 { font-size: 22px; }
 .team-copy > p:not(.team-role) { font-size: 12px; }
 .team-role { font-size: 10px; }
}
@media (max-width:359px) {
 .project-stage { height: 225px; padding: 22px 15px; }
 .team-card { grid-template-columns: 86px 1fr; gap: 16px; }
 .team-photo { width: 86px; height: 118px; }
 .team-copy h3 { font-size: 20px; }
 .offer-duration > span:first-child { font-size: 80px; }
}