/* Kidus Bizuayehu — Portfolio landing page
   Self-contained, responsive, and optimized for the Arena preview. */

:root {
  --bg: #070912;
  --bg-soft: #0c0f1b;
  --panel: #101421;
  --panel-2: #151927;
  --line: rgba(255, 255, 255, .095);
  --line-light: rgba(255, 255, 255, .16);
  --text: #f7f7fb;
  --text-soft: #b4b7c5;
  --text-dim: #7d8192;
  --ink: #11121a;
  --paper: #f4f2ee;
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --cyan: #52d5ff;
  --pink: #f07cbb;
  --lime: #c6f36b;
  --gold: #f1c36b;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --shell: min(1180px, calc(100% - 48px));
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open, body.modal-open { overflow: hidden; }
::selection { background: rgba(139, 92, 246, .42); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: 132px 0; }
.muted { color: #686d7c; }
.text-gradient {
  color: transparent;
  background: linear-gradient(102deg, #ffffff 0%, #c7b9ff 35%, #74dfff 96%);
  -webkit-background-clip: text;
  background-clip: text;
}
.text-gradient-soft {
  color: transparent;
  background: linear-gradient(95deg, #a7a1b6, #756a98 55%, #4e8ea0);
  -webkit-background-clip: text;
  background-clip: text;
}
.skip-link {
  position: fixed; left: 18px; top: 14px; z-index: 9999; transform: translateY(-140%);
  padding: 10px 15px; color: var(--ink); background: #fff; border-radius: 8px;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(82, 213, 255, .8); outline-offset: 4px; }

.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 999; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.site-noise {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; width: 450px; height: 450px; border-radius: 50%; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); opacity: .07;
  background: radial-gradient(circle, var(--violet), transparent 68%); filter: blur(6px);
}

/* Navigation */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: 78px;
  border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.scrolled {
  height: 70px; background: rgba(7, 9, 18, .78); border-color: var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center; position: relative; overflow: hidden;
  font-weight: 800; font-size: 13px; letter-spacing: -1px; color: #fff;
  background: linear-gradient(145deg, #252a3a, #121420); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 8px 24px rgba(0,0,0,.25);
}
.brand-mark::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; right: -12px; bottom: -12px; background: var(--violet); filter: blur(7px); }
.brand-mark span { color: var(--cyan); margin-left: 1px; }
.brand-name { font-size: 14px; letter-spacing: -.01em; color: #f6f6fa; }
.brand-name strong { font-weight: 750; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 32px; }
.nav-links a { position: relative; padding: 8px 0; color: #a9acb8; font-size: 13px; font-weight: 580; transition: color .25s ease; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: width .25s ease; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.nav-availability { display: flex; align-items: center; gap: 8px; color: #a6aab8; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.nav-availability i, .footer-available i { width: 7px; height: 7px; border-radius: 50%; background: #75e69e; box-shadow: 0 0 0 5px rgba(117, 230, 158, .09), 0 0 12px rgba(117, 230, 158, .65); animation: statusPulse 2.5s ease infinite; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-light); border-radius: 12px; background: rgba(255,255,255,.04); align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.menu-toggle span { width: 17px; height: 1.5px; background: #fff; transition: transform .3s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

/* Shared buttons & headings */
.button {
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.button::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition: transform .7s var(--ease); }
.button:hover::before { transform: translateX(120%) skewX(-20deg); }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.button-small { min-height: 40px; padding: 0 15px; font-size: 12px; border-radius: 10px; }
.button-large { min-height: 56px; padding: 0 24px; border-radius: 14px; }
.button-primary { color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d49e9 65%, #5459e8); box-shadow: 0 12px 34px rgba(112, 74, 232, .3), inset 0 1px rgba(255,255,255,.2); }
.button-primary:hover { box-shadow: 0 16px 42px rgba(112, 74, 232, .44), inset 0 1px rgba(255,255,255,.25); }
.button-ghost { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.13); color: #e9e9ef; }
.button-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); }
.button-dark { color: #fff; background: #0c0e16; box-shadow: 0 16px 35px rgba(32,16,71,.2); }
.button-dark:hover { background: #171924; }
.button-full { width: 100%; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #858998; font-size: 10px; font-weight: 750; letter-spacing: .2em; }
.eyebrow > span:not(.eyebrow-dot) { color: var(--violet-2); font-variant-numeric: tabular-nums; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 12px var(--violet); }
.section-header { margin-bottom: 62px; }
.split-heading, .pricing-heading, .work-heading { display: grid; grid-template-columns: 1.1fr .65fr; gap: 100px; align-items: end; }
.section-header h2, .faq h2, .testimonial-heading h2, .about-copy h2 {
  margin: 20px 0 0; font-size: clamp(44px, 5.1vw, 72px); line-height: .98; letter-spacing: -.062em; font-weight: 580;
}
.section-intro { color: var(--text-soft); font-size: 17px; line-height: 1.75; margin: 0 0 5px; max-width: 510px; }

/* Hero */
.hero { min-height: 900px; padding: 178px 0 0; overflow: hidden; background: radial-gradient(circle at 76% 42%, rgba(48,59,121,.13), transparent 36%); }
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.hero-aurora { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .22; }
.hero-aurora-one { width: 500px; height: 300px; background: #4b31ad; right: -80px; top: 140px; transform: rotate(-18deg); animation: drift 10s ease-in-out infinite alternate; }
.hero-aurora-two { width: 300px; height: 260px; background: #0a779d; right: 22%; bottom: 4%; opacity: .09; animation: drift 12s ease-in-out infinite alternate-reverse; }
.hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; min-height: 620px; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-copy { position: relative; z-index: 4; padding-bottom: 28px; }
.hero-eyebrow { margin-bottom: 24px; }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(56px, 6.45vw, 88px); font-weight: 580; letter-spacing: -.068em; line-height: .94; }
.hero-lede { max-width: 585px; margin: 28px 0 0; color: #aeb1bf; font-size: 18px; line-height: 1.68; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.play-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; background: rgba(255,255,255,.08); }
.hero-proof { display: flex; gap: 14px; align-items: center; margin-top: 34px; }
.avatar-stack { display: flex; padding-left: 9px; }
.avatar-stack span { width: 31px; height: 31px; display: grid; place-items: center; margin-left: -9px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; border: 2px solid var(--bg); background: linear-gradient(145deg, #8d62e7, #41327a); }
.avatar-stack span:nth-child(2) { background: linear-gradient(145deg, #2a9fb7, #1a4158); }
.avatar-stack span:nth-child(3) { background: linear-gradient(145deg, #bb598d, #583149); }
.proof-stars { color: #f1c36b; font-size: 11px; letter-spacing: 2px; }
.hero-proof p { margin: 3px 0 0; color: #888c9a; font-size: 11px; }
.hero-visual { position: relative; height: 610px; margin-right: -92px; perspective: 1300px; }
.hero-orb { position: absolute; z-index: 0; width: 570px; height: 570px; object-fit: contain; left: 58px; top: -16px; opacity: .29; filter: saturate(1.25) drop-shadow(0 0 80px rgba(66,154,255,.23)); animation: orbFloat 8s ease-in-out infinite; }
.orbit { position: absolute; z-index: 0; left: 70px; top: 25px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(130,156,255,.17); transform: rotateX(68deg) rotateZ(-20deg); }
.orbit-one::after { content: ""; position: absolute; top: 48%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: orbitDot 8s linear infinite; }
.orbit-two { width: 380px; height: 380px; left: 119px; top: 73px; transform: rotateX(65deg) rotateZ(39deg); border-color: rgba(168,123,255,.13); }
.product-window {
  position: absolute; z-index: 2; width: 600px; height: 398px; left: 18px; top: 66px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #111421; box-shadow: 0 46px 110px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.06);
  transform: rotateY(-8deg) rotateX(4deg) rotateZ(1deg); transform-style: preserve-3d; transition: transform .25s ease-out;
}
.window-bar { height: 36px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: #171a27; }
.traffic { display: flex; gap: 5px; width: 100px; }
.traffic i { width: 6px; height: 6px; border-radius: 50%; background: #ff7f75; }
.traffic i:nth-child(2) { background: #ecc45a; } .traffic i:nth-child(3) { background: #68d591; }
.window-url { margin: auto; width: 220px; height: 21px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.06); border-radius: 5px; color: #74798a; font-size: 7px; background: rgba(0,0,0,.12); }
.lock { color: #54cda0; font-size: 5px; }
.window-more { width: 100px; text-align: right; color: #5f6474; letter-spacing: 1px; font-size: 8px; }
.dashboard { height: calc(100% - 36px); display: flex; }
.dash-sidebar { width: 68px; padding: 18px 13px; background: #0d101a; border-right: 1px solid rgba(255,255,255,.055); }
.dash-logo { font-size: 14px; font-weight: 800; margin-bottom: 37px; } .dash-logo span { color: var(--violet-2); }
.side-line { width: 36px; height: 5px; margin: 17px 0; border-radius: 3px; background: #292d3b; }
.side-line.short { width: 25px; } .side-line.active { background: var(--violet); box-shadow: 0 0 12px rgba(139,92,246,.4); }
.side-bottom { width: 32px; height: 32px; border: 1px solid #2b3040; border-radius: 9px; margin-top: 100px; }
.dash-content { flex: 1; padding: 21px 24px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; }
.dash-head div { display: flex; flex-direction: column; gap: 5px; }
.dash-head small { font-size: 6px; color: #6f7485; letter-spacing: .15em; }
.dash-head strong { font-size: 14px; letter-spacing: -.02em; }
.dash-avatar { width: 25px; height: 25px; display: grid; place-items: center; font-size: 7px; font-weight: 800; color: #d7d1ff; border-radius: 7px; background: #2b2450; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 21px 0 12px; }
.metric-card { min-height: 75px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #151927; display: grid; grid-template-columns: 1fr auto; }
.metric-card small { grid-column: 1/-1; color: #777b8c; font-size: 7px; }
.metric-card strong { font-size: 15px; align-self: end; }
.metric-card span { color: #68d99a; align-self: end; font-size: 6px; }
.metric-card.purple { background: linear-gradient(135deg, #392768, #252044); border-color: rgba(171,141,255,.18); }
.chart-card { height: 180px; padding: 13px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #121622; }
.chart-top { display: flex; justify-content: space-between; position: relative; z-index: 2; font-size: 8px; }
.chart-top small { color: #686d7c; font-size: 6px; }
.chart-y { position: absolute; inset: 45px 13px 15px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-y i { height: 1px; background: rgba(255,255,255,.055); }
.chart-line { position: absolute; left: 13px; right: 13px; bottom: 12px; width: calc(100% - 26px); height: 126px; }
.chart-line .area { fill: url(#area); } .chart-line .line { fill: none; stroke: #9a78ff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.glass-card { border: 1px solid rgba(255,255,255,.15); background: rgba(19,22,36,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08); }
.float-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; border-radius: 13px; }
.float-card-top { right: -13px; top: 39px; width: 187px; padding: 11px 12px; animation: bob 5s ease-in-out infinite; }
.float-card-bottom { right: 18px; bottom: 31px; width: 148px; padding: 10px 12px; animation: bob 5.8s ease-in-out infinite reverse; }
.float-icon, .spark-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #74e2a6; background: rgba(74,191,130,.13); font-size: 12px; }
.spark-icon { color: var(--violet-2); background: rgba(139,92,246,.15); }
.float-card div { display: flex; flex-direction: column; gap: 3px; }
.float-card small { color: #777c8d; font-size: 6px; } .float-card strong { font-size: 9px; }
.live-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #73e8a2; box-shadow: 0 0 10px #73e8a2; }
.phone-mockup {
  position: absolute; z-index: 4; width: 164px; height: 332px; right: 27px; bottom: 35px; overflow: hidden; padding: 22px 12px 10px;
  border: 4px solid #262a3a; outline: 1px solid rgba(255,255,255,.17); border-radius: 28px; background: linear-gradient(155deg, #181b2a, #0f121c); box-shadow: 0 26px 55px rgba(0,0,0,.58); transform: rotateZ(5deg) rotateY(-7deg);
}
.phone-notch { position: absolute; top: 6px; left: 50%; width: 55px; height: 12px; transform: translateX(-50%); background: #090b12; border-radius: 10px; }
.phone-status { display: flex; justify-content: space-between; color: #a7abb8; font-size: 6px; }
.phone-greeting { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 12px; }
.phone-greeting small { color: #777c8e; font-size: 7px; } .phone-greeting strong { font-size: 13px; line-height: 1.2; letter-spacing: -.03em; }
.mobile-card-primary { height: 81px; padding: 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #6740d2, #35278e); }
.mobile-card-primary div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: end; }
.mobile-card-primary small { grid-column: 1/-1; font-size: 5px; opacity: .6; letter-spacing: .1em; }
.mobile-card-primary b { font-size: 27px; letter-spacing: -.06em; } .mobile-card-primary div:first-child span { font-size: 7px; margin: 0 0 4px 2px; opacity: .7; }
.ring { width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid rgba(255,255,255,.15); border-top-color: #8ff3e0; border-right-color: #8ff3e0; border-radius: 50%; transform: rotate(35deg); }
.ring span { font-size: 7px; transform: rotate(-35deg); }
.mobile-label { margin: 14px 0 8px; color: #656b7b; font-size: 5px; letter-spacing: .12em; }
.mobile-task { height: 40px; margin-bottom: 6px; padding: 7px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(255,255,255,.025); }
.mobile-task i { width: 6px; height: 24px; border-radius: 3px; background: var(--violet); } .mobile-task .task-cyan { background: var(--cyan); }
.mobile-task span { display: flex; flex-direction: column; gap: 3px; } .mobile-task b { font-size: 7px; } .mobile-task small { color: #666b7c; font-size: 5px; } .mobile-task em { margin-left: auto; color: #727789; font-size: 7px; font-style: normal; }
.phone-nav { position: absolute; inset: auto 9px 6px; height: 27px; display: flex; justify-content: space-around; align-items: center; color: #565c6d; border-top: 1px solid rgba(255,255,255,.05); font-size: 9px; } .phone-nav b { color: var(--violet-2); }
.hero-bottom { position: relative; z-index: 5; margin-top: 41px; padding: 28px 0; display: flex; align-items: center; gap: 44px; border-top: 1px solid var(--line); }
.hero-bottom p { color: #636877; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; flex: 0 0 auto; }
.sector-row { width: 100%; display: flex; justify-content: space-between; gap: 25px; color: #9da1af; font-size: 12px; font-weight: 650; }
.sector-row span { display: flex; gap: 9px; align-items: center; } .sector-row i { color: #494e5d; font-size: 8px; font-style: normal; }

.signal-bar { position: relative; z-index: 3; background: #f0eee9; color: var(--ink); }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 84px; }
.signal-grid div { display: flex; align-items: center; gap: 13px; padding: 0 24px; border-right: 1px solid rgba(17,18,26,.12); }
.signal-grid div:first-child { padding-left: 0; } .signal-grid div:last-child { border: 0; }
.signal-grid strong { color: #8a65db; font-size: 10px; font-weight: 800; }
.signal-grid span { font-size: 12px; font-weight: 720; }

/* Services */
.services { background: #f0eee9; color: var(--ink); }
.services .eyebrow { color: #7b7d85; } .services .muted { color: #aaa8a4; }
.services .section-intro { color: #62636b; }
.services-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 17px; }
.service-card { min-height: 406px; position: relative; overflow: hidden; padding: 31px; border: 1px solid rgba(17,18,26,.095); border-radius: var(--radius); background: #e7e5e0; transition: transform .45s var(--ease), box-shadow .45s ease, border-color .3s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 24px 70px rgba(36,33,50,.12); border-color: rgba(17,18,26,.17); }
.service-featured { grid-row: span 2; min-height: 829px; background: #151722; color: #fff; }
.service-number { position: absolute; right: 26px; top: 24px; color: rgba(120,122,132,.55); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #b49eff; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.18); }
.service-icon.cyan { color: #2389a2; background: rgba(34,190,223,.1); border-color: rgba(34,190,223,.15); }
.service-icon.pink { color: #ba4e83; background: rgba(218,88,153,.1); border-color: rgba(218,88,153,.15); }
.service-icon.gold { color: #9c762d; background: rgba(209,158,54,.1); border-color: rgba(209,158,54,.15); }
.service-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-kicker { display: block; margin: 28px 0 10px; color: #777985; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.service-card h3 { margin: 0; font-size: 27px; line-height: 1.1; letter-spacing: -.04em; font-weight: 650; }
.service-card p { max-width: 480px; margin: 14px 0 0; color: #62636b; font-size: 14px; line-height: 1.65; }
.service-featured p { color: #9ea2b1; }
.service-featured .service-content { position: relative; z-index: 2; }
.check-list { list-style: none; padding: 0; margin: 23px 0 0; }
.check-list li { position: relative; padding: 9px 0 9px 24px; color: #9ea2b0; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--violet-2); font-size: 10px; }
.website-visual { position: absolute; inset: auto 30px 31px; height: 305px; perspective: 1000px; }
.mini-browser { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: #f3efe7; color: #20201f; transform: rotateX(5deg) rotateZ(-1deg); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mini-browser-bar { height: 26px; padding: 0 8px; display: flex; align-items: center; gap: 4px; background: #20222d; }
.mini-browser-bar i { width: 5px; height: 5px; border-radius: 50%; background: #666a76; }
.mini-browser-bar span { width: 100px; height: 10px; margin: auto; border-radius: 3px; background: #30333f; }
.mini-site-nav { height: 42px; padding: 0 19px; display: flex; align-items: center; gap: 17px; font-size: 6px; position: relative; z-index: 2; }
.mini-site-nav b { margin-right: auto; font-size: 13px; font-style: italic; } .mini-site-nav span { width: 21px; height: 3px; background: #777; border-radius: 3px; }
.mini-site-nav em { padding: 5px 8px; color: #fff; background: #26231f; border-radius: 4px; font-style: normal; }
.mini-site-hero { position: relative; z-index: 2; padding: 37px 24px; }
.mini-site-hero small { font-size: 5px; letter-spacing: .15em; }
.mini-site-hero strong { display: block; margin: 7px 0 9px; font-size: 32px; line-height: .92; letter-spacing: -.07em; }
.mini-site-hero p { width: 100px; height: 4px; margin: 0 0 20px; background: #b1aaa1; }
.mini-site-hero button { border: 0; padding: 8px 12px; color: #fff; background: #1c1c1c; border-radius: 5px; font-size: 6px; }
.mini-gradient { position: absolute; z-index: 1; width: 210px; height: 210px; right: -4px; bottom: -11px; border-radius: 50% 50% 20% 40%; background: radial-gradient(circle at 30% 20%, #fff3ba, #ef8f75 35%, #613e92 72%); filter: blur(1px); transform: rotate(-20deg); }
.card-link { position: absolute; z-index: 3; left: 31px; bottom: 27px; display: inline-flex; align-items: center; gap: 8px; color: #3f414a; font-size: 11px; font-weight: 750; }
.card-link span { transition: transform .25s ease; } .card-link:hover span { transform: translate(3px,-3px); }
.service-featured .card-link { bottom: 354px; color: #d5d7e0; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.tag-list span { padding: 6px 9px; color: #65666e; border: 1px solid rgba(17,18,26,.1); border-radius: 6px; background: rgba(255,255,255,.2); font-size: 8px; font-weight: 650; }
.service-wide { grid-column: 1/-1; min-height: 290px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.service-wide-copy { position: relative; align-self: stretch; }
.service-wide .service-kicker { margin-top: 17px; }
.service-wide .card-link { left: 0; bottom: 0; }
.automation-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 11px; }
.automation-flow > i { color: #99999d; font-size: 12px; font-style: normal; }
.flow-node { min-height: 112px; padding: 18px; display: flex; flex-direction: column; border: 1px solid rgba(17,18,26,.1); border-radius: 14px; background: rgba(255,255,255,.24); }
.flow-node span { color: #a09ca3; font-size: 8px; } .flow-node b { margin: auto 0 4px; font-size: 11px; } .flow-node small { color: #808086; font-size: 8px; }
.flow-node.active { color: #fff; background: linear-gradient(145deg, #5d3fb1, #332269); box-shadow: 0 18px 35px rgba(85,53,158,.22); transform: translateY(-8px); border-color: rgba(255,255,255,.16); }
.flow-node.active span { color: #c5b5ef; } .flow-node.active small { color: #b9aed3; }

/* Work */
.work { overflow: hidden; background: #090b14; }
.work-glow { position: absolute; width: 600px; height: 600px; right: -250px; top: 200px; border-radius: 50%; background: #3431a0; filter: blur(130px); opacity: .12; }
.work-heading-side p { max-width: 450px; margin: 0 0 25px; color: #9c9fad; font-size: 15px; line-height: 1.7; }
.filter-group { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.filter-button { border: 0; padding: 8px 15px; border-radius: 7px; color: #7f8392; background: transparent; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.filter-button.active { color: #fff; background: #242838; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-card { border: 1px solid var(--line); border-radius: 23px; overflow: hidden; background: #10131e; transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s ease, opacity .3s ease; }
.project-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.17); box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.project-card[hidden] { display: none; }
.project-large { grid-column: 1/-1; }
.project-visual { position: relative; height: 470px; overflow: hidden; }
.project-card:not(.project-large) .project-visual { height: 430px; }
.project-index { position: absolute; left: 22px; top: 20px; z-index: 6; color: rgba(255,255,255,.68); font-size: 8px; letter-spacing: .14em; }
.project-commerce { padding: 48px 55px 0; background: linear-gradient(145deg, #d1c0a8, #a8836d); }
.commerce-browser { position: relative; height: 100%; overflow: hidden; color: #242018; background: #eee5d8; border-radius: 12px 12px 0 0; box-shadow: 0 28px 70px rgba(68,41,29,.3); }
.commerce-nav { height: 65px; display: flex; align-items: center; padding: 0 30px; border-bottom: 1px solid rgba(39,34,25,.1); font-size: 9px; position: relative; z-index: 3; }
.commerce-nav b { margin-right: auto; font-size: 17px; letter-spacing: -.05em; } .commerce-nav b span { color: #ac6145; }
.commerce-nav div { color: #716a5f; } .commerce-nav em { margin-left: auto; font-style: normal; }
.commerce-copy { position: relative; z-index: 3; padding: 77px 0 0 55px; }
.commerce-copy small { font-size: 6px; letter-spacing: .18em; color: #8b7665; }
.commerce-copy h3 { margin: 12px 0 13px; font-family: Georgia, serif; font-size: 54px; line-height: .92; font-weight: 500; letter-spacing: -.055em; }
.commerce-copy p { margin: 0 0 26px; color: #72695e; font-size: 10px; }
.commerce-copy button { padding: 11px 16px; border: 0; color: #f8f2e9; background: #312a23; border-radius: 2px; font-size: 7px; }
.commerce-art { position: absolute; z-index: 2; width: 50%; height: 100%; right: 0; top: 0; background: linear-gradient(150deg, #c58b6e, #6f3c2b); }
.commerce-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 41%, transparent 42%), radial-gradient(circle at 65% 22%, rgba(255,230,189,.55), transparent 32%); }
.vase { position: absolute; bottom: 0; background: linear-gradient(90deg, #9b4f32, #d58e61 45%, #74301e); box-shadow: inset -10px 0 20px rgba(58,24,16,.25), -15px 25px 40px rgba(48,26,18,.22); }
.vase-one { left: 20%; width: 118px; height: 194px; border-radius: 35% 35% 14% 14% / 22% 22% 8% 8%; }
.vase-one::before { content: ""; position: absolute; left: 37px; top: -27px; width: 45px; height: 40px; background: #ad6546; border-radius: 7px 7px 0 0; }
.vase-two { right: -20px; width: 100px; height: 139px; border-radius: 50% 50% 10% 10%; background: linear-gradient(90deg, #e4c2a3, #f2dbc4, #a9755f); }
.sun { position: absolute; width: 85px; height: 85px; right: 28px; top: 102px; border-radius: 50%; border: 1px solid rgba(255,233,198,.38); box-shadow: 0 0 50px rgba(255,198,138,.2); }
.commerce-page { position: absolute; z-index: 5; right: 18px; bottom: 16px; color: rgba(255,255,255,.55); font-size: 7px; }
.project-float-metric { position: absolute; right: 27px; top: 26px; z-index: 7; width: 105px; padding: 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; color: #fff; background: rgba(36,29,30,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 15px 35px rgba(60,34,24,.22); }
.project-float-metric small { display: block; opacity: .65; font-size: 6px; } .project-float-metric strong { display: block; margin-top: 5px; font-size: 17px; }
.project-info { min-height: 170px; padding: 29px 31px; display: grid; grid-template-columns: 1.4fr .7fr auto; gap: 25px; align-items: end; }
.project-type { color: #7c808f; font-size: 8px; letter-spacing: .15em; font-weight: 750; }
.project-info h3 { margin: 8px 0 7px; font-size: 29px; letter-spacing: -.04em; }
.project-info p { max-width: 560px; margin: 0; color: #8f93a2; font-size: 12px; line-height: 1.6; }
.project-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.project-meta span { padding: 6px 8px; color: #8b8f9e; border: 1px solid var(--line); border-radius: 6px; font-size: 7px; }
.round-link { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; color: #fff; background: rgba(255,255,255,.03); cursor: pointer; font-size: 16px; transition: color .3s ease, background .3s ease, transform .3s var(--ease); }
.round-link:hover { color: #0c0f17; background: #fff; transform: rotate(45deg); }
.project-health { background: linear-gradient(145deg, #bba3e6, #6e659e); }
.health-phone { position: absolute; width: 205px; height: 390px; padding: 27px 17px; border: 5px solid #252434; border-radius: 32px; color: #24222f; background: #f4f1f5; box-shadow: 0 25px 55px rgba(40,27,65,.35); }
.health-phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 58px; height: 13px; background: #292735; border-radius: 10px; }
.health-phone.back { left: calc(50% - 170px); top: 62px; transform: rotate(-8deg); opacity: .84; }
.health-phone.front { left: calc(50% - 45px); top: 27px; transform: rotate(7deg); }
.hp-top { display: flex; justify-content: space-between; padding: 1px 4px 14px; font-size: 7px; }
.hp-title small { display: block; color: #8d8993; font-size: 7px; margin-bottom: 8px; } .hp-title strong { font-size: 21px; line-height: 1; letter-spacing: -.04em; }
.mood-row { display: flex; justify-content: space-between; margin-top: 24px; } .mood-row i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; font-style: normal; background: #e5deef; }
.hp-card { height: 67px; margin-top: 21px; border-radius: 12px; background: #dfd8ea; } .hp-card.short { height: 48px; margin-top: 10px; }
.doctor-photo { height: 118px; margin: 7px 0 17px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 50% 33%, #f8e5d8 0 13%, transparent 13.5%), radial-gradient(ellipse at 50% 66%, #3a3858 0 28%, transparent 28.5%), linear-gradient(145deg, #a6dcd5, #729aab); }
.doctor-photo span { font-size: 40px; color: rgba(255,255,255,.4); }
.doctor-copy small { color: #8c8794; font-size: 6px; letter-spacing: .12em; } .doctor-copy strong { display: block; margin: 7px 0 5px; font-size: 16px; } .doctor-copy span { color: #777280; font-size: 8px; }
.health-phone button { width: 100%; height: 35px; margin-top: 16px; border: 0; border-radius: 9px; color: #fff; background: #6c4eb4; font-size: 8px; }
.hp-details { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.hp-details small { grid-column: 1/-1; color: #96919c; font-size: 7px; }.hp-details span { padding: 8px 6px; border-radius: 7px; background: #e8e4ec; font-size: 6px; }
.project-ops { background: linear-gradient(145deg, #2c3242, #111621); }
.ops-window { position: absolute; inset: 57px 43px 0; display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 13px 13px 0 0; background: #0d1017; box-shadow: 0 30px 70px rgba(0,0,0,.45); transform: rotateZ(-1deg); }
.ops-side { width: 48px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: 20px; border-right: 1px solid rgba(255,255,255,.06); color: #5e6370; }
.ops-side b { margin-bottom: 19px; color: #fff; font-size: 11px; } .ops-side b span { color: var(--cyan); } .ops-side i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; font-size: 9px; font-style: normal; }
.ops-side i.on { color: #8de7ff; background: rgba(82,213,255,.1); }
.ops-main { flex: 1; padding: 22px; }
.ops-head { display: flex; justify-content: space-between; align-items: center; }
.ops-head span { display: flex; flex-direction: column; gap: 6px; } .ops-head small { color: #636978; font-size: 5px; letter-spacing: .13em; } .ops-head strong { font-size: 15px; }
.ops-head em { padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #9095a1; font-size: 6px; font-style: normal; }
.ops-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0 10px; }
.ops-metrics > div { padding: 12px; display: grid; grid-template-columns: 1fr auto; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: #141821; }
.ops-metrics small { grid-column: 1/-1; color: #6f7481; font-size: 6px; } .ops-metrics b { margin-top: 9px; font-size: 18px; } .ops-metrics i { align-self: end; color: #63d8bd; font-size: 6px; font-style: normal; }
.ops-chart { height: 126px; padding: 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: #12161f; }
.ops-chart > span { font-size: 7px; color: #9095a3; }
.bars { height: 78px; display: flex; align-items: end; justify-content: space-around; gap: 5px; margin-top: 11px; }
.bars i { width: 100%; height: 30%; border-radius: 2px 2px 0 0; background: #3e82a2; }.bars i:nth-child(2){height:48%}.bars i:nth-child(3){height:40%}.bars i:nth-child(4){height:72%; background:#59c9dd}.bars i:nth-child(5){height:59%}.bars i:nth-child(6){height:86%; background:#7b69e2}.bars i:nth-child(7){height:70%}.bars i:nth-child(8){height:94%; background:#8b73f0}
.ops-list { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }.ops-list span { padding: 8px; border-radius: 6px; background: #141821; color: #8e93a0; font-size: 6px; }.ops-list i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan); }.ops-list b { float: right; color: #e5e6ea; }
.project-info.compact { grid-template-columns: 1fr auto; min-height: 164px; }
.work-note { margin-top: 18px; min-height: 96px; padding: 0 25px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(90deg, rgba(139,92,246,.07), transparent); }
.work-note-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--violet-2); background: rgba(139,92,246,.12); }
.work-note p { margin: 0; color: #8f93a2; font-size: 12px; } .work-note strong { color: #e9e9ed; }
.work-note a { color: #c5b8ee; font-size: 11px; font-weight: 700; } .work-note a span { display: inline-block; margin-left: 8px; transition: transform .2s ease; }.work-note a:hover span{transform:translateX(4px)}

/* Process */
.process { color: var(--ink); background: #f0eee9; }
.process .eyebrow { color: #7b7d85; } .process .muted { color: #aaa8a4; } .process .section-intro { color: #62636b; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(17,18,26,.13); border-bottom: 1px solid rgba(17,18,26,.13); }
.process-step { min-width: 0; padding: 25px 18px 28px; border-right: 1px solid rgba(17,18,26,.13); }
.process-step:first-child { padding-left: 0; }.process-step:last-child { border: 0; padding-right: 0; }
.step-top { display: flex; justify-content: space-between; color: #9d9a9a; font-size: 9px; }.step-top i { font-style: normal; font-size: 13px; }
.step-visual { height: 176px; margin: 23px 0 27px; border: 1px solid rgba(17,18,26,.09); border-radius: 13px; background: #e5e2dd; overflow: hidden; position: relative; }
.process-step h3 { margin: 0 0 11px; font-size: 20px; letter-spacing: -.04em; }
.process-step > p { min-height: 78px; margin: 0; color: #6d6d72; font-size: 12px; line-height: 1.6; }
.process-step > small { display: block; color: #9b9999; font-size: 7px; letter-spacing: .13em; font-weight: 750; }
.discovery-visual > span { position: absolute; left: 15px; top: 14px; color: #99969c; font-size: 6px; letter-spacing: .13em; }
.target-rings { position: absolute; width: 140px; height: 140px; left: 50%; top: 34px; transform: translateX(-50%); }
.target-rings i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(95,64,170,.2); border-radius: 50%; transform: translate(-50%,-50%); }.target-rings i:nth-child(1){width:130px;height:130px}.target-rings i:nth-child(2){width:90px;height:90px}.target-rings i:nth-child(3){width:50px;height:50px;background:rgba(139,92,246,.06)}
.target-rings b { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%,-50%); color: #fff; background: var(--violet); box-shadow: 0 8px 22px rgba(104,64,196,.3); }
.wireframe { position: absolute; width: 126px; height: 95px; border: 1px solid #b9b3c4; border-radius: 7px; background: linear-gradient(#d6d1dd 20px, transparent 20px), linear-gradient(90deg, transparent 12px, #c4becb 12px 42px, transparent 42px); box-shadow: 0 12px 25px rgba(50,44,60,.08); }.wireframe::before,.wireframe::after{content:"";position:absolute;left:13px;height:6px;border-radius:3px;background:#c0bac7}.wireframe::before{top:38px;width:67px}.wireframe::after{top:53px;width:93px}.wireframe.one{left:20px;top:31px;transform:rotate(-7deg)}.wireframe.two{right:16px;bottom:20px;transform:rotate(6deg);background:linear-gradient(#696078 20px, #81768e 20px);border-color:#8b8096}
.cursor-tag { position: absolute; z-index: 3; right: 44px; top: 45px; padding: 4px 7px; border-radius: 3px 7px 7px 7px; color: #fff; background: #5c42aa; font-size: 6px; box-shadow: 0 4px 12px rgba(85,54,166,.28); }
.build-visual { padding: 28px 20px; background: #181a22; color: #c9c8d0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.build-visual code { display:block;margin:8px 0;font-size:8px;}.build-visual b{margin-right:12px;color:#555a68;font-weight:400}.build-visual i{color:#b291ff;font-style:normal}
.launch-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, #e2ddea, #ebe7e1); }.launch-orbit{width:75px;height:75px;display:grid;place-items:center;border:1px solid rgba(94,57,165,.2);border-radius:50%;box-shadow:0 0 0 13px rgba(139,92,246,.045),0 0 0 28px rgba(139,92,246,.025)}.launch-orbit span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#9c78ea,#6842bd);box-shadow:0 10px 20px rgba(90,55,155,.28)}.launch-visual>b{margin-top:22px;font-size:7px;letter-spacing:.13em}.launch-visual>small{margin-top:5px;color:#8c8990;font-size:6px}

/* About */
.about { padding-bottom: 0; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 100px; align-items: center; }
.about-visual { position: relative; height: 570px; }
.about-panel { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(circle at 50% 48%, rgba(124,89,218,.13), transparent 35%), linear-gradient(145deg,#111522,#0b0e17); box-shadow: var(--shadow); }
.about-panel::before { content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px; }
.about-code-label { position: absolute; left: 22px; top: 20px; color: #676c7a; font-size: 7px; letter-spacing: .13em; }
.principle-orbit { position: absolute; width: 390px; height: 390px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.principle-orbit::before,.principle-orbit::after{content:"";position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.06);border-radius:50%;transform:translate(-50%,-50%)}.principle-orbit::before{width:270px;height:270px}.principle-orbit::after{width:150px;height:150px}
.core { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(174,147,255,.25); border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 40% 30%, #5d438e, #201b3b 65%); box-shadow: 0 0 60px rgba(109,73,204,.25), inset 0 1px rgba(255,255,255,.16); }
.core span { font-size: 27px; font-weight: 750; letter-spacing: -.06em; }.core small{margin-top:6px;text-align:center;color:#a69cbd;font-size:5px;line-height:1.4;letter-spacing:.12em}
.satellite { position: absolute; min-width: 70px; padding: 8px 10px; text-align: center; border: 1px solid var(--line-light); border-radius: 9px; color: #bdc0ca; background: rgba(20,24,37,.8); backdrop-filter: blur(10px); font-size: 8px; box-shadow: 0 10px 22px rgba(0,0,0,.2); }
.sat-one{left:19px;top:76px}.sat-two{right:4px;top:137px}.sat-three{right:55px;bottom:51px}.sat-four{left:-6px;bottom:121px}
.about-status { position: absolute; inset: auto 18px 16px; display: flex; align-items: center; gap: 9px; color: #707583; font-size: 7px; }.about-status i{width:5px;height:5px;border-radius:50%;background:#6cde98}.about-status b{margin-left:auto;color:#555b69}
.about-float { position: absolute; right: -27px; bottom: 42px; z-index: 3; min-width: 190px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(23,26,41,.8); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.about-float>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--cyan);background:rgba(82,213,255,.1)}.about-float div{display:flex;flex-direction:column;gap:4px}.about-float small{color:#696e7c;font-size:6px;letter-spacing:.13em}.about-float b{font-size:10px}
.about-copy h2 { font-size: clamp(43px, 4.6vw, 64px); }
.about-lede { margin: 28px 0 12px !important; color: #d0d1d8 !important; font-size: 18px !important; }
.about-copy > p { color: #9296a5; font-size: 14px; line-height: 1.75; }
.benefit-list { margin: 29px 0 27px; border-top: 1px solid var(--line); }
.benefit { display: grid; grid-template-columns: 39px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.benefit>span{margin-top:4px;color:var(--violet-2);font-size:8px}.benefit h3{margin:0 0 6px;font-size:14px}.benefit p{margin:0;color:#7f8392;font-size:11px;line-height:1.55}
.text-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.22); color: #e9e9ed; font-size: 12px; font-weight: 700; }
.text-link span { transition: transform .25s ease; }.text-link:hover span{transform:translate(3px,-3px)}
.stack-wrap { width: 100%; margin-top: 115px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.stack-track { width: max-content; height: 80px; display: flex; align-items: center; gap: 44px; animation: marquee 30s linear infinite; }
.stack-track span { color: #a6a9b5; font-size: 13px; font-weight: 650; white-space: nowrap; }.stack-track b{margin-right:9px;color:#6f5f9e}

/* Testimonials */
.testimonials { background: #f0eee9; color: var(--ink); overflow: hidden; }
.testimonial-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 56px; }
.testimonial-heading .eyebrow { grid-column: 1/-1; color:#7b7d85; }.testimonial-heading .muted{color:#aaa8a4}
.testimonial-controls { display: flex; gap: 8px; }
.slider-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(17,18,26,.14); border-radius: 50%; background: transparent; cursor: pointer; transition: background .25s ease,color .25s ease; }.slider-button:hover{color:#fff;background:#171821}
.testimonial-viewport { overflow: visible; }
.testimonial-track { display: grid; grid-template-columns: repeat(3, minmax(370px,1fr)); gap: 16px; transition: transform .55s var(--ease); }
.quote-card { min-height: 367px; padding: 31px; display: flex; flex-direction: column; border: 1px solid rgba(17,18,26,.1); border-radius: 20px; background: #e7e4de; transition: opacity .4s ease,transform .4s ease,background .4s ease; }
.quote-card.active { background: #171923; color: #fff; box-shadow: 0 28px 60px rgba(46,40,65,.16); }
.quote-top { display:flex;justify-content:space-between;align-items:start}.quote-mark{font-family:Georgia,serif;font-size:44px;line-height:1;color:#8d67d6}.sample-label{padding:5px 7px;border:1px solid rgba(112,109,117,.18);border-radius:5px;color:#929097;font-size:6px;letter-spacing:.12em}.quote-card.active .sample-label{border-color:rgba(255,255,255,.09);color:#767b8b}
.quote-card blockquote { margin: 26px 0 35px; font-family: Georgia, serif; font-size: 20px; line-height: 1.52; letter-spacing: -.025em; }
.quote-card footer { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; }
.quote-avatar { width: 36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:8px;font-weight:800;background:#7652c3}.quote-avatar.cyan{background:#317f91}.quote-avatar.pink{background:#a74e7b}
.quote-card footer>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.quote-card footer strong{font-size:10px}.quote-card footer span{color:#828087;font-size:7px}.quote-rating{color:#c79843;font-size:8px;letter-spacing:1px}
.testimonial-disclaimer { margin: 17px 0 0; color: #929097; font-size: 9px; text-align: right; }

/* Pricing */
.pricing { overflow: hidden; }
.pricing-aurora { position:absolute;width:700px;height:400px;left:50%;top:-260px;transform:translateX(-50%);border-radius:50%;background:#4d2992;filter:blur(130px);opacity:.14; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: stretch; }
.price-card { position: relative; min-height: 612px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.025); }
.price-card.featured { border-color: rgba(150,112,255,.36); background: linear-gradient(160deg,rgba(139,92,246,.13),rgba(255,255,255,.02) 50%); box-shadow: 0 25px 80px rgba(68,44,130,.14), inset 0 1px rgba(255,255,255,.07); transform:translateY(-8px) }
.popular-badge { position:absolute;right:18px;top:18px;padding:6px 8px;border:1px solid rgba(165,137,255,.25);border-radius:5px;color:#bba7ff;background:rgba(139,92,246,.1);font-size:6px;letter-spacing:.13em;font-weight:800 }
.price-icon { width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-light);border-radius:11px;color:var(--violet-2);background:rgba(255,255,255,.025) }
.price-name { min-height: 147px; padding:25px 0 20px;border-bottom:1px solid var(--line) }.price-name>span{color:#696e7c;font-size:7px;letter-spacing:.14em;font-weight:800}.price-name h3{margin:8px 0 10px;font-size:21px;letter-spacing:-.035em}.price-name p{margin:0;color:#888c9b;font-size:11px;line-height:1.6}
.price { padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:end}.price small{grid-column:1/-1;color:#626775;font-size:6px;letter-spacing:.14em}.price strong{font-size:38px;line-height:1;letter-spacing:-.055em}.price sup{font-size:14px;vertical-align:top;margin-right:2px}.price>span{color:#656a78;font-size:7px;margin-bottom:4px}
.price-card .check-list { margin: 16px 0 25px; }.price-card .check-list li{padding:7px 0 7px 22px;border:0;font-size:10px}.price-card .check-list li::before{top:7px}.price-card .button{margin-top:auto}
.pricing-note { margin: 27px 0 0; color:#7f8391;font-size:11px;text-align:center}.pricing-note>span{margin-right:7px;color:var(--violet-2)}.pricing-note a{color:#cac1e9;border-bottom:1px solid rgba(202,193,233,.3)}

/* FAQ */
.faq { background:#f0eee9;color:var(--ink) }
.faq-grid { display:grid;grid-template-columns:.65fr 1.1fr;gap:120px;align-items:start }.faq .eyebrow{color:#7b7d85}.faq .muted{color:#aaa8a4}.faq header>p{margin:27px 0 10px;color:#77767b;font-size:12px}.faq .text-link{color:#282830;border-color:rgba(17,18,26,.25)}
.accordion { border-top:1px solid rgba(17,18,26,.15) }
.faq-item { border-bottom:1px solid rgba(17,18,26,.15) }.faq-item h3{margin:0}.faq-item button{width:100%;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;border:0;background:transparent;text-align:left;cursor:pointer;font-size:15px;font-weight:650;letter-spacing:-.02em}.faq-item button i{position:relative;width:20px;height:20px;flex:0 0 auto}.faq-item button i::before,.faq-item button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:#6c6a70;transition:transform .3s ease}.faq-item button i::after{transform:rotate(90deg)}.faq-item.open button i::after{transform:rotate(0)}
.faq-answer { display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease) }.faq-answer>p{overflow:hidden;margin:0;color:#6e6d72;font-size:12px;line-height:1.7}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer>p{padding:0 52px 24px 0}

/* Contact */
.contact { overflow:hidden;padding:120px 0;background:linear-gradient(130deg,#6d47d5,#4931aa 65%,#3034a1); }
.contact::before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 65%)}
.contact-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.3}.contact-orb.one{width:450px;height:350px;left:-140px;bottom:-120px;background:#23b3da}.contact-orb.two{width:350px;height:300px;right:10%;top:-120px;background:#b25ae8}
.contact-grid { position:relative;z-index:2;display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center }.eyebrow.light{color:rgba(255,255,255,.65)}.eyebrow.light>span{width:7px;height:7px;border-radius:50%;background:#8ff0cb;box-shadow:0 0 10px #8ff0cb}
.contact-copy h2{margin:23px 0 24px;font-size:clamp(50px,5.4vw,76px);line-height:.94;letter-spacing:-.062em;font-weight:580}.contact-copy h2 span{color:#d8cdff}.contact-copy>p{max-width:480px;margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.7}
.contact-promises{display:flex;flex-direction:column;gap:12px;margin:29px 0}.contact-promises span{font-size:10px;color:rgba(255,255,255,.74)}.contact-promises i{width:18px;height:18px;margin-right:8px;display:inline-grid;place-items:center;border-radius:50%;color:#aaf2d3;background:rgba(129,241,196,.12);font-size:7px;font-style:normal}
.contact-direct{padding-top:25px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:8px}.contact-direct small{color:rgba(255,255,255,.45);font-size:7px;letter-spacing:.15em}.contact-direct a{font-size:14px;font-weight:650}.contact-direct a span{margin-left:7px}
.contact-form { padding:31px;border:1px solid rgba(255,255,255,.38);border-radius:22px;color:var(--ink);background:#f6f3ef;box-shadow:0 35px 100px rgba(24,13,65,.35),inset 0 1px #fff }
.form-head{display:flex;justify-content:space-between;margin-bottom:27px;padding-bottom:17px;border-bottom:1px solid rgba(17,18,26,.11);color:#8d8a90;font-size:7px;letter-spacing:.15em;font-weight:750}.form-head i{font-style:normal;color:#aaa7ab}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label,.contact-form legend{display:block;color:#4d4b51;font-size:8px;font-weight:750;letter-spacing:.04em}.contact-form label>span,.contact-form legend>span{color:#8658da}
.contact-form input:not([type=radio]),.contact-form textarea,.contact-form select{width:100%;margin:8px 0 18px;padding:0 13px;border:1px solid rgba(17,18,26,.13);border-radius:9px;color:#25242a;background:#eeebe7;outline:0;font-size:11px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.contact-form input:not([type=radio]),.contact-form select{height:44px}.contact-form textarea{padding-top:12px;min-height:91px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.1);background:#fff}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#9c999e}
.contact-form fieldset{margin:0 0 18px;padding:0;border:0}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}.choice-grid label{position:relative}.choice-grid input{position:absolute;opacity:0}.choice-grid span{height:37px;display:grid;place-items:center;border:1px solid rgba(17,18,26,.13);border-radius:8px;color:#76747a;background:#eeebe7;font-size:8px;cursor:pointer;transition:.2s ease}.choice-grid input:checked+span{border-color:#8052d5;color:#6840af;background:#e8dffa;box-shadow:0 0 0 2px rgba(139,92,246,.08)}.choice-grid input:focus-visible+span{outline:3px solid rgba(82,213,255,.8);outline-offset:2px}
.form-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:2px}.form-footer p{max-width:210px;margin:0;color:#969398;font-size:7px;line-height:1.5}.form-footer .button{flex:0 0 auto;min-height:48px}
.form-status{min-height:0;margin-top:0;color:#6950a7;font-size:9px;font-weight:650;transition:.25s ease}.form-status:not(:empty){min-height:20px;margin-top:15px;padding:10px;border-radius:7px;background:#ebe3f7}.contact-form .invalid{border-color:#d9586d!important;box-shadow:0 0 0 3px rgba(217,88,109,.08)!important}

/* Footer */
.site-footer { background:#060810 }
.footer-top { min-height:330px;padding:68px 0 55px;display:grid;grid-template-columns:.6fr 1.4fr;gap:90px;border-bottom:1px solid var(--line) }.footer-brand{align-self:start}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.footer-links>div{display:flex;flex-direction:column;align-items:start;gap:11px}.footer-links small{margin-bottom:8px;color:#515663;font-size:7px;letter-spacing:.16em;font-weight:750}.footer-links a,.footer-links span{color:#8b8f9d;font-size:11px;transition:color .2s ease}.footer-links a:hover{color:#fff}.footer-available{display:flex!important;align-items:center;gap:8px;margin-top:12px;color:#8ccca5!important}.footer-available i{width:5px;height:5px;display:block}
.footer-bottom { min-height:81px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#555a67;font-size:8px }.footer-bottom>div{display:flex;gap:20px}.footer-bottom a:hover{color:#aeb1bd}.visual-credit{opacity:.65}

/* Dialog & toast */
.project-modal { width:min(630px,calc(100% - 32px));padding:40px;border:1px solid rgba(255,255,255,.16);border-radius:24px;color:#fff;background:#121622;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:visible }.project-modal::backdrop{background:rgba(4,6,11,.78);backdrop-filter:blur(10px)}.project-modal[open]{animation:modalIn .4s var(--ease)}
.modal-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:#aaaeba;background:rgba(255,255,255,.03);cursor:pointer;font-size:20px}.modal-kicker{color:var(--violet-2);font-size:8px;letter-spacing:.16em;font-weight:800}.project-modal h2{margin:13px 0 14px;font-size:43px;letter-spacing:-.055em}.modal-summary{margin:0;color:#9b9fae;font-size:14px;line-height:1.7}.modal-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:27px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.modal-details small{color:#666b7a;font-size:7px;letter-spacing:.14em}.modal-details p{margin:8px 0 0;color:#a4a7b4;font-size:11px;line-height:1.6}.modal-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px}.modal-tags span{padding:7px 9px;border:1px solid var(--line);border-radius:6px;color:#9498a6;font-size:8px}
.toast{position:fixed;z-index:1000;right:20px;bottom:20px;max-width:330px;padding:14px 17px;display:flex;align-items:center;gap:11px;border:1px solid var(--line-light);border-radius:12px;color:#e8e9ee;background:rgba(18,22,34,.94);backdrop-filter:blur(14px);box-shadow:0 20px 55px rgba(0,0,0,.4);transform:translateY(30px);opacity:0;pointer-events:none;transition:.4s var(--ease)}.toast.show{transform:translateY(0);opacity:1}.toast span{color:var(--violet-2)}.toast p{margin:0;font-size:10px;line-height:1.45}

/* Reveal & animation */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: var(--delay,0ms); }
.js .reveal.reveal-scale { transform: translateY(20px) scale(.965); }
.js .reveal.is-visible { opacity:1; transform: translateY(0) scale(1); }
@keyframes drift{to{transform:translate(-45px,30px) rotate(-8deg)}}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(4deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes orbitDot{to{transform:rotate(360deg);transform-origin:244px 4px}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Responsive */
@media (max-width: 1100px) {
  :root { --shell:min(calc(100% - 40px), 1000px); }
  .nav-links { gap:21px }.nav-availability{display:none}
  .hero-grid { grid-template-columns:.9fr 1.1fr;gap:15px }.hero-visual{margin-right:-130px;transform:scale(.88);transform-origin:left center}.hero h1{font-size:70px}
  .services-grid{grid-template-columns:1.18fr 1fr}.service-wide{gap:35px}
  .about-grid{gap:55px}.about-visual{height:520px}.principle-orbit{width:340px;height:340px}
  .process-step{padding-inline:14px}.process-step:first-child{padding-left:0}.process-step:last-child{padding-right:0}
  .faq-grid{gap:70px}.contact-grid{gap:45px}.choice-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px) {
  :root { --shell:calc(100% - 40px); }
  .section{padding:100px 0}
  .site-header{height:70px}.nav-links{position:fixed;inset:70px 0 auto;padding:22px 20px 30px;display:flex;flex-direction:column;align-items:stretch;gap:0;background:rgba(7,9,18,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);transform:translateY(-120%);opacity:0;transition:.4s var(--ease);pointer-events:none}.nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}.nav-links a{padding:16px 4px;border-bottom:1px solid var(--line);font-size:15px}.nav-links a::after{display:none}.menu-toggle{display:flex}.nav-cta{display:none}
  .hero{min-height:auto;padding-top:140px}.hero-grid{display:block}.hero-copy{max-width:730px}.hero h1{font-size:clamp(56px,9.8vw,80px)}.hero-lede{max-width:650px}.hero-visual{width:720px;height:590px;margin:30px auto 0;transform:scale(.9);transform-origin:center top}.hero-bottom{margin-top:-10px;display:block}.sector-row{margin-top:17px;flex-wrap:wrap;justify-content:flex-start}.hero-bottom p{margin:0}
  .signal-grid{grid-template-columns:1fr 1fr}.signal-grid div{min-height:70px;border-bottom:1px solid rgba(17,18,26,.1)}.signal-grid div:nth-child(2){border-right:0}.signal-grid div:first-child{padding-left:24px}
  .split-heading,.pricing-heading,.work-heading{grid-template-columns:1fr;gap:28px}.section-header{margin-bottom:48px}.section-intro{max-width:650px}
  .services-grid{grid-template-columns:1fr 1fr}.service-featured{grid-column:1/-1;grid-row:auto;min-height:700px}.service-wide{grid-template-columns:1fr;gap:30px}.service-wide-copy{min-height:200px}.automation-flow{padding-bottom:12px}
  .project-visual{height:400px}.project-card:not(.project-large) .project-visual{height:390px}.project-info{grid-template-columns:1fr auto}.project-meta{display:none}.commerce-copy{padding-left:38px}.commerce-copy h3{font-size:45px}
  .process-grid{grid-template-columns:1fr 1fr}.process-step{padding:25px;border-bottom:1px solid rgba(17,18,26,.13)}.process-step:nth-child(2){border-right:0}.process-step:first-child,.process-step:last-child{padding:25px}.process-step:nth-child(3),.process-step:nth-child(4){border-bottom:0}.step-visual{height:200px}
  .about-grid{grid-template-columns:1fr}.about-visual{height:560px;max-width:650px;width:100%;margin:auto}.about-copy{max-width:700px}.about-copy h2{font-size:58px}.stack-wrap{margin-top:90px}
  .testimonial-track{grid-template-columns:repeat(3,calc(70vw - 20px))}
  .pricing-grid{grid-template-columns:1fr;max-width:650px;margin:auto}.price-card{min-height:auto}.price-card.featured{transform:none}.price-name{min-height:auto}.price-card .button{margin-top:12px}
  .faq-grid{grid-template-columns:1fr;gap:55px}.faq header{display:grid;grid-template-columns:1fr auto}.faq header .eyebrow{grid-column:1/-1}.faq header>p{align-self:end}.faq header .text-link{align-self:end;justify-self:end}.faq h2{grid-column:1/2}
  .contact-grid{grid-template-columns:1fr}.contact-copy{max-width:650px}.contact-form{max-width:700px;width:100%;margin:auto}
  .footer-top{grid-template-columns:1fr;gap:55px}
}
@media (max-width: 680px) {
  :root { --shell:calc(100% - 28px); }
  .section{padding:82px 0}.section-header h2,.faq h2,.testimonial-heading h2,.about-copy h2{font-size:clamp(40px,12vw,55px)}
  .brand-name{display:none}.hero{padding-top:119px}.hero h1{font-size:clamp(49px,15vw,70px);letter-spacing:-.07em}.hero-lede{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .button{width:100%}.hero-proof{margin-top:25px}
  .hero-visual{width:620px;height:530px;left:50%;margin:25px 0 0;transform:translateX(-50%) scale(.74);transform-origin:center top}.hero-bottom{margin-top:-90px}.sector-row{gap:15px 24px}.sector-row span{font-size:10px}
  .signal-grid{grid-template-columns:1fr}.signal-grid div,.signal-grid div:nth-child(2){border-right:0}.signal-grid div:first-child{padding-left:18px}.signal-grid div{padding:0 18px}.signal-grid div:last-child{border-bottom:0}
  .services-grid{grid-template-columns:1fr}.service-featured{min-height:690px}.service-card{min-height:380px;padding:24px}.service-wide{min-height:580px}.service-featured .card-link{bottom:335px}.website-visual{left:24px;right:24px;height:287px}.service-wide .card-link{position:static;margin-top:20px}.service-wide-copy{min-height:auto}.automation-flow{grid-template-columns:1fr}.automation-flow>i{transform:rotate(90deg);text-align:center}.flow-node{min-height:90px}.flow-node.active{transform:none}.card-link{left:24px}
  .work-heading-side{display:block}.projects-grid{grid-template-columns:1fr}.project-large{grid-column:auto}.project-visual,.project-card:not(.project-large) .project-visual{height:370px}.project-commerce{padding:43px 17px 0}.commerce-nav{padding:0 15px}.commerce-nav div{display:none}.commerce-copy{padding:63px 0 0 25px}.commerce-copy h3{font-size:39px}.commerce-art{width:46%}.vase-one{left:10%;width:85px;height:160px}.project-float-metric{display:none}.project-info,.project-info.compact{min-height:180px;padding:23px;grid-template-columns:1fr auto;gap:10px}.project-info p{max-width:300px}.project-info h3{font-size:25px}.health-phone{transform-origin:top center}.health-phone.back{left:calc(50% - 155px);transform:rotate(-8deg) scale(.86)}.health-phone.front{left:calc(50% - 48px);transform:rotate(7deg) scale(.86)}.ops-window{inset:53px 18px 0}.work-note{padding:20px;grid-template-columns:auto 1fr}.work-note a{grid-column:2}.work-note p{line-height:1.6}
  .process-grid{grid-template-columns:1fr}.process-step,.process-step:first-child,.process-step:last-child{padding:25px 0;border-right:0;border-bottom:1px solid rgba(17,18,26,.13)}.process-step:nth-child(3){border-bottom:1px solid rgba(17,18,26,.13)}.step-visual{height:220px}.process-step>p{min-height:auto;margin-bottom:20px}
  .about-visual{height:470px}.about-panel{inset:0}.principle-orbit{width:310px;height:310px}.principle-orbit::before{width:220px;height:220px}.about-float{right:13px;bottom:24px}.about-copy h2{font-size:48px}.about-lede{font-size:16px!important}.stack-wrap{margin-top:70px}
  .testimonial-heading{grid-template-columns:1fr}.testimonial-controls{margin-top:25px}.testimonial-track{grid-template-columns:repeat(3,calc(100vw - 44px));gap:12px}.quote-card{min-height:380px;padding:25px}.quote-card blockquote{font-size:19px}.testimonial-disclaimer{text-align:left}
  .faq header{display:block}.faq header .text-link{margin-top:7px}.faq-item button{font-size:14px}.faq-item.open .faq-answer>p{padding-right:15px}
  .contact{padding:82px 0}.contact-copy h2{font-size:50px}.contact-form{padding:22px}.form-row{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}.form-footer{align-items:stretch;flex-direction:column}.form-footer p{max-width:none}.form-footer .button{width:100%}
  .footer-top{padding-top:55px}.footer-brand .brand-name{display:inline}.footer-links{grid-template-columns:1fr 1fr;gap:38px}.footer-links>div:last-child{grid-column:1/-1}.footer-bottom{padding:25px 0;flex-direction:column;align-items:flex-start}.modal-details{grid-template-columns:1fr}.project-modal{padding:30px 24px}.project-modal h2{font-size:36px}
}
@media (max-width: 390px) {
  .hero h1{font-size:47px}.hero-visual{transform:translateX(-50%) scale(.68)}.hero-bottom{margin-top:-125px}.phone-mockup{right:48px}.float-card-top{right:8px}.float-card-bottom{right:45px}
  .service-featured{min-height:675px}.mini-site-hero strong{font-size:28px}.automation-flow{gap:8px}
  .project-visual,.project-card:not(.project-large) .project-visual{height:340px}.health-phone.back{left:calc(50% - 145px);transform:rotate(-8deg) scale(.78)}.health-phone.front{left:calc(50% - 52px);transform:rotate(7deg) scale(.78)}
  .principle-orbit{width:275px;height:275px}.satellite{min-width:60px}.about-float{min-width:175px}.choice-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}.cursor-glow{display:none}
}

/* ============================================================
   UX REFINEMENT PASS — readable type, shadcn-style primitives,
   21st.dev-inspired spotlight surfaces, and safe mobile layouts
   ============================================================ */

/* Readability: no essential marketing copy relies on micro type. */
.eyebrow { font-size: 11px; line-height: 1.4; }
.hero-proof p { font-size: 12px; line-height: 1.5; }
.signal-grid span { font-size: 13px; }
.service-kicker { font-size: 10px; line-height: 1.45; }
.service-card p { font-size: 15px; line-height: 1.72; }
.service-card .check-list li { font-size: 13px; line-height: 1.45; }
.tag-list span { font-size: 10px; }
.card-link { font-size: 13px; min-height: 28px; }
.work-heading-side p { font-size: 16px; }
.filter-button { min-height: 36px; font-size: 10px; }
.project-type { font-size: 10px; line-height: 1.4; }
.project-info p { font-size: 14px; line-height: 1.7; }
.project-meta span { font-size: 9px; }
.work-note p, .work-note a { font-size: 13px; line-height: 1.55; }
.process-step > p { font-size: 14px; line-height: 1.7; }
.process-step > small { font-size: 9px; }
.about-copy > p { font-size: 16px; }
.benefit h3 { font-size: 16px; }
.benefit p { font-size: 13px; line-height: 1.65; }
.text-link { min-height: 34px; font-size: 14px; }
.quote-card footer strong { font-size: 12px; }
.quote-card footer span { font-size: 10px; line-height: 1.4; }
.quote-rating { font-size: 10px; }
.sample-label { font-size: 8px; }
.testimonial-disclaimer { font-size: 11px; line-height: 1.5; }
.price-name > span, .price small { font-size: 9px; }
.price-name p { font-size: 13px; line-height: 1.7; }
.price > span { font-size: 10px; }
.price-card .check-list li { font-size: 12px; line-height: 1.5; }
.pricing-note { font-size: 13px; }
.faq-item button { min-height: 68px; font-size: 17px; }
.faq-answer > p { font-size: 15px; line-height: 1.75; }
.contact-promises span { font-size: 13px; }
.contact-direct small { font-size: 10px; }
.contact-direct a { font-size: 16px; }
.contact-form label, .contact-form legend { font-size: 12px; line-height: 1.4; }
.contact-form input:not([type=radio]),
.contact-form textarea,
.contact-form select { font-size: 15px; }
.choice-grid span { min-height: 42px; font-size: 11px; }
.form-footer p { font-size: 10px; }
.form-status { font-size: 12px; }
.footer-links small { font-size: 9px; }
.footer-links a, .footer-links span { font-size: 13px; line-height: 1.5; }
.footer-bottom { font-size: 10px; }
.modal-kicker, .modal-details small { font-size: 9px; }
.modal-summary { font-size: 16px; }
.modal-details p { font-size: 13px; }
.modal-tags span { font-size: 10px; }
.toast p { font-size: 12px; }

/* shadcn-inspired state model: crisp borders, consistent focus, quiet elevation. */
.button,
.filter-button,
.slider-button,
.round-link,
.contact-form input,
.contact-form textarea,
.contact-form select,
.choice-grid span,
.faq-item button { touch-action: manipulation; }
.button { min-height: 50px; }
.button-small { min-height: 42px; }
.filter-button,
.filter-button:active,
.button:active { transform: translateY(1px) scale(.99); }
.service-card,
.project-card,
.price-card,
.quote-card,
.contact-form {
  isolation: isolate;
}

/* 21st.dev-inspired radial pointer spotlight. JS supplies the coordinates. */
.spotlight-card { position: relative; }
.spotlight-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(150, 120, 255, .13), transparent 42%);
  transition: opacity .35s ease;
}
.spotlight-card:hover::before { opacity: 1; }
.services .spotlight-card::before,
.testimonials .spotlight-card::before {
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(119, 77, 210, .10), transparent 44%);
}
.service-featured.spotlight-card::before {
  background: radial-gradient(460px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(113, 214, 255, .13), transparent 43%);
}

/* Scroll-linked 3D is applied only to imagery, never to readable content. */
.project-card .project-visual {
  transform: perspective(1300px) translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--scroll-tilt, 0deg));
  transform-origin: 50% 55%;
  will-change: transform;
  transition: transform .16s linear;
}
.about-panel {
  transform: perspective(1400px) translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--scroll-tilt, 0deg)) rotateY(var(--scroll-yaw, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform .16s linear;
}

@media (max-width: 680px) {
  /* Comfortable mobile rhythm and type */
  body { font-size: 16px; }
  .section { padding: 76px 0; }
  .section-header { margin-bottom: 38px; }
  .section-header h2,
  .faq h2,
  .testimonial-heading h2,
  .about-copy h2 { font-size: clamp(40px, 12.4vw, 52px); line-height: 1.01; }
  .section-intro { font-size: 16px; line-height: 1.7; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .button { width: 100%; min-height: 54px; font-size: 14px; }

  /* Hero: native-width composition instead of scaling a desktop canvas. */
  .hero { padding-top: 112px; }
  .hero h1 { font-size: clamp(46px, 13.2vw, 58px); line-height: .98; }
  .hero-lede { margin-top: 23px; font-size: 17px; line-height: 1.66; }
  .hero-actions { gap: 10px; margin-top: 28px; }
  .hero-proof { margin-top: 24px; }
  .hero-visual {
    left: auto;
    width: 100%;
    height: 430px;
    margin: 40px 0 0;
    transform: none;
    transform-origin: center;
  }
  .hero-orb {
    width: 420px;
    height: 420px;
    left: 50%;
    top: -35px;
    max-width: none;
    opacity: .22;
    transform: translateX(-50%);
    animation: none;
  }
  .orbit { display: none; }
  .product-window {
    width: 100%;
    height: 338px;
    left: 0;
    top: 8px;
    border-radius: 16px;
    transform: none !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
  }
  .window-bar { height: 38px; }
  .window-url { width: min(58%, 220px); height: 23px; font-size: 8px; }
  .traffic, .window-more { width: 58px; }
  .dashboard { height: calc(100% - 38px); }
  .dash-sidebar { display: none; }
  .dash-content { padding: 16px; }
  .dash-head small { font-size: 8px; }
  .dash-head strong { font-size: 15px; }
  .dash-avatar { width: 30px; height: 30px; font-size: 8px; }
  .metric-row { grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 10px; }
  .metric-card { min-height: 72px; padding: 11px; }
  .metric-card:nth-child(3) { display: none; }
  .metric-card small { font-size: 9px; }
  .metric-card strong { font-size: 17px; }
  .metric-card span { font-size: 8px; }
  .chart-card { height: 142px; padding: 12px; }
  .chart-top { font-size: 10px; }
  .chart-top small { font-size: 8px; }
  .chart-line { height: 99px; }
  .phone-mockup,
  .float-card-bottom { display: none; }
  .float-card-top {
    width: 196px;
    right: 14px;
    top: 326px;
    padding: 12px;
    animation: none;
  }
  .float-card small { font-size: 8px; }
  .float-card strong { font-size: 11px; }
  .hero-bottom { margin-top: 0; padding: 24px 0 30px; }
  .hero-bottom p { font-size: 11px; }
  .sector-row { gap: 14px 20px; }
  .sector-row span { font-size: 12px; }

  /* Services: every card participates in normal flow. No absolute art/copy collision. */
  .services-grid { gap: 14px; }
  .service-card,
  .service-featured,
  .service-wide {
    min-height: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    grid-column: auto;
    grid-row: auto;
  }
  .service-card h3 { font-size: 28px; line-height: 1.08; }
  .service-card p { font-size: 16px; line-height: 1.7; }
  .service-kicker { margin: 24px 0 9px; font-size: 11px; }
  .service-card .check-list { margin-top: 19px; }
  .service-card .check-list li { padding-block: 10px; font-size: 14px; }
  .service-card .check-list li::before { top: 10px; }
  .tag-list { gap: 8px; }
  .tag-list span { padding: 8px 10px; font-size: 11px; }
  .service-card .card-link,
  .service-featured .card-link,
  .service-wide .card-link {
    position: static;
    left: auto;
    bottom: auto;
    align-self: flex-start;
    margin-top: 25px;
    font-size: 14px;
  }
  .website-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 255px;
    margin-top: 28px;
    perspective: none;
  }
  .mini-browser { transform: none; }
  .mini-site-hero { padding: 28px 19px; }
  .mini-site-hero strong { font-size: 29px; }
  .service-wide { gap: 28px; }
  .service-wide-copy { min-height: 0; }
  .automation-flow { width: 100%; padding: 0; }
  .flow-node { min-height: 100px; padding: 17px; }
  .flow-node span, .flow-node small { font-size: 10px; }
  .flow-node b { font-size: 14px; }

  /* Project and process copy */
  .project-info,
  .project-info.compact { min-height: 0; padding: 24px; }
  .project-type { font-size: 10px; }
  .project-info p { font-size: 15px; line-height: 1.65; }
  .project-info h3 { font-size: 28px; }
  .round-link { width: 48px; height: 48px; }
  .work-note p, .work-note a { font-size: 14px; }
  .process-step h3 { font-size: 24px; }
  .process-step > p { font-size: 15px; }
  .process-step > small { font-size: 10px; }

  /* About, reviews, pricing, FAQs */
  .about-copy > p { font-size: 16px; }
  .benefit { grid-template-columns: 34px 1fr; padding: 20px 0; }
  .benefit h3 { font-size: 17px; }
  .benefit p { font-size: 14px; }
  .quote-card blockquote { font-size: 21px; }
  .quote-card footer strong { font-size: 13px; }
  .quote-card footer span { font-size: 11px; }
  .price-name h3 { font-size: 25px; }
  .price-name p { font-size: 15px; }
  .price-card .check-list li { font-size: 14px; padding-block: 9px; }
  .price-card .check-list li::before { top: 9px; }
  .pricing-note { font-size: 14px; }
  .faq-item button { min-height: 72px; padding: 22px 0; font-size: 17px; line-height: 1.4; }
  .faq-answer > p { font-size: 15px; }

  /* Form controls stay at 16px to avoid iOS input zoom. */
  .contact-copy > p { font-size: 16px; }
  .contact-promises span { font-size: 14px; }
  .contact-direct a { font-size: 17px; overflow-wrap: anywhere; }
  .contact-form label,
  .contact-form legend { font-size: 13px; }
  .contact-form input:not([type=radio]),
  .contact-form textarea,
  .contact-form select { min-height: 48px; font-size: 16px; }
  .choice-grid span { min-height: 48px; font-size: 13px; }
  .form-footer p { font-size: 12px; }
  .form-status { font-size: 13px; line-height: 1.5; }

  /* Footer and modal */
  .footer-links small { font-size: 10px; }
  .footer-links a, .footer-links span { font-size: 14px; }
  .footer-bottom { font-size: 11px; line-height: 1.5; }
  .modal-summary { font-size: 16px; }
  .modal-details p { font-size: 14px; }

  /* Disable perspective movement on touch layouts. */
  .project-card .project-visual,
  .about-panel { transform: none !important; transition: none; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 45px; }
  .hero-visual { width: 100%; height: 420px; left: auto; transform: none; }
  .hero-bottom { margin-top: 0; }
  .product-window { height: 328px; }
  .float-card-top { top: 317px; right: 8px; }
  .service-featured { min-height: 0; }
  .choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card .project-visual,
  .about-panel { transform: none !important; }
  .spotlight-card::before { display: none; }
}

@media (max-width: 680px) {
  .site-header .brand-name { display: inline; font-size: 13px; }
  .site-header .brand-name strong { display: none; }
}

/* Dynamic showcase CMS: natural-ratio editorial masonry */
.showcase-masonry{columns:3 300px;column-gap:18px}.showcase-tile{display:inline-block;width:100%;margin:0 0 18px;break-inside:avoid;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#10131e;box-shadow:0 18px 55px rgba(0,0,0,.16);transition:transform .45s var(--ease),border-color .3s ease,box-shadow .45s ease}.showcase-tile:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 28px 80px rgba(0,0,0,.34)}.showcase-tile>a{display:block}.showcase-tile figure{position:relative;margin:0;overflow:hidden;background:#0a0c14;transform:perspective(1300px) translate3d(0,var(--scroll-lift,0),0) rotateX(var(--scroll-tilt,0deg));transform-origin:50% 60%;will-change:transform}.showcase-tile img{width:100%;height:auto;transition:transform .8s var(--ease),filter .5s ease}.showcase-tile:hover img{transform:scale(1.025);filter:saturate(1.05)}.showcase-arrow{position:absolute;right:16px;top:16px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;background:rgba(10,12,20,.68);backdrop-filter:blur(12px);font-size:16px;transform:translateY(8px);opacity:0;transition:.35s var(--ease)}.showcase-tile:hover .showcase-arrow{transform:translateY(0);opacity:1}.showcase-copy{padding:22px 23px 24px}.showcase-copy>span{color:#777c8c;font-size:10px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}.showcase-copy h3{margin:8px 0 8px;font-size:25px;line-height:1.05;letter-spacing:-.045em}.showcase-copy p{margin:0;color:#9296a5;font-size:14px;line-height:1.65}.showcase-empty{padding:70px 25px;text-align:center;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02)}.showcase-empty>span{width:48px;height:48px;margin:0 auto 15px;display:grid;place-items:center;border-radius:14px;color:var(--violet-2);background:rgba(139,92,246,.12)}.showcase-empty h3{margin:0 0 8px;font-size:24px}.showcase-empty p{margin:0;color:#8e92a1}.work-heading-side .text-link{margin-top:4px}.work-heading-side .text-link span{margin-left:6px}

/* Direct messaging controls managed from Admin > Settings */
.direct-message-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.direct-message{min-height:46px;padding:0 15px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);border-radius:11px;color:#fff;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;transition:.25s var(--ease)}.direct-message:hover{transform:translateY(-2px);background:rgba(255,255,255,.14)}.direct-message.whatsapp span{color:#79f0a8}.direct-message.telegram span{color:#7dd7ff}.contact-dock{position:fixed;z-index:90;right:20px;bottom:20px;padding:7px;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(12,15,25,.83);backdrop-filter:blur(18px);box-shadow:0 18px 55px rgba(0,0,0,.36);animation:dockIn .6s var(--ease) both}.dock-label{padding:0 8px 0 11px;color:#aeb2c0;font-size:11px;font-weight:700}.dock-button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:14px;transition:transform .25s var(--ease),background .25s ease}.dock-button:hover{transform:scale(1.08)}.dock-button.whatsapp{background:#1c9c58}.dock-button.telegram{background:#278dcb}.form-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}.form-status.success{color:#266c4b;background:#dff3e7}.contact-form button:disabled{cursor:wait;opacity:.7}.contact-form .invalid{border-color:#d9586d!important;box-shadow:0 0 0 3px rgba(217,88,109,.08)!important}
@keyframes dockIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Public portfolio index and individual project pages */
.inner-hero{padding:165px 0 80px;overflow:hidden}.inner-hero::before{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent)}.inner-hero .shell{position:relative;z-index:2}.inner-hero h1{max-width:900px;margin:20px 0 22px;font-size:clamp(58px,8vw,104px);line-height:.92;letter-spacing:-.07em;font-weight:580}.inner-hero p{max-width:660px;margin:0;color:#a5a9b7;font-size:18px;line-height:1.7}.work-page{padding-top:50px}.work-page .showcase-masonry{margin-top:35px}.public-filter-row{display:flex;gap:7px;flex-wrap:wrap}.public-filter-row button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:9px;color:#9599a8;background:rgba(255,255,255,.025);font-size:11px;font-weight:700;cursor:pointer}.public-filter-row button.active{color:#fff;border-color:#54417e;background:#251d3b}.showcase-tile[hidden]{display:none}.project-hero{padding:145px 0 50px}.project-breadcrumb{color:#898e9e;font-size:12px}.project-heading{display:grid;grid-template-columns:1.2fr .55fr;gap:80px;align-items:end;margin-top:35px}.project-heading h1{margin:0;font-size:clamp(56px,7vw,96px);line-height:.92;letter-spacing:-.07em;font-weight:580}.project-heading p{margin:0;color:#a1a5b4;font-size:17px;line-height:1.7}.project-cover{width:min(1400px,calc(100% - 48px));margin:55px auto 0;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#0d1019;box-shadow:0 40px 110px rgba(0,0,0,.38)}.project-cover img{width:100%;height:auto}.project-story{padding:100px 0}.project-story-grid{display:grid;grid-template-columns:.45fr 1fr;gap:90px}.project-facts{position:sticky;top:100px;align-self:start;padding:24px;border:1px solid var(--line);border-radius:17px;background:#10131e}.project-fact{padding:14px 0;border-bottom:1px solid var(--line)}.project-fact:last-child{border:0}.project-fact small{display:block;margin-bottom:6px;color:#626777;font-size:9px;letter-spacing:.14em}.project-fact b,.project-fact a{font-size:13px}.project-fact a{color:#beaef2}.project-narrative section{padding:0 0 50px;margin-bottom:50px;border-bottom:1px solid var(--line)}.project-narrative small{color:var(--violet-2);font-size:10px;letter-spacing:.15em;font-weight:800}.project-narrative h2{margin:15px 0 18px;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.055em}.project-narrative p{margin:0;color:#a8abb8;font-size:18px;line-height:1.8}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}.project-tags span{padding:8px 11px;border:1px solid var(--line);border-radius:8px;color:#9da1af;background:rgba(255,255,255,.02);font-size:11px}.project-next{padding:80px 0;background:#f0eee9;color:#11121a}.project-next-grid{display:flex;align-items:center;justify-content:space-between;gap:35px}.project-next h2{margin:0;font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-.06em}.project-next p{max-width:500px;color:#66666d;font-size:15px}

@media(max-width:900px){.showcase-masonry{columns:2 270px}.project-heading{grid-template-columns:1fr;gap:25px}.project-story-grid{grid-template-columns:1fr;gap:45px}.project-facts{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.project-next-grid{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.showcase-masonry{columns:1}.showcase-tile{margin-bottom:14px;border-radius:18px}.showcase-copy{padding:20px}.showcase-copy h3{font-size:27px}.showcase-copy p{font-size:15px}.showcase-arrow{opacity:1;transform:none;width:40px;height:40px}.showcase-tile figure{transform:none!important}.contact-dock{right:12px;bottom:12px}.dock-label{display:none}.dock-button{width:43px;height:43px}.direct-message{flex:1;justify-content:center;min-width:135px}.inner-hero{padding:125px 0 55px}.inner-hero h1{font-size:50px}.inner-hero p{font-size:16px}.work-page{padding-top:35px}.project-hero{padding:118px 0 30px}.project-heading{margin-top:27px}.project-heading h1{font-size:50px}.project-heading p{font-size:16px}.project-cover{width:calc(100% - 28px);margin-top:35px;border-radius:18px}.project-story{padding:70px 0}.project-facts{grid-template-columns:1fr}.project-narrative p{font-size:16px}.project-next{padding:65px 0}}