/* Shared stylesheet. Project-page rules were moved to assets/css/project.css to prevent cascade conflicts. */
/*
  ALGATRA — shared stylesheet (cleaned)
  Style aktif dirapikan tanpa mengubah tampilan, layout, responsive behavior, atau sistem.
*/
:root { --paper: #f5f3ec; --paper-strong: #eeece2; --surface: #ffffff; --surface-muted: #e9eee8; --ink: #133b31; --ink-soft: #31594d; --ink-muted: #6c8079; --deep: #0a2f25; --deep-2: #0d4234; --line: rgba(19, 59, 49, .16); --line-strong: rgba(19, 59, 49, .36); --lime: #d9f267; --lime-soft: #edf6c1; --clay: #d8794c; --clay-soft: #f3dfd3; --red: #b94f44; --shadow: 0 18px 48px rgba(22, 53, 44, .10); --shadow-small: 0 10px 30px rgba(22, 53, 44, .08); --radius-xl: 32px; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: light; }

:root[data-theme="dark"] { --paper: #0d211b; --paper-strong: #102a22; --surface: #16352b; --surface-muted: #1b4034; --ink: #edf5e9; --ink-soft: #cae0d3; --ink-muted: #a4bcae; --deep: #061b15; --deep-2: #0b2d23; --line: rgba(232, 247, 237, .15); --line-strong: rgba(232, 247, 237, .34); --lime: #d9f267; --lime-soft: #30462c; --clay-soft: #4b3026; --shadow: 0 20px 55px rgba(0, 0, 0, .28); --shadow-small: 0 10px 28px rgba(0, 0, 0, .22); color-scheme: dark; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; padding-top: 78px; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.58; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

button, a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--lime); color: var(--deep); }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.section { padding: clamp(70px, 10vw, 142px) 0; }

.section-alt { background: var(--surface-muted); }

.section-deep { background: var(--deep); color: #eff7f1; }

.section-deep .eyebrow { color: var(--lime); }

.section-deep .section-copy { color: #b9cdc2; }

.skip-link { position: fixed; left: 14px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 8px; background: var(--lime); color: var(--deep); font-weight: 800; transition: top .2s ease; }

.skip-link:focus { top: 14px; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }

.site-header.is-sticky { border-color: var(--line); box-shadow: 0 10px 32px rgba(14, 45, 37, .10); background: color-mix(in srgb, var(--paper) 97%, transparent); }

.nav-shell { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 9px; width: fit-content; min-width: 118px; }

.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; overflow: hidden; }

.brand-mark img { width: 31px; height: 31px; object-fit: contain; }

.brand-word { font: 800 20px/1 var(--display); letter-spacing: -.055em; text-transform: uppercase; color: var(--ink); }

.brand-word b { font-weight: 900; }

.brand-word i { color: var(--clay); font-style: normal; }

.nav-links { display: flex; align-items: center; gap: 3px; margin-left: auto; }

.nav-link { padding: 9px 11px; color: var(--ink-soft); font-size: 14px; font-weight: 650; border-radius: 8px; transition: color .18s ease, background .18s ease; }

.nav-link:hover, .nav-link.is-active { background: var(--surface-muted); color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 9px; }

.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 50%; transition: transform .18s ease, background .18s ease; }

.theme-toggle:hover { background: var(--surface-muted); transform: rotate(12deg); }

.theme-icon { line-height: 1; font-size: 17px; }

.menu-toggle, .nav-mobile-cta { display: none; }

.eyebrow { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 15px; color: var(--ink-soft); font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.eyebrow-light { color: var(--lime); }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.055em; }

h1 { font-size: clamp(2.85rem, 5.6vw, 5.6rem); line-height: .94; font-weight: 850; }

h2 { font-size: clamp(2.15rem, 3.9vw, 4.05rem); line-height: .98; font-weight: 850; }

h3 { font-size: 1.42rem; line-height: 1.05; font-weight: 800; }

.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .64fr); align-items: end; gap: 36px; margin-bottom: clamp(34px, 6vw, 66px); }

.section-heading h2 { max-width: 760px; margin-bottom: 0; }

.section-copy { margin: 0; color: var(--ink-soft); font-size: 1.04rem; }

.text-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 14px; font-weight: 750; transition: gap .2s ease; }

.text-link:hover { gap: 15px; }

.text-link span { color: var(--clay); font-size: 17px; line-height: 1; }

.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 17px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }

.button span { margin-left: 9px; font-size: 18px; line-height: .8; }

.button:hover { transform: translateY(-2px); }

.button-primary { background: var(--ink); color: #fff; box-shadow: 0 9px 20px rgba(19, 59, 49, .16); }

.button-primary:hover { background: var(--deep); box-shadow: 0 13px 26px rgba(19, 59, 49, .20); }

.button-lime { background: var(--lime); color: var(--deep); box-shadow: none; }

.button-lime:hover { background: #e5fa8d; }

.button-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }

.button-ghost:hover { background: var(--surface-muted); }

.hero { position: relative; padding: clamp(48px, 7vw, 92px) 0 clamp(70px, 10vw, 126px); overflow: clip; }

.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(240px, 35vw, 390px); background: radial-gradient(circle at 18% 18%, rgba(217, 242, 103, .20), transparent 38%), radial-gradient(circle at 82% 0%, rgba(216, 121, 76, .12), transparent 32%); pointer-events: none; }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.53fr); align-items: center; gap: clamp(34px, 5vw, 64px); }

.hero-copy { max-width: 520px; }

.hero-kicker-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }

.hero-mini-tag, .hero-mini-note { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 750; letter-spacing: .01em; }

.hero-mini-tag { background: rgba(217, 242, 103, .18); color: var(--deep); border-color: rgba(19, 59, 49, .12); }

.hero-mini-note { color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 66%, transparent); }

.hero-copy h1 { max-width: 11ch; margin: 0 0 18px; font-size: clamp(3.2rem, 5.6vw, 5.35rem); line-height: .93; }

.hero-copy h1 em { color: var(--ink-soft); font-style: normal; }

.hero-copy h1 strong { display: inline-block; color: var(--clay); font-weight: 850; }

.hero-lead { max-width: 520px; margin-bottom: 22px; color: var(--ink-soft); font-size: clamp(1rem, 1.55vw, 1.1rem); line-height: 1.72; }

.hero-service-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }

.hero-service-pills span { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 76%, transparent); color: var(--ink); font-size: 13px; font-weight: 730; }

.hero-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }

.hero-proof-card { padding: 16px 15px 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 10px 24px rgba(22, 53, 44, .05); }

.hero-proof-card strong { display: block; margin-bottom: 7px; font: 800 1rem/1 var(--display); letter-spacing: -.04em; }

.hero-proof-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

.hero-footnote { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--ink-muted); font-size: 12px; font-weight: 650; }

.hero-footnote i { width: 7px; height: 7px; background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; }

.hero-board-wrap { position: relative; padding: 34px 22px 34px 0; }

