:root {
  --ink: #171511;
  --muted: #706b62;
  --paper: #fffaf5;
  --paper-deep: #f7eee9;
  --white: #ffffff;
  --grapefruit: #f65368;
  --grapefruit-deep: #d93150;
  --grapefruit-flesh: #ff8189;
  --grapefruit-blush: #ffd2cd;
  --peel: #ffb946;
  --orange: var(--grapefruit);
  --orange-light: var(--grapefruit-flesh);
  --orange-pale: var(--grapefruit-blush);
  --green: #315b48;
  --blue: #b9e1f5;
  --line: rgba(23, 21, 17, 0.14);
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --max: 1440px;
  color-scheme: light;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid rgba(246,83,104,.42); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 16px; background: var(--ink); color: white; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.scroll-progress { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; background: var(--grapefruit); transform: scaleX(var(--progress, 0)); transform-origin: left; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 40px), 1360px);
  height: 70px;
  padding: 0 10px 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid rgba(23, 21, 17, .09);
  border-radius: 18px;
  background: rgba(255, 250, 242, .82);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: top .3s var(--ease), box-shadow .3s, background .3s;
}

.site-header.scrolled { top: 10px; background: rgba(255,255,255,.9); box-shadow: 0 14px 40px rgba(55, 39, 20, .09); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font: 700 23px/1 "Manrope", sans-serif; letter-spacing: -.07em; }
.brand-mark { width: 31px; height: 31px; }
.brand-mark path { fill: none; stroke: var(--paper); stroke-width: 2.1; }
.brand-dot { color: var(--orange); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; }
.site-nav a { position: relative; padding: 8px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; display: flex; gap: 30px; align-items: center; padding: 14px 17px 14px 20px; border-radius: 12px; background: var(--ink); color: white; font-size: 13px; transition: background .3s; }
.header-cta:hover { background: var(--grapefruit-deep); }
.site-nav .nav-cta { display: none; }
.menu-toggle { display: none; border: 0; background: transparent; }

.section-pad { width: min(100%, var(--max)); margin-inline: auto; padding: 125px 70px; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(246,83,104,.12); }
.eyebrow-light { color: rgba(255,255,255,.67); }
.section-heading { max-width: 760px; margin-bottom: 66px; }
.section-heading h2, .about h2 { margin: 0; font: 500 clamp(46px, 6vw, 84px)/.98 "Manrope", sans-serif; letter-spacing: -.065em; }
.section-heading > p:last-child { max-width: 520px; margin: 25px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 190px; padding: 18px 20px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform .3s var(--ease), background .3s, color .3s; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--orange); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--orange); color: white; }
.text-link { padding: 10px 3px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 600; }

.hero {
  position: relative;
  min-height: 100svh;
  max-width: 1800px;
  margin-inline: auto;
  padding: 160px max(48px, calc((100% - 1300px) / 2)) 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 45px 30px;
  overflow: hidden;
}

