:root {
    --ink: #241b16;
    --ink-soft: #33251e;
    --paper: #fffaf6;
    --white: #ffffff;
    --muted: #84756c;
    --line-dark: rgba(255,243,234,.18);
    --line-light: #eaded6;
    --accent: #457d58;
    --accent-dark: #315f41;
    --accent-soft: #edf5ef;
    --accent-orange: #f26722;
    --accent-blue: #7aa287;
    --shell: min(1240px, calc(100vw - 64px));
    --display: "Manrope", "Segoe UI", sans-serif;
    --body: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: #392d26; background: var(--paper); font-size: 18px; font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--white); }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: 128px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: 16px; padding: 10px 15px; color: var(--ink); background: var(--accent); transform: translateY(-180%); transition: transform .2s; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, transform .3s; }
.site-header.scrolled { background: rgba(255,250,246,.9); border-color: rgba(112,78,57,.14); box-shadow: 0 8px 32px rgba(73,45,27,.06); backdrop-filter: blur(18px); }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 190px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; color: #56473f; font-size: 16px; font-weight: 600; }
.nav-links > a:not(.nav-cta) { position: relative; }
.nav-links > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--accent); transition: right .25s; }
.nav-links > a:hover::after, .nav-links > a.active::after { right: 0; }
.nav-cta { padding: 11px 16px; color: var(--white); background: var(--accent); border-radius: 4px; box-shadow: 0 8px 24px rgba(69,125,88,.2); transition: transform .2s, background .2s; }
.nav-cta:hover { background: var(--accent-dark); transform: translateY(-2px); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 7px auto; background: var(--ink); transition: transform .25s; }