.hero-board { position: relative; min-height: 550px; border: 1px solid rgba(240, 255, 241, .15); border-radius: calc(var(--radius-xl) + 2px); background: linear-gradient(180deg, #0d382d 0%, var(--deep) 100%); color: white; overflow: hidden; box-shadow: 0 26px 70px rgba(10, 42, 32, .18); }

.hero-floating-card { position: absolute; z-index: 6; max-width: 220px; padding: 16px 17px; border: 1px solid rgba(19, 59, 49, .08); border-radius: 18px; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 18px 36px rgba(13, 46, 36, .12); backdrop-filter: blur(14px); }

.hero-floating-card strong { display: block; margin: 4px 0 6px; font: 800 clamp(1.15rem, 2vw, 1.45rem)/.95 var(--display); letter-spacing: -.04em; }

.hero-floating-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }

.floating-label { display: inline-flex; color: var(--ink-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.hero-floating-card--top { top: 0; right: 0; }

.hero-floating-card--bottom { left: -12px; bottom: 0; }

.hero-board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(228, 255, 231, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(228, 255, 231, .08) 1px, transparent 1px); background-size: 48px 48px; opacity: .72; }

.hero-board::after { content: ""; position: absolute; width: 310px; height: 310px; right: -135px; bottom: -145px; border-radius: 50%; background: var(--lime); opacity: .96; }

.board-topline { position: absolute; z-index: 2; top: 19px; left: 23px; right: 23px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #b9cec0; }

.board-topline i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 15px 0 0 rgba(239, 255, 242, .6), 30px 0 0 rgba(239, 255, 242, .32); }

.board-label { color: var(--lime); }

.board-stage { position: absolute; inset: 56px 23px 99px; z-index: 2; }

.hero-art { position: absolute; transform-origin: center; transition: transform .58s cubic-bezier(.2,.82,.2,1), opacity .42s ease, filter .42s ease; }

.art-web { top: 14px; left: 0; width: 88%; height: 82%; padding: 16px; border-radius: 17px; background: #f6f4ea; color: #0b3026; box-shadow: 18px 24px 0 rgba(2, 14, 10, .27); }

.art-window-bar { display: flex; align-items: center; gap: 4px; height: 18px; margin-bottom: 15px; }

.art-window-bar i { width: 7px; height: 7px; background: #d4d7d0; border-radius: 50%; }

.art-window-bar b { margin-left: auto; color: #759187; font-size: 9px; letter-spacing: .08em; }

.art-web-content { display: grid; grid-template-columns: 52px 1fr; height: calc(100% - 33px); overflow: hidden; border: 1px solid #dbe1d9; border-radius: 10px; background: #fff; }

.art-sidebar { padding: 15px 12px; border-right: 1px solid #dde4dd; background: #eef2ec; }

.art-sidebar i, .art-sidebar b { display: block; height: 7px; margin-bottom: 13px; background: #a7b9ae; border-radius: 2px; }

.art-sidebar i:nth-child(2) { width: 72%; }

.art-sidebar i:nth-child(3) { width: 45%; }

.art-sidebar b { margin-top: 30px; background: #2c805f; }

.art-page { padding: 24px; }

.art-chip { display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .1em; }

.art-title { max-width: 250px; margin: 15px 0 13px; font: 800 clamp(23px, 3vw, 39px)/.92 var(--display); letter-spacing: -.06em; }

.art-lines { display: grid; gap: 7px; max-width: 190px; }

.art-lines i { display: block; height: 6px; border-radius: 5px; background: #d9e0d9; }

.art-lines i:nth-child(2) { width: 71%; }

.art-metrics { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8px; margin-top: 22px; }

.art-metrics i { display: block; min-height: 72px; border-radius: 8px; background: #0f5b43; }

.art-metrics i:last-child { background: var(--clay); }

.art-brand { right: 0; bottom: 8px; width: 52%; height: 62%; padding: 19px; border-radius: 15px; background: var(--lime); color: var(--deep); box-shadow: 14px 18px 0 rgba(2, 14, 10, .25); }

.art-brand::before { content: ""; position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border: 1px solid var(--deep); border-radius: 50%; }

.brand-kicker { margin: 0 0 19px; font-size: 9px; font-weight: 850; letter-spacing: .11em; }

.brand-sentence { margin: 0; max-width: 195px; font: 900 clamp(34px, 4.2vw, 56px)/.80 var(--display); letter-spacing: -.08em; text-transform: uppercase; }

.brand-sentence small { display: inline-block; margin-top: 21px; font: 750 10px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }

.art-photo { right: 7%; bottom: -8px; width: 47%; height: 48%; overflow: hidden; border: 10px solid #e8e2d3; border-radius: 14px; background: #c57348; box-shadow: 13px 14px 0 rgba(2, 14, 10, .23); }

.art-photo::before { content: ""; position: absolute; width: 106%; height: 52%; left: -3%; top: 24%; border-radius: 50%; background: #f1c961; }

.art-photo::after { content: ""; position: absolute; width: 48%; height: 58%; left: 26%; top: 23%; border: 5px solid #563323; border-radius: 47% 47% 39% 39%; box-shadow: inset 0 -23px 0 #4d2d20; }

.photo-stem { position: absolute; z-index: 2; width: 12px; height: 67%; bottom: -20px; left: 38%; background: #335a39; transform: rotate(-15deg); border-radius: 50% 50% 0 0; }

.photo-leaf { position: absolute; z-index: 3; width: 49px; height: 25px; border-radius: 100% 0 100% 0; background: #4c8747; }

.photo-leaf.one { left: 25%; bottom: 46%; transform: rotate(8deg); }

.photo-leaf.two { left: 44%; bottom: 29%; transform: rotate(172deg); }

.photo-tag { position: absolute; z-index: 4; top: 12px; left: 12px; padding: 5px 6px; border-radius: 4px; color: #fff; background: #142e24; font-size: 8px; letter-spacing: .1em; font-weight: 800; }

.hero-board[data-mode="website"] .art-web { z-index: 3; transform: translate(0,0) rotate(-2deg); opacity: 1; }

.hero-board[data-mode="website"] .art-brand { z-index: 2; transform: translate(15px, 16px) rotate(5deg) scale(.9); opacity: .66; filter: saturate(.7); }

.hero-board[data-mode="website"] .art-photo { z-index: 1; transform: translate(-8px, 15px) rotate(5deg) scale(.84); opacity: .56; filter: saturate(.7); }

.hero-board[data-mode="design"] .art-web { z-index: 1; transform: translate(-42px, -3px) rotate(-8deg) scale(.78); opacity: .43; filter: saturate(.65); }

.hero-board[data-mode="design"] .art-brand { z-index: 3; transform: translate(-8px, -12px) rotate(0deg) scale(1.18); opacity: 1; }

.hero-board[data-mode="design"] .art-photo { z-index: 2; transform: translate(-6px, 13px) rotate(7deg) scale(.9); opacity: .72; }

.hero-board[data-mode="photography"] .art-web { z-index: 1; transform: translate(-31px, -21px) rotate(-7deg) scale(.75); opacity: .35; filter: saturate(.6); }

.hero-board[data-mode="photography"] .art-brand { z-index: 2; transform: translate(30px, 15px) rotate(8deg) scale(.79); opacity: .55; filter: saturate(.75); }

.hero-board[data-mode="photography"] .art-photo { z-index: 3; transform: translate(-17px, -7px) rotate(-1deg) scale(1.25); opacity: 1; }

.hero-tabs { position: absolute; z-index: 5; bottom: 18px; left: 23px; right: 23px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; border: 1px solid rgba(236, 251, 239, .17); border-radius: 12px; background: rgba(5, 27, 20, .50); backdrop-filter: blur(10px); }

.hero-tab { min-height: 51px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #c3d7ca; text-align: left; }

.hero-tab span { display: block; margin-bottom: 3px; font-size: 9px; letter-spacing: .11em; font-weight: 800; }

.hero-tab b { font-size: 12px; letter-spacing: .01em; }

.hero-tab.is-active { color: var(--deep); background: var(--lime); }

.client-marquee { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: color-mix(in srgb, var(--paper-strong) 58%, transparent); }

.client-marquee-heading { width: min(1180px, calc(100% - 48px)); margin: 0 auto 13px; color: var(--ink-muted); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.client-marquee-mask { position: relative; overflow: hidden; }

.client-marquee-mask::before, .client-marquee-mask::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: min(18vw, 160px); pointer-events: none; }

.client-marquee-mask::before { left: 0; background: linear-gradient(90deg, var(--paper) 0%, transparent 100%); }

.client-marquee-mask::after { right: 0; background: linear-gradient(270deg, var(--paper) 0%, transparent 100%); }

.client-logo-track { display: flex; align-items: center; gap: 14px; width: max-content; padding-inline: 18px; animation: clientLogoRun 34s linear infinite; }

.client-marquee:hover .client-logo-track { animation-play-state: paused; }

.client-logo-pill { display: grid; place-items: center; min-width: 148px; min-height: 74px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-small); }

.client-logo-placeholder { position: relative; display: block; width: 74px; height: 28px; }

.client-logo-placeholder i { position: absolute; display: block; border-radius: 999px; background: color-mix(in srgb, var(--ink) 80%, white 20%); }

.client-logo-placeholder i:nth-child(1) { left: 0; top: 9px; width: 26px; height: 10px; }

.client-logo-placeholder i:nth-child(2) { left: 18px; top: 0; width: 34px; height: 28px; border-radius: 12px; opacity: .22; }

.client-logo-placeholder i:nth-child(3) { right: 0; top: 9px; width: 18px; height: 10px; opacity: .88; }

.client-logo-placeholder.alt i:nth-child(1) { left: 4px; top: 4px; width: 14px; height: 20px; border-radius: 8px; }

.client-logo-placeholder.alt i:nth-child(2) { left: 26px; top: 4px; width: 14px; height: 20px; border-radius: 8px; opacity: .45; }

.client-logo-placeholder.alt i:nth-child(3) { left: 48px; top: 4px; width: 22px; height: 20px; border-radius: 8px; opacity: .82; }

.client-logo-placeholder.dot i:nth-child(1) { left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; }

.client-logo-placeholder.dot i:nth-child(2) { left: 20px; top: 4px; width: 24px; height: 20px; border-radius: 999px; opacity: .38; }

.client-logo-placeholder.dot i:nth-child(3) { right: 0; top: 9px; width: 24px; height: 10px; }

.client-logo-placeholder.stack i:nth-child(1) { left: 0; top: 3px; width: 54px; height: 9px; }

.client-logo-placeholder.stack i:nth-child(2) { left: 10px; top: 14px; width: 44px; height: 9px; opacity: .52; }

.client-logo-placeholder.stack i:nth-child(3) { left: 22px; top: 25px; width: 34px; height: 3px; opacity: .96; }

.client-logo-placeholder.frame { border: 2px solid color-mix(in srgb, var(--ink) 82%, white 18%); border-radius: 8px; width: 66px; height: 32px; }

.client-logo-placeholder.frame i:nth-child(1) { left: 10px; top: 8px; width: 16px; height: 16px; border-radius: 4px; }

.client-logo-placeholder.frame i:nth-child(2) { left: 32px; top: 9px; width: 22px; height: 5px; opacity: .42; }

.client-logo-placeholder.frame i:nth-child(3) { left: 32px; top: 18px; width: 16px; height: 5px; opacity: .85; }

.client-logo-placeholder.wave i:nth-child(1) { left: 0; top: 8px; width: 18px; height: 12px; border-radius: 14px 14px 4px 14px; }

.client-logo-placeholder.wave i:nth-child(2) { left: 18px; top: 6px; width: 24px; height: 16px; border-radius: 999px; opacity: .55; }

.client-logo-placeholder.wave i:nth-child(3) { left: 44px; top: 8px; width: 24px; height: 12px; border-radius: 14px 14px 14px 4px; opacity: .9; }

@keyframes clientLogoRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.choose-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 5.2vw, 76px); align-items: start; }

.choose-copy { position: sticky; top: 112px; }

.choose-copy h2 { margin-bottom: 19px; max-width: 620px; }

.choose-copy > p { max-width: 520px; color: var(--ink-soft); font-size: 1.02rem; }

.choose-highlight { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }

.choose-highlight span { display: inline-flex; align-items: center; min-height: 35px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; }

.choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

.choose-card { min-height: 255px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 10px 26px rgba(22, 53, 44, .045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }

.choose-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-small); }

.choose-card span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 38px; border-radius: 14px; background: var(--lime); color: var(--deep); font: 850 15px/1 var(--display); }

.choose-card h3 { margin-bottom: 10px; font-size: 1.36rem; }

.choose-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.foundation-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(228, 246, 232, .23); border-left: 1px solid rgba(228, 246, 232, .23); }

.foundation-card { min-height: 282px; padding: 25px 23px; border-right: 1px solid rgba(228, 246, 232, .23); border-bottom: 1px solid rgba(228, 246, 232, .23); transition: background .2s ease; }

.foundation-card:hover { background: rgba(217, 242, 103, .07); }

.foundation-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 36px; border: 1px solid rgba(223, 248, 226, .37); border-radius: 12px; color: var(--lime); font: 850 16px/1 var(--display); }

.foundation-card small { display: block; margin-bottom: 10px; color: var(--lime); font-size: 10px; letter-spacing: .12em; font-weight: 800; }

.foundation-card h3 { margin-bottom: 10px; color: #f1faf2; font-size: 1.45rem; }

.foundation-card p { margin: 0; color: #b9ccc0; font-size: 14px; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.service-card { display: flex; flex-direction: column; min-height: 420px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }

.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-small); }

.service-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; color: var(--ink-muted); font-size: 10px; letter-spacing: .12em; font-weight: 850; }

.service-label b { color: var(--clay); }

.service-art { position: relative; height: 165px; margin-bottom: 24px; overflow: hidden; border-radius: 14px; }

.service-web .service-art { background: #123c31; }

.service-web .service-art::before { content: ""; position: absolute; width: 72%; height: 65%; right: 8%; bottom: 0; border: 8px solid #f4f3ea; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -13px 0 rgba(220, 242, 103, .95); }

.service-web .service-art::after { content: ""; position: absolute; width: 42%; height: 7px; right: 22%; top: 39%; border-radius: 5px; background: #eff5ed; box-shadow: 0 17px 0 #b9cfbf, -32px 35px 0 6px #d9f267; }

.service-design .service-art { background: var(--lime); }

.service-design .service-art::before { content: ""; position: absolute; left: 15%; top: 13%; width: 51%; height: 100%; background: #0d392d; transform: rotate(-12deg); }

.service-design .service-art::after { content: "CLOSE THE GAP"; position: absolute; right: 9%; top: 19%; max-width: 55%; color: #f6f7eb; font: 900 26px/.78 var(--display); letter-spacing: -.06em; }

.service-photo .service-art { background: #c8754d; }

.service-photo .service-art::before { content: ""; position: absolute; right: 13%; bottom: -27%; width: 55%; height: 105%; border-radius: 50% 50% 43% 43%; background: #fff1c1; box-shadow: -60px -9px 0 #edcc5f; }

.service-photo .service-art::after { content: ""; position: absolute; left: 25%; top: 22%; width: 17%; height: 78%; background: #2d5c3d; border-radius: 50% 50% 0 0; transform: rotate(-19deg); box-shadow: 48px 22px 0 -4px #4b874a, 76px -16px 0 -5px #4b874a; }

.service-card h3 { margin: 0 0 10px; }

.service-card p { margin: 0 0 22px; color: var(--ink-soft); font-size: 14px; }

.service-card .text-link { margin-top: auto; }

.selected-work-section { position: relative; overflow: clip; }

.selected-work-heading { margin-bottom: 22px; }

.showcase-scene { --ambient-a: hsla(3 75% 57% / .28); --ambient-b: hsla(205 72% 58% / .18); --ambient-c: hsla(82 72% 56% / .14); position: relative; isolation: isolate; padding: 12px 0 8px; }

.scene-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(72px); pointer-events: none; opacity: .95; transition: background .55s ease, transform .7s ease, opacity .45s ease; animation: ambientFloat 10s ease-in-out infinite; }

.scene-glow-a { left: -4%; top: 14%; width: 260px; height: 260px; background: radial-gradient(circle, var(--ambient-a) 0%, transparent 70%); }

.scene-glow-b { right: -3%; top: 2%; width: 300px; height: 300px; background: radial-gradient(circle, var(--ambient-b) 0%, transparent 72%); animation-delay: -3s; }

.scene-glow-c { left: 36%; bottom: -6%; width: 280px; height: 280px; background: radial-gradient(circle, var(--ambient-c) 0%, transparent 72%); animation-delay: -6s; }

@keyframes ambientFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(10px, -14px, 0) scale(1.08); } }

.showcase-slider { position: relative; z-index: 1; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }

.showcase-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }

.showcase-top p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 13px; }

.work-slider-controls { display: flex; gap: 7px; }

.work-slider-controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); font-weight: 850; backdrop-filter: blur(14px); transition: transform .18s ease, background .18s ease, opacity .18s ease; }

.work-slider-controls button:hover { transform: translateY(-2px); background: var(--lime); color: var(--deep); }

.work-slider-controls button:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.showcase-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 4px 14px; }

.showcase-viewport::-webkit-scrollbar { display: none; }

.showcase-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 25.8%); gap: 18px; }

.showcase-card { --project-accent: var(--deep-2); --project-glow: rgba(217, 242, 103, .18); position: relative; display: flex; flex-direction: column; min-height: 392px; padding: 100px 22px 22px; border-radius: 30px; scroll-snap-align: start; overflow: hidden; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--project-accent) 94%, white 6%) 0%, color-mix(in srgb, var(--project-accent) 78%, #07120d 22%) 60%, #07110d 100%); box-shadow: 0 18px 40px rgba(8, 21, 16, .16); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; isolation: isolate; }

.showcase-card::before { content: ""; position: absolute; inset: auto -18% -28% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--project-glow) 0%, transparent 70%); opacity: .92; }

.showcase-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 30%, transparent 70%, rgba(255,255,255,.06)); opacity: .34; pointer-events: none; }

.showcase-card:hover, .showcase-card.is-active { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(8, 21, 16, .24); }

.showcase-index { position: absolute; right: 18px; top: 10px; color: rgba(255,255,255,.17); font: 900 clamp(3.8rem, 5.4vw, 5rem)/1 var(--display); letter-spacing: -.08em; z-index: 1; }

.showcase-logo-orb { position: absolute; left: 20px; top: 14px; z-index: 2; display: grid; place-items: center; width: 104px; height: 104px; padding: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: radial-gradient(circle at 28% 26%, rgba(255,255,255,.98), rgba(255,255,255,.45) 52%, rgba(255,255,255,.16) 100%); box-shadow: 0 16px 28px rgba(0,0,0,.18); backdrop-filter: blur(12px); overflow: hidden; }

.showcase-logo-orb img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .24s ease; }

.showcase-logo-orb.has-image img { opacity: 1; }

.showcase-logo-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--project-accent) 75%, #0a0d0b 25%); font: 900 1.75rem/1 var(--display); letter-spacing: -.06em; text-transform: uppercase; }

.showcase-logo-orb.has-image .showcase-logo-fallback { opacity: 0; }

.showcase-body { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; margin-top: 18px; }

.showcase-body small { display: block; margin-bottom: 10px; color: rgba(247, 255, 247, .76); font-size: 10px; letter-spacing: .13em; font-weight: 850; text-transform: uppercase; }

.showcase-body h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.58rem, 2.1vw, 1.95rem); }

.showcase-body p { margin: 0; color: rgba(232, 243, 236, .92); font-size: 14px; line-height: 1.6; }

.showcase-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-top: auto; padding-top: 20px; color: #fff; font-size: 13px; font-weight: 800; }

.showcase-link b { color: var(--lime); font-size: 16px; line-height: 1; }