.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(47,40,29,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(47,40,29,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -170px; top: 20%; border-radius: 50%; background: rgba(246, 83, 104, .2); filter: blur(80px); }
.hero-copy { position: relative; z-index: 2; max-width: 730px; }
.hero-copy h1 { margin: 0; font: 500 clamp(64px, 7.2vw, 112px)/.9 "Manrope", sans-serif; letter-spacing: -.075em; }
.scribble-wrap { position: relative; white-space: nowrap; }
.scribble-wrap svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 19px; overflow: visible; }
.scribble-wrap path { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; animation: draw 1.2s .7s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-intro { max-width: 620px; margin: 40px 0 30px; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.hero-foot { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.hero-foot-line { width: 80px; height: 1px; background: var(--line); }

.citrus-stage { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; z-index: 1; width: min(100%, 610px); aspect-ratio: 1; justify-self: end; display: grid; place-items: center; perspective: 800px; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .25s ease-out; }
.citrus-stage::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 27%, #ffd56f 0 9%, var(--peel) 34%, #f08b26 77%, #ca6225 100%); box-shadow: inset -30px -25px 60px rgba(111,45,34,.25), inset 20px 18px 30px rgba(255,255,255,.21), 0 40px 70px rgba(181,70,67,.23); }
.citrus-stage::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(246,83,104,.25); border-radius: 50%; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .3; } }
.citrus { position: relative; z-index: 2; width: 77%; filter: drop-shadow(0 18px 22px rgba(105,34,50,.17)); overflow: visible; }
.segments { transform-origin: 50px 50px; animation: segmentDrift 9s ease-in-out infinite; }
@keyframes segmentDrift { 50% { transform: rotate(2.5deg) scale(.985); } }
.citrus-segment { fill: rgba(255,111,124,.8); stroke: rgba(255,250,242,.88); stroke-width: 1.5; transform-origin: 50px 50px; transform: rotate(var(--r)) translateY(calc((var(--scatter, 0) + var(--scroll-scatter, 0)) * -1px)); transition: transform .7s var(--ease), fill .3s; transition-delay: var(--delay); }
.citrus-segment:nth-child(even) { fill: rgba(246,83,104,.78); }
.citrus-stage:hover .citrus-segment { --scatter: 4; fill: rgba(255,135,141,.9); }
.citrus-core { fill: var(--paper); }
.leaf { fill: var(--green); transform-origin: 52px 8px; animation: leaf 4s ease-in-out infinite; }
@keyframes leaf { 50% { transform: rotate(8deg); } }
.orbit { position: absolute; z-index: 3; inset: 2%; border: 1px solid rgba(23,21,17,.22); border-radius: 50%; animation: spin 16s linear infinite; }
.orbit-two { inset: 16%; border-style: dashed; animation-duration: 28s; animation-direction: reverse; }
.orbit span { position: absolute; top: 10%; left: 7%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font: 600 10px/1 "Manrope"; }
.orbit-two span { top: auto; left: auto; right: 4%; bottom: 14%; color: white; background: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
.citrus-note { position: absolute; z-index: 4; margin: 0; font-size: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em; }
.citrus-note-top { top: 8%; right: 6%; }
.citrus-note-bottom { left: 4%; bottom: 11%; }

.statement { display: grid; grid-template-columns: 1fr 4fr; gap: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-mark { color: var(--orange); font-size: 48px; }
.statement-copy { max-width: 1020px; margin: 0; font: 400 clamp(36px, 4.2vw, 68px)/1.1 "Manrope"; letter-spacing: -.055em; }
.statement-copy span { color: var(--orange); }

.services { background: var(--paper-deep); }
.service-list { border-top: 1px solid var(--line); }
.service-card { position: relative; min-height: 440px; padding: 54px 0; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(430px, 1.18fr); gap: 60px; align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.service-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--grapefruit-deep); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.service-kicker::before { content: ""; width: 19px; height: 9px; border: 1px solid currentColor; border-radius: 60% 40% 60% 40%; transform: rotate(-22deg); }
.service-copy h3 { margin: 0 0 18px; font: 500 clamp(43px, 5vw, 70px)/1 "Manrope"; letter-spacing: -.06em; }
.service-copy > p { max-width: 410px; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.service-copy ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.service-copy li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; }
.service-index { margin: -26px 0 44px; display: flex; flex-wrap: wrap; gap: 8px; }
.service-index a { padding: 10px 15px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
.service-index a span { color: var(--grapefruit-deep); font-size: 11px; font-weight: 600; letter-spacing: .08em; transition: color .25s; }
.service-index a:hover, .service-index a:focus-visible { border-color: var(--ink); background: var(--ink); color: white; }
.service-index a:hover span, .service-index a:focus-visible span { color: var(--grapefruit-flesh); }
.service-visual { justify-self: end; width: min(100%, 610px); height: 338px; border-radius: 24px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.service-card:hover .service-visual { transform: translateY(-6px) rotate(-.5deg); }
.browser-visual { padding: 18px; background: var(--orange-pale); transform: rotate(1deg); box-shadow: 0 22px 35px rgba(83,55,18,.09); }
.browser-top { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--white); border-radius: 11px 11px 0 0; }
.browser-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: .4; }
.browser-top span { margin-left: auto; margin-right: auto; padding: 5px 42px; border-radius: 5px; background: #f4f1eb; color: #90887c; font-size: 7px; }
.browser-body { height: 272px; padding: 30px; position: relative; background: var(--grapefruit); border-radius: 0 0 11px 11px; color: white; overflow: hidden; transition: background .55s var(--ease); }
.browser-body::before, .browser-body::after { content: ""; position: absolute; border-radius: 50%; transition: transform .65s var(--ease), border-radius .65s var(--ease); }
.browser-body::before { width: 110px; height: 110px; right: 46px; top: 31px; border: 18px solid rgba(255,255,255,.14); }
.browser-body::after { width: 260px; height: 260px; right: -90px; bottom: -130px; border: 55px solid rgba(255,255,255,.2); }
.browser-body.mode-portfolio { background: #8f3650; }
.browser-body.mode-menu { background: var(--green); }
.browser-body.mode-portfolio::before { border-radius: 18px; transform: rotate(20deg) scale(.78); }
.browser-body.mode-menu::before { transform: translate(-34px, 36px) scale(1.3); }
.mini-label { font-size: 8px; letter-spacing: .15em; }
.browser-body strong { display: block; margin-top: 23px; font: 500 38px/.9 "Manrope"; letter-spacing: -.06em; }
.mini-pill { position: absolute; z-index: 2; right: 26px; bottom: 24px; padding: 9px 13px; border-radius: 20px; background: white; color: var(--ink); font-size: 9px; }
.interface-tabs { position: absolute; z-index: 3; left: 28px; bottom: 24px; display: flex; gap: 5px; }
.interface-tabs button, .data-tabs button, .platform-tabs button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; background: transparent; color: white; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.interface-tabs button:hover, .interface-tabs button.active, .platform-tabs button:hover, .platform-tabs button.active { background: white; color: var(--ink); transform: translateY(-2px); }

.shop-visual { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(135deg, #ffe6b8, #ffc56f); box-shadow: 0 22px 35px rgba(83,55,18,.09); transform: rotate(-1deg); }
.shop-top { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; background: white; }
.shop-top strong { font: 700 15px/1 "Manrope"; letter-spacing: -.05em; }
.shop-top strong i { color: var(--grapefruit); font-style: normal; }
.shop-cart { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.shop-cart b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 11px; }
.shop-cart.bump b { animation: cartBump .45s var(--ease); }
@keyframes cartBump { 40% { transform: scale(1.3); background: var(--grapefruit); } }
.shop-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-item { min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; border-radius: 14px; background: rgba(255,255,255,.88); font-size: 11px; }
.shop-thumb { flex: 1; min-height: 34px; margin-bottom: 4px; border-radius: 10px; }
.thumb-a { background: radial-gradient(circle at 50% 58%, var(--grapefruit) 0 26%, transparent 27%), #ffe1dc; }
.thumb-b { background: radial-gradient(circle at 50% 58%, var(--green) 0 24%, transparent 25%), #dfeae2; }
.thumb-c { background: radial-gradient(circle at 50% 58%, var(--peel) 0 28%, transparent 29%), #fff1d6; }
.shop-item strong { font: 600 14px/1 "Manrope"; }
.shop-item button { margin-top: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 99px; background: white; font-size: 10px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.shop-item button:hover { background: var(--ink); color: white; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-foot > span { color: rgba(23,21,17,.72); font-size: 11px; }
.shop-checkout { padding: 10px 14px; display: flex; align-items: center; gap: 18px; border: 0; border-radius: 99px; background: var(--ink); color: white; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .25s, opacity .25s; }
.shop-checkout:hover:not(:disabled) { background: var(--grapefruit-deep); }
.shop-checkout:disabled { opacity: .4; cursor: default; }

.mobile-visual { position: relative; padding: 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; background: var(--green); color: white; box-shadow: 0 22px 35px rgba(20,48,36,.16); transform: rotate(.8deg); }
.mobile-visual .mini-label { color: rgba(255,255,255,.62); }
.mobile-copy strong { display: block; margin: 14px 0 22px; font: 500 34px/.95 "Manrope"; letter-spacing: -.06em; }
.platform-tabs { display: flex; gap: 5px; }
.phone { position: relative; height: 296px; aspect-ratio: 9 / 18.5; padding: 8px; border-radius: 34px; background: #111; box-shadow: 0 24px 40px rgba(0,0,0,.28); transition: border-radius .4s var(--ease); }
.phone-screen { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 27px; background: var(--paper); color: var(--ink); transition: border-radius .4s var(--ease); }
.phone-bar { padding: 8px 13px 4px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 600; }
.phone-cam { width: 42px; height: 12px; border-radius: 99px; background: #111; transition: width .35s var(--ease), height .35s var(--ease); }
.phone-title { margin: 10px 12px 10px; font: 600 19px/1 "Manrope"; letter-spacing: -.04em; transition: background .35s, color .35s, padding .35s, margin .35s, font-size .35s; }
.phone-task { margin: 0 9px 7px; padding: 9px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 11px; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.05); color: inherit; font-size: 9.5px; text-align: left; cursor: pointer; transition: border-radius .35s; }
.phone-task i { flex: 0 0 auto; width: 12px; height: 12px; border: 1.5px solid rgba(23,21,17,.25); border-radius: 50%; transition: background .25s, border-color .25s; }
.phone-task.done i { border-color: var(--green); background: var(--green); }
.phone-task.done span { color: var(--muted); text-decoration: line-through; }
.phone-nav { margin-top: auto; padding: 10px 0 13px; display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: white; }
.phone-nav i { width: 15px; height: 15px; border-radius: 5px; background: rgba(23,21,17,.14); transition: border-radius .35s; }
.phone-nav i:first-child { background: var(--grapefruit); }
.phone-fab { position: absolute; right: 18px; bottom: 54px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: var(--grapefruit); color: white; font-size: 17px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s var(--ease); }
.mobile-visual.is-android .phone { border-radius: 24px; }
.mobile-visual.is-android .phone-screen { border-radius: 17px; }
.mobile-visual.is-android .phone-cam { width: 9px; height: 9px; }
.mobile-visual.is-android .phone-title { margin: 0 0 10px; padding: 10px 12px; background: var(--grapefruit); color: white; font-size: 14px; }
.mobile-visual.is-android .phone-task { border-radius: 5px; }
.mobile-visual.is-android .phone-nav i { border-radius: 50%; }
.mobile-visual.is-android .phone-fab { opacity: 1; transform: scale(1); }
.system-visual { position: relative; background: #1e1d19; color: white; }
.system-visual svg { width: 100%; height: 100%; }
.system-visual path { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.system-route { stroke-dasharray: 8 8; }
.system-visual.is-running .route-a { animation: route 1s linear infinite; stroke: var(--grapefruit-flesh); }
.system-visual.is-running .route-b { animation: route 1s .18s linear infinite reverse; stroke: var(--peel); }
@keyframes route { to { stroke-dashoffset: -48; } }
.system-visual circle { fill: var(--orange); stroke: #1e1d19; stroke-width: 7; }
.system-pulse circle { fill: var(--orange-light); stroke: none; animation: pulse 2.4s infinite; }
.system-pulse circle:last-child { animation-delay: 1.2s; }
@keyframes pulse { 50% { r: 12; opacity: .3; } }
.system-label { position: absolute; top: 55px; color: rgba(255,255,255,.55); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.label-a { left: 7%; } .label-b { left: 46%; } .label-c { right: 6%; }
.api-run { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 32px; padding: 11px 13px; border: 0; border-radius: 99px; background: white; color: var(--ink); font-size: 10px; font-weight: 600; cursor: pointer; transition: transform .25s, background .25s; }
.api-run:hover { transform: translateY(-2px); background: var(--grapefruit-blush); }
.api-run b { font-size: 15px; font-weight: 400; }
.api-readout { position: absolute; right: 23px; bottom: 26px; display: flex; align-items: baseline; gap: 12px; }
.api-readout span { color: rgba(255,255,255,.5); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.api-readout strong { color: var(--grapefruit-flesh); font: 500 17px/1 "Manrope"; }
.data-visual { position: relative; padding: 25px 30px 20px; background: var(--white); border: 1px solid rgba(23,21,17,.08); box-shadow: 0 25px 40px rgba(72,52,25,.08); }
.data-head { display: flex; align-items: end; justify-content: space-between; }
.data-head span { color: var(--muted); font-size: 11px; }
.data-head strong { color: var(--green); font: 500 33px/1 "Manrope"; }
.data-tabs { margin-top: 18px; display: flex; gap: 6px; }
.data-tabs button { border-color: var(--line); color: var(--muted); }
.data-tabs button:hover, .data-tabs button.active { background: var(--ink); color: white; transform: translateY(-2px); }
.chart-bars { height: 174px; padding-top: 22px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); }
.chart-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: var(--orange-pale); transform-origin: bottom; transition: height .75s var(--ease), transform 1s var(--ease), background .3s; }
.chart-bars i:nth-child(6), .chart-bars i:nth-child(8) { background: var(--orange); }
.js .reveal:not(.visible) .chart-bars i { transform: scaleY(0); }
.data-foot { padding-top: 11px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; }

.work { background: var(--paper); }
.section-heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.section-heading-row > p { max-width: 400px; margin-bottom: 8px; }
.project-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px 24px; }
.project-media { --mouse-x: 50%; --mouse-y: 50%; position: relative; height: 580px; border-radius: 28px; overflow: hidden; }
.project-media::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.21), transparent 70%); opacity: 0; transition: opacity .35s; }
.project:hover .project-media::before { opacity: 1; }
.project-media > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
.project:hover .project-media > img { transform: scale(1.035); }
.project-anahit .project-media { padding: 34px; background: var(--blue); }
.project-anahit .project-media > img { border: 8px solid white; border-radius: 13px; box-shadow: 0 30px 60px rgba(0,68,111,.2); object-fit: cover; }
.project-piatto .project-media { display: flex; align-items: flex-end; justify-content: space-around; gap: 28px; padding: 38px 44px 0; background: #153f37; }
.project-estate { --estate-bg: linear-gradient(135deg, #dce8e8, #afc4c5); --estate-line: rgba(28,76,83,.2); --estate-shadow: rgba(24,63,69,.23); --estate-pill: #174c54; --estate-tilt: -.7deg; }
.project-lavarajark { --estate-bg: linear-gradient(135deg, #f8e7d6, #ebc3a0); --estate-line: rgba(122,60,18,.2); --estate-shadow: rgba(104,52,16,.22); --estate-pill: #8a3f12; --estate-tilt: .7deg; }
.project-estate .project-media { padding: 44px 46px; display: grid; place-items: center; background: var(--estate-bg); }
.project-estate .project-media::after { content: ""; position: absolute; inset: 20px; border: 1px solid var(--estate-line); border-radius: 18px; pointer-events: none; }
.project-estate .project-media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 8px solid white; border-radius: 18px; box-shadow: 0 32px 60px var(--estate-shadow); transform: rotate(var(--estate-tilt)); }
.project-estate:hover .project-media > img { transform: rotate(0deg) scale(1.018); }
.project-caption { position: absolute; z-index: 2; left: 38px; bottom: 30px; padding: 10px 14px; border-radius: 999px; background: var(--estate-pill); color: white; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.phone-shell { z-index: 1; width: 260px; height: 520px; flex: 0 0 auto; padding: 9px; border-radius: 34px 34px 0 0; background: #0d0d0d; box-shadow: 0 25px 60px rgba(0,0,0,.35); transition: transform .8s var(--ease); }
.project:hover .phone-shell { transform: translateY(-8px) rotate(1deg); }
.phone-shell img { width: 100%; height: 100%; border-radius: 26px 26px 0 0; object-fit: cover; object-position: top; }
.piatto-copy { align-self: center; color: white; }
.piatto-copy span { color: #d9b27c; font-size: 9px; letter-spacing: .16em; }
.piatto-copy strong { display: block; margin: 18px 0 40px; font: 500 clamp(32px,3.2vw,51px)/.95 "Manrope"; letter-spacing: -.06em; }
.piatto-copy i { display: inline-block; padding: 7px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; font-style: normal; font-size: 9px; }
.project-open { position: absolute; z-index: 4; top: 20px; right: 20px; width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-size: 11px; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s var(--ease); }
.project:hover .project-open { opacity: 1; transform: scale(1); }
.project-open b { display: none; }
.project-meta { padding: 22px 4px 8px; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.project-meta p { margin: 0 0 7px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.project-meta h3 { margin: 0; font: 500 clamp(26px,2.6vw,38px)/1 "Manrope"; letter-spacing: -.045em; }
.project-domain { padding-bottom: 3px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; transition: color .3s, border-color .3s; }
.project:hover .project-domain, .project:focus-visible .project-domain { color: var(--ink); border-color: var(--grapefruit); }
.work-more { margin-top: 56px; display: flex; justify-content: center; }

.products { background: linear-gradient(135deg, #ffca68, #f3a657); }
.product-stack { border-top: 1px solid rgba(23,21,17,.25); }
.product-card { position: relative; min-height: 175px; padding: 33px 85px 33px 0; display: grid; grid-template-columns: 55px 1fr 1fr auto; align-items: center; gap: 20px; border-bottom: 1px solid rgba(23,21,17,.25); transition: padding .45s var(--ease), background .35s; }
.product-card:hover { padding-left: 25px; background: rgba(255,255,255,.16); }
.product-seed { width: 18px; height: 27px; border-radius: 75% 25% 68% 32%; border: 1.5px solid rgba(23,21,17,.6); transform: rotate(-28deg); transition: transform .5s var(--ease), background .3s; }
.product-card:hover .product-seed { background: var(--grapefruit); transform: rotate(155deg) scale(.82); }
.product-card h3 { margin: 0; font: 500 clamp(44px,5vw,73px)/1 "Manrope"; letter-spacing: -.065em; }
.product-card > p { margin: 0; max-width: 260px; font-size: 15px; line-height: 1.5; }
.product-status { display: flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.product-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(49,91,72,.13); }
.product-card > a { position: absolute; right: 8px; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(23,21,17,.3); border-radius: 50%; transform: translateY(-50%) rotate(0deg); transition: transform .35s, background .3s, color .3s; }
.product-card:hover > a { background: var(--ink); color: white; transform: translateY(-50%) rotate(45deg); }
.product-note { margin: 22px 0 0 auto; max-width: 440px; color: rgba(23,21,17,.63); font-size: 12px; line-height: 1.5; }

.careers { position: relative; max-width: none; min-height: 720px; padding-inline: max(70px, calc((100% - 1300px) / 2)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; overflow: hidden; background: var(--green); color: white; }
.careers::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.17) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at 80% 50%, black, transparent 62%); }
.careers-copy { position: relative; z-index: 2; max-width: 620px; }
.careers-copy h1, .careers-copy h2 { margin: 0; font: 500 clamp(54px,6.4vw,96px)/.92 "Manrope"; letter-spacing: -.07em; }
.careers-copy > p:not(.eyebrow) { max-width: 540px; margin: 32px 0 0; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.55; }
.careers-copy > .button { margin-top: 34px; }
.careers-hero { min-height: 100svh; padding-top: 170px; }
.careers-teaser { min-height: 0; }
.status-link { padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.45); font-size: 15px; font-weight: 600; transition: color .25s, border-color .25s; }
.status-link:hover { color: var(--peel); border-color: var(--peel); }
.status-card > .status-link { margin-top: -6px; display: inline-block; }
.careers-status { position: relative; z-index: 2; }
.careers-label { margin: 0 0 14px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.status-card { padding: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: #3a6451; box-shadow: 0 30px 60px rgba(14,36,26,.18); }
.status-line { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 clamp(24px,2.3vw,32px)/1.1 "Manrope"; letter-spacing: -.04em; }
.status-line i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--peel); box-shadow: 0 0 0 6px rgba(255,185,70,.16); }
.status-card > p:not(.status-line) { margin: 16px 0 30px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.6; }

.careers-areas { background: var(--paper); }
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.area-card { min-height: 280px; padding: 32px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; background: white; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.area-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(72,52,25,.09); }
.area-num { color: var(--grapefruit-deep); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.area-card h3 { margin: 84px 0 14px; font: 500 clamp(30px,2.8vw,40px)/1 "Manrope"; letter-spacing: -.05em; }
.area-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.apply { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px 100px; align-items: start; background: var(--paper-deep); }
.apply-intro h2 { margin: 0 0 36px; font: 500 clamp(46px,6vw,84px)/.98 "Manrope"; letter-spacing: -.065em; }
.apply-list { margin: 0; padding: 0; list-style: none; counter-reset: apply; border-top: 1px solid var(--line); }
.apply-list li { position: relative; padding: 28px 0 28px 64px; border-bottom: 1px solid var(--line); counter-increment: apply; }
.apply-list li::before { content: "0" counter(apply); position: absolute; left: 0; top: 31px; color: var(--grapefruit-deep); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.apply-list strong { font: 500 clamp(24px,2.2vw,30px)/1.1 "Manrope"; letter-spacing: -.04em; }
.apply-list p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.careers-orbit { position: absolute; width: 660px; height: 660px; right: -190px; top: -180px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; animation: spin 35s linear infinite; }
.careers-orbit i { position: absolute; width: 13px; height: 18px; border-radius: 70% 30% 65% 35%; background: var(--orange); }
.careers-orbit i:nth-child(1){left:10%;top:30%}.careers-orbit i:nth-child(2){left:45%;top:5%}.careers-orbit i:nth-child(3){right:8%;top:36%}.careers-orbit i:nth-child(4){right:16%;bottom:20%}.careers-orbit i:nth-child(5){left:40%;bottom:3%}.careers-orbit i:nth-child(6){left:5%;bottom:24%}

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px 100px; background: var(--paper); }
.about-body { max-width: 650px; }
.about-lead { margin: 0 0 26px; font: 500 clamp(28px,3vw,43px)/1.15 "Manrope"; letter-spacing: -.045em; }
.about-lead em { color: var(--orange); font-style: normal; }
.about-body > p:not(.about-lead) { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.location-line { margin-top: 50px; display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.location-line i { width: 48px; height: 1px; background: var(--orange); }

.contact { position: relative; max-width: none; min-height: 810px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--ink); color: white; text-align: center; }
.contact h2 { position: relative; z-index: 2; margin: 0; font: 500 clamp(57px,7.5vw,115px)/.92 "Manrope"; letter-spacing: -.075em; }
.contact h2 em { color: var(--orange); font-style: normal; }
.contact-orb { position: relative; z-index: 3; width: 155px; height: 155px; margin-top: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 50%; background: var(--orange); color: white; font-size: 13px; transition: transform .3s var(--ease), background .3s; }
.contact-orb:hover { background: white; color: var(--ink); }
.contact-orb b { font-size: 21px; font-weight: 400; }
.contact-alt { position: relative; z-index: 3; margin: 34px 0 0; color: rgba(255,255,255,.6); font-size: 15px; }
.contact-alt a { color: white; border-bottom: 1px solid rgba(255,255,255,.35); transition: color .25s, border-color .25s; }
.contact-alt a:hover { color: var(--grapefruit-flesh); border-color: var(--grapefruit-flesh); }
.contact-ring { position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.ring-one { width: 670px; height: 670px; left: -220px; bottom: -310px; }
.ring-two { width: 850px; height: 850px; right: -380px; top: -480px; }
.ring-one { animation: ringDrift 12s ease-in-out infinite; }
.ring-two { animation: ringDrift 15s 1.5s ease-in-out infinite reverse; }
@keyframes ringDrift { 50% { transform: translate(28px, -18px) scale(1.04); } }

.site-footer { padding: 84px max(40px, calc((100% - 1300px) / 2)) 30px; overflow: hidden; background: #12110e; color: white; border-top: 1px solid rgba(255,255,255,.1); }
.footer-main { display: grid; grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(140px, 1fr)); gap: 48px; }
.brand-footer .brand-mark path { stroke: #12110e; }
.footer-brand > p { max-width: 330px; margin: 24px 0 30px; color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.6; }
.footer-cta { display: inline-flex; align-items: center; gap: 34px; padding: 14px 18px 14px 20px; border-radius: 999px; background: var(--grapefruit); color: white; font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.footer-cta:hover { background: white; color: var(--ink); }
.footer-heading { margin: 6px 0 22px; color: rgba(255,255,255,.42); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.footer-col ul { margin: 0; padding: 0; display: grid; gap: 14px; list-style: none; font-size: 15px; }
.footer-col a { color: rgba(255,255,255,.86); transition: color .25s; }
.footer-col a:hover { color: var(--grapefruit-flesh); }
.footer-col small { display: block; margin-top: 4px; color: rgba(255,255,255,.4); font-size: 12px; }
.footer-col address { color: rgba(255,255,255,.86); font-style: normal; }
.footer-wordmark { margin: 64px 0 0; padding-bottom: .06em; color: rgba(255,255,255,.07); font: 600 clamp(84px, 18vw, 250px)/1 "Manrope", sans-serif; letter-spacing: -.08em; user-select: none; }
.footer-wordmark span { color: var(--grapefruit); }
.footer-bottom { margin-top: 28px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 12px; }
.footer-bottom a { color: rgba(255,255,255,.7); transition: color .25s; }
.footer-bottom a:hover { color: var(--grapefruit-flesh); }

.page-hero { position: relative; max-width: 1800px; margin-inline: auto; padding: 180px max(48px, calc((100% - 1300px) / 2)) 70px; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -40px; border-radius: 50%; background: rgba(246,83,104,.16); filter: blur(80px); }
.page-hero > :not(.hero-grid) { position: relative; z-index: 1; }
.page-hero h1 { margin: 0; font: 500 clamp(58px, 7.4vw, 112px)/.92 "Manrope", sans-serif; letter-spacing: -.075em; }
.page-hero-intro { max-width: 640px; margin: 34px 0 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.work-index { margin: 76px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.work-index a { padding: 22px 4px; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 24px; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); transition: padding .45s var(--ease), background .3s; }
.work-index a:hover, .work-index a:focus-visible { padding-inline: 18px; background: rgba(255,255,255,.7); }
.work-index span { color: var(--grapefruit-deep); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.work-index strong { font: 500 clamp(22px, 2.3vw, 32px)/1.05 "Manrope"; letter-spacing: -.045em; }
.work-index em { color: var(--muted); font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }
.work-index b { justify-self: end; font-weight: 400; color: var(--muted); }

.cases { width: min(100%, var(--max)); margin-inline: auto; padding: 20px 70px 60px; }
.case { padding: 90px 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 70px; align-items: start; border-top: 1px solid var(--line); }
.case:nth-child(even) .case-media { order: 2; }
.case-media { position: sticky; top: 110px; }
.case-kicker { margin: 0 0 16px; color: var(--grapefruit-deep); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.case-body h2 { margin: 0 0 22px; font: 500 clamp(40px, 4.4vw, 64px)/1 "Manrope"; letter-spacing: -.06em; }
.case-lead { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.case-facts { margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 18px 40px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-facts dt { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.case-facts dd { margin: 0; font-size: 15px; line-height: 1.4; }
.case-facts a { border-bottom: 1px solid var(--grapefruit); transition: color .25s; }
.case-facts a:hover { color: var(--grapefruit-deep); }
.case-body h3 { margin: 36px 0 16px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.case-list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.case-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.case-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 11px; border-radius: 70% 30% 70% 30%; background: var(--grapefruit); transform: rotate(-28deg); }
.tech-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tech-list li { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 13px; }
.contact-compact { min-height: 680px; }

.contact-page { position: relative; max-width: 1800px; min-height: 100svh; margin-inline: auto; padding: 170px max(48px, calc((100% - 1300px) / 2)) 110px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; overflow: hidden; }
.contact-page::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -40px; border-radius: 50%; background: rgba(246,83,104,.16); filter: blur(80px); }
.contact-page > :not(.hero-grid) { position: relative; z-index: 1; }
.contact-intro h1 { margin: 0; font: 500 clamp(52px, 6.2vw, 96px)/.92 "Manrope", sans-serif; letter-spacing: -.075em; }
.contact-details { margin: 48px 0 0; border-top: 1px solid var(--line); }
.contact-details div { padding: 16px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.contact-details dt { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.contact-details dd { margin: 0; font-size: 15px; }
.contact-details a { border-bottom: 1px solid var(--grapefruit); }

.form-card { padding: 40px; border: 1px solid rgba(23,21,17,.08); border-radius: 28px; background: white; box-shadow: 0 30px 70px rgba(72,52,25,.1); }
.field { margin-bottom: 22px; }
.field label { margin-bottom: 8px; display: block; font-size: 13px; font-weight: 600; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field textarea { width: 100%; padding: 15px 16px; border: 1px solid rgba(23,21,17,.18); border-radius: 14px; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.4; transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #a39d93; }
.field input:focus, .field textarea:focus { border-color: var(--grapefruit); outline: none; background: white; box-shadow: 0 0 0 4px rgba(246,83,104,.16); }
.field [aria-invalid="true"] { border-color: var(--grapefruit-deep); background: #fff6f5; }
.field-error { margin: 7px 0 0; color: var(--grapefruit-deep); font-size: 13px; line-height: 1.4; }
.field-error:empty { display: none; }
.field-hint { margin: 8px 0 0; }
.field-hint button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--green); font-size: 13px; font-weight: 600; cursor: pointer; }
.field-meta { display: flex; justify-content: space-between; gap: 16px; }
.field-meta > span { margin-top: 7px; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.form-note { max-width: 240px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.form-submit { min-width: 210px; cursor: pointer; }
.form-submit:disabled { opacity: .6; cursor: progress; }
.form-status { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: #fff1ef; color: var(--grapefruit-deep); font-size: 14px; line-height: 1.5; }
.form-status:empty { display: none; }
.form-success { padding: 18px 4px 6px; }
.form-success:focus { outline: none; }
.success-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 24px; }
.form-success h2 { margin: 26px 0 14px; font: 500 clamp(34px, 3.4vw, 48px)/1 "Manrope"; letter-spacing: -.055em; }
.form-success p { max-width: 440px; margin: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.form-success strong { color: var(--ink); font-weight: 600; }
.form-success .text-link { border-top: 0; border-inline: 0; background: none; cursor: pointer; }

.result-page { max-width: 640px; margin: 0 auto; padding: 140px 22px; }
.result-page > .brand { margin-bottom: 64px; }
.result-page h1 { margin: 0 0 20px; font: 500 clamp(44px, 6vw, 72px)/1 "Manrope", sans-serif; letter-spacing: -.06em; }
.result-page p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.result-page .button { margin-top: 20px; }

.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { position: fixed; top: 82px; left: 0; right: 0; padding: 28px; display: grid; gap: 4px; border-radius: 18px; background: var(--ink); color: white; opacity: 0; pointer-events: none; transform: translateY(-15px); transition: opacity .25s, transform .35s var(--ease); }
  .site-nav a { padding: 14px 5px; border-bottom: 1px solid rgba(255,255,255,.12); font: 500 28px/1 "Manrope"; }
  .site-header.nav-open .site-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav .nav-cta { margin-top: 18px; padding: 18px 22px; display: flex; justify-content: space-between; border: 0; border-radius: 999px; background: var(--grapefruit); font: 600 15px/1 "DM Sans", sans-serif; }
  .site-nav .nav-cta::after { display: none; }
  .header-cta { display: none; }
  .menu-toggle { justify-self: end; width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; cursor: pointer; }
  .menu-toggle::before, .menu-toggle::after { content: ""; width: 23px; height: 1px; display: block; background: var(--ink); transition: transform .3s; }
  .menu-toggle::after { margin-top: 7px; }
  .menu-toggle span:not(.sr-only) { display: none; }
  .site-header.nav-open .menu-toggle::before { transform: translateY(4px) rotate(45deg); }
  .site-header.nav-open .menu-toggle::after { transform: translateY(-4px) rotate(-45deg); }
  .hero { padding-inline: 40px; grid-template-columns: 1.1fr .9fr; }
  .citrus-stage { width: 115%; transform: translateX(8%) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
  .service-card { grid-template-columns: 1fr; gap: 30px; }
  .service-visual { grid-column: auto; justify-self: start; width: min(100%, 760px); margin-top: 6px; }
  .project-media { height: 470px; }
  .project-piatto .project-media { padding: 30px 25px 0; }
  .project-estate .project-media { padding: 34px 30px; }
  .project-caption { left: 30px; bottom: 26px; }
  .project-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .phone-shell { width: 210px; height: 420px; }
  .product-card { grid-template-columns: 55px .9fr 1.1fr; }
  .product-status { display: none; }
  .careers { gap: 50px; }
  .about { gap: 60px 45px; }
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
  .footer-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
  .footer-brand > p { flex: 1 1 280px; margin: 0; }
  .page-hero { padding-inline: 40px; }
  .cases { padding-inline: 40px; }
  .case { padding: 70px 0; grid-template-columns: 1fr; gap: 40px; }
  .case:nth-child(even) .case-media { order: 0; }
  .case-media { position: static; }
  .apply { gap: 50px; }
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-page { padding-inline: 40px; gap: 48px; }
}

@media (max-width: 760px) {
  .site-header { top: 10px; left: 10px; right: 10px; width: auto; height: 62px; padding-left: 14px; border-radius: 14px; transform: none; }
  .brand { font-size: 21px; }
  .brand-mark { width: 28px; }
  .site-nav { top: 70px; }
  .section-pad { padding: 90px 22px; }
  .section-heading { margin-bottom: 45px; }
  .section-heading h2, .about h2 { font-size: clamp(44px, 13vw, 66px); }
  .hero { min-height: auto; padding: 130px 22px 38px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 35px; }
  .hero-copy { min-width: 0; width: 100%; }
  .hero-copy h1 { font-size: clamp(52px, 14.6vw, 65px); }
  .scribble-wrap { white-space: nowrap; }
  .hero-intro { margin-top: 32px; font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .citrus-stage { grid-row: 2; width: min(108%, 500px); justify-self: center; transform: none; }
  .hero-foot { grid-row: 3; flex-wrap: wrap; }
  .citrus-note-top { right: 0; }
  .statement { grid-template-columns: 1fr; gap: 20px; }
  .statement-copy { font-size: clamp(34px, 10vw, 48px); }
  .service-card { min-height: 0; padding: 42px 0; grid-template-columns: 1fr; gap: 28px; }
  .service-copy h3 { font-size: 47px; }
  .service-visual { grid-column: auto; width: 100%; height: 285px; }
  .browser-visual { padding: 13px; }
  .browser-body { height: 229px; padding: 24px; }
  .browser-body strong { font-size: 32px; }
  .interface-tabs { left: 20px; bottom: 18px; }
  .mini-pill { right: 18px; bottom: 18px; }
  .system-label { top: 42px; }
  .api-readout span { display: none; }
  .chart-bars { height: 130px; }
  .services .section-heading h2 br { display: none; }
  .service-index { margin: -14px 0 30px; gap: 6px; }
  .service-index a { padding: 9px 12px; font-size: 12px; }
  .shop-visual { padding: 14px; gap: 10px; }
  .shop-item { padding: 8px; }
  .shop-item strong { font-size: 12px; }
  .mobile-visual { padding: 0 20px; gap: 14px; }
  .mobile-copy strong { font-size: 26px; }
  .phone { height: 252px; }
  .phone-bar { padding: 7px 10px 3px; font-size: 7px; }
  .phone-cam { width: 30px; height: 10px; }
  .data-visual { padding: 22px 20px 16px; }
  .data-head strong { font-size: 26px; }
  .section-heading-row { align-items: start; flex-direction: column; }
  .project-grid { grid-template-columns: 1fr; gap: 55px; }
  .project-media { height: 440px; border-radius: 20px; }
  .project-anahit .project-media { padding: 15px; }
  .project-anahit .project-media > img { border-width: 4px; }
  .project-piatto .project-media { padding: 24px 20px 0; }
  .project-estate .project-media { height: 390px; padding: 18px; }
  .project-estate .project-media::after { inset: 9px; border-radius: 14px; }
  .project-estate .project-media > img { border-width: 4px; border-radius: 13px; }
  .project-caption { left: 28px; bottom: 27px; }
  .phone-shell { width: 190px; height: 385px; }
  .piatto-copy strong { font-size: 32px; }
  .project-open { width: 48px; height: 48px; opacity: 1; transform: scale(1); }
  .project-open { font-size: 0; }.project-open b { display: block; font-size: 17px; }
  .product-card { min-height: 195px; padding: 25px 62px 25px 0; grid-template-columns: 38px 1fr; gap: 10px; }
  .product-card h3 { font-size: 51px; }
  .product-card > p { grid-column: 2; }
  .product-card:hover { padding-left: 10px; }
  .product-card > a { right: 0; width: 48px; height: 48px; }
  .careers { min-height: auto; grid-template-columns: 1fr; gap: 56px; padding-inline: 22px; }
  .careers-copy h2 { font-size: clamp(52px, 15vw, 80px); }
  .careers-copy > p:not(.eyebrow) { font-size: 16px; }
  .careers-roles a { padding-block: 22px; gap: 16px; }
  .careers-roles a:hover, .careers-roles a:focus-visible { padding-inline: 4px; }
  .role-apply { padding: 9px 12px; }
  .about { grid-template-columns: 1fr; gap: 52px; }
  .contact { min-height: 640px; padding-inline: 18px; }
  .contact h2 { font-size: clamp(50px, 14vw, 76px); }
  .contact-alt { max-width: 300px; line-height: 1.6; }
  .site-footer { padding: 68px 22px 26px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 44px 24px; }
  .footer-brand { display: block; }
  .footer-brand > p { margin: 22px 0 26px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-wordmark { margin-top: 56px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .page-hero { padding: 130px 22px 40px; }
  .page-hero h1 { font-size: clamp(52px, 14.6vw, 65px); }
  .work-index { margin-top: 52px; }
  .work-index a { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 6px 12px; }
  .work-index em { grid-column: 2; grid-row: 2; }
  .work-index b { grid-column: 3; grid-row: 1 / span 2; }
  .cases { padding: 0 22px 30px; }
  .case { padding: 56px 0; gap: 30px; }
  .case-lead { font-size: 16px; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .case-facts div:last-child { grid-column: 1 / -1; }
  .contact-compact { min-height: 600px; }
  .contact-page { min-height: 0; padding: 130px 22px 70px; grid-template-columns: 1fr; gap: 44px; }
  .contact-intro h1 { font-size: clamp(50px, 14vw, 64px); }
  .contact-details { margin-top: 34px; }
  .form-card { padding: 24px 20px; border-radius: 22px; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .form-note { max-width: none; text-align: center; }
  .form-submit { width: 100%; }
  .careers-hero { min-height: auto; padding-top: 130px; }
  .status-card { padding: 26px; border-radius: 20px; }
  .area-grid { grid-template-columns: 1fr; }
  .area-card { min-height: 0; padding: 26px; }
  .area-card h3 { margin-top: 40px; }
  .apply { grid-template-columns: 1fr; gap: 40px; }
  .apply-intro h2 { font-size: clamp(44px, 13vw, 66px); margin-bottom: 28px; }
  .apply-list li { padding-left: 46px; }
}

@media (max-width: 420px) {
  .piatto-copy { display: none; }
  .project-piatto .project-media { justify-content: center; }
  .phone-shell { width: 215px; }
}

@media (hover: none) {
  .citrus-note-bottom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}