.hero { position: relative; min-height: 780px; height: 100svh; color: var(--ink); overflow: hidden; background: #fff8f3 url("image/background.png") right center / auto 80% no-repeat; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,250,246,.98) 0%, rgba(255,250,246,.93) 31%, rgba(255,250,246,.44) 51%, rgba(255,250,246,.04) 72%), linear-gradient(0deg, rgba(255,247,241,.78) 0%, transparent 31%); }
.hero::before { content: ""; position: absolute; z-index: 1; width: 540px; height: 540px; left: -260px; bottom: -280px; border-radius: 50%; opacity: .38; pointer-events: none; background: rgba(242,103,34,.14); filter: blur(85px); }
.hero-inner { position: relative; z-index: 2; height: 100%; padding-top: 150px; padding-bottom: 74px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-copy { max-width: min(765px, 58vw); }
.eyebrow { margin: 0 0 25px; display: flex; align-items: center; gap: 11px; color: #6e5c51; font: 700 14px/1.35 var(--display); text-transform: uppercase; letter-spacing: .17em; }
.eyebrow > span { display: inline-block; width: 28px; height: 1px; background: var(--accent); }
.hero-roles { align-items: flex-start; }
.hero-roles > .hero-role-rule { flex: 0 0 28px; margin-top: .62em; }
.hero-role-list { display: grid; gap: 6px; }
.hero-role-row { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hero-role-row i { width: 5px; height: 5px; flex: 0 0 5px; border: 1px solid var(--accent-orange); background: rgba(242,103,34,.15); transform: rotate(45deg); }
.eyebrow.dark { color: #f2c8ae; }
.hero h1 { margin: 0; max-width: 780px; font: 700 clamp(58px, 6.3vw, 104px)/.94 var(--display); letter-spacing: -.075em; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-intro { max-width: 620px; margin: 34px 0 0; color: #65554c; font-size: clamp(19px, calc(1.45vw + 2px), 23px); line-height: 1.65; }
.hero-actions { margin-top: 40px; display: flex; align-items: center; gap: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; padding: 0 20px; border-radius: 4px; font-weight: 700; font-size: 16px; }
.button-primary { color: var(--white); background: var(--accent); box-shadow: 0 12px 32px rgba(69,125,88,.2); transition: transform .2s, box-shadow .2s; }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 42px rgba(69,125,88,.3); }
.text-link { padding-block: 8px; border-bottom: 1px solid rgba(89,62,46,.38); color: #43362e; font-weight: 600; font-size: 16px; }
.text-link span, .arrow-link span, .contact-link span { display: inline-block; margin-left: 8px; transition: transform .2s; }
.text-link:hover span, .arrow-link:hover span, .contact-link:hover span { transform: translate(3px,-3px); }
.hero-meta { width: 760px; max-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(92,65,48,.2); }
.hero-meta div { padding: 17px 18px 0 0; display: grid; gap: 7px; }
.hero-meta span { color: var(--accent); font: 700 12px var(--display); letter-spacing: .15em; }
.hero-meta strong { font-size: 15px; font-weight: 600; color: #56473f; }
.scroll-cue { position: absolute; z-index: 3; right: 32px; bottom: 70px; display: flex; align-items: center; gap: 10px; color: #6c5d54; font-size: 13px; text-transform: uppercase; letter-spacing: .18em; transform: rotate(90deg); transform-origin: right bottom; }
.scroll-cue span { width: 38px; height: 1px; background: var(--accent); }

.capability-strip { position: relative; overflow: hidden; color: var(--ink); background: var(--accent-soft); border-top: 1px solid #d3e4d8; border-bottom: 1px solid #d3e4d8; -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.strip-track { width: max-content; padding-block: 17px; display: flex; align-items: center; animation: technologyMarquee 48s linear infinite; will-change: transform; }
.technology-set { padding-right: 52px; display: flex; align-items: center; gap: 52px; }
.technology-item { min-width: max-content; display: flex; align-items: center; gap: 12px; color: #315f41; }
.technology-item img { width: 42px; height: 42px; display: block; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(43,83,57,.12)); }
.technology-item-wide img { width: 58px; }
.technology-item span { font: 700 13px var(--display); text-transform: uppercase; letter-spacing: .12em; }
@keyframes technologyMarquee { to { transform: translateX(-50%); } }

.section-label { padding-bottom: 22px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-light); color: #697580; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.expertise.shell,.work > .shell { width: min(1560px, calc(100vw - 64px)); }
.intro-grid { margin-top: 72px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 9vw; align-items: start; }
.display-copy { margin: 0; color: var(--ink); font: 700 clamp(48px, 5.3vw, 78px)/1.03 var(--display); letter-spacing: -.065em; }
.display-copy span { color: #5d846a; }
.intro-statement { min-width: 0; }
.engineering-path { width: min(610px, 100%); margin-top: 52px; }
.engineering-track { position: relative; height: 2px; background: #dce5df; }
.engineering-track::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,var(--accent),#72a080); transform: scaleX(0); transform-origin: left; }
.engineering-track::after { content: ""; position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-orange); box-shadow: 0 0 0 5px rgba(242,103,34,.13); opacity: 0; transform: translate(-50%,-50%); }
.engineering-track i { position: absolute; z-index: 1; top: 50%; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; background: var(--paper); opacity: 0; transform: translate(-50%,-50%) scale(.4); }
.engineering-track i:nth-child(1) { left: 0; }.engineering-track i:nth-child(2) { left: 33.333%; }.engineering-track i:nth-child(3) { left: 66.666%; }.engineering-track i:nth-child(4) { left: 100%; }
.engineering-labels { margin-top: 16px; display: grid; grid-template-columns: repeat(4,1fr); color: #66746b; font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.engineering-labels span { opacity: 0; transform: translateY(8px); }
.engineering-labels span:nth-child(2),.engineering-labels span:nth-child(3) { text-align: center; }.engineering-labels span:last-child { text-align: right; }
.intro-statement.is-visible .engineering-track::before { animation: engineeringLine 1.25s .35s cubic-bezier(.2,.75,.2,1) forwards; }
.intro-statement.is-visible .engineering-track::after { animation: engineeringSignal 1.25s .35s cubic-bezier(.2,.75,.2,1) forwards; }
.intro-statement.is-visible .engineering-track i { animation: engineeringNode .36s ease-out forwards; }
.intro-statement.is-visible .engineering-track i:nth-child(1),.intro-statement.is-visible .engineering-labels span:nth-child(1) { animation-delay: .35s; }
.intro-statement.is-visible .engineering-track i:nth-child(2),.intro-statement.is-visible .engineering-labels span:nth-child(2) { animation-delay: .68s; }
.intro-statement.is-visible .engineering-track i:nth-child(3),.intro-statement.is-visible .engineering-labels span:nth-child(3) { animation-delay: 1s; }
.intro-statement.is-visible .engineering-track i:nth-child(4),.intro-statement.is-visible .engineering-labels span:nth-child(4) { animation-delay: 1.3s; }
.intro-statement.is-visible .engineering-labels span { animation-name: engineeringLabel; animation-duration: .42s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
@keyframes engineeringLine { to { transform: scaleX(1); } }
@keyframes engineeringSignal { 0% { left: 0; opacity: 0; } 8%,88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes engineeringNode { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes engineeringLabel { to { opacity: 1; transform: none; } }
.intro-body { padding-top: 8px; }
.intro-body p { margin: 0 0 22px; font-size: 19px; line-height: 1.75; color: #685a51; }
.intro-body p:first-child { color: #352a24; font-size: 22px; }
.arrow-link { display: inline-flex; margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid #89939d; color: var(--ink); font-weight: 700; font-size: 16px; }

.work { color: var(--white); background: #211711; }
.section-heading { margin-bottom: 62px; display: grid; grid-template-columns: 1fr 380px; gap: 70px; align-items: end; }
.section-heading h2, .expertise-header h2 { margin: 0; font: 700 clamp(46px, 5vw, 72px)/1.03 var(--display); letter-spacing: -.06em; }
.section-heading > p { margin: 0 0 8px; color: #c9b5a8; font-size: 18px; line-height: 1.65; }
.project-carousel:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }
.project-toolbar { position: sticky; z-index: 8; top: 104px; margin-bottom: 24px; padding: 13px 14px 13px 18px; display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; border: 1px solid rgba(255,226,208,.14); background: rgba(33,23,17,.9); box-shadow: 0 14px 32px rgba(0,0,0,.16); backdrop-filter: blur(14px); }
.project-range { margin: 0; display: flex; align-items: baseline; gap: 10px; color: #bba79a; font: 700 11px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.project-range strong { color: #fff; font-size: 17px; letter-spacing: .08em; }
.project-pagination { display: flex; align-items: center; gap: 5px; }
.project-pagination button { width: 25px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.project-pagination button span { width: 14px; height: 2px; display: block; background: #705d51; transition: width .25s, background .25s; }
.project-pagination button:hover span,.project-pagination button:focus-visible span { background: #d7c3b6; }
.project-pagination button.active span { width: 24px; background: var(--accent); }
.project-arrows { display: flex; gap: 7px; }
.project-arrows button { width: 50px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,226,208,.22); color: #fff; background: #302119; cursor: pointer; transition: color .25s, border-color .25s, background .25s, transform .25s; }
.project-arrows button span { font-size: 22px; line-height: 1; }
.project-arrows button:hover:not(:disabled),.project-arrows button:focus-visible:not(:disabled) { border-color: var(--accent); color: #fff; background: var(--accent); transform: translateY(-2px); }
.project-arrows button:disabled { color: #6b5a50; background: #271b15; cursor: not-allowed; opacity: .48; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.project-card[hidden] { display: none !important; }
.project-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #2a1d16; border: 1px solid rgba(255,226,208,.13); transition: border-color .3s, box-shadow .3s, transform .3s; }
.project-card:hover { border-color: rgba(121,177,139,.48); box-shadow: 0 28px 65px rgba(0,0,0,.24); }
.project-card.reveal.is-visible:hover { transform: translateY(-6px); }
.project-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr .65fr; }
.project-visual { position: relative; min-height: 390px; overflow: hidden; display: grid; place-items: center; background: #322219; }
.project-featured .project-visual { min-height: 520px; }
.project-copy { padding: 34px; }
.project-featured .project-copy { padding: 48px 42px; display: flex; flex-direction: column; justify-content: flex-end; }
.project-card:not(.project-featured) .project-copy { flex: 1; display: flex; flex-direction: column; }
.project-index { color: var(--accent); font: 700 12px var(--display); letter-spacing: .15em; text-transform: uppercase; }
.project-copy h3 { margin: 22px 0 18px; font: 700 clamp(26px, 2.5vw, 40px)/1.13 var(--display); letter-spacing: -.04em; }
.project-card:not(.project-featured) .project-copy h3 { min-height: 2.26em; }
.project-copy p { margin: 0; color: #c6b4a8; line-height: 1.7; }
.tag-list { margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.project-card:not(.project-featured) .tag-list { margin-top: auto; padding-top: 28px; }
.tag-list li { padding: 7px 10px; border: 1px solid rgba(255,225,207,.17); border-radius: 30px; color: #e1cfc3; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.project-site .project-visual { min-height: 0; aspect-ratio: 1.99 / 1; display: block; background: #17110d; isolation: isolate; }
.project-site .project-visual::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,transparent 52%,rgba(17,11,8,.58)); opacity: .58; transition: opacity .35s; }
.project-site .project-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.002); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project-site .project-open { position: absolute; z-index: 2; right: 20px; bottom: 18px; padding: 10px 13px; display: inline-flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(26,18,14,.72); font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s, background .3s; backdrop-filter: blur(10px); }
.project-site .project-open b { color: #8dd2a3; font-size: 16px; }
.project-site .project-visual:hover::after { opacity: .8; }
.project-site .project-visual:hover img { transform: scale(1.035); filter: saturate(1.06); }
.project-site .project-visual:hover .project-open,.project-site .project-visual:focus-visible .project-open { opacity: 1; transform: none; }
.project-site .project-copy { flex: 1; min-height: 336px; padding: 30px 32px 32px; display: flex; flex-direction: column; }
.project-site .project-copy h3 { min-height: 2.26em; margin: 18px 0 14px; }
.project-site .project-copy p { min-height: 5.1em; font-size: 17px; }
.project-site .tag-list,.project-site:not(.project-featured) .tag-list { margin-top: 23px; padding-top: 0; }
.project-link { margin-top: auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,225,207,.22); color: #f4e6dd; font: 700 14px var(--display); }
.project-link span { color: var(--accent); font-size: 19px; transition: transform .25s; }
.project-link:hover span,.project-link:focus-visible span { transform: translate(4px,-4px); }
.project-site:nth-child(even) { transition-delay: .08s; }
.project-card.carousel-from-right { animation: projectFromRight .56s cubic-bezier(.2,.72,.2,1) both; }
.project-card.carousel-from-left { animation: projectFromLeft .56s cubic-bezier(.2,.72,.2,1) both; }
.project-card.carousel-from-right:nth-child(even),.project-card.carousel-from-left:nth-child(even) { animation-delay: .055s; }
@keyframes projectFromRight { from { opacity: 0; transform: translateX(52px); } to { opacity: 1; transform: none; } }
@keyframes projectFromLeft { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: none; } }
.visual-payroll { background: radial-gradient(circle at 28% 18%, rgba(242,103,34,.24), transparent 34%), linear-gradient(145deg,#38241a,#1b120d); }
.visual-booking { background: radial-gradient(circle at 75% 20%, rgba(242,103,34,.2), transparent 34%), linear-gradient(145deg,#1c2c22,#121b16); }
.booking-ui { width: 78%; max-width: 310px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.045); box-shadow: 0 28px 65px rgba(0,0,0,.32); transform: rotate(-2deg); }
.booking-top { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); color: #e7eee9; font: 700 11px var(--display); letter-spacing: .14em; }
.booking-top span,.booking-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.booking-top i { margin-left: auto; background: var(--accent-orange); }
.booking-calendar { margin-top: 18px; display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.booking-calendar i { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(255,255,255,.035); }
.booking-calendar i.selected { border-color: var(--accent-orange); background: var(--accent-orange); box-shadow: 0 0 22px rgba(242,103,34,.35); }
.booking-confirm { margin-top: 17px; padding: 10px 12px; border-radius: 5px; color: #dff0e4; background: rgba(69,125,88,.25); font-size: 12px; }
.booking-confirm span { margin-right: 7px; color: #92c6a3; font-weight: 800; }
.visual-commerce { background: radial-gradient(circle at 22% 78%, rgba(69,125,88,.22), transparent 36%), linear-gradient(145deg,#3b251a,#1b120d); }
.commerce-ui { position: relative; width: 80%; max-width: 320px; padding: 22px; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: 0 28px 65px rgba(0,0,0,.34); }
.commerce-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.commerce-products i { position: relative; height: 112px; border-radius: 5px; background: linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.025)); }
.commerce-products i::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px; height: 5px; border-radius: 10px; background: rgba(255,255,255,.22); }
.commerce-products i:nth-child(2) { background: linear-gradient(150deg,rgba(69,125,88,.55),rgba(69,125,88,.13)); }
.commerce-products i:nth-child(3) { background: linear-gradient(150deg,rgba(242,103,34,.35),rgba(242,103,34,.08)); }
.commerce-lines { margin-top: 18px; display: grid; gap: 8px; }
.commerce-lines span { display: block; width: 78%; height: 5px; border-radius: 10px; background: rgba(255,255,255,.2); }
.commerce-lines span:nth-child(2) { width: 54%; }.commerce-lines span:nth-child(3) { width: 66%; }
.commerce-cart { position: absolute; right: 16px; bottom: 15px; padding: 8px 10px; border-radius: 5px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.commerce-cart strong { margin-left: 5px; color: #dff0e4; }
.mock-window { width: 82%; border: 1px solid rgba(255,255,255,.23); border-radius: 9px; box-shadow: 0 34px 80px rgba(0,0,0,.45); transform: perspective(1000px) rotateY(7deg) rotateX(2deg); }
.mock-top { height: 35px; padding-left: 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.mock-top span { width: 6px; height: 6px; border-radius: 50%; background: #697785; }
.mock-layout { min-height: 315px; display: grid; grid-template-columns: 20% 1fr; }
.mock-sidebar { border-right: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.16); }
.mock-sidebar::before { content: ""; display: block; width: 60%; height: 7px; margin: 26px auto; background: var(--accent); box-shadow: 0 30px #42505e,0 60px #42505e,0 90px #42505e,0 120px #42505e; }
.mock-content { padding: 28px; }
.mock-heading { width: 38%; height: 12px; background: #d9e0e6; }
.mock-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mock-stats i { height: 66px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.mock-chart { height: 145px; margin-top: 18px; padding: 18px 20px 0; display: flex; align-items: flex-end; gap: 13px; border: 1px solid rgba(255,255,255,.12); }
.mock-chart b { flex: 1; height: 40%; background: #526373; }
.mock-chart b:nth-child(2) { height: 66%; }.mock-chart b:nth-child(3) { height: 52%; }.mock-chart b:nth-child(4) { height: 84%; background: var(--accent); }.mock-chart b:nth-child(5) { height: 72%; }.mock-chart b:nth-child(6) { height: 93%; }
.visual-data { background: radial-gradient(circle, rgba(69,125,88,.22), transparent 48%), #18231c; }
.data-stage { display: grid; place-items: center; }
.data-orbit { position: relative; width: 210px; aspect-ratio: 1; border: 1px solid rgba(69,125,88,.48); border-radius: 50%; }
.data-orbit::before, .data-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.data-orbit::before { inset: 28px; }.data-orbit::after { inset: 66px; background: var(--accent); box-shadow: 0 0 50px rgba(69,125,88,.48); }
.data-orbit span { position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 50%; background: #18231c; }
.data-orbit span:nth-child(1){top:13px;left:58px}.data-orbit span:nth-child(2){right:-4px;top:100px}.data-orbit span:nth-child(3){bottom:24px;left:31px}.data-orbit span:nth-child(4){left:38px;top:85px}
.visual-data > p { position: absolute; bottom: 22px; letter-spacing: .3em; color: #61707c; font-size: 11px; }
.visual-platform { background: linear-gradient(135deg,#352219,#1e140f); }
.code-stack { width: 78%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.code-stack div { margin-top: -1px; padding: 18px; display: flex; gap: 25px; border: 1px solid rgba(255,255,255,.13); color: #d4dce3; background: rgba(255,255,255,.025); transform: translateX(var(--shift,0)); }
.code-stack div:nth-child(2){--shift:16px}.code-stack div:nth-child(3){--shift:32px}
.code-stack span { color: var(--accent); opacity: .7; }.code-stack code { font-size: 15px; }
.project-card.is-visible .mock-window { transform-origin: 50% 85%; animation: payrollSwing 5.8s .15s ease-in-out infinite; }
.project-card.is-visible .mock-chart b { transform-origin: bottom; animation: chartBreathe 2.5s ease-in-out infinite alternate; }
.project-card.is-visible .mock-chart b:nth-child(2) { animation-delay: .18s; }.project-card.is-visible .mock-chart b:nth-child(3) { animation-delay: .34s; }.project-card.is-visible .mock-chart b:nth-child(4) { animation-delay: .5s; }.project-card.is-visible .mock-chart b:nth-child(5) { animation-delay: .66s; }.project-card.is-visible .mock-chart b:nth-child(6) { animation-delay: .82s; }
.project-card.is-visible .booking-ui { transform-origin: 50% 70%; animation: bookingFloat 5.2s .2s ease-in-out infinite; }
.project-card.is-visible .booking-calendar i.selected { animation: bookingPulse 1.8s .5s ease-in-out infinite; }
.project-card.is-visible .booking-confirm { animation: confirmationGlow 2.6s .8s ease-in-out infinite; }
.project-card.is-visible .commerce-ui { transform-origin: center; animation: commerceFloat 5.6s .25s ease-in-out infinite; }
.project-card.is-visible .commerce-products i { animation: productLift 2.8s ease-in-out infinite; }
.project-card.is-visible .commerce-products i:nth-child(2) { animation-delay: .35s; }.project-card.is-visible .commerce-products i:nth-child(3) { animation-delay: .7s; }
.project-card.is-visible .data-stage { animation: dataFloat 5s .2s ease-in-out infinite; }
.project-card.is-visible .data-orbit { animation: orbit 18s linear infinite; }
.project-card.is-visible .data-orbit span { animation: signalPulse 2s ease-in-out infinite; }
.project-card.is-visible .data-orbit span:nth-child(2) { animation-delay: .4s; }.project-card.is-visible .data-orbit span:nth-child(3) { animation-delay: .8s; }.project-card.is-visible .data-orbit span:nth-child(4) { animation-delay: 1.2s; }
@keyframes payrollSwing { 0%,100% { transform: perspective(1000px) rotateY(7deg) rotateX(2deg) rotateZ(-.4deg) translateY(0); } 50% { transform: perspective(1000px) rotateY(3deg) rotateX(1deg) rotateZ(.7deg) translateY(-10px); } }
@keyframes chartBreathe { from { transform: scaleY(.82); opacity: .72; } to { transform: scaleY(1); opacity: 1; } }
@keyframes bookingFloat { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-11px); } }
@keyframes bookingPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 16px rgba(242,103,34,.25); } 50% { transform: scale(1.14); box-shadow: 0 0 28px rgba(242,103,34,.52); } }
@keyframes confirmationGlow { 0%,100% { background: rgba(69,125,88,.25); } 50% { background: rgba(69,125,88,.42); } }
@keyframes commerceFloat { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-10px) rotate(.6deg); } }
@keyframes productLift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dataFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.025); } }
@keyframes signalPulse { 0%,100% { box-shadow: 0 0 0 rgba(69,125,88,0); } 50% { box-shadow: 0 0 0 7px rgba(69,125,88,.13); } }
@keyframes orbit { to { transform: rotate(360deg); } }

.expertise-header { margin: 50px 0 40px; display: grid; grid-template-columns: 1fr 390px; gap: 70px; align-items: end; color: var(--ink); }
.expertise-header p { margin: 0 0 6px; color: #6f6057; line-height: 1.7; }
.expertise-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.expertise-card { min-height: 360px; padding: 22px 20px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); transition: background .25s, transform .25s; }
.expertise-card:hover { background: var(--accent-soft); transform: translateY(-5px); }
.expertise-number { color: var(--accent); font: 700 12px var(--display); }
.expertise-card svg { width: 47px; height: 47px; margin: 65px 0 38px; fill: none; stroke: var(--ink); stroke-width: 1.3; }
.expertise-card h3 { margin: 0 0 14px; color: var(--ink); font: 700 22px var(--display); letter-spacing: -.03em; }
.expertise-card p { margin: 0; color: #706158; font-size: 16px; line-height: 1.65; }

.about { color: var(--ink); background: #edf5ef; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; }
.about-statement h2 { margin: 0; font: 700 clamp(44px, 4vw, 60px)/1.05 var(--display); letter-spacing: -.06em; }
.about-statement h2 > span { display: block; white-space: nowrap; }
.about-lead { margin: 30px 0 0; color: #54685b; font-size: 20px; line-height: 1.7; }
.principles { border-top: 1px solid #cbded1; }
.principle { padding: 35px 0; display: grid; grid-template-columns: 50px 1fr; gap: 25px; border-bottom: 1px solid #cbded1; }
.principle > span { color: var(--accent); font: 700 12px var(--display); letter-spacing: .15em; }
.principle h3 { margin: -4px 0 12px; font: 700 24px var(--display); }
.principle p { margin: 0; color: #586a5f; line-height: 1.65; }

.contact { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(135deg,#4d8861,#2f5d3f); }
.contact-glow { position: absolute; width: 700px; height: 700px; right: -240px; bottom: -430px; border-radius: 50%; background: rgba(242,103,34,.22); filter: blur(70px); }
.contact-inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 70px; align-items: center; }
.contact-copy { position: relative; z-index: 2; }
.contact h2 { max-width: 950px; margin: 0; font: 700 clamp(48px, 5vw, 80px)/.98 var(--display); letter-spacing: -.075em; }
.contact h2 > span { display: block; white-space: nowrap; }
.contact .eyebrow { color: #ffe7d7; }
.contact .eyebrow > span { background: #fff3ea; }
.contact p:not(.eyebrow) { max-width: 600px; margin: 34px 0 46px; color: #ffe2d0; font-size: 20px; line-height: 1.7; }
.contact-link { display: inline-flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #fff3ea; color: #fff3ea; font: 600 clamp(20px,2.5vw,34px) var(--display); }
.contact-visual { position: relative; width: 370px; max-width: 100%; aspect-ratio: 1; justify-self: end; }
.contact-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.contact-ring::before,.contact-ring::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.72); }
.contact-ring::before { width: 7px; height: 7px; left: 18%; top: 7%; box-shadow: 0 0 18px rgba(255,255,255,.5); }
.contact-ring::after { width: 10px; height: 10px; right: 5%; bottom: 28%; background: var(--accent-orange); box-shadow: 0 0 22px rgba(242,103,34,.72); }
.contact-ring i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #dceee2; box-shadow: 0 0 13px rgba(255,255,255,.4); }
.ring-outer i:nth-child(1) { left: 4%; top: 42%; }.ring-outer i:nth-child(2) { right: 20%; top: 4%; }.ring-outer i:nth-child(3) { right: 14%; bottom: 10%; }
.ring-middle { inset: 50px; border-style: dashed; border-color: rgba(255,232,217,.35); }
.ring-middle::before { left: auto; right: 11%; top: 13%; }.ring-middle::after { right: auto; left: -4px; bottom: 36%; }
.ring-middle i:nth-child(1) { left: 23%; bottom: 3%; }.ring-middle i:nth-child(2) { right: 0; top: 49%; }
.ring-inner { inset: 105px; border-color: rgba(255,255,255,.32); }
.ring-inner::before { left: 10%; top: 14%; width: 6px; height: 6px; }.ring-inner::after { right: 8%; bottom: 13%; width: 7px; height: 7px; }
.contact-core { position: absolute; z-index: 2; inset: 50%; width: 116px; height: 116px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(31,79,49,.72); box-shadow: 0 0 0 13px rgba(255,255,255,.055),0 22px 55px rgba(20,50,31,.28); text-align: center; transform: translate(-50%,-50%); backdrop-filter: blur(8px); }
.contact-core span { color: #d9ebdf; font: 600 14px var(--display); text-transform: uppercase; letter-spacing: .13em; }.contact-core strong { color: #fff; font: 700 24px var(--display); }
.contact-scan { position: absolute; z-index: 1; left: 50%; top: 50%; width: 46%; height: 1px; background: linear-gradient(90deg,var(--accent-orange),transparent); transform-origin: left center; opacity: .72; }
.contact-inner.is-visible .ring-outer { animation: contactOrbit 16s linear infinite; }
.contact-inner.is-visible .ring-middle { animation: contactOrbitReverse 11s linear infinite; }
.contact-inner.is-visible .ring-inner { animation: contactOrbit 8s linear infinite; }
.contact-inner.is-visible .contact-core { animation: contactCorePulse 3.2s ease-in-out infinite; }
.contact-inner.is-visible .contact-scan { animation: contactScan 6s linear infinite; }
@keyframes contactOrbit { to { transform: rotate(360deg); } }
@keyframes contactOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes contactCorePulse { 0%,100% { transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 0 13px rgba(255,255,255,.055),0 22px 55px rgba(20,50,31,.28); } 50% { transform: translate(-50%,-50%) scale(1.055); box-shadow: 0 0 0 20px rgba(255,255,255,.035),0 25px 70px rgba(242,103,34,.2); } }
@keyframes contactScan { to { transform: rotate(360deg); } }
.site-footer { padding-block: 34px; color: #617067; background: #f5f1ed; border-top: 1px solid #ded7d1; }
.site-footer .brand-logo { width: 170px; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; font-size: 14px; }
.footer-inner p { margin: 0; }.footer-inner p:last-child { text-align: right; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.project-list .reveal:nth-child(2), .expertise-grid .reveal:nth-child(2) { transition-delay: .08s; }
.project-list .reveal:nth-child(3), .expertise-grid .reveal:nth-child(3) { transition-delay: .16s; }
.expertise-grid .reveal:nth-child(4) { transition-delay: .24s; }
.expertise-grid .reveal:nth-child(5) { transition-delay: .32s; }

@media (max-width: 1200px) {
    .expertise-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 980px) {
    :root { --shell: min(100% - 40px, 760px); }
    .expertise.shell,.work > .shell { width: calc(100% - 40px); }
    .section { padding-block: 95px; }
    .hero { min-height: 760px; background-position: 64% center; }
    .hero-shade { background: linear-gradient(90deg, rgba(255,250,246,.98), rgba(255,250,246,.9) 46%, rgba(255,250,246,.2) 72%), linear-gradient(0deg, rgba(255,247,241,.82), transparent 38%); }
    .intro-grid, .section-heading, .expertise-header, .about-grid { grid-template-columns: 1fr; gap: 46px; }
    .contact-inner { grid-template-columns: 1fr; gap: 64px; }
    .contact-visual { width: 340px; justify-self: center; }
    .project-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .project-card { grid-column: auto; }
    .project-featured { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .project-featured .project-copy { padding: 34px; }
    .expertise-grid { grid-template-columns: repeat(2,1fr); }
    .expertise-card:last-child { grid-column: 1 / -1; }
    .footer-inner { grid-template-columns: 1fr 1fr; }.footer-inner p:nth-child(2){display:none}
}

@media (max-width: 700px) {
    :root { --shell: calc(100% - 32px); }
    .expertise.shell,.work > .shell { width: calc(100% - 32px); }
    .nav { height: 72px; }
    .brand-logo { width: 166px; }
    .menu-toggle { display: block; position: relative; z-index: 2; }
    .menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(4px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-4px) rotate(-45deg); }
    .nav-links { position: fixed; inset: 0; padding: 110px 28px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; color: var(--ink); background: rgba(255,248,243,.98); transform: translateX(100%); transition: transform .35s ease; }
    .nav-links.open { transform: none; }
    .nav-links a { font: 700 28px var(--display); }
    .nav-links .nav-cta { margin-top: auto; font-size: 20px; }
    .hero { height: auto; min-height: 980px; background-position: 70% top; background-size: auto 38%; }
    .hero-shade { background: linear-gradient(180deg, rgba(255,250,246,.04) 0%, rgba(255,250,246,.16) 28%, rgba(255,250,246,.96) 45%, #fff8f3 57%); }
    .hero-inner { min-height: 980px; padding-top: 400px; padding-bottom: 45px; }
    .hero-copy { max-width: 100%; }
    .hero-copy .eyebrow { width: fit-content; max-width: calc(100% - 8px); margin-bottom: 18px; padding: 10px 14px 11px; gap: 0; border-left: 3px solid var(--accent-orange); border-radius: 0 4px 4px 0; color: #fff; background: rgba(39,82,55,.94); box-shadow: 0 10px 28px rgba(26,48,34,.2); font-size: 10px; line-height: 1.45; letter-spacing: .08em; backdrop-filter: blur(9px); }
    .hero-copy .eyebrow > .hero-role-rule { display: none; }
    .hero-role-list { gap: 5px; }
    .hero-role-row { gap: 8px; }
    .hero-role-row i { width: 4px; height: 4px; flex-basis: 4px; border-color: #ffab71; background: #f26722; }
    .hero h1 { font-size: clamp(51px, 15vw, 74px); }
    .hero-intro { max-width: 92%; font-size: 18px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .hero-meta { width: 100%; grid-template-columns: 1fr; gap: 9px; border: 0; }
    .hero-meta div { padding: 9px 0; grid-template-columns: 35px 1fr; align-items: center; border-top: 1px solid rgba(92,65,48,.2); }
    .scroll-cue { display: none; }
    .strip-track { justify-content: flex-start; }
    .section { padding-block: 78px; }
    .section-label span:last-child { display: none; }
    .intro-grid { margin-top: 46px; }
    .display-copy { font-size: 44px; }
    .engineering-path { margin-top: 38px; }
    .engineering-labels { letter-spacing: .04em; }
    .section-heading { margin-bottom: 42px; }
    .project-toolbar { top: 82px; padding: 10px; grid-template-columns: 1fr auto; gap: 7px 14px; }
    .project-range { gap: 6px; font-size: 9px; letter-spacing: .08em; }
    .project-range strong { font-size: 14px; }
    .project-pagination { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
    .project-pagination button { width: 21px; height: 20px; }
    .project-pagination button span { width: 11px; }
    .project-pagination button.active span { width: 19px; }
    .project-arrows { grid-row: 1; grid-column: 2; }
    .project-arrows button { width: 43px; height: 40px; }
    .project-list { grid-template-columns: 1fr; }
    .project-card,.project-card:last-child,.project-featured { grid-column: auto; }
    .project-visual, .project-featured .project-visual { min-height: 310px; }
    .mock-window { width: 92%; }.mock-layout{min-height:230px}.mock-content{padding:18px}.mock-chart{height:100px}
    .project-copy, .project-featured .project-copy { padding: 27px 23px; }
    .project-card:not(.project-featured) .project-copy h3 { min-height: 0; }
    .project-site .project-visual { min-height: 0; }
    .project-site .project-copy { min-height: 0; }
    .project-site .project-copy h3,.project-site .project-copy p { min-height: 0; }
    .project-site .project-open { right: 12px; bottom: 12px; padding: 8px 10px; opacity: 1; transform: none; }
    .expertise-grid { grid-template-columns: 1fr; }
    .expertise-card:last-child { grid-column: auto; }
    .expertise-card { min-height: 300px; }
    .expertise-card svg { margin: 43px 0 30px; }
    .contact h2 { font-size: clamp(38px, 10vw, 48px); }
    .about-statement h2 { font-size: clamp(36px, 10vw, 42px); }
    .contact-inner { gap: 52px; }
    .contact-visual { width: min(300px, 86vw); }
    .footer-inner { grid-template-columns: 1fr; }.footer-inner p:last-child{text-align:left}
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .capability-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .strip-track { animation: none; transform: none; }
    .technology-set[aria-hidden="true"] { display: none; }
}