.impact-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 26px; align-items: end; margin-bottom: 26px; }

.impact-header h2 { max-width: 680px; margin-bottom: 0; }

.impact-header p { max-width: 520px; margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

.impact-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(22px, 4vw, 34px); align-items: stretch; }

.impact-board { display: grid; gap: 12px; }

.impact-problem-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-small); }

.impact-problem-card span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--lime); color: var(--deep); font: 850 15px/1 var(--display); }

.impact-problem-card h3 { margin: 0 0 8px; font-size: 1.32rem; }

.impact-problem-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.traction-panel { position: relative; padding: clamp(24px, 4.4vw, 42px); border-radius: var(--radius-xl); overflow: hidden; background: var(--deep); color: #f6fbf5; box-shadow: var(--shadow); }

.traction-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 18% 12%, rgba(217,242,103,.22), transparent 28%), linear-gradient(rgba(228,255,231,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(228,255,231,.07) 1px, transparent 1px); background-size: auto, 42px 42px, 42px 42px; opacity: .92; }

.traction-panel > * { position: relative; z-index: 1; }

.traction-label { display: inline-flex; margin-bottom: 27px; color: var(--lime); font-size: 11px; letter-spacing: .13em; font-weight: 850; text-transform: uppercase; }

.traction-grid { display: grid; gap: 13px; }

.traction-grid article { padding: 17px; border: 1px solid rgba(240,255,241,.17); border-radius: 18px; background: rgba(255,255,255,.045); }

.traction-grid strong { display: block; margin-bottom: 6px; color: var(--lime); font: 900 clamp(2.6rem, 5vw, 4.2rem)/.85 var(--display); letter-spacing: -.08em; }

