@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  --ink: #14201b;
  --paper: #f4f5ee;
  --canvas: #ffffff;
  --line: #d7dcd5;
  --muted: #65716a;
  --forest: #1f563c;
  --leaf: #a6ce39;
  --coral: #e97056;
  --blue: #316ca8;
  --dark: #13231e;
  --serif: 'Playfair Display', 'Noto Serif SC', serif;
  --sans: 'Noto Sans SC', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
  --shadow: 0 18px 48px rgba(20, 32, 27, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.page-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 82px; padding: 0 max(32px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.22); }
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: 0; }
.brand-mark { display: grid; width: 25px; height: 25px; place-items: center; background: var(--leaf); color: var(--ink); font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 600; }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 34px; }
.desktop-nav a { color: rgba(255,255,255,0.78); font-size: 14px; transition: color 160ms ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
.header-cta, .primary-button, .secondary-button, .contact-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; font-weight: 600; letter-spacing: 0; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; }
.header-cta { padding: 11px 15px; color: var(--ink); background: var(--leaf); font-size: 14px; }
.header-cta:hover, .primary-button:hover, .contact-button:hover { transform: translateY(-2px); background: #c2e84c; }
.header-cta svg, .primary-button svg, .secondary-button svg, .contact-button svg, .text-link svg { width: 17px; height: 17px; stroke-width: 2; }
.menu-button { display: none; border: 0; padding: 8px; color: white; background: transparent; }
.mobile-menu { display: none; }

.hero { position: relative; display: flex; min-height: 84vh; min-height: 680px; align-items: center; overflow: hidden; color: #fff; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 48%; }
.hero-shade { background: rgba(13, 29, 22, 0.69); }
.hero-content, .hero-foot { position: relative; z-index: 1; }
.hero-content { padding-top: 90px; }
.eyebrow { margin: 0 0 17px; color: var(--forest); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.eyebrow.light { color: var(--leaf); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 820px; margin-bottom: 22px; font-size: clamp(45px, 6.1vw, 88px); font-weight: 500; letter-spacing: 0; line-height: 1.15; }
h1, h2 { font-family: var(--serif); }
.hero-summary { max-width: 535px; margin-bottom: 30px; color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.primary-button { min-height: 48px; padding: 0 20px; background: var(--leaf); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 14px; }
.light-link { color: rgba(255,255,255,0.93); }
.hero-foot { position: absolute; right: 0; bottom: 31px; left: 0; display: flex; justify-content: space-between; color: rgba(255,255,255,0.67); font-family: var(--mono); font-size: 10px; }

.intro-band { display: grid; grid-template-columns: 1fr 2fr; gap: 36px; padding-top: 100px; padding-bottom: 100px; }
.intro-copy h2 { max-width: 700px; margin-bottom: 20px; font-size: clamp(31px, 4vw, 52px); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.intro-copy p { max-width: 500px; margin-bottom: 0; color: var(--muted); }
.section-space { padding: 106px 0; }
.services { color: #edf2e9; background: var(--dark); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.7fr); gap: 70px; align-items: end; margin-bottom: 58px; }
.section-heading h2 { max-width: 700px; margin-bottom: 0; font-size: clamp(31px, 4.2vw, 54px); font-weight: 500; line-height: 1.2; }
.section-heading > p { max-width: 330px; margin-bottom: 3px; color: var(--muted); font-size: 14px; }
.services .eyebrow { color: var(--leaf); }
.services .section-heading > p { color: #a9b7ae; }
.service-list { border-top: 1px solid rgba(237,242,233,0.25); }
.service-row { display: grid; grid-template-columns: 70px minmax(240px, 1fr) minmax(150px, 0.5fr); gap: 20px; align-items: center; padding: 26px 0 29px; border-bottom: 1px solid rgba(237,242,233,0.25); }
.service-number { color: var(--leaf); font-family: var(--mono); font-size: 12px; }
.service-row h3 { margin-bottom: 4px; font-size: 19px; font-weight: 600; }
.service-row p { max-width: 540px; margin-bottom: 0; color: #a9b7ae; font-size: 14px; }
.service-tags { justify-self: end; color: #cbd6cf; font-family: var(--mono); font-size: 10px; text-align: right; }

.work { background: var(--canvas); }
.work-heading > p { color: var(--muted); }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.project-card { overflow: hidden; }
.project-card-wide { grid-column: span 2; }
.project-visual { position: relative; overflow: hidden; min-height: 424px; }
.project-card-wide .project-visual { min-height: 500px; }
.project-caption { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 24px; padding-top: 19px; }
.project-caption h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.25; }
.project-type { margin: 0 0 4px; color: var(--forest); font-family: var(--mono); font-size: 10px; }
.project-caption > p { max-width: 350px; margin: 21px 0 0; color: var(--muted); font-size: 13px; }

.ops-visual { padding: 27px 30px 0; background: #e3eade; }
.ui-topbar { display: flex; height: 44px; align-items: center; justify-content: space-between; padding: 0 18px; color: white; background: #1d322b; font-size: 12px; }
.ui-logo { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.ui-user { display: grid; width: 24px; height: 24px; place-items: center; color: #22372f; background: var(--leaf); font-size: 11px; border-radius: 50%; }
.ops-layout { display: grid; grid-template-columns: 64px 1fr; min-height: 429px; background: #f9fcf8; }
.ops-layout aside { display: flex; flex-direction: column; gap: 18px; align-items: center; padding-top: 32px; background: #eff4ed; }
.ops-layout aside span { width: 16px; height: 16px; border: 1.5px solid #9aa8a0; border-radius: 3px; }
.ops-layout aside .active { background: var(--forest); border-color: var(--forest); }
.ops-main { padding: 29px 36px; }
.ui-title-row { display: flex; align-items: start; justify-content: space-between; }
.ui-title-row b { display: block; font-size: 19px; }
.ui-title-row small, .metric-row small, .chart-label small { display: block; color: #728078; font-size: 10px; }
.ui-title-row button { padding: 7px 11px; color: white; background: var(--forest); border: 0; font-size: 10px; border-radius: 3px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 25px 0 17px; }
.metric-row > div { padding: 15px; background: #f0f5ef; border: 1px solid #e4ebe2; }
.metric-row b { display: block; margin: 5px 0 3px; font-size: 23px; }
.metric-row em { color: #398c65; font-family: var(--mono); font-size: 9px; font-style: normal; }
.metric-row em.negative { color: var(--coral); }
.chart-panel { min-height: 160px; padding: 17px; border: 1px solid #e4ebe2; }
.chart-label { display: flex; align-items: baseline; justify-content: space-between; }
.chart-label b { font-size: 12px; }
.bars { display: flex; height: 111px; gap: 10%; align-items: end; padding: 19px 8px 0; border-bottom: 1px solid #cad4cb; }
.bars i { display: block; width: 7%; background: #aacb82; }
.bars i:nth-child(1) { height: 32%; }.bars i:nth-child(2) { height: 48%; }.bars i:nth-child(3) { height: 41%; }.bars i:nth-child(4) { height: 69%; background: var(--forest); }.bars i:nth-child(5) { height: 60%; }.bars i:nth-child(6) { height: 83%; }.bars i:nth-child(7) { height: 74%; }

.finance-visual { display: grid; place-items: end center; padding-top: 38px; background: #edb9a8; }
.phone-shell { position: relative; width: 250px; height: 425px; padding: 8px; background: #192124; border: 7px solid #192124; border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 12px 25px rgba(77,40,33,0.22); }
.phone-notch { position: absolute; z-index: 2; top: 8px; left: 50%; width: 95px; height: 21px; background: #192124; border-radius: 0 0 15px 15px; transform: translateX(-50%); }
.phone-content { height: 100%; padding: 33px 18px; overflow: hidden; background: #fbfaf4; border-radius: 18px 18px 0 0; }
.phone-top { display: flex; justify-content: space-between; margin-bottom: 32px; }
.phone-top small { color: #697269; font-family: var(--mono); font-size: 9px; }
.phone-top svg { width: 15px; }
.phone-content > p { margin-bottom: 3px; color: #697269; font-size: 11px; }
.phone-content > strong { font-size: 24px; letter-spacing: 0; }
.mini-chart { display: flex; height: 69px; gap: 6px; align-items: end; margin: 14px 0 20px; padding-bottom: 5px; border-bottom: 1px solid #e2e3dc; }
.mini-chart i { flex: 1; background: #7aae94; }.mini-chart i:nth-child(1){height:24%}.mini-chart i:nth-child(2){height:44%}.mini-chart i:nth-child(3){height:35%}.mini-chart i:nth-child(4){height:65%}.mini-chart i:nth-child(5){height:58%}.mini-chart i:nth-child(6){height:82%;background:var(--forest)}.mini-chart i:nth-child(7){height:72%}
.transaction { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid #e2e3dc; font-size: 10px; }
.transaction span:nth-child(2) { font-size: 10px; font-weight: 600; }.transaction small { display: block; color: #8a918b; font-weight: 400; }.transaction b { color: #2d7651; font-family: var(--mono); font-size: 9px; }.icon-circle { display: grid; width: 27px; height: 27px; place-items: center; color: white; background: var(--forest); border-radius: 50%; }.icon-circle.orange { background: var(--coral); }.icon-circle svg { width: 13px; }

.learning-visual { display: grid; place-items: center; padding: 30px; background: #acc6dc; }
.learning-window { width: min(100%, 480px); height: 315px; overflow: hidden; background: #f5f0e6; box-shadow: 0 14px 27px rgba(41,74,103,0.24); }
.window-tabs { display: flex; height: 24px; gap: 5px; align-items: center; padding-left: 11px; background: #2d5579; }.window-tabs span { width: 7px; height: 7px; background: #d7e5f0; border-radius: 50%; }
.learning-content { display: grid; grid-template-columns: 118px 1fr; height: calc(100% - 24px); }
.lesson-side { display: flex; flex-direction: column; gap: 13px; padding: 23px 13px; color: #80909a; background: #eff1ed; font-size: 9px; }.lesson-side b { color: #1d4e76; font-family: var(--mono); font-size: 11px; }.lesson-side .selected { padding: 6px; color: white; background: #1d4e76; }
.lesson-main { padding: 34px; background: #f8f7f1; }.lesson-main > p { margin-bottom: 5px; color: #cd624f; font-family: var(--mono); font-size: 9px; }.lesson-main h4 { margin: 0 0 23px; color: #263c4e; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; }.lesson-progress { height: 4px; margin-bottom: 20px; background: #dce1da; }.lesson-progress span { display: block; width: 58%; height: 100%; background: #cf634f; }.lesson-card { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 10px; color: white; background: #315d83; font-size: 9px; }.lesson-card svg { width: 15px; }.lesson-card b { font-family: var(--mono); font-size: 8px; font-weight: 400; }

.process { background: var(--paper); }
.process-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 12%; }
.process-intro { position: sticky; top: 45px; align-self: start; }.process-intro h2 { margin-bottom: 20px; font-size: clamp(31px, 4vw, 51px); font-weight: 500; line-height: 1.2; }.process-intro > p:not(.eyebrow) { max-width: 400px; margin-bottom: 28px; color: var(--muted); font-size: 14px; }.secondary-button { min-height: 47px; padding: 0 17px; color: var(--forest); background: transparent; border: 1px solid var(--forest); font-size: 14px; }.secondary-button:hover { color: white; background: var(--forest); }
.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.timeline li { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 27px 0 30px; border-bottom: 1px solid var(--line); }.timeline li > span { color: var(--forest); font-family: var(--mono); font-size: 11px; }.timeline h3 { margin-bottom: 6px; font-size: 19px; }.timeline p { max-width: 350px; margin-bottom: 0; color: var(--muted); font-size: 14px; }

.contact { color: white; background: var(--forest); }.contact-layout { display: flex; min-height: 400px; align-items: center; justify-content: space-between; gap: 50px; }.contact h2 { margin-bottom: 0; font-size: clamp(34px, 4.5vw, 61px); font-weight: 500; line-height: 1.2; }.contact-action { min-width: 218px; }.contact-button { width: 100%; min-height: 95px; padding: 16px; color: var(--ink); background: var(--leaf); font-family: var(--serif); font-size: 26px; }.contact-action p { margin: 13px 0 0; color: #c5d7ca; text-align: center; font-size: 11px; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; padding-top: 27px; padding-bottom: 27px; color: #526159; font-size: 11px; }.site-footer .brand { color: var(--ink); font-size: 15px; }.site-footer p { margin: 0; }.site-footer p:last-child { text-align: right; }

.consultation-dialog { width: min(650px, calc(100% - 32px)); max-height: min(820px, calc(100% - 32px)); padding: 48px; color: var(--ink); background: #f8faf5; border: 0; box-shadow: var(--shadow); }.consultation-dialog::backdrop { background: rgba(10, 27, 20, 0.72); }.dialog-close { position: absolute; top: 15px; right: 15px; display: grid; width: 36px; height: 36px; place-items: center; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; }.dialog-close:hover { background: #e7ece5; }.dialog-close svg { width: 18px; }.dialog-content h2, .submission-success h2 { margin-bottom: 10px; font-family: var(--serif); font-size: 39px; font-weight: 500; line-height: 1.2; }.dialog-lead, .submission-success > p { margin-bottom: 26px; color: var(--muted); font-size: 14px; }form { display: grid; gap: 16px; }label { display: grid; gap: 6px; color: #39473e; font-size: 13px; font-weight: 600; }input, textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: white; border: 1px solid #c9d1c9; border-radius: 2px; outline: none; font-size: 14px; font-weight: 400; resize: vertical; }input:focus, textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(31,86,60,0.13); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.field-error { min-height: 16px; color: #b64433; font-size: 11px; font-weight: 400; }.form-submit { width: max-content; margin-top: 3px; }.submission-success { min-height: 360px; padding-top: 38px; text-align: center; }.submission-success h2 { margin: 15px auto 10px; }.submission-success > p { max-width: 355px; margin: 0 auto 24px; }.success-icon { display: grid; width: 52px; height: 52px; margin: 0 auto; place-items: center; color: var(--forest); background: var(--leaf); border-radius: 50%; }.success-icon svg { width: 26px; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 40px, 590px); }.site-header { height: 68px; padding: 0 20px; }.desktop-nav, .header-cta { display: none; }.menu-button { display: grid; margin-left: auto; place-items: center; }.mobile-menu { position: fixed; z-index: 4; top: 68px; right: 0; left: 0; display: grid; max-height: 0; padding: 0 20px; overflow: hidden; color: white; background: var(--dark); opacity: 0; pointer-events: none; transition: opacity 180ms ease, max-height 180ms ease, padding 180ms ease; }.mobile-menu.is-open { max-height: 330px; padding: 18px 20px 22px; opacity: 1; pointer-events: auto; border-top: 1px solid rgba(255,255,255,0.15); }.mobile-menu a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }.mobile-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; padding: 12px 14px; color: var(--ink); background: var(--leaf); border: 0; font-weight: 600; }.mobile-menu button svg { width: 17px; }
  .hero { min-height: 85svh; min-height: 610px; }.hero-image { object-position: 57% center; }.hero-content { padding-top: 80px; }.hero-summary { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-foot { bottom: 20px; font-size: 9px; }.hero-foot span:last-child { max-width: 190px; text-align: right; }
  .intro-band { grid-template-columns: 1fr; gap: 0; padding-top: 66px; padding-bottom: 66px; }.section-space { padding: 70px 0; }.section-heading { grid-template-columns: 1fr; gap: 17px; margin-bottom: 38px; }.section-heading > p { margin: 0; }.service-row { grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }.service-tags { grid-column: 2; justify-self: start; text-align: left; }.service-row p { font-size: 13px; }
  .project-grid { grid-template-columns: 1fr; gap: 36px; }.project-card-wide { grid-column: auto; }.project-visual, .project-card-wide .project-visual { min-height: 350px; }.ops-visual { padding: 20px 0 0 12px; }.ops-layout { grid-template-columns: 44px 1fr; min-height: 306px; }.ops-layout aside { gap: 12px; padding-top: 20px; }.ops-main { padding: 18px 14px; }.ui-title-row b { font-size: 13px; }.metric-row { gap: 5px; margin: 16px 0 9px; }.metric-row > div { padding: 8px; }.metric-row b { font-size: 16px; }.metric-row small { font-size: 8px; }.metric-row em { font-size: 7px; }.chart-panel { min-height: 114px; padding: 10px; }.bars { height: 73px; padding-top: 9px; }.project-caption { grid-template-columns: 1fr; gap: 0; }.project-caption > p { margin-top: 10px; }.finance-visual { min-height: 405px; }.phone-shell { width: 232px; height: 367px; }.phone-content { padding-top: 29px; }.learning-visual { padding: 18px; }.learning-window { height: 278px; }.lesson-side { display: none; }.learning-content { grid-template-columns: 1fr; }.lesson-main { padding: 28px; }
  .process-layout { grid-template-columns: 1fr; gap: 38px; }.process-intro { position: static; }.contact-layout { min-height: 390px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 30px; }.contact h2 br { display: none; }.contact-action { width: 100%; }.site-footer { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 30px; }.site-footer p:last-child { text-align: left; }.consultation-dialog { padding: 38px 24px 28px; }.dialog-content h2, .submission-success h2 { font-size: 31px; }.form-grid { grid-template-columns: 1fr; gap: 0; }.form-submit { width: 100%; }.submission-success { min-height: 320px; }
}

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