.traction-grid p { margin: 0; color: #c7dacd; font-size: 13px; }

.traction-note { margin: 18px 0 0; color: #9fb6a8; font-size: 11px; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }

.process-card { position: relative; min-height: 245px; padding: 23px 20px 22px 0; border-right: 1px solid var(--line); }

.process-card:not(:first-child) { padding-left: 20px; }

.process-card:last-child { border-right: 0; }

.process-card > span { display: block; margin-bottom: 58px; color: var(--clay); font-size: 11px; letter-spacing: .11em; font-weight: 850; }

.process-card h3 { margin-bottom: 9px; font-size: 1.35rem; }

.process-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

.package-card { display: flex; flex-direction: column; min-height: 410px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }

.package-card.featured { border-color: var(--ink); color: #f4f9f4; background: var(--ink); box-shadow: var(--shadow); }

.package-card .package-label { margin-bottom: 35px; color: var(--ink-muted); font-size: 10px; letter-spacing: .11em; font-weight: 850; }

.package-card.featured .package-label { color: var(--lime); }

.package-card h3 { margin-bottom: 7px; font-size: 2rem; }

.package-card > p { color: var(--ink-soft); font-size: 14px; }

.package-card.featured > p { color: #c6d6ca; }

.package-price { margin: 22px 0 26px; font: 860 clamp(2rem, 3vw, 2.7rem)/.9 var(--display); letter-spacing: -.075em; }

.package-price small { display: block; margin-bottom: 5px; color: var(--ink-muted); font: 800 10px/1 var(--body); letter-spacing: .11em; text-transform: uppercase; }

.package-card.featured .package-price small { color: #b6cabe; }

.package-features { display: grid; gap: 10px; margin: 0 0 25px; padding: 0; list-style: none; }

.package-features li { position: relative; padding-left: 17px; color: var(--ink-soft); font-size: 13px; }

.package-card.featured .package-features li { color: #d0dfd3; }

.package-features li::before { content: ""; position: absolute; top: .54em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

.package-card .button { margin-top: auto; }

.package-card.featured .button-primary { background: var(--lime); color: var(--deep); }

.package-card.featured .button-primary:hover { background: #e6fa8c; }

.package-note { margin-top: 18px; color: var(--ink-muted); font-size: 12px; }

.cta-wrap { padding-top: 0; }

.cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 25px; padding: clamp(27px, 5vw, 56px); border-radius: var(--radius-xl); background: var(--lime); color: var(--deep); overflow: hidden; position: relative; }

.cta-card::after { content: ""; position: absolute; right: -57px; top: -100px; width: 300px; height: 300px; border: 1px solid var(--deep); border-radius: 50%; opacity: .34; box-shadow: 0 0 0 32px rgba(15, 57, 45, .10), 0 0 0 65px rgba(15, 57, 45, .08); }

.cta-card > * { position: relative; z-index: 1; }

.cta-card h2 { max-width: 700px; margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); }

.cta-card .eyebrow { color: var(--deep); }

.cta-card .button { background: var(--deep); color: #fff; }

.page-hero { position: relative; padding: clamp(64px, 10vw, 122px) 0 clamp(68px, 9vw, 116px); background: var(--deep); color: #f4faf4; overflow: hidden; }

.page-hero::before { content: ""; position: absolute; right: max(4vw, 26px); bottom: -160px; width: min(42vw, 480px); height: min(42vw, 480px); border: 1px solid rgba(230, 251, 233, .34); border-radius: 50%; box-shadow: 0 0 0 36px rgba(217,242,103,.07), 0 0 0 73px rgba(217,242,103,.05); }

.page-hero::after { content: ""; position: absolute; right: 8%; top: 26px; width: 190px; height: 190px; border-radius: 50%; background: var(--lime); mix-blend-mode: screen; opacity: .18; filter: blur(1px); }

.page-hero-inner { position: relative; z-index: 1; max-width: 850px; }

.page-hero h1 { max-width: 810px; margin: 0 0 22px; color: #fff; }

.page-hero h1 span, .page-hero h1 em { color: var(--lime); font-style: normal; }

.page-hero p:last-child { max-width: 610px; margin: 0; color: #bcd1c4; font-size: 1.04rem; }

.faq-list { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item button { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 21px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: 780 1.12rem/1.2 var(--display); letter-spacing: -.03em; }

.faq-item button span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; font: 700 20px/1 var(--body); transition: transform .2s ease, background .2s ease; }

.faq-item.is-open button span { transform: rotate(45deg); background: var(--lime); color: var(--deep); border-color: var(--lime); }

.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }

.faq-answer > div { overflow: hidden; }

.faq-answer p { margin: 0 45px 21px 0; color: var(--ink-soft); }

.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

.contact-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(35px, 7vw, 104px); align-items: start; }

.contact-intro { position: sticky; top: 104px; }

.contact-intro h2 { margin-bottom: 17px; }

.contact-intro > p { color: var(--ink-soft); }

.contact-list { display: grid; gap: 9px; margin-top: 28px; }

.contact-method { display: grid; grid-template-columns: 37px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }

.contact-method > span { display: grid; place-items: center; width: 34px; height: 34px; background: var(--surface-muted); border-radius: 50%; color: var(--ink); font-weight: 900; }

.contact-method small { display: block; margin-bottom: 2px; color: var(--ink-muted); font-size: 9px; letter-spacing: .11em; font-weight: 800; }

.contact-method strong { font-size: 13px; word-break: break-word; }

.contact-method b { color: var(--clay); font-size: 20px; }

.contact-method:hover strong { text-decoration: underline; }

.contact-notice { display: flex; gap: 10px; margin-top: 31px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); font-size: 13px; }

.contact-notice > span { color: var(--clay); font-size: 18px; line-height: 1; }

.project-form { padding: clamp(24px, 5vw, 45px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-small); }

.form-heading { margin-bottom: 26px; }

.form-heading h2 { margin: 0; font-size: clamp(2rem, 3.3vw, 3.1rem); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.field { display: grid; gap: 7px; margin-bottom: 15px; color: var(--ink); font-size: 12px; font-weight: 800; }

.field > span { color: var(--ink-soft); }

.field-full { grid-column: 1 / -1; }

.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); outline: 0; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }

.field textarea { min-height: 145px; resize: vertical; }

.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 62%, transparent); }

.form-note { margin: 13px 0 0; color: var(--ink-muted); font-size: 12px; }

.site-footer { padding: 66px 0 20px; background: var(--deep); color: #fff; }

.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .65fr); gap: 30px; padding-bottom: 51px; }

.site-footer .brand-word { color: #fff; }

.site-footer .brand-word i { color: var(--lime); }

.footer-brand > p { max-width: 320px; margin: 17px 0 21px; color: #b9ccc0; font-size: 13px; }

.footer-socials { display: flex; gap: 7px; }

.footer-socials a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(236,250,238,.27); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 850; transition: color .18s ease, background .18s ease; }

.footer-socials a:hover { background: var(--lime); color: var(--deep); border-color: var(--lime); }

.footer-col { display: grid; align-content: start; gap: 8px; }

.footer-col h3 { margin: 0 0 8px; color: #fff; font: 780 13px/1.1 var(--body); letter-spacing: .08em; text-transform: uppercase; }

.footer-col a { color: #b7cbbd; font-size: 13px; }

.footer-col a:hover { color: var(--lime); }

.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(236,250,238,.18); color: #9aafa2; font-size: 11px; }

.footer-bottom p { margin: 0; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .62s ease, transform .62s cubic-bezier(.2,.75,.2,1); }

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: .1s; }

.reveal-delay-2 { transition-delay: .18s; }

:root[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); }

:root[data-theme="dark"] .site-header.is-sticky { background: color-mix(in srgb, var(--paper) 98%, transparent); box-shadow: 0 10px 32px rgba(0,0,0,.32); }

:root[data-theme="dark"] .button-primary { background: var(--lime); color: var(--deep); box-shadow: none; }

:root[data-theme="dark"] .button-primary:hover { background: #e7fa8b; }

:root[data-theme="dark"] .button-ghost:hover, :root[data-theme="dark"] .theme-toggle:hover, :root[data-theme="dark"] .nav-link:hover, :root[data-theme="dark"] .nav-link.is-active { background: rgba(255,255,255,.06); }

:root[data-theme="dark"] .nav-mobile-cta { background: var(--lime); color: var(--deep); }

:root[data-theme="dark"] .package-card.featured { background: var(--deep); border-color: rgba(217,242,103,.46); color: #f6fbf5; }

:root[data-theme="dark"] .package-card.featured h3 { color: #f6fbf5; }

:root[data-theme="dark"] .client-logo-pill, :root[data-theme="dark"] .choose-card, :root[data-theme="dark"] .impact-problem-card, :root[data-theme="dark"] .showcase-slider { background: var(--surface); }

:root[data-theme="dark"] .client-marquee-mask::before { background: linear-gradient(90deg, var(--paper) 0%, transparent 100%); }

:root[data-theme="dark"] .client-marquee-mask::after { background: linear-gradient(270deg, var(--paper) 0%, transparent 100%); }

:root[data-theme="dark"] .art-web { background: #e7eadf; }

:root[data-theme="dark"] .art-web-content { background: #f8faf2; }

:root[data-theme="dark"] .work-slider-controls button { background: rgba(255,255,255,.04); }

:root[data-theme="dark"] .showcase-card { box-shadow: 0 18px 42px rgba(0,0,0,.28); }

:root[data-theme="dark"] .work-slider-controls button { background: rgba(255,255,255,.05); }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 30px; }

  .hero-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-board-wrap { padding-right: 0; }

  .foundation-grid { grid-template-columns: repeat(2, 1fr); }

  .showcase-track { grid-auto-columns: minmax(270px, 36%); }

  .footer-grid { grid-template-columns: 1.3fr repeat(2, 1fr); }

  .footer-brand { grid-column: span 3; }

}

@media (max-width: 820px) {
  .container { width: min(100% - 34px, 660px); }

  .nav-shell { min-height: 70px; }

  .nav-cta { display: none; }

  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; }

  .menu-toggle span { width: 15px; height: 1.5px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

  .menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }

  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }

  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-links { position: fixed; z-index: 75; inset: 70px 0 auto; display: grid; gap: 7px; padding: 19px 17px 24px; border-bottom: 1px solid var(--line); background: var(--paper); transform: translateY(-125%); opacity: 0; pointer-events: none; transition: transform .24s ease, opacity .2s ease; box-shadow: var(--shadow-small); }

  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

  .nav-link { padding: 13px 11px; }

  .nav-mobile-cta { display: inline-flex; justify-content: space-between; align-items: center; padding: 13px 12px; margin-top: 8px; border-radius: 9px; color: #fff; background: var(--ink); font-size: 14px; font-weight: 800; }

  .nav-mobile-cta span { color: var(--lime); font-size: 18px; }

  .hero-grid, .choose-layout, .impact-stage, .faq-layout, .contact-layout { grid-template-columns: 1fr; }

  .impact-header { grid-template-columns: 1fr; }

  .choose-copy, .faq-intro { position: static; }

  .choose-grid { grid-template-columns: repeat(2, 1fr); }

  .showcase-track { grid-auto-columns: minmax(270px, 64%); }

  .hero-copy { max-width: 100%; }

  .hero-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero-board-wrap { padding: 24px 0 38px; }

  .hero-floating-card--top { right: 6px; }

  .hero-floating-card--bottom { left: 8px; }

  .hero-board { min-height: min(490px, 90vw); max-height: 520px; }

  .section-heading { grid-template-columns: 1fr; gap: 16px; }

  .section-heading .section-copy { max-width: 560px; }

  .contact-intro { position: static; }

  .process-grid { grid-template-columns: repeat(2, 1fr); }

  .process-card:nth-child(2) { border-right: 0; }

  .process-card:nth-child(n/**/+3) { border-top: 1px solid var(--line); }

  .process-card:nth-child(3) { padding-left: 0; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-brand { grid-column: span 2; }

}

@media (max-width: 610px) {
  body { font-size: 15px; padding-top: 70px; }

  .container { width: min(100% - 30px, 500px); }

  h1 { font-size: clamp(2.55rem, 13vw, 4.15rem); }

  h2 { font-size: clamp(2rem, 10vw, 3.1rem); }

  .hero { padding-top: 33px; }

  .hero-kicker-row { gap: 8px; margin-bottom: 16px; }

  .hero-copy h1 { max-width: 12ch; font-size: clamp(2.8rem, 13vw, 4.55rem); }

  .hero-lead { margin-bottom: 20px; }

  .hero-service-pills { margin-bottom: 22px; }

  .hero-proof-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }

  .button-row { align-items: stretch; }

  .button-row .button { flex: 1 1 170px; }

  .hero-footnote { margin-top: 25px; }

  .hero-board { min-height: 388px; }

  .board-stage { inset: 50px 14px 81px; }

  .board-topline { top: 14px; left: 16px; right: 16px; }

  .art-web { padding: 10px; border-radius: 12px; }

  .art-window-bar { margin-bottom: 9px; }

  .art-web-content { grid-template-columns: 40px 1fr; }

  .art-sidebar { padding: 10px 9px; }

  .art-page { padding: 14px; }

  .art-title { margin: 11px 0 9px; font-size: 25px; }

  .art-metrics { margin-top: 14px; }

  .art-metrics i { min-height: 48px; }

  .art-brand { padding: 13px; }

  .brand-kicker { margin-bottom: 13px; }

  .brand-sentence { font-size: 34px; }

  .art-photo { border-width: 7px; }

  .hero-tabs { bottom: 13px; left: 14px; right: 14px; }

  .hero-tab { min-height: 44px; padding: 5px 6px; }

  .hero-tab span { font-size: 8px; }

  .hero-tab b { font-size: 10px; }

  .hero-floating-card { position: static; max-width: none; margin: 0 0 12px; }

  .hero-board-wrap { padding: 0; }

  .client-marquee { padding: 16px 0; }

  .client-marquee-heading { width: min(100% - 30px, 500px); }

  .client-logo-pill { min-width: 138px; min-height: 56px; font-size: 15px; }

  .choose-grid { grid-template-columns: 1fr; }

  .choose-card { min-height: 210px; }

  .choose-card span { margin-bottom: 26px; }

  .impact-problem-card, .traction-panel { padding: 22px; }

  .showcase-top { align-items: flex-start; flex-direction: column; }

  .showcase-track { grid-auto-columns: minmax(250px, 84%); }

  .scene-glow { filter: blur(56px); }

  .showcase-card { min-height: 370px; padding-top: 92px; }

  .showcase-logo-orb { width: 92px; height: 92px; }

  .faq-layout { gap: 18px; }

  .foundation-grid, .service-grid, .package-grid { grid-template-columns: 1fr; }

  .foundation-card { min-height: 216px; }

  .foundation-icon { margin-bottom: 25px; }

  .service-card { min-height: 390px; }

  .process-grid { grid-template-columns: 1fr; }

  .process-card, .process-card:not(:first-child) { min-height: 180px; padding: 19px 0; border-right: 0; border-top: 1px solid var(--line); }

  .process-card:first-child { border-top: 0; }

  .process-card > span { margin-bottom: 30px; }

  .cta-card { grid-template-columns: 1fr; align-items: start; }

  .cta-card .button { width: fit-content; }

  .page-hero { padding: 61px 0 69px; }

  .page-hero::after { width: 130px; height: 130px; }

  .form-grid { grid-template-columns: 1fr; }

  .field-full { grid-column: auto; }

  .faq-answer p { margin-right: 0; }

  .footer-grid { grid-template-columns: 1fr; }

  .footer-brand { grid-column: auto; }

  .footer-bottom { flex-direction: column; gap: 5px; }

}

@media (max-width: 610px) {
  body { font-size: 14px; line-height: 1.54; padding-top: 66px; }

  .container { width: min(100% - 28px, 480px); }

  .section { padding: 54px 0; }

  .section-heading { margin-bottom: 26px; gap: 12px; }

  .section-heading h2, .choose-copy h2, .impact-header h2, .faq-intro h2 { max-width: 100%; }

  h1 { font-size: clamp(2.25rem, 11.2vw, 3.35rem); line-height: .96; letter-spacing: -.06em; }

  h2 { font-size: clamp(1.82rem, 8.6vw, 2.55rem); line-height: 1; letter-spacing: -.055em; }

  h3 { font-size: 1.16rem; }

  .eyebrow { margin-bottom: 11px; font-size: 9.5px; letter-spacing: .12em; }

  .eyebrow::before { width: 18px; }

  .button { min-height: 42px; padding: 10px 13px; border-radius: 9px; font-size: 12.5px; }

  .button span { font-size: 15px; }

  .nav-shell { min-height: 66px; }

  .brand-mark, .brand-mark img { width: 27px; height: 27px; }

  .brand-word { font-size: 17px; }

  .theme-toggle, .menu-toggle { width: 35px; height: 35px; }

  .nav-links { inset: 66px 0 auto; padding: 14px 14px 18px; }

  .hero { padding: 24px 0 48px; }

  .hero-grid { gap: 24px; }

  .hero-copy h1 { margin-bottom: 16px; }

  .hero-lead { max-width: 100%; margin-bottom: 20px; font-size: .95rem; }

  .button-row { gap: 8px; }

  .button-row .button { flex: 1 1 145px; }

  .hero-footnote { margin-top: 18px; font-size: 11px; line-height: 1.45; }

  .hero-board { min-height: 318px; border-radius: 22px; }

  .board-topline { top: 12px; left: 14px; right: 14px; font-size: 8px; }

  .board-label { display: none; }

  .board-stage { inset: 43px 12px 73px; }

  .art-web { width: 86%; height: 78%; padding: 8px; border-radius: 11px; }

  .art-window-bar { height: 14px; margin-bottom: 8px; }

  .art-window-bar b { font-size: 7px; }

  .art-web-content { grid-template-columns: 34px 1fr; }

  .art-sidebar { padding: 9px 7px; }

  .art-page { padding: 12px; }

  .art-chip { font-size: 7px; }

  .art-title { font-size: 22px; }

  .art-metrics { gap: 6px; margin-top: 12px; }

  .art-metrics i { min-height: 40px; }

  .art-brand { width: 50%; height: 58%; padding: 11px; }

  .brand-sentence { font-size: 29px; }

  .brand-sentence small { margin-top: 13px; font-size: 8px; }

  .art-photo { width: 44%; height: 44%; border-width: 6px; }

  .hero-tabs { bottom: 11px; left: 12px; right: 12px; gap: 4px; }

  .hero-tab { min-height: 39px; padding: 5px; }

  .hero-tab span { margin-bottom: 1px; font-size: 7px; }

  .hero-tab b { font-size: 9px; }

  .client-marquee { padding: 13px 0; }

  .client-marquee-heading { margin-bottom: 9px; font-size: 8.5px; }

  .client-logo-track { gap: 8px; padding-inline: 12px; }

  .client-logo-pill { min-width: 106px; min-height: 46px; padding: 9px 12px; border-radius: 15px; box-shadow: none; }

  .client-logo-placeholder { transform: scale(.75); }

  .choose-layout { gap: 24px; }

  .choose-copy > p, .section-copy, .impact-header p, .faq-intro p:last-child { font-size: .94rem; }

  .choose-highlight { gap: 6px; margin-top: 18px; }

  .choose-highlight span { min-height: 30px; padding: 7px 10px; font-size: 11px; }

  .choose-grid { gap: 10px; }

  .choose-card { min-height: auto; padding: 17px; border-radius: 17px; }

  .choose-card span { width: 36px; height: 36px; margin-bottom: 20px; border-radius: 11px; font-size: 12px; }

  .choose-card h3 { margin-bottom: 7px; font-size: 1.14rem; }

  .choose-card p { font-size: 13px; }

  .foundation-card { min-height: auto; padding: 18px; }

  .foundation-icon { width: 40px; height: 40px; margin-bottom: 20px; }

  .service-grid, .package-grid, .process-grid { gap: 10px; }

  .service-card, .package-card { min-height: auto; padding: 18px; border-radius: 17px; }

  .service-art { height: 128px; margin-bottom: 17px; border-radius: 12px; }

  .service-card p, .package-card > p, .package-features li { font-size: 13px; }

  .selected-work-heading { margin-bottom: 18px; }

  .showcase-scene { padding: 4px 0 0; }

  .scene-glow { filter: blur(44px); opacity: .72; }

  .showcase-top { gap: 10px; margin-bottom: 12px; }

  .showcase-top p { max-width: 100%; font-size: 12px; line-height: 1.55; }

  .work-slider-controls button { width: 36px; height: 36px; }

  .showcase-viewport { padding: 6px 2px 10px; }

  .showcase-track { grid-auto-columns: minmax(224px, 78%); gap: 12px; }

  .showcase-card { min-height: 314px; padding: 76px 16px 17px; border-radius: 22px; }

  .showcase-index { right: 14px; top: 8px; font-size: 3.1rem; }

  .showcase-logo-orb { left: 15px; top: 13px; width: 70px; height: 70px; padding: 11px; }

  .showcase-logo-fallback { font-size: 1.35rem; }

  .showcase-body { margin-top: 12px; }

  .showcase-body small { margin-bottom: 7px; font-size: 8.2px; letter-spacing: .1em; }

  .showcase-body h3 { margin-bottom: 7px; font-size: 1.35rem; }

  .showcase-body p { font-size: 12.5px; line-height: 1.55; }

  .showcase-link { padding-top: 14px; font-size: 12px; }

  .impact-header { gap: 12px; margin-bottom: 18px; }

  .impact-stage { gap: 12px; }

  .impact-board { gap: 9px; }

  .impact-problem-card { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; border-radius: 17px; }

  .impact-problem-card span { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }

  .impact-problem-card h3 { margin-bottom: 6px; font-size: 1.12rem; }

  .impact-problem-card p { font-size: 13px; }

  .traction-panel { padding: 18px; border-radius: 20px; }

  .traction-label { margin-bottom: 16px; font-size: 9.5px; }

  .traction-grid { gap: 9px; }

  .traction-grid article { padding: 13px; border-radius: 14px; }

  .traction-grid strong { font-size: clamp(2rem, 12vw, 3rem); }

  .traction-grid p, .traction-note { font-size: 11.5px; }

  .process-card, .process-card:not(:first-child) { min-height: auto; padding: 16px 0; }

  .process-card > span { margin-bottom: 18px; font-size: 9.5px; }

  .package-card .package-label { margin-bottom: 20px; }

  .package-price { margin: 17px 0 20px; font-size: clamp(1.8rem, 11vw, 2.35rem); }

  .faq-layout { gap: 12px; }

  .faq-item button { padding: 17px 0; font-size: 1rem; }

  .faq-item button span { width: 25px; height: 25px; font-size: 18px; }

  .faq-answer p { margin-bottom: 17px; font-size: 13px; }

  .cta-card { padding: 22px; border-radius: 22px; }

  .cta-card h2 { font-size: clamp(1.9rem, 9vw, 2.65rem); }

  .site-footer { padding: 46px 0 18px; }

  .footer-grid { gap: 20px; padding-bottom: 34px; }

}

@media (max-width: 390px) {
  .container { width: min(100% - 24px, 360px); }

  h1 { font-size: clamp(2.05rem, 10.8vw, 2.8rem); }

  h2 { font-size: clamp(1.65rem, 8.4vw, 2.25rem); }

  .hero-board { min-height: 292px; }

  .button-row .button { flex-basis: 100%; }

  .choose-card, .service-card, .package-card, .impact-problem-card { padding: 15px; }

  .showcase-track { grid-auto-columns: minmax(212px, 82%); }

  .showcase-card { min-height: 300px; }

}

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

}

body[data-page="about"] .about-clean-story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); gap: clamp(30px, 5.5vw, 78px); align-items: start; }

body[data-page="about"] .about-clean-story-copy h2 { max-width: 690px; margin-bottom: 18px; font-size: clamp(2.15rem, 3.7vw, 3.75rem); }

body[data-page="about"] .about-clean-story-copy p { max-width: 650px; color: var(--ink-soft); }

body[data-page="about"] .about-clean-problems { display: grid; gap: 12px; }

body[data-page="about"] .about-clean-problems article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-small); }

body[data-page="about"] .about-clean-problems span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--lime); color: var(--deep); font: 850 14px/1 var(--display); }

body[data-page="about"] .about-clean-problems h3 { margin: 0 0 7px; font-size: 1.24rem; }

body[data-page="about"] .about-clean-problems p { margin: 0; color: var(--ink-soft); font-size: 14px; }

body[data-page="about"] .about-clean-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }

body[data-page="about"] .about-clean-values article { min-height: 258px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 26px rgba(22, 53, 44, .045); }

body[data-page="about"] .about-clean-values article:nth-child(2) { background: var(--ink); border-color: var(--ink); color: #fff; }

body[data-page="about"] .about-clean-values small { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 46px; border-radius: 13px; background: var(--lime); color: var(--deep); font: 850 14px/1 var(--display); }

body[data-page="about"] .about-clean-values h3 { margin-bottom: 10px; font-size: 1.26rem; }

body[data-page="about"] .about-clean-values p { margin: 0; color: var(--ink-soft); font-size: 14px; }

body[data-page="about"] .about-clean-values article:nth-child(2) p { color: #c5d8cb; }

body[data-page="about"] .about-clean-services-section { background: var(--deep); color: #f6fbf5; }

body[data-page="about"] .about-clean-services-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: start; }

body[data-page="about"] .about-clean-services-head { position: sticky; top: 112px; }

body[data-page="about"] .about-clean-services-head .eyebrow { color: var(--lime); }

body[data-page="about"] .about-clean-services-head h2 { max-width: 520px; color: #fff; margin-bottom: 16px; }

body[data-page="about"] .about-clean-services-head p { max-width: 460px; color: #b9ccc0; }

body[data-page="about"] .about-clean-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(228, 246, 232, .23); border-left: 1px solid rgba(228, 246, 232, .23); }

body[data-page="about"] .about-clean-services article { min-height: 240px; padding: 24px; border-right: 1px solid rgba(228, 246, 232, .23); border-bottom: 1px solid rgba(228, 246, 232, .23); }

body[data-page="about"] .about-clean-services span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 38px; border: 1px solid rgba(223, 248, 226, .34); border-radius: 13px; color: var(--lime); font: 850 14px/1 var(--display); }

body[data-page="about"] .about-clean-services h3 { color: #fff; margin-bottom: 10px; font-size: 1.3rem; }

body[data-page="about"] .about-clean-services p { margin: 0; color: #b9ccc0; font-size: 14px; }

body[data-page="about"] .about-clean-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }

body[data-page="about"] .about-clean-process article { min-height: 242px; padding: 23px 18px 20px 0; border-right: 1px solid var(--line); }

body[data-page="about"] .about-clean-process article:not(:first-child) { padding-left: 18px; }

body[data-page="about"] .about-clean-process article:last-child { border-right: 0; }

body[data-page="about"] .about-clean-process span { display: block; margin-bottom: 54px; color: var(--clay); font-size: 11px; letter-spacing: .11em; font-weight: 850; text-transform: uppercase; }

body[data-page="about"] .about-clean-process h3 { margin-bottom: 9px; font-size: 1.28rem; }

body[data-page="about"] .about-clean-process p { margin: 0; color: var(--ink-soft); font-size: 14px; }

body[data-page="about"] .about-clean-location { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: center; padding: clamp(26px, 5vw, 50px); border-radius: 28px; background: radial-gradient(circle at 88% 18%, rgba(217, 242, 103, .33), transparent 25%), var(--ink); color: #fff; }

body[data-page="about"] .about-clean-location .eyebrow { color: var(--lime); }

body[data-page="about"] .about-clean-location h2 { color: #fff; margin: 0; }

body[data-page="about"] .about-clean-location p { margin: 0; color: #b9ccc0; }

:root[data-theme="dark"] body[data-page="about"] .about-clean-problems article, :root[data-theme="dark"] body[data-page="about"] .about-clean-values article { background: var(--surface); }

:root[data-theme="dark"] body[data-page="about"] .about-clean-values article:nth-child(2) { background: var(--deep); }

@media (max-width: 1020px) {
  body[data-page="about"] .about-clean-story, body[data-page="about"] .about-clean-services-wrap, body[data-page="about"] .about-clean-location { grid-template-columns: 1fr; }

  body[data-page="about"] .about-clean-services-head { position: static; }

  body[data-page="about"] .about-clean-values, body[data-page="about"] .about-clean-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body[data-page="about"] .about-clean-process article:nth-child(2) { border-right: 0; }

  body[data-page="about"] .about-clean-process article:nth-child(n/**/+3) { border-top: 1px solid var(--line); }

  body[data-page="about"] .about-clean-process article:nth-child(3) { padding-left: 0; }

}

@media (max-width: 610px) {
  body[data-page="about"] .about-clean-story-copy p, body[data-page="about"] .about-clean-location p { font-size: 13px; }

  body[data-page="about"] .about-clean-story-copy h2 { font-size: clamp(1.82rem, 8.7vw, 2.5rem); }

  body[data-page="about"] .about-clean-problems article { grid-template-columns: 38px 1fr; gap: 12px; padding: 15px; border-radius: 16px; }

  body[data-page="about"] .about-clean-problems span, body[data-page="about"] .about-clean-values small, body[data-page="about"] .about-clean-services span { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }

  body[data-page="about"] .about-clean-problems h3, body[data-page="about"] .about-clean-values h3, body[data-page="about"] .about-clean-services h3, body[data-page="about"] .about-clean-process h3 { font-size: 1.12rem; }

  body[data-page="about"] .about-clean-problems p, body[data-page="about"] .about-clean-values p, body[data-page="about"] .about-clean-services p, body[data-page="about"] .about-clean-process p { font-size: 13px; }

  body[data-page="about"] .about-clean-values, body[data-page="about"] .about-clean-services, body[data-page="about"] .about-clean-process { grid-template-columns: 1fr; }

  body[data-page="about"] .about-clean-values article { min-height: auto; padding: 17px; border-radius: 17px; }

  body[data-page="about"] .about-clean-values small { margin-bottom: 23px; }

  body[data-page="about"] .about-clean-services article { min-height: auto; padding: 18px; }

  body[data-page="about"] .about-clean-services span { margin-bottom: 22px; }

  body[data-page="about"] .about-clean-process article, body[data-page="about"] .about-clean-process article:not(:first-child) { min-height: auto; padding: 16px 0; border-right: 0; border-top: 1px solid var(--line); }

  body[data-page="about"] .about-clean-process article:first-child { border-top: 0; }

  body[data-page="about"] .about-clean-process span { margin-bottom: 18px; font-size: 9.5px; }

  body[data-page="about"] .about-clean-location { gap: 18px; padding: 22px; border-radius: 22px; }

}

body[data-page="about"] .about-page-header { position: relative; padding: clamp(42px, 6vw, 76px) 0 clamp(34px, 5vw, 58px); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 86% 10%, rgba(217, 242, 103, .20), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--paper-strong) 52%, transparent), var(--paper)); overflow: clip; }

body[data-page="about"] .about-page-header::after { content: ""; position: absolute; right: -120px; top: -135px; width: 310px; height: 310px; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 36px color-mix(in srgb, var(--lime) 15%, transparent), 0 0 0 72px color-mix(in srgb, var(--lime) 8%, transparent); opacity: .72; pointer-events: none; }

body[data-page="about"] .about-page-header-inner { position: relative; z-index: 1; }

body[data-page="about"] .about-page-breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(22px, 4vw, 42px); color: var(--ink-muted); font-size: 12px; font-weight: 750; }

body[data-page="about"] .about-page-breadcrumb a { color: var(--ink-soft); }

body[data-page="about"] .about-page-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

body[data-page="about"] .about-page-breadcrumb b { color: var(--ink); font-weight: 850; }

body[data-page="about"] .about-page-title-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .64fr); gap: clamp(24px, 5vw, 62px); align-items: end; }

body[data-page="about"] .about-page-title-row h1 { max-width: 860px; margin: 0; color: var(--ink); font-size: clamp(2.4rem, 5vw, 5rem); line-height: .95; }

body[data-page="about"] .about-page-title-row > p { max-width: 510px; margin: 0 0 8px; color: var(--ink-soft); font-size: 1.02rem; }

body[data-page="about"] .about-page-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 4vw, 38px); }

body[data-page="about"] .about-page-tags span { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; }

body[data-page="about"] .about-clean-story-section { padding-top: clamp(58px, 8vw, 104px); }

:root[data-theme="dark"] body[data-page="about"] .about-page-header { background: radial-gradient(circle at 86% 10%, rgba(217, 242, 103, .14), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--paper-strong) 52%, transparent), var(--paper)); }

@media (max-width: 820px) {
  body[data-page="about"] .about-page-title-row { grid-template-columns: 1fr; gap: 16px; }

  body[data-page="about"] .about-page-title-row > p { max-width: 660px; margin-bottom: 0; }

}

@media (max-width: 610px) {
  body[data-page="about"] .about-page-header { padding: 32px 0 32px; }

  body[data-page="about"] .about-page-breadcrumb { margin-bottom: 22px; font-size: 11px; }

  body[data-page="about"] .about-page-title-row h1 { font-size: clamp(2rem, 9.6vw, 2.85rem); line-height: .98; }

  body[data-page="about"] .about-page-title-row > p { font-size: 13px; }

  body[data-page="about"] .about-page-tags { gap: 6px; margin-top: 22px; }

  body[data-page="about"] .about-page-tags span { min-height: 30px; padding: 7px 10px; font-size: 10.5px; }

  body[data-page="about"] .about-clean-story-section { padding-top: 48px; }

}

body[data-page="about"] .about-page-header { padding: clamp(42px, 5vw, 66px) 0 clamp(36px, 4.5vw, 58px); border-bottom: 0; background: radial-gradient(circle at 88% 8%, rgba(217, 242, 103, .20), transparent 24%), radial-gradient(circle at 8% 86%, rgba(217, 242, 103, .08), transparent 26%), var(--deep); color: #f6fbf5; }

body[data-page="about"] .about-page-header::after { right: -94px; top: -116px; width: 260px; height: 260px; border-color: rgba(239, 255, 243, .18); box-shadow: 0 0 0 28px rgba(217, 242, 103, .075), 0 0 0 58px rgba(217, 242, 103, .04); opacity: .9; }

body[data-page="about"] .about-page-breadcrumb { margin-bottom: clamp(22px, 3.2vw, 34px); color: rgba(239, 255, 243, .62); }

body[data-page="about"] .about-page-breadcrumb a { color: rgba(239, 255, 243, .76); }

body[data-page="about"] .about-page-breadcrumb a:hover { color: var(--lime); }

body[data-page="about"] .about-page-breadcrumb b { color: #f6fbf5; }

body[data-page="about"] .about-page-title-row { grid-template-columns: minmax(0, .98fr) minmax(320px, .62fr); align-items: end; }

body[data-page="about"] .about-page-title-row .eyebrow { color: var(--lime); }

body[data-page="about"] .about-page-title-row h1 { max-width: 760px; color: #f6fbf5; font-size: clamp(2.35rem, 4.1vw, 4rem); line-height: .98; letter-spacing: -.058em; }

body[data-page="about"] .about-page-title-row > p { max-width: 500px; margin-bottom: 5px; color: #c3d7ca; font-size: clamp(.95rem, 1.2vw, 1.02rem); }

body[data-page="about"] .about-page-tags { margin-top: clamp(22px, 3.2vw, 32px); }

body[data-page="about"] .about-page-tags span { min-height: 32px; border-color: rgba(239, 255, 243, .18); background: rgba(255, 255, 255, .065); color: #eef8f0; backdrop-filter: blur(10px); }

body[data-page="about"] .about-page-tags span:hover { border-color: rgba(217, 242, 103, .52); color: var(--lime); }

:root[data-theme="dark"] body[data-page="about"] .about-page-header { background: radial-gradient(circle at 88% 8%, rgba(217, 242, 103, .18), transparent 24%), radial-gradient(circle at 8% 86%, rgba(217, 242, 103, .07), transparent 26%), var(--deep); }

@media (max-width: 820px) {
  body[data-page="about"] .about-page-title-row { grid-template-columns: 1fr; gap: 14px; }

  body[data-page="about"] .about-page-title-row h1 { max-width: 680px; }

  body[data-page="about"] .about-page-title-row > p { max-width: 620px; }

}

@media (max-width: 610px) {
  body[data-page="about"] .about-page-header { padding: 30px 0 32px; }

  body[data-page="about"] .about-page-breadcrumb { margin-bottom: 19px; font-size: 10.5px; }

  body[data-page="about"] .about-page-title-row h1 { font-size: clamp(1.9rem, 8.2vw, 2.55rem); line-height: 1; }

  body[data-page="about"] .about-page-title-row > p { font-size: 13px; line-height: 1.58; }

  body[data-page="about"] .about-page-tags { margin-top: 18px; }

  body[data-page="about"] .about-page-tags span { min-height: 29px; padding: 7px 9px; font-size: 10px; }

}

body[data-page="services"] .svc-header { position: relative; padding: clamp(42px, 5vw, 66px) 0 clamp(38px, 4.6vw, 60px); overflow: clip; background: radial-gradient(circle at 88% 8%, rgba(217, 242, 103, .18), transparent 24%), radial-gradient(circle at 9% 88%, rgba(217, 242, 103, .07), transparent 28%), var(--deep); color: #f6fbf5; }

body[data-page="services"] .svc-header::after { content: ""; position: absolute; right: -98px; top: -120px; width: 265px; height: 265px; border: 1px solid rgba(239,255,243,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(217,242,103,.07), 0 0 0 58px rgba(217,242,103,.038); pointer-events: none; }

body[data-page="services"] .svc-header-inner { position: relative; z-index: 1; }

body[data-page="services"] .svc-breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); color: rgba(239,255,243,.62); font-size: 12px; font-weight: 750; }

body[data-page="services"] .svc-breadcrumb a { color: rgba(239,255,243,.76); }

body[data-page="services"] .svc-breadcrumb a:hover { color: var(--lime); text-decoration: underline; }

body[data-page="services"] .svc-breadcrumb b { color: #f6fbf5; }

body[data-page="services"] .svc-header-grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(320px, .62fr); gap: clamp(24px, 5vw, 62px); align-items: end; }

body[data-page="services"] .svc-header-copy .eyebrow { color: var(--lime); }

body[data-page="services"] .svc-header-copy h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(2.35rem, 4.1vw, 4rem); line-height: .98; letter-spacing: -.058em; }

body[data-page="services"] .svc-header-aside p { max-width: 520px; margin: 0 0 18px; color: #c3d7ca; font-size: clamp(.95rem, 1.2vw, 1.02rem); }

body[data-page="services"] .svc-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

body[data-page="services"] .svc-ghost { border-color: rgba(246,251,245,.3); color: #fff; background: transparent; }

body[data-page="services"] .svc-ghost:hover { background: rgba(255,255,255,.08); }

body[data-page="services"] .svc-section-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .58fr); gap: clamp(20px, 4vw, 54px); align-items: end; margin-bottom: clamp(28px, 5vw, 50px); }

body[data-page="services"] .svc-section-top h2 { max-width: 720px; margin: 0; font-size: clamp(2.1rem, 3.7vw, 3.65rem); }

body[data-page="services"] .svc-section-top > p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

body[data-page="services"] .svc-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }

body[data-page="services"] .svc-overview-card { min-height: 245px; padding: 21px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 26px rgba(22,53,44,.045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }

body[data-page="services"] .svc-overview-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-small); }

body[data-page="services"] .svc-overview-card span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 38px; border-radius: 13px; background: var(--lime); color: var(--deep); font: 850 14px/1 var(--display); }

body[data-page="services"] .svc-overview-card h3 { margin: 0 0 10px; font-size: 1.26rem; }

body[data-page="services"] .svc-overview-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

body[data-page="services"] .svc-main-layout { display: grid; grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr); gap: clamp(28px, 5vw, 62px); align-items: start; }

body[data-page="services"] .svc-main-intro { position: sticky; top: 112px; }

body[data-page="services"] .svc-main-intro h2 { margin-bottom: 16px; }

body[data-page="services"] .svc-main-intro p { color: var(--ink-soft); }

body[data-page="services"] .svc-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

body[data-page="services"] .svc-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-small); }

body[data-page="services"] .svc-card-visual { position: relative; height: 132px; overflow: hidden; background: var(--deep); }

body[data-page="services"] .svc-card-visual::before { content: ""; position: absolute; right: -54px; top: -64px; width: 150px; height: 150px; border-radius: 50%; background: var(--lime); opacity: .9; }

body[data-page="services"] .svc-card-web .svc-card-visual span { position: absolute; left: 24px; bottom: 0; width: 62%; height: 78%; border: 7px solid #f4f3ea; border-bottom: 0; border-radius: 14px 14px 0 0; }

body[data-page="services"] .svc-card-web .svc-card-visual i { position: absolute; left: 46px; top: 50px; width: 104px; height: 7px; border-radius: 999px; background: #f4f3ea; box-shadow: 0 18px 0 rgba(244,243,234,.55), 0 36px 0 var(--lime); }

body[data-page="services"] .svc-card-design .svc-card-visual { background: var(--lime); }

body[data-page="services"] .svc-card-design .svc-card-visual span { position: absolute; left: 24px; top: 22px; width: 110px; height: 110px; border-radius: 22px; background: var(--deep); transform: rotate(-12deg); }

body[data-page="services"] .svc-card-design .svc-card-visual i { position: absolute; right: 26px; bottom: 26px; width: 92px; height: 12px; border-radius: 999px; background: var(--deep); box-shadow: 0 -22px 0 rgba(10,47,37,.42); }

body[data-page="services"] .svc-card-photo .svc-card-visual { background: #c8754d; }

body[data-page="services"] .svc-card-photo .svc-card-visual span { position: absolute; left: 28px; bottom: -40px; width: 122px; height: 122px; border-radius: 50%; background: #fff1c1; box-shadow: 86px -22px 0 #edcc5f; }

body[data-page="services"] .svc-card-photo .svc-card-visual i { position: absolute; left: 58px; bottom: 0; width: 12px; height: 82px; border-radius: 999px; background: #2d5c3d; transform: rotate(-18deg); }

body[data-page="services"] .svc-card-care .svc-card-visual { background: #143f33; }

body[data-page="services"] .svc-card-care .svc-card-visual span { position: absolute; left: 28px; top: 28px; width: 86px; height: 86px; border: 1px solid rgba(239,255,243,.24); border-radius: 50%; box-shadow: 0 0 0 24px rgba(217,242,103,.1); }

body[data-page="services"] .svc-card-care .svc-card-visual i { position: absolute; left: 148px; top: 45px; width: 88px; height: 8px; border-radius: 999px; background: #eef8f0; box-shadow: 0 24px 0 rgba(238,248,240,.55), 0 48px 0 var(--lime); }

body[data-page="services"] .svc-card-body { padding: 21px; }

body[data-page="services"] .svc-card-body small { display: block; margin-bottom: 11px; color: var(--clay); font-size: 10px; letter-spacing: .12em; font-weight: 850; text-transform: uppercase; }

body[data-page="services"] .svc-card-body h3 { margin-bottom: 10px; font-size: 1.34rem; }

body[data-page="services"] .svc-card-body p { margin-bottom: 16px; color: var(--ink-soft); font-size: 14px; }

body[data-page="services"] .svc-card-body ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }

body[data-page="services"] .svc-card-body li { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 750; }

body[data-page="services"] .svc-bundle-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 58px); align-items: center; padding: clamp(26px, 5vw, 52px); border-radius: 30px; background: radial-gradient(circle at 88% 18%, rgba(217,242,103,.34), transparent 25%), var(--ink); color: #fff; overflow: hidden; }

body[data-page="services"] .svc-bundle-card .eyebrow { color: var(--lime); }

body[data-page="services"] .svc-bundle-card h2 { max-width: 560px; margin-bottom: 14px; color: #fff; }

body[data-page="services"] .svc-bundle-card p { max-width: 520px; margin: 0; color: #bdd0c3; }

body[data-page="services"] .svc-bundle-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(239,255,243,.18); border-left: 1px solid rgba(239,255,243,.18); }

body[data-page="services"] .svc-bundle-steps article { min-height: 150px; padding: 16px; border-right: 1px solid rgba(239,255,243,.18); border-bottom: 1px solid rgba(239,255,243,.18); }

body[data-page="services"] .svc-bundle-steps span { display: block; margin-bottom: 38px; color: var(--lime); font-size: 11px; font-weight: 850; }

body[data-page="services"] .svc-bundle-steps b { display: block; margin-bottom: 4px; color: #fff; }

body[data-page="services"] .svc-bundle-steps small { color: #b9ccc0; font-size: 12px; }

body[data-page="services"] .svc-package-grid .package-card { box-shadow: var(--shadow-small); }

body[data-page="services"] .svc-faq-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(26px, 5vw, 72px); align-items: start; }

body[data-page="services"] .svc-faq-copy { position: sticky; top: 112px; }

body[data-page="services"] .svc-faq-copy h2 { margin-bottom: 15px; }

body[data-page="services"] .svc-faq-copy p:last-child { color: var(--ink-soft); }

:root[data-theme="dark"] body[data-page="services"] .svc-overview-card, :root[data-theme="dark"] body[data-page="services"] .svc-card { background: var(--surface); }

@media (max-width: 1020px) {
  body[data-page="services"] .svc-overview-grid, body[data-page="services"] .svc-card-grid, body[data-page="services"] .svc-bundle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body[data-page="services"] .svc-main-layout, body[data-page="services"] .svc-bundle-card, body[data-page="services"] .svc-faq-layout { grid-template-columns: 1fr; }

  body[data-page="services"] .svc-main-intro, body[data-page="services"] .svc-faq-copy { position: static; }

}

@media (max-width: 820px) {
  body[data-page="services"] .svc-header-grid, body[data-page="services"] .svc-section-top { grid-template-columns: 1fr; gap: 14px; }

  body[data-page="services"] .svc-header-copy h1 { max-width: 680px; }

  body[data-page="services"] .svc-header-aside p { max-width: 620px; }

}

@media (max-width: 610px) {
  body[data-page="services"] .svc-header { padding: 30px 0 32px; }

  body[data-page="services"] .svc-breadcrumb { margin-bottom: 19px; font-size: 10.5px; }

  body[data-page="services"] .svc-header-copy h1 { font-size: clamp(1.9rem, 8.2vw, 2.55rem); line-height: 1; }

  body[data-page="services"] .svc-header-aside p, body[data-page="services"] .svc-section-top > p, body[data-page="services"] .svc-main-intro p, body[data-page="services"] .svc-bundle-card p { font-size: 13px; line-height: 1.58; }

  body[data-page="services"] .svc-header-actions .button { flex: 1 1 135px; }

  body[data-page="services"] .svc-section-top { margin-bottom: 24px; }

  body[data-page="services"] .svc-section-top h2 { font-size: clamp(1.75rem, 8.5vw, 2.45rem); }

  body[data-page="services"] .svc-overview-grid, body[data-page="services"] .svc-card-grid, body[data-page="services"] .svc-bundle-steps { grid-template-columns: 1fr; }

  body[data-page="services"] .svc-overview-card { min-height: auto; padding: 17px; border-radius: 17px; }

  body[data-page="services"] .svc-overview-card span { width: 36px; height: 36px; margin-bottom: 20px; border-radius: 11px; font-size: 12px; }

  body[data-page="services"] .svc-overview-card h3, body[data-page="services"] .svc-card-body h3 { font-size: 1.12rem; }

  body[data-page="services"] .svc-overview-card p, body[data-page="services"] .svc-card-body p, body[data-page="services"] .svc-card-body li { font-size: 12.5px; }

  body[data-page="services"] .svc-card { border-radius: 18px; }

  body[data-page="services"] .svc-card-visual { height: 108px; }

  body[data-page="services"] .svc-card-body { padding: 17px; }

  body[data-page="services"] .svc-bundle-card { padding: 22px; border-radius: 22px; }

  body[data-page="services"] .svc-bundle-steps article { min-height: auto; padding: 14px; }

  body[data-page="services"] .svc-bundle-steps span { margin-bottom: 18px; }

  body[data-page="services"] .svc-faq-layout { gap: 12px; }

}

@keyframes projectGlowFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-14px, -12px, 0) scale(1.08); } }



























































@keyframes portfolioPieceFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-14px, -12px, 0) scale(1.08); } }



































































@keyframes portfolioItemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }






/* HERO LAYOUT PATCH */
.hero .container {
  width: min(1280px, calc(100% - 56px));
}

.hero-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .94fr);
  align-items: start;
  gap: clamp(42px, 6vw, 86px);
}

.hero-copy {
  max-width: 640px;
  padding-top: clamp(6px, 1vw, 16px);
}

.hero-copy h1 {
  max-width: 9ch;
}

.hero-lead,
.hero-service-pills,
.hero-proof-grid {
  max-width: 620px;
}

.hero-proof-grid {
  margin-top: 24px;
}

.hero-board-wrap {
  padding: 22px 16px 28px 12px;
}

.hero-board {
  min-height: 520px;
}

.hero-floating-card--top {
  top: 10px;
  right: -10px;
}

.hero-floating-card--bottom {
  left: -8px;
  bottom: 8px;
}

@media (max-width: 1020px) {
  .hero .container {
    width: min(100% - 44px, 1180px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px;
  }

  .hero-copy,
  .hero-lead,
  .hero-service-pills,
  .hero-proof-grid {
    max-width: 100%;
  }
}

@media (max-width: 820px) {
  .hero .container {
    width: min(100% - 34px, 700px);
  }

  .hero-grid {
    gap: 28px;
  }

  .hero-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-board-wrap {
    padding: 18px 0 12px;
  }

  .hero-floating-card--top {
    right: 4px;
  }

  .hero-floating-card--bottom {
    left: 4px;
    bottom: 0;
  }
}

@media (max-width: 610px) {
  .hero .container {
    width: min(100% - 28px, 500px);
  }

  .hero-copy h1 {
    max-width: 10ch;
  }

  .hero-proof-grid {
    grid-template-columns: 1fr;
  }

  .hero-board-wrap {
    padding: 0;
  }
}

/* WEBSITE TYPES + SELECTED WORK REDESIGN */
.website-types-section {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, var(--paper) 28%), var(--paper));
  overflow: clip;
}

.website-types-section::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -160px;
  top: -150px;
  border-radius: 50%;
  background: rgba(217, 242, 103, .16);
  filter: blur(12px);
}

.website-types-heading {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto clamp(30px, 5vw, 52px);
  text-align: center;
}

.website-types-heading .eyebrow {
  justify-content: center;
}

.website-types-heading h2 {
  margin-bottom: 14px;
}

.website-types-heading p:last-child {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-soft);
}

.website-types-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.website-type-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 9px 24px rgba(20, 52, 43, .035);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.website-type-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(20, 52, 43, .08);
}

.website-type-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #0f9b73;
  background: #def5eb;
}

.website-type-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.website-type-item strong {
  font-size: 14px;
  line-height: 1.35;
}

.selected-work-section {
  background: var(--deep);
  color: #f4faf5;
}

.selected-work-section .eyebrow {
  color: var(--lime);
}

.selected-work-section .section-heading h2 {
  color: #fff;
  max-width: 700px;
}

.selected-work-section .text-link {
  color: #f4faf5;
}

.work-rail {
  border-top: 1px solid rgba(238, 248, 241, .16);
}

.work-rail-item {
  --work-accent: var(--lime);
  position: relative;
  display: grid;
  grid-template-columns: 54px 76px minmax(190px, .72fr) minmax(260px, 1fr) 48px;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  min-height: 126px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(238, 248, 241, .16);
  overflow: hidden;
  isolation: isolate;
  transition: padding .25s ease, border-color .25s ease;
}

.work-rail-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, color-mix(in srgb, var(--work-accent) 54%, transparent), transparent 58%);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .25s ease, transform .25s ease;
}

.work-rail-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 99px;
  background: var(--work-accent);
  transform: scaleY(0);
  transition: transform .25s ease;
}

.work-rail-item:hover {
  padding-left: 18px;
  padding-right: 14px;
  border-color: rgba(238, 248, 241, .24);
}

.work-rail-item:hover::before {
  opacity: .22;
  transform: translateX(0);
}

.work-rail-item:hover::after {
  transform: scaleY(1);
}

.work-rail-number {
  color: rgba(240, 250, 243, .42);
  font: 800 12px/1 var(--body);
  letter-spacing: .14em;
}

.work-rail-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  overflow: hidden;
}

.work-rail-logo img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.work-rail-logo span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--deep);
  font: 850 1.2rem/1 var(--display);
}

.work-rail-logo img[src] + span {
  opacity: 0;
}

.work-rail-main small {
  display: block;
  margin-bottom: 8px;
  color: rgba(228, 241, 233, .58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.work-rail-main h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.work-rail-item > p {
  max-width: 560px;
  margin: 0;
  color: rgba(229, 241, 233, .76);
  font-size: 14px;
}

.work-rail-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid rgba(239, 248, 242, .22);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.work-rail-item:hover .work-rail-arrow {
  transform: rotate(8deg) translateY(-2px);
  background: var(--lime);
  color: var(--deep);
}

.work-rail-more {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr) 48px;
  min-height: 104px;
  color: #fff;
}

.work-rail-more::before {
  background: linear-gradient(90deg, rgba(217,242,103,.16), transparent 62%);
}

.work-rail-more > span:first-child {
  color: rgba(229, 241, 233, .62);
  font-size: 13px;
}

.work-rail-more strong {
  font: 800 clamp(1.2rem, 2vw, 1.55rem)/1.1 var(--display);
  letter-spacing: -.035em;
}

@media (max-width: 1020px) {
  .website-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-rail-item {
    grid-template-columns: 42px 68px minmax(180px, .8fr) minmax(220px, 1fr) 42px;
    gap: 18px;
  }
}

@media (max-width: 820px) {
  .work-rail-item {
    grid-template-columns: 38px 64px minmax(0, 1fr) 42px;
    min-height: 112px;
  }

  .work-rail-item > p {
    grid-column: 3 / 5;
    margin-top: -8px;
    padding-right: 56px;
    font-size: 13px;
  }

  .work-rail-arrow {
    grid-column: 4;
    grid-row: 1;
  }

  .work-rail-more {
    grid-template-columns: 1fr 42px;
  }

  .work-rail-more > span:first-child {
    grid-column: 1;
  }

  .work-rail-more strong {
    grid-column: 1;
  }

  .work-rail-more .work-rail-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 610px) {
  .website-types-heading {
    margin-bottom: 26px;
    text-align: left;
  }

  .website-types-heading .eyebrow {
    justify-content: flex-start;
  }

  .website-types-heading p:last-child {
    margin: 0;
  }

  .website-types-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .website-type-item {
    min-height: 60px;
    padding: 11px 13px;
    border-radius: 14px;
  }

  .website-type-icon {
    width: 34px;
    height: 34px;
  }

  .website-type-item strong {
    font-size: 13px;
  }

  .work-rail-item {
    grid-template-columns: 34px 54px minmax(0, 1fr) 36px;
    gap: 12px;
    min-height: 104px;
    padding: 16px 0;
  }

  .work-rail-item:hover {
    padding-left: 8px;
    padding-right: 6px;
  }

  .work-rail-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .work-rail-main small {
    margin-bottom: 5px;
    font-size: 8.5px;
  }

  .work-rail-main h3 {
    font-size: 1.35rem;
  }

  .work-rail-item > p {
    grid-column: 3 / 5;
    padding-right: 44px;
    font-size: 12px;
    line-height: 1.5;
  }

  .work-rail-arrow {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .work-rail-more {
    grid-template-columns: 1fr 36px;
    min-height: 92px;
  }
}
/* MASTER MOBILE QA PATCH */
html, body {
  overflow-x: clip;
}

img, svg, video, canvas {
  max-width: 100%;
}

@media (max-width: 920px) {
  .hero .container,
  .section .container,
  .page-hero .container,
  .portfolio-page-header .container,
  .about-page-header .container,
  .svc-header .container {
    width: min(100% - 32px, 760px);
  }

  

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    align-items: start !important;
  }

  .hero-copy,
  .hero-lead,
  .hero-service-pills,
  .hero-proof-grid {
    max-width: 100% !important;
  }

  .hero-copy {
    padding-top: 0 !important;
  }

  .hero-copy h1 {
    max-width: 8ch !important;
  }

  .hero-board-wrap {
    padding: 0 !important;
  }

  .hero-floating-card {
    position: static !important;
    max-width: none !important;
    margin: 0 0 12px !important;
  }

  .hero-board {
    min-height: 420px !important;
    max-width: 560px;
    margin-inline: auto;
  }

  .hero-proof-grid,
  .package-grid,
  body[data-page="services"] .svc-overview-grid,
  body[data-page="services"] .svc-card-grid,
  body[data-page="services"] .svc-bundle-steps,
  body[data-page="about"] .about-clean-values,
  body[data-page="about"] .about-clean-process,
  body[data-page="about"] .about-clean-services,
  .website-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="services"] .svc-main-layout,
  body[data-page="services"] .svc-bundle-card,
  body[data-page="services"] .svc-faq-layout,
  body[data-page="about"] .about-clean-story,
  body[data-page="about"] .about-clean-services-wrap,
  body[data-page="about"] .about-clean-location,
  .contact-layout,
  .choose-layout,
  .impact-stage,
  .faq-layout,
  .cta-card {
    grid-template-columns: 1fr !important;
  }

  .cta-card {
    gap: 14px;
  }

  .contact-intro,
  body[data-page="services"] .svc-main-intro,
  body[data-page="services"] .svc-faq-copy,
  body[data-page="about"] .about-clean-services-head {
    position: static !important;
    top: auto !important;
  }

  .process-grid,
  .service-grid,
  .foundation-grid,
  .choose-grid,
  .client-logo-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  

  

  
}

@media (max-width: 640px) {
  .container,
  .hero .container,
  .section .container,
  .page-hero .container,
  .portfolio-page-header .container,
  .about-page-header .container,
  .svc-header .container {
    width: min(100% - 24px, 520px) !important;
  }

  body {
    font-size: 14px;
  }

  .section {
    padding: 50px 0 !important;
  }

  .section-heading,
  .website-types-heading,
  .selected-work-heading,
  .impact-header,
  .portfolio-showcase-top {
    margin-bottom: 18px !important;
    text-align: left;
  }

  

  .button-row {
    gap: 10px !important;
  }

  .button-row .button,
  .cta-card .button,
  body[data-page="services"] .svc-header-actions .button {
    width: 100%;
    justify-content: center;
  }

  .hero {
    padding: 24px 0 44px !important;
  }

  .hero-kicker-row {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .hero-mini-tag,
  .hero-mini-note {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .hero-copy h1 {
    max-width: 7ch !important;
    margin-bottom: 14px !important;
    font-size: clamp(2.55rem, 13.5vw, 4rem) !important;
    line-height: .94 !important;
  }

  .hero-service-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .hero-service-pills span {
    justify-content: center;
    text-align: center;
    min-height: 50px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
  }

  .hero-proof-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .hero-proof-card {
    padding: 14px;
    border-radius: 16px;
  }

  .hero-footnote {
    margin-top: 18px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .hero-board {
    min-height: 355px !important;
    border-radius: 20px !important;
  }

  .board-topline {
    top: 12px !important;
    left: 14px !important;
    right: 14px !important;
    font-size: 8px !important;
  }

  .board-stage {
    inset: 44px 12px 72px !important;
  }

  .hero-tabs {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 6px !important;
    gap: 6px !important;
  }

  .hero-tab {
    min-height: 42px !important;
    padding: 5px 6px !important;
  }

  .hero-tab span {
    font-size: 8px !important;
  }

  .hero-tab b {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  

  

  .website-type-item {
    min-height: 0 !important;
    padding: 13px 12px !important;
    border-radius: 16px !important;
    align-items: center;
  }

  .website-type-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .website-type-item strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .work-rail {
    border-top: 0 !important;
  }

  .work-rail-item {
    grid-template-columns: 30px 50px minmax(0, 1fr) 34px !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
  }

  .work-rail-number {
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }

  .work-rail-logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
  }

  .work-rail-main small {
    margin-bottom: 4px !important;
    font-size: 8px !important;
  }

  .work-rail-main h3 {
    font-size: 1.15rem !important;
    line-height: 1.08 !important;
  }

  .work-rail-item > p {
    grid-column: 3 / 5 !important;
    margin-top: 2px !important;
    padding-right: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .work-rail-arrow {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .work-rail-more {
    grid-template-columns: 1fr 34px !important;
    min-height: 86px !important;
  }

  .impact-problem-card {
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .traction-panel,
  body[data-page="services"] .svc-bundle-card,
  body[data-page="about"] .about-clean-location,
  .cta-card {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .process-card,
  body[data-page="about"] .about-clean-process article,
  body[data-page="services"] .svc-bundle-steps article {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body[data-page="about"] .about-clean-process article,
  body[data-page="about"] .about-clean-services article {
    border-right: 0 !important;
    border-left: 0 !important;
  }

  

  

  

  

  

  

  

  .contact-method {
    grid-template-columns: 34px minmax(0,1fr) 18px !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .contact-method strong {
    font-size: 12px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
  }

  .footer-grid,
  .footer-bottom {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 390px) {
  .hero-service-pills {
    grid-template-columns: 1fr !important;
  }

  .hero-copy h1 {
    max-width: 6.6ch !important;
  }

  .website-type-item strong,
  .hero-service-pills span {
    font-size: 12px !important;
  }

  .nav-shell {
    gap: 8px;
  }

  .brand-word {
    font-size: 15px;
  }
}
/* SELECTED WORK IMAGE THUMBNAIL PATCH */
.work-rail-image {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.work-rail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}

.work-rail-item:hover .work-rail-image img {
  transform: scale(1.06);
}

@media (max-width: 1020px) {
  .work-rail-image {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }
}

@media (max-width: 820px) {
  .work-rail-image {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .work-rail-image {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
}
/* CLIENT MARQUEE IMAGE PATCH */
.client-logo-pill {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.client-logo-pill img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 118px;
  max-height: 54px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 610px) {
  .client-logo-pill img {
    max-width: 92px;
    max-height: 42px;
  }
}

/* === COMPACT COPY & HERO PATCH === */
.section {
  padding: clamp(58px, 7vw, 104px) 0;
}

h2 {
  font-size: clamp(1.95rem, 3.25vw, 3.35rem);
  line-height: 1;
}

.hero {
  padding: clamp(38px, 5vw, 68px) 0 clamp(54px, 7vw, 92px) !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4.5vw, 64px) !important;
}

.hero-copy {
  max-width: 570px !important;
  padding-top: 0 !important;
}

.hero-copy h1 {
  max-width: 11.5ch !important;
  margin-bottom: 16px !important;
  font-size: clamp(2.9rem, 4.7vw, 4.45rem) !important;
  line-height: .96 !important;
}

.hero-lead {
  max-width: 470px !important;
  margin-bottom: 18px !important;
  line-height: 1.58 !important;
}

.hero-kicker-row {
  margin-bottom: 15px !important;
}

.hero-service-pills {
  margin-bottom: 20px !important;
}

.hero-service-pills span {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.hero-board-wrap {
  padding: 18px 16px 22px 8px !important;
}

.hero-board {
  min-height: 470px !important;
}

.hero-floating-card {
  max-width: 195px;
  padding: 14px 15px;
}

.hero-floating-card p {
  font-size: 11px;
  line-height: 1.45;
}

.page-hero {
  padding: clamp(54px, 7vw, 88px) 0 clamp(56px, 7vw, 90px);
}



/* FAQ icon: true plus/minus, never a rotated X */
.faq-item button {
  padding: 18px 0;
  font-size: 1rem;
  line-height: 1.28;
}

.faq-item button span {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 0 !important;
  line-height: 1;
  transform: none !important;
}

.faq-item button span::before {
  content: "+";
  display: block;
  font: 700 19px/1 var(--body);
  transform: translateY(-1px);
}

.faq-item.is-open button span {
  transform: none !important;
  background: var(--lime);
  color: var(--deep);
  border-color: var(--lime);
}

.faq-item.is-open button span::before {
  content: "−";
  font-size: 20px;
  transform: translateY(-2px);
}

.faq-answer p {
  margin: 0 48px 18px 0;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero-copy h1 {
    max-width: 12ch !important;
  }

  .hero-board-wrap {
    padding: 0 !important;
  }

  .hero-board {
    min-height: 400px !important;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 46px 0 !important;
  }

  .hero {
    padding: 22px 0 40px !important;
  }

  .hero-copy h1 {
    max-width: 10.5ch !important;
    font-size: clamp(2.35rem, 11.5vw, 3.25rem) !important;
    line-height: .96 !important;
  }

  .hero-service-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .hero-service-pills span {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .hero-board {
    min-height: 330px !important;
  }

  

  .faq-item button {
    padding: 16px 0;
    font-size: .95rem;
  }

  .faq-answer p {
    margin-right: 38px;
    font-size: 13px;
  }
}

/* =========================================================
   ALGATRA REFINEMENT — editorial headings, type catalog,
   portfolio list, light/dark consistency, mobile polish
   ========================================================= */

/* Titles stay concise; supporting copy carries the explanation. */




/* ---------- WEBSITE TYPES: editorial catalog, not another card wall ---------- */
.website-types-section {
  background:
    radial-gradient(circle at 6% 10%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 58%, var(--paper) 42%), var(--paper));
}

.website-types-section::before { display: none; }

.website-types-layout {
  display: grid;
  grid-template-columns: minmax(250px, .58fr) minmax(0, 1.42fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: start;
}

.website-types-heading {
  position: sticky;
  top: 108px;
  z-index: 1;
  max-width: 470px;
  margin: 0;
  text-align: left;
}

.website-types-heading .eyebrow { justify-content: flex-start; }
.website-types-heading h2 { max-width: 9ch; margin-bottom: 18px; }
.website-types-heading p:last-of-type {
  max-width: 470px;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.72;
}
.website-types-link { margin-top: 24px; }

.website-types-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}

.website-type-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px 44px minmax(0, 1fr);
  gap: 13px;
  min-height: 118px;
  padding: 19px 20px 19px 0;
  border-bottom: 1px solid var(--line);
  transition: background .22s ease, padding .22s ease, border-color .22s ease;
}

.website-type-row:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.website-type-row:nth-child(even) { padding-left: 24px; }

.website-type-row:hover {
  background: color-mix(in srgb, var(--lime) 10%, transparent);
  border-color: color-mix(in srgb, var(--lime) 42%, var(--line));
}

.website-type-number {
  padding-top: 11px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
}

.website-type-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  color: var(--deep);
  background: var(--lime);
  box-shadow: none;
}

.website-type-row > div { min-width: 0; }
.website-type-row strong {
  display: block;
  margin: 4px 0 6px;
  color: var(--ink);
  font: 820 1rem/1.15 var(--display);
  letter-spacing: -.025em;
}
.website-type-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- PROJECT PAGE: one editorial list instead of bento ---------- */































/* filters feel like a compact toolbar */



/* ---------- FAQ: more content, clearer rhythm ---------- */
.faq-list { border-top-color: var(--line-strong); }
.faq-item button {
  min-height: 64px;
  padding: 19px 0;
}
.faq-answer p {
  max-width: 780px;
  margin-bottom: 22px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.72;
}

/* ---------- Light / dark consistency ---------- */
:root[data-theme="dark"] .website-types-section {
  background:
    radial-gradient(circle at 6% 10%, rgba(217,242,103,.08), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 56%, var(--paper) 44%), var(--paper));
}
:root[data-theme="dark"] .website-type-row:hover {
  background: rgba(217,242,103,.055);
}


:root[data-theme="dark"] .project-form,
:root[data-theme="dark"] .contact-notice,
:root[data-theme="dark"] body[data-page="services"] .svc-card,
:root[data-theme="dark"] body[data-page="services"] .svc-overview-card,
:root[data-theme="dark"] body[data-page="about"] .about-clean-location {
  border-color: rgba(232,247,237,.14);
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
  background: color-mix(in srgb, var(--surface) 88%, var(--deep) 12%);
  color: var(--ink);
  border-color: rgba(232,247,237,.16);
}
:root[data-theme="dark"] .field input::placeholder,
:root[data-theme="dark"] .field textarea::placeholder { color: var(--ink-muted); }

/* Keep long copy readable while headings remain compact */



/* ---------- Tablet ---------- */
@media (max-width: 920px) {
  .website-types-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .website-types-heading {
    position: static;
    max-width: 650px;
  }
  .website-types-heading h2 { max-width: 13ch; }

  
  
  
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  

  

  .website-types-layout { gap: 24px; }
  .website-types-heading { margin: 0; }
  .website-types-heading h2 { max-width: 11ch; }
  .website-types-heading p:last-of-type { font-size: 13px; line-height: 1.68; }
  .website-types-link { margin-top: 18px; }

  .website-types-catalog {
    grid-template-columns: 1fr;
  }
  .website-type-row,
  .website-type-row:nth-child(odd),
  .website-type-row:nth-child(even) {
    grid-template-columns: 28px 38px minmax(0,1fr);
    min-height: 0;
    gap: 10px;
    padding: 15px 0 !important;
    border-right: 0;
  }
  .website-type-number { padding-top: 9px; font-size: 9px; }
  .website-type-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  .website-type-row strong { margin-top: 2px; font-size: .96rem; }
  .website-type-row p { font-size: 12px; line-height: 1.5; }

  
  
  

  
  
  
  
  
  
  
  
  
  
  
  

  .faq-item button {
    min-height: 58px;
    gap: 14px;
    padding: 16px 0;
    font-size: .96rem;
  }
  .faq-item button span { width: 28px; height: 28px; }
  .faq-answer p {
    margin-right: 0;
    margin-bottom: 18px;
    font-size: 12.8px;
    line-height: 1.68;
  }

  /* hero mobile: less visual crowding while keeping supporting detail */
  .hero-proof-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .hero-proof-card { padding: 13px 14px !important; }
  .hero-proof-card p { font-size: 11.5px !important; line-height: 1.5 !important; }
  .hero-board-wrap { margin-top: 2px; }
  .hero-floating-card { display: none !important; }
  .hero-board { min-height: 315px !important; }
}

@media (max-width: 390px) {
  .website-type-row,
  .website-type-row:nth-child(odd),
  .website-type-row:nth-child(even) {
    grid-template-columns: 24px 34px minmax(0,1fr);
    gap: 9px;
  }
  .website-type-icon { width: 34px !important; height: 34px !important; }
  
}

/* =========================================================
   PROJECT PAGE REVAMP V3 — client proof, editorial case index,
   traction section. No card grid.
   ========================================================= */

/* Client proof directly after project header */










/* Showcase header + filter toolbar */











/* Editorial case-study index: full-width rows, no card shell */


























/* Visual project number and arrow live outside the copy */







/* Pagination */


/* Traction / proof below work */
















/* Dark mode keeps project rows readable; client / traction sections are intentionally deep. */












/* =========================================================
   PROJECT PAGE REVAMP V4 — cinematic case studies + compact
   client marquee. Overrides V3 project-page presentation.
   ========================================================= */

/* Compact, proportional client marquee */















@keyframes algatraClientMarquee { to { transform: translateX(-50%); } }

/* Showcase header becomes calmer and more editorial */





/* No grid-card feel: one cinematic story at a time */





























/* The first case study is intentionally cinematic and breaks the pattern */










/* Traction is a continuous data strip, not another card grid */

























/* === ALGATRA PATCH: hero simplify + project grid v5 === */













.hero-service-pills--compact span { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.hero-highlight-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.hero-highlight-item {
  padding: 14px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 10px 18px rgba(20, 52, 43, .04);
}
.hero-highlight-item strong {
  display: block;
  margin-bottom: 6px;
  font: 800 1rem/1 var(--display);
  letter-spacing: -.03em;
}
.hero-highlight-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.hero-board-wrap { padding: 10px 0 0; }
.hero-board {
  min-height: 510px;
}
.hero-copy h1 { max-width: 10.5ch; }
.hero-proof-grid { display: none !important; }
body[data-page="home"] .hero-floating-card,
.hero-floating-card { display: none !important; }






























































@media (max-width: 1020px) {
  .hero-highlight-list { grid-template-columns: 1fr 1fr; }
  
  
  
  
  
}

@media (max-width: 610px) {
  .hero-grid { gap: 22px; }
  .hero-highlight-list { grid-template-columns: 1fr; gap: 9px; }
  .hero-copy h1 { max-width: 11ch; }
  .hero-board { min-height: 374px; }
  
  
  
  
  
  
  
  
}



/* === hotfix v6: project grid + clean marquee === */

























/* ========================================================================== 
   Responsive layout normalization — 2026-07-22
   Keeps every page inside the viewport and changes dense desktop card grids
   into comfortable single-column mobile layouts.
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

.container,
.hero-grid > *,
.section-heading > *,
.choose-layout > *,
.website-types-layout > *,
.impact-stage > *,
.contact-layout > *,
.svc-header-grid > *,
.svc-overview-grid > *,
.svc-card-grid > *,
.about-clean-values > *,
.about-clean-services > *,
.about-clean-process > * {
  min-width: 0;
}

h1,
h2,
h3,
p,
a,
span,
strong,
small,
button,
input,
select,
textarea {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 32px, var(--container));
  }

  .section,
  .website-types-section,
  .selected-work-section,
  .impact-section,
  .faq-home {
    overflow: clip;
  }

  /* Home: avoid narrow side-by-side cards on phones. */
  body[data-page="home"] .choose-grid,
  body[data-page="home"] .foundation-grid,
  body[data-page="home"] .service-grid,
  body[data-page="home"] .process-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body[data-page="home"] .choose-card,
  body[data-page="home"] .foundation-card,
  body[data-page="home"] .service-card,
  body[data-page="home"] .process-card {
    width: 100%;
    min-height: 0 !important;
  }

  body[data-page="home"] .choose-card,
  body[data-page="home"] .process-card {
    padding: 20px !important;
  }

  body[data-page="home"] .foundation-card {
    padding: 20px !important;
    border-right: 0 !important;
  }

  body[data-page="home"] .service-card {
    padding: 16px !important;
  }

  body[data-page="home"] .service-card .service-art {
    min-height: 150px;
  }

  body[data-page="home"] .website-types-layout,
  body[data-page="home"] .impact-stage,
  body[data-page="home"] .faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="home"] .website-type-row {
    grid-template-columns: 24px 34px minmax(0, 1fr) !important;
  }

  /* Services: each service gets the full phone width. */
  body[data-page="services"] .svc-overview-grid,
  body[data-page="services"] .svc-card-grid,
  body[data-page="services"] .svc-bundle-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body[data-page="services"] .svc-overview-card,
  body[data-page="services"] .svc-card,
  body[data-page="services"] .svc-bundle-steps article {
    width: 100%;
    min-height: 0 !important;
  }

  body[data-page="services"] .svc-card {
    padding: 18px !important;
  }

  body[data-page="services"] .svc-bundle-steps article {
    border-right: 0 !important;
    padding: 18px !important;
  }

  /* About: stack values, services, and process cards instead of squeezing them. */
  body[data-page="about"] .about-clean-values,
  body[data-page="about"] .about-clean-services,
  body[data-page="about"] .about-clean-process {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body[data-page="about"] .about-clean-values article,
  body[data-page="about"] .about-clean-services article,
  body[data-page="about"] .about-clean-process article {
    width: 100%;
    min-height: 0 !important;
    border-right: 0 !important;
    padding: 18px !important;
  }

  /* Contact: prevent long addresses and form controls from forcing overflow. */
  body[data-page="contact"] .contact-layout,
  body[data-page="contact"] .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="contact"] .project-form,
  body[data-page="contact"] .contact-intro,
  body[data-page="contact"] .field,
  body[data-page="contact"] .field input,
  body[data-page="contact"] .field select,
  body[data-page="contact"] .field textarea {
    width: 100%;
    min-width: 0;
  }

  body[data-page="contact"] .contact-method {
    grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(100% - 24px, var(--container));
  }

  body[data-page="home"] .website-type-row {
    grid-template-columns: 22px 32px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}


/* Contact form result modal — no WhatsApp redirect */
body.contact-modal-open { overflow: hidden; }
.contact-result-modal[hidden] { display: none !important; }
.contact-result-modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 22px; }
.contact-result-backdrop { position: absolute; inset: 0; background: rgba(12, 26, 22, .68); backdrop-filter: blur(7px); }
.contact-result-dialog { position: relative; width: min(100%, 520px); padding: clamp(30px, 6vw, 52px); border: 1px solid rgba(30, 59, 49, .16); border-radius: 28px; background: var(--surface); box-shadow: 0 30px 90px rgba(5, 21, 16, .28); text-align: center; animation: contactModalIn .24s ease both; }
.contact-result-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.contact-result-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: #dbff00; color: #21372f; font-size: 34px; font-weight: 900; box-shadow: 0 12px 28px rgba(110, 139, 0, .2); }
.contact-result-dialog h2 { margin: 8px 0 12px; font-size: clamp(28px, 5vw, 42px); line-height: 1.05; }
.contact-result-dialog > p:not(.eyebrow) { max-width: 420px; margin: 0 auto 26px; color: var(--muted); line-height: 1.7; }
.contact-result-dialog .button { min-width: 170px; justify-content: center; }
.contact-result-modal.is-error .contact-result-icon { background: #ffe0dc; color: #9e2c21; box-shadow: 0 12px 28px rgba(158, 44, 33, .14); }
.project-form button[type="submit"]:disabled { cursor: wait; opacity: .72; transform: none; }
@keyframes contactModalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .contact-result-dialog { animation: none; } }