/* One bundled font on every platform; real weights avoid synthetic outline artifacts. */
@font-face { font-family: "Websoft Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Websoft Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Websoft Inter"; src: url("/assets/fonts/inter-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Websoft Inter"; src: url("/assets/fonts/inter-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Websoft Inter"; src: url("/assets/fonts/inter-900.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: swap; }

:root {
  --ink: #0b0c0c;
  --paper: #f2f3ed;
  --acid: #c8ff2e;
  --muted: #979b91;
  --line: rgba(11, 12, 12, .18);
  --shell: min(1440px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Websoft Inter", Arial, sans-serif; font-synthesis: none; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.section-shell { width: var(--shell); margin-inline: auto; }

.site-header { width: var(--shell); height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.25rem; font-weight: 780; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: var(--acid); font-size: .95rem; font-weight: 900; border-radius: 50%; }
.brand-dot { color: #6d6f68; }
.desktop-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 58px; font-size: .84rem; font-weight: 600; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: currentColor; transition: width .25s ease; }
.desktop-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.lang-switcher { display: flex; gap: 3px; }
.lang { border: 0; background: transparent; color: #7a7d75; cursor: pointer; font-size: .7rem; font-weight: 750; padding: 6px 4px; }
.lang.active { color: var(--ink); }
.header-cta { padding: 12px 18px; background: var(--ink); color: white; font-size: .8rem; font-weight: 650; transition: background .2s, color .2s; }
.header-cta:hover { background: var(--acid); color: var(--ink); }

.hero { min-height: 760px; height: calc(100svh - 90px); max-height: 930px; position: relative; padding-top: clamp(70px, 10vh, 120px); display: flex; flex-direction: column; overflow: hidden; }
.hero-kicker { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(200,255,46,.17); }
.hero-title { position: relative; z-index: 2; font-size: clamp(4rem, 8.7vw, 8.4rem); line-height: .87; letter-spacing: -.045em; font-weight: 820; margin: auto 0; max-width: 1250px; }
.hero-title .outlined { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero-bottom { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; padding-bottom: 50px; }
.hero-bottom p { width: min(510px, 55vw); margin: 0; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.45; letter-spacing: -.02em; }
.circle-link { width: 74px; height: 74px; border-radius: 50%; background: var(--acid); display: grid; place-items: center; transition: transform .25s ease; }
.circle-link:hover { transform: rotate(45deg) scale(1.04); }
.circle-link svg { width: 25px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.hero-grid { position: absolute; right: 0; bottom: 0; width: 48%; height: 72%; display: grid; grid-template-columns: repeat(3, 1fr); opacity: .6; }
.hero-grid div { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }

.marquee { overflow: hidden; background: var(--acid); padding: 20px 0; }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 32px; animation: marquee 25s linear infinite; font-weight: 830; font-size: 1rem; letter-spacing: .08em; }
.marquee-track i { width: 6px; height: 6px; background: var(--ink); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-label { display: flex; gap: 18px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.section-label span:first-child { color: #8b8e86; }
.services { padding-bottom: 140px; }
.services-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; padding: 85px 0 90px; align-items: end; }
.services-intro h2, .approach-heading h2, .process-sticky h2 { margin: 0; font-size: clamp(3.2rem, 6.2vw, 6.5rem); line-height: .94; letter-spacing: -.04em; }
.services-intro p { max-width: 490px; margin: 0 0 6px; font-size: 1.14rem; color: #555951; }
.service-board { min-height: 570px; display: grid; grid-template-columns: 1.07fr .93fr; background: var(--ink); color: white; }
.service-list { display: flex; flex-direction: column; }
.service-item { flex: 1; display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 24px 34px; background: transparent; color: white; cursor: pointer; text-align: left; font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: -.035em; transition: background .25s, color .25s; }
.service-item:last-child { border-bottom: 0; }
.service-item:hover, .service-item.active { background: var(--acid); color: var(--ink); }
.service-num { font-size: .68rem; color: #8e9289; align-self: start; padding-top: 7px; letter-spacing: .08em; }
.service-item.active .service-num, .service-item:hover .service-num { color: #59692c; }
.service-arrow { justify-self: end; font-size: 1.1rem; transition: transform .25s; }
.service-item:hover .service-arrow { transform: rotate(45deg); }
.service-display { background: #151717; border-left: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; padding: 30px; }
.display-top { display: flex; justify-content: space-between; font: 650 .67rem/1 monospace; color: #9ba096; letter-spacing: .08em; }
.display-top .status { color: var(--acid); }
.display-icon { margin: auto; width: min(230px, 55%); color: var(--acid); }
.display-icon svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.display-copy { border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px; }
.display-copy h3 { margin: 0 0 10px; font-size: 1.45rem; letter-spacing: -.03em; }
.display-copy p { color: #a9ada5; max-width: 480px; margin: 0; }

.approach { width: 100%; background: var(--ink); color: white; padding: 0 max(32px, calc((100vw - 1440px)/2)) 130px; }
.section-label.light { border-color: rgba(255,255,255,.18); }
.approach-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 110px; padding: 110px 0 120px; align-items: end; }
.approach-heading p { font-size: 1.15rem; color: #a9ada5; margin: 0; max-width: 480px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.18); }
.principles article { min-height: 300px; padding: 28px 34px 20px 0; border-right: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; }
.principles article + article { padding-left: 34px; }
.principles article:last-child { border-right: 0; }
.principles article > span { color: var(--acid); font: .7rem monospace; }
.principles h3 { margin: auto 0 15px; font-size: 1.5rem; }
.principles p { margin: 0; color: #9ca097; max-width: 350px; }

.process { padding-bottom: 150px; }
.process-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13vw; padding-top: 110px; }
.process-sticky { position: sticky; top: 60px; height: max-content; }
.process-sticky h2 { font-size: clamp(3.3rem, 5.2vw, 5.8rem); }
.process-sticky p { max-width: 460px; margin: 32px 0 0; color: #666a61; font-size: 1.08rem; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: grid; grid-template-columns: 70px 1fr; gap: 15px; padding: 35px 0 55px; border-top: 1px solid var(--line); }
.steps li > span { font: .72rem monospace; color: #8b8e86; }
.steps h3 { margin: 0 0 12px; font-size: 1.85rem; letter-spacing: -.04em; }
.steps p { margin: 0; color: #666a61; max-width: 460px; }

.cta-section { position: relative; background: var(--acid); min-height: 600px; width: 100%; padding: 95px max(32px, calc((100vw - 1440px)/2)); overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.cta-section > p { text-transform: uppercase; font-size: .75rem; font-weight: 750; letter-spacing: .1em; margin: 0 0 24px; }
.cta-section h2 { margin: 0; font-size: clamp(4rem, 9vw, 9rem); line-height: .9; letter-spacing: -.045em; position: relative; z-index: 2; }
.cta-section > a { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: min(420px, 100%); padding: 21px 24px; background: var(--ink); color: white; margin-top: 60px; font-weight: 650; transition: transform .2s; }
.cta-section > a:hover { transform: translateY(-4px); }
.cta-orbit { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: min(430px, 34vw); aspect-ratio: 1; border: 1px solid rgba(11,12,12,.25); border-radius: 50%; display: grid; place-items: center; }
.cta-orbit::before, .cta-orbit::after { content: ""; position: absolute; border: 1px solid rgba(11,12,12,.22); border-radius: 50%; inset: 12%; }
.cta-orbit::after { inset: 27%; }
.cta-orbit span { width: 31%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--acid); display: grid; place-items: center; font-size: clamp(2rem, 5vw, 5rem); font-weight: 900; }

.site-footer { min-height: 230px; background: var(--ink); color: white; width: 100%; padding: 55px max(32px, calc((100vw - 1440px)/2)); display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; }
.footer-brand .brand-mark { background: var(--acid); color: var(--ink); }
.site-footer > div { display: flex; flex-direction: column; gap: 8px; color: #9da198; font-size: .82rem; }
.site-footer > div a { color: white; font-size: 1rem; }
.site-footer p { color: #777b73; font-size: .75rem; margin: 0; }
.reveal { opacity: 0; transform: translateY(24px); animation: reveal .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-title { animation-delay: .12s; }.hero-bottom { animation-delay: .22s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  :root { --shell: calc(100vw - 36px); }
  .site-header { height: 76px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 10px; }
  .header-cta { display: none; }
  .hero { height: auto; min-height: calc(100svh - 76px); padding-top: 70px; }
  .hero-title { font-size: clamp(3.7rem, 15vw, 6.6rem); margin: 80px 0; }
  .hero-bottom { align-items: center; }
  .hero-bottom p { width: calc(100% - 90px); font-size: 1rem; }
  .circle-link { width: 58px; height: 58px; }
  .hero-grid { width: 70%; height: 60%; }
  .services { padding-bottom: 80px; }
  .services-intro, .approach-heading, .process-grid { grid-template-columns: 1fr; gap: 34px; padding: 65px 0; }
  .services-intro p, .approach-heading p { max-width: 600px; }
  .service-board { grid-template-columns: 1fr; }
  .service-item { min-height: 90px; }
  .service-display { min-height: 470px; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .approach { padding-bottom: 80px; }
  .approach-heading { padding: 75px 0 80px; }
  .principles { grid-template-columns: 1fr; }
  .principles article, .principles article + article { min-height: 220px; padding: 25px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .process-grid { padding-top: 75px; }
  .process-sticky { position: static; }
  .steps li { padding-bottom: 38px; }
  .cta-orbit { right: -15%; width: 56vw; opacity: .42; }
  .site-footer { grid-template-columns: 1fr auto; gap: 50px 20px; }
  .site-footer > div { order: 3; grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .brand { font-size: 1.1rem; }.brand-mark { width: 30px; height: 30px; }
  .hero-title { font-size: clamp(3.25rem, 16vw, 5rem); }
  .hero-bottom { padding-bottom: 34px; }
  .services-intro h2, .approach-heading h2, .process-sticky h2 { font-size: 3.1rem; }
  .service-item { grid-template-columns: 35px 1fr 20px; padding: 20px; font-size: 1.18rem; }
  .service-display { min-height: 420px; padding: 22px; }
  .cta-section { min-height: 500px; padding-top: 70px; padding-bottom: 70px; }
  .cta-section h2 { font-size: 4rem; }
  .cta-orbit { top: 25%; }
}

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

/* Shared navigation */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { border: 0; padding: 0 0 8px; margin-bottom: -8px; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: inherit; font-weight: inherit; }
/* Both strokes rotate around their own centers: the visual center stays fixed. */
.chevron { position: relative; display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; }
.chevron::before, .chevron::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 1.5px;
  background: currentColor; transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.chevron::before { left: 0; transform-origin: center; transform: translateY(-50%) rotate(40deg); }
.chevron::after { right: 0; transform-origin: center; transform: translateY(-50%) rotate(-40deg); }
.open > button > .chevron::before { transform: translateY(-50%) rotate(-40deg); }
.open > button > .chevron::after { transform: translateY(-50%) rotate(40deg); }
.services-menu { position: absolute; top: 34px; left: 50%; transform: translate(-50%, 8px); width: 430px; padding: 8px; background: #161818; color: #fff; opacity: 0; visibility: hidden; transition: .2s ease; box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.nav-dropdown.open .services-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.services-menu a { display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 10px; padding: 17px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.services-menu a:last-child { border-bottom: 0; }
.services-menu a:hover, .services-menu a.active { background: #292c2a; }
.services-menu a.featured { color: var(--acid); }
.services-menu strong, .services-menu small { display: block; }
.services-menu strong { font-size: .88rem; color: inherit; }
.services-menu small { margin-top: 3px; color: #949991; font-size: .7rem; font-weight: 500; }
.menu-num { align-self: start; padding-top: 2px; color: #71766f; font: .65rem monospace; }
.language-menu { position: relative; }
.language-trigger { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font-size: .72rem; font-weight: 760; }
.globe { font-size: 1rem; }
.language-options { position: absolute; top: 44px; right: 0; width: 128px; padding: 5px; background: var(--ink); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s ease; z-index: 30; box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.language-menu.open .language-options { opacity: 1; visibility: visible; transform: none; }
.language-options button { display: block; width: 100%; border: 0; background: transparent; color: white; text-align: left; padding: 9px 10px; cursor: pointer; font-size: .76rem; }
.language-options button:hover, .language-options button.active { background: var(--acid); color: var(--ink); }
.menu-toggle, .mobile-menu { display: none; }
.dark-header { color: white; border-color: rgba(255,255,255,.18); background: var(--ink); }
.dark-header .brand-mark { background: var(--acid); color: var(--ink); }
.dark-header .language-trigger { border-color: rgba(255,255,255,.28); }
.crm-header { background: var(--acid); }

/* Homepage service directions */
.direction-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.direction-card { min-height: 610px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: background .25s, color .25s; }
.direction-card:hover { background: #e8e9e2; }
.direction-card.flagship { grid-column: 1 / -1; min-height: 520px; background: var(--acid); display: grid; grid-template-columns: .65fr .8fr 1.3fr; align-items: center; gap: 7%; }
.direction-card.flagship:hover { background: #bcf51f; }
.direction-meta { display: flex; justify-content: space-between; align-items: start; font: .68rem monospace; letter-spacing: .06em; color: #777c73; }
.direction-symbol { width: 175px; margin: auto; color: var(--ink); }
.direction-symbol svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.direction-card h3 { font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1; letter-spacing: -.055em; margin: 0 0 18px; }
.direction-card p { max-width: 550px; color: #686c64; margin: 0 0 30px; }
.direction-card.flagship p { color: #4a531f; }
.text-link { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 730; text-transform: uppercase; letter-spacing: .06em; }
.crm-symbol { width: 100%; display: flex; align-items: center; gap: 9px; margin: 0; }
.crm-symbol span { border: 1px solid rgba(11,12,12,.4); padding: 12px 14px; font: .68rem monospace; }
.crm-symbol i { flex: 1; height: 1px; background: rgba(11,12,12,.4); }

/* Service pages */
.service-page { background: var(--paper); }
.service-hero { position: relative; min-height: 780px; padding-top: 34px; padding-bottom: 66px; display: flex; flex-direction: column; overflow: hidden; }
.dark-service-hero { width: 100%; padding-left: max(32px, calc((100vw - 1440px)/2)); padding-right: max(32px, calc((100vw - 1440px)/2)); background: var(--ink); color: white; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .72rem; color: #858a81; }
.breadcrumb a:hover { color: currentColor; text-decoration: underline; }
.service-index { position: absolute; right: 0; top: 34px; font: .72rem monospace; color: #878b83; }
.dark-service-hero .service-index { right: max(32px, calc((100vw - 1440px)/2)); }
.service-hero h1 { position: relative; z-index: 2; margin: auto 0; font-size: clamp(4rem, 8vw, 8rem); line-height: .87; letter-spacing: -.045em; max-width: 1240px; }
.service-hero h1 span { color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
.dark-service-hero h1 span { -webkit-text-stroke-color: var(--paper); }
.service-hero-bottom { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.service-hero-bottom p { margin: 0; max-width: 610px; font-size: clamp(1.05rem, 1.5vw, 1.32rem); }
.service-hero-cta { min-width: 250px; padding: 19px 21px; display: flex; justify-content: space-between; gap: 25px; background: var(--acid); color: var(--ink); font-weight: 700; font-size: .82rem; transition: transform .2s; }
.service-hero-cta:hover { transform: translateY(-4px); }
.service-hero-cta.dark { background: var(--ink); color: white; }
.code-field { position: absolute; right: 8%; top: 23%; width: 34%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1fr 1fr; color: rgba(200,255,46,.55); font: 1rem monospace; }
.code-field span { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); }
.service-lead { padding-bottom: 100px; }
.service-lead-grid { display: grid; grid-template-columns: 1.05fr .75fr; gap: 12vw; padding-top: 90px; align-items: end; }
.service-lead-grid h2 { margin: 0; font-size: clamp(3rem, 5.4vw, 5.9rem); line-height: .95; letter-spacing: -.04em; }
.service-lead-grid p { margin: 0 0 8px; color: #64685f; font-size: 1.13rem; }
.deliverables { display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 140px; }
.deliverables article { min-height: 330px; padding: 26px 30px 28px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.deliverables article:nth-child(3n+2), .deliverables article:nth-child(3n+3) { padding-left: 30px; }
.deliverables article:nth-child(3n) { border-right: 0; }
.deliverables article > span { font: .7rem monospace; color: #92968e; }
.deliverables h3 { margin: auto 0 14px; font-size: 1.55rem; letter-spacing: -.04em; }
.deliverables p { margin: 0; color: #686c64; }
.split-dark { background: var(--ink); color: white; padding: 110px 0; }
.split-dark > .section-shell { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10vw; }
.eyebrow { display: block; margin-bottom: 26px; color: #878d83; font-size: .72rem; text-transform: uppercase; font-weight: 760; letter-spacing: .1em; }
.split-dark h2, .web-principle h2, .integration-process h2 { margin: 0; font-size: clamp(3.4rem, 6vw, 6.5rem); line-height: .93; letter-spacing: -.04em; }
.stack-list > div { padding: 25px 0; border-top: 1px solid rgba(255,255,255,.18); }
.stack-list span { color: var(--acid); font: .7rem monospace; }
.stack-list p { margin: 12px 0 0; color: #acb0a8; }
.service-outcomes { padding-bottom: 130px; }
.outcome-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 11vw; padding-top: 90px; }
.outcome-grid h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .95; letter-spacing: -.06em; }
.outcome-grid p { color: #62665e; font-size: 1.08rem; margin-top: 0; }
.outcome-grid ul { list-style: none; padding: 20px 0 0; margin: 0; }
.outcome-grid li { padding: 14px 0; border-top: 1px solid var(--line); font-weight: 650; }
.next-services { width: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: white; }
.next-services a { min-height: 250px; padding: 40px max(32px, calc((100vw - 1440px)/2)); display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 18px; border-right: 1px solid rgba(255,255,255,.15); }
.next-services a:nth-child(2) { padding-left: 45px; }
.next-services a.accent { background: var(--acid); color: var(--ink); }
.next-services span { grid-column: 1 / -1; color: #959a91; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.next-services strong { font-size: 1.45rem; }
.next-services b { font-size: 1.2rem; }
.browser-field { position: absolute; right: 4%; top: 23%; width: 38%; height: 310px; border: 1px solid var(--line); color: #767a73; }
.browser-field div { height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.browser-field i { width: 6px; height: 6px; border-radius: 50%; background: #989c94; }
.browser-field > span { display: block; margin: 55px auto; width: 70%; padding: 16px; border: 1px solid var(--line); font: .8rem monospace; }
.browser-field strong { position: absolute; right: 28px; bottom: 23px; color: var(--ink); }
.web-principle { background: var(--acid); padding: 105px 0; }
.web-principle .eyebrow { color: #5f6d34; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 90px; border-top: 1px solid rgba(11,12,12,.25); }
.metric-row article { min-height: 160px; padding: 22px 25px 0 0; border-right: 1px solid rgba(11,12,12,.25); display: flex; flex-direction: column; justify-content: space-between; }
.metric-row article + article { padding-left: 25px; }
.metric-row article:last-child { border-right: 0; }
.metric-row strong { font: .7rem monospace; }
.metric-row p { font-weight: 700; max-width: 180px; }

/* CRM flagship */
.crm-hero { width: 100%; background: var(--acid); padding-left: max(32px, calc((100vw - 1440px)/2)); padding-right: max(32px, calc((100vw - 1440px)/2)); }
.crm-hero .service-index { right: max(32px, calc((100vw - 1440px)/2)); color: #596329; }
.flagship-badge { position: absolute; left: max(32px, calc((100vw - 1440px)/2)); top: 80px; padding: 7px 10px; border: 1px solid rgba(11,12,12,.35); font-size: .68rem; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; }
.crm-flow { position: absolute; right: 5%; top: 25%; width: 43%; display: flex; align-items: center; color: rgba(11,12,12,.42); }
.crm-flow span { padding: 14px 12px; border: 1px solid currentColor; font: .65rem monospace; }
.crm-flow i { flex: 1; text-align: center; font-style: normal; }
.crm-statement { padding-top: 130px; padding-bottom: 130px; }
.crm-statement h2 { margin: 0; max-width: 1200px; font-size: clamp(3.5rem, 6.7vw, 7.2rem); line-height: .92; letter-spacing: -.07em; }
.crm-statement p { margin: 60px 0 0 auto; max-width: 650px; color: #62665e; font-size: 1.15rem; }
.comparison { display: grid; grid-template-columns: 1fr 90px 1fr; padding-bottom: 140px; }
.comparison > div:not(.comparison-arrow) { padding: 35px; min-height: 390px; }
.comparison-before { background: #dddeda; color: #555950; }
.comparison-after { background: var(--ink); color: white; }
.comparison-arrow { display: grid; place-items: center; font-size: 2rem; }
.comparison > div > span { font-size: .72rem; text-transform: uppercase; font-weight: 760; letter-spacing: .08em; }
.comparison ul { list-style: none; padding: 55px 0 0; margin: 0; }
.comparison li { padding: 13px 0; border-top: 1px solid currentColor; font-weight: 620; }
.wazzup-section { background: var(--ink); color: white; padding: 45px 0 115px; }
.partner-line { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 40px; font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 830; letter-spacing: -.055em; }
.partner-line i { color: var(--acid); font-style: normal; }
.wazzup-grid { display: grid; grid-template-columns: 1.1fr .75fr; gap: 10vw; padding-top: 90px; }
.wazzup-grid h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.06em; }
.wazzup-grid p { margin: 0 0 35px; color: #adb1a9; font-size: 1.08rem; }
.wazzup-grid a { color: var(--acid); padding-bottom: 5px; border-bottom: 1px solid currentColor; font-weight: 700; }
.crm-deliverables { padding-top: 120px; }
.crm-scenarios { padding-bottom: 130px; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 80px; }
.scenario-grid article { min-height: 270px; padding: 25px 30px 25px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.scenario-grid article + article { padding-left: 30px; }
.scenario-grid article:last-child { border-right: 0; }
.scenario-grid span { font: .7rem monospace; color: #8c9187; }
.scenario-grid h3 { margin: 75px 0 14px; font-size: 1.45rem; }
.scenario-grid p { margin: 0; color: #656960; }
.integration-process { padding: 110px 0 125px; background: var(--acid); }
.integration-process ol { list-style: none; padding: 80px 0 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.integration-process li { min-height: 210px; padding: 23px 25px 0 0; border-top: 1px solid rgba(11,12,12,.28); border-right: 1px solid rgba(11,12,12,.28); display: flex; flex-direction: column; justify-content: space-between; }
.integration-process li + li { padding-left: 25px; }
.integration-process li:last-child { border-right: 0; }
.integration-process li span { font: .7rem monospace; }
.integration-process li p { font-weight: 650; }

@media (max-width: 900px) {
  .site-header { position: relative; }
  .menu-toggle { width: 40px; height: 38px; border: 1px solid var(--line); background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; color: inherit; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { position: absolute; left: 0; right: 0; top: 75px; z-index: 40; padding: 18px; background: var(--ink); color: white; display: none; flex-direction: column; box-shadow: 0 18px 30px rgba(0,0,0,.22); }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { padding: 13px 10px; border-top: 1px solid rgba(255,255,255,.13); font-weight: 650; }
  .mobile-menu-label { padding: 18px 10px 7px; color: var(--acid); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
  .language-trigger { height: 38px; }
  .direction-grid { grid-template-columns: 1fr; }
  .direction-card { min-height: 520px; }
  .direction-card.flagship { grid-column: auto; grid-template-columns: 1fr; min-height: 620px; gap: 45px; }
  .crm-symbol { align-self: center; }
  .service-hero { min-height: 700px; }
  .service-hero h1 { font-size: clamp(3.8rem, 13vw, 6.4rem); }
  .service-hero-bottom { align-items: flex-start; flex-direction: column; }
  .code-field, .browser-field, .crm-flow { opacity: .28; width: 60%; right: -7%; }
  .service-lead-grid, .split-dark > .section-shell, .outcome-grid, .wazzup-grid { grid-template-columns: 1fr; gap: 40px; }
  .deliverables { grid-template-columns: 1fr 1fr; }
  .deliverables article:nth-child(n) { padding: 25px; border-right: 1px solid var(--line); }
  .deliverables article:nth-child(even) { border-right: 0; }
  .metric-row, .integration-process ol { grid-template-columns: 1fr 1fr; }
  .metric-row article:nth-child(even), .integration-process li:nth-child(even) { border-right: 0; }
  .comparison { grid-template-columns: 1fr; gap: 15px; }
  .comparison-arrow { transform: rotate(90deg); min-height: 50px; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-grid article, .scenario-grid article + article { padding: 25px 0; border-right: 0; }
}

@media (max-width: 540px) {
  .language-trigger { padding: 0 8px; }
  .globe { display: none; }
  .direction-card { padding: 23px; }
  .direction-symbol { width: 140px; }
  .service-hero { min-height: 670px; padding-top: 25px; }
  .service-hero h1 { font-size: 3.45rem; }
  .service-index { top: 25px; }
  .flagship-badge { top: 62px; }
  .service-hero-cta { width: 100%; min-width: 0; }
  .deliverables { grid-template-columns: 1fr; }
  .deliverables article:nth-child(n) { min-height: 260px; border-right: 0; padding-left: 0; padding-right: 0; }
  .metric-row, .integration-process ol { grid-template-columns: 1fr; }
  .metric-row article:nth-child(n), .integration-process li:nth-child(n) { border-right: 0; padding-left: 0; min-height: 145px; }
  .next-services { grid-template-columns: 1fr; }
  .next-services a, .next-services a:nth-child(2) { min-height: 200px; padding: 32px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .comparison > div:not(.comparison-arrow) { padding: 25px; }
  .partner-line { font-size: 2.1rem; }
}

/* Graphite and lime product illustrations */
.product-art { margin-top: 32px; margin-bottom: 32px; background: transparent; overflow: hidden; }
.product-art img { display: block; width: 100%; height: auto; }
.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer > div a { margin: 0; }
.site-footer > div a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Focus is indicated by the existing fill/color treatment, without an outer ring. */
:focus, :focus-visible { outline: none; }
a:focus-visible, button:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .product-art img { width: 180%; max-width: none; margin-left: -40%; }
  .product-art { margin-block: 16px; }
  .site-footer > div { gap: 12px; }
}

/* Smoked liquid glass: light catches the rim while the content stays readable. */
:root {
  --glass-surface: rgba(23, 28, 25, .78);
  --glass-edge: rgba(242, 243, 237, .23);
  --glass-text: #f2f3ed;
  --glass-shadow: 0 26px 70px rgba(7, 12, 8, .28);
  --glass-motion: cubic-bezier(.22, 1, .36, 1);
}
.product-art { border-radius: 0; position: relative; isolation: isolate; }
.product-art img { transition: transform 1.6s var(--glass-motion); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-art:hover img { transform: scale(1.025); }
}
.services-menu, .language-options {
  background: linear-gradient(135deg, rgba(255,255,255,.09), transparent 45%), var(--glass-surface);
  border: 1px solid var(--glass-edge);
  border-radius: 0;
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.13);
  transition: opacity .28s ease, visibility .28s, transform .4s var(--glass-motion);
  overflow: hidden;
}
.services-menu a, .language-options button { border-radius: 0; }
.services-menu a:hover { background: rgba(200,255,46,.1); }
.services-menu small { color: #bac1b3; }
.menu-toggle { border-radius: 0; }
.menu-toggle:focus-visible, .language-trigger:focus-visible { background: rgba(200,255,46,.14); }
@media (max-width: 900px) {
  .mobile-menu {
    display: flex;
    top: calc(100% + 12px);
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid var(--glass-edge);
    border-radius: 0;
    color: var(--glass-text);
    background: radial-gradient(ellipse at 100% 0, rgba(200,255,46,.08), transparent 55%), linear-gradient(145deg, rgba(255,255,255,.1), transparent 48%), var(--glass-surface);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(200,255,46,.06);
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(.975);
    transform-origin: top right;
    transition: opacity .24s ease, transform .42s var(--glass-motion), visibility 0s linear .42s;
  }
  .mobile-menu.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .28s ease, transform .5s var(--glass-motion), visibility 0s;
  }
  .mobile-menu > * {
    opacity: 0; transform: translateY(-9px);
    transition: opacity .16s ease, transform .2s ease;
  }
  .mobile-menu.open > * {
    opacity: 1; transform: none;
    transition: opacity .35s ease, transform .5s var(--glass-motion);
    transition-delay: calc(45ms + var(--menu-order, 0) * 35ms);
  }
  .mobile-menu > :nth-child(2) { --menu-order: 1; }
  .mobile-menu > :nth-child(3) { --menu-order: 2; }
  .mobile-menu > :nth-child(4) { --menu-order: 3; }
  .mobile-menu > :nth-child(5) { --menu-order: 4; }
  .mobile-menu > :nth-child(6) { --menu-order: 5; }
  .mobile-menu a { position: relative; padding: 16px 12px; border-color: rgba(255,255,255,.12); border-radius: 0; }
  .mobile-menu a::after { content: '↗'; position: absolute; right: 12px; color: var(--acid); opacity: .65; }
  .mobile-menu a:hover, .mobile-menu a:focus-visible { background: rgba(200,255,46,.09); }
  .mobile-menu a:last-child { color: var(--acid); margin-top: 10px; border: 1px solid rgba(200,255,46,.24); background: rgba(200,255,46,.06); }
  .menu-toggle { transition: background .25s, border-color .25s, box-shadow .25s; }
  .menu-toggle[aria-expanded='true'] { background: rgba(200,255,46,.1); border-color: rgba(110,139,39,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
  .menu-toggle span { transition: transform .4s var(--glass-motion); }
}
@media (max-width: 600px) {
  .product-art img { width: 150%; margin-left: -25%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu, .services-menu, .language-options { background: #202722; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu > *, .product-art img { transition: none; }
}

/* Architectural line art stays behind the hero copy and never captures input. */
.hero { isolation: isolate; }
.hero-kicker { position: relative; z-index: 2; }
.hero-orbital-art {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(440px, 59vw, 850px); height: auto; max-width: none;
  right: -5%; top: 43%; transform: translateY(-50%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
}
@media (max-width: 900px) {
  .hero-orbital-art { width: 680px; right: -210px; top: 38%; opacity: .75; }
}
@media (max-width: 540px) {
  .hero-orbital-art { width: 500px; right: -200px; top: 35%; opacity: .6; }
}
.hero-grid {
  inset: 0 0 0 auto; width: 75%; height: 100%; display: block; opacity: 1;
  pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, rgba(48,53,50,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(48,53,50,.075) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.hero-grid > div { display: none; }

/* Shared inner-page rhythm: readable type, aligned grids, quiet decoration. */
.service-page h1, .service-page h2, .service-page h3 { overflow-wrap: anywhere; }
.service-hero { min-height: 650px; padding-top: 32px; padding-bottom: 48px; gap: 36px; isolation: isolate; }
.service-hero h1 { font-size: clamp(3.5rem, 7.1vw, 7.2rem); line-height: 1.02; letter-spacing: -.04em; margin: auto 0; }
.breadcrumb { position: relative; z-index: 2; padding-right: 85px; color: #666d61; }
.dark-service-hero .breadcrumb { color: #aab0a3; }
.service-index { top: 34px; }
.service-hero-bottom { align-items: center; gap: 40px; }
.service-hero-bottom p { min-width: 0; max-width: 650px; line-height: 1.55; }
.service-hero-cta { flex: 0 0 auto; align-items: center; }
.code-field, .browser-field, .crm-flow { pointer-events: none; z-index: 0; opacity: .2; }
.code-field span:last-child { grid-column: 1 / -1; }
.browser-field { opacity: .13; }
.crm-flow { top: 20%; opacity: .2; }
.flagship-badge { position: static; width: fit-content; align-self: flex-start; margin-top: -12px; }
.service-lead-grid, .outcome-grid, .split-dark > .section-shell, .wazzup-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(40px,7vw,100px); }
.service-lead-grid h2, .outcome-grid h2, .split-dark h2, .web-principle h2, .wazzup-grid h2, .integration-process h2 { font-size: clamp(2.5rem,4.5vw,5.4rem); line-height: 1.07; letter-spacing: -.055em; }
.crm-statement h2 { font-size: clamp(2.7rem,5.5vw,6rem); line-height: 1.06; }
.deliverables { gap: 0; }
.deliverables article { min-height: 330px; padding: 28px; }
.deliverables article:nth-child(3n+1) { padding-left: 0; }
.deliverables article:nth-child(3n) { padding-right: 0; }
.deliverables h3 { font-size: 1.4rem; line-height: 1.2; min-height: 3.6em; margin: 42px 0 16px; }
.deliverables p { line-height: 1.6; }
.scenario-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scenario-grid h3 { font-size: 1.3rem; line-height: 1.25; min-height: 2.5em; margin-top: 40px; }
.next-services { grid-template-columns: repeat(2,minmax(0,1fr)); }
.next-services a { padding: 36px max(32px,calc((100vw - 1440px)/2)); min-width: 0; }
.next-services a:nth-child(2) { padding-left: 36px; }
.next-services strong { font-size: clamp(1.25rem,2vw,1.7rem); line-height: 1.25; overflow-wrap: anywhere; }
.next-services .accent > span { color: #53621e; }
.cta-section { isolation: isolate; }
.cta-section > p, .cta-section > h2, .cta-section > a { position: relative; z-index: 1; }
.cta-section h2 { font-size: clamp(3.2rem,7.3vw,8rem); line-height: 1.03; max-width: 1100px; overflow-wrap: anywhere; }
.cta-orbit { z-index: 0; right: -5%; opacity: .13; pointer-events: none; }
.cta-section > a { max-width: 100%; }
@media (max-width: 1000px) {
  .service-lead-grid, .outcome-grid, .split-dark > .section-shell, .wazzup-grid { grid-template-columns: 1fr; gap: 32px; }
  .service-lead-grid p, .outcome-grid p { max-width: 700px; }
  .deliverables { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deliverables article:nth-child(n) { padding: 28px; border-right: 1px solid var(--line); }
  .deliverables article:nth-child(2n+1) { padding-left: 0; }
  .deliverables article:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 900px) {
  .service-hero { min-height: 620px; gap: 32px; }
  .service-hero h1 { font-size: clamp(2.8rem,8.7vw,5.5rem); }
  .dark-service-hero, .crm-hero { padding-left: 18px; padding-right: 18px; }
  .dark-service-hero .service-index, .crm-hero .service-index { right: 18px; }
  .service-hero-bottom { align-items: flex-start; gap: 24px; }
  .code-field, .browser-field, .crm-flow { opacity: .1; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-grid h3 { min-height: 0; margin-top: 24px; }
  .service-lead-grid { padding-top: 52px; }
  .service-lead, .service-outcomes, .crm-scenarios { padding-bottom: 72px; }
  .deliverables { padding-bottom: 80px; }
  .split-dark, .web-principle, .integration-process { padding-block: 72px; }
  .crm-statement { padding-block: 72px; }
  .comparison { padding-bottom: 72px; }
  .wazzup-grid, .outcome-grid { padding-top: 52px; }
  .wazzup-section { padding-bottom: 72px; }
  .crm-deliverables { padding-top: 72px; }
  .metric-row, .integration-process ol { margin-top: 48px; }
  .integration-process ol { padding-top: 0; }
  .partner-line { font-size: clamp(1.5rem,5vw,3rem); gap: 20px; }
}
@media (max-width: 540px) {
  .service-hero { min-height: 0; gap: 32px; padding-block: 28px 40px; }
  .service-hero h1 { font-size: clamp(2.2rem,10.2vw,3.45rem); margin-block: 20px; }
  .service-index { top: 29px; font-size: .62rem; }
  .breadcrumb { font-size: .67rem; gap: 6px; padding-right: 68px; }
  .service-hero-bottom p { font-size: 1rem; }
  .service-hero-cta { width: 100%; min-width: 0; }
  .crm-flow { width: 85%; right: -15%; top: 22%; }
  .crm-flow span { padding: 10px 7px; font-size: .55rem; }
  .service-lead-grid h2, .outcome-grid h2, .split-dark h2, .web-principle h2, .wazzup-grid h2, .integration-process h2, .crm-statement h2 { font-size: clamp(2rem,8.6vw,2.8rem); }
  .deliverables { grid-template-columns: 1fr; }
  .deliverables article:nth-child(n) { padding: 24px 0 32px; border-right: 0; min-height: 0; }
  .deliverables h3 { min-height: 0; margin-top: 24px; }
  .next-services { grid-template-columns: 1fr; }
  .next-services a, .next-services a:nth-child(2) { min-height: 190px; padding: 28px 18px; }
  .cta-section h2 { font-size: clamp(2.7rem,11vw,3.5rem); }
  .cta-orbit { width: 85vw; right: -25%; opacity: .1; }
  .comparison > div:not(.comparison-arrow) { padding: 24px; min-height: 0; }
  .comparison ul { padding-top: 28px; }
}

@media (max-width: 540px) {
  .metric-row { margin-top: 36px; }
  .metric-row article:nth-child(n) { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(11,12,12,.25); flex-direction: row; align-items: baseline; gap: 24px; }
  .metric-row p { max-width: 260px; margin: 0; flex: 1; }
}

/* CRM service narrative. Preserve rectangular geometry and shared site tokens. */
.crm-page .crm-hero { min-height: 660px; gap: 28px; }
.crm-page .crm-hero h1 { font-size: clamp(3rem,6.5vw,6.7rem); }
.crm-hero-notes { display:flex; gap:28px; border-top:1px solid rgba(11,12,12,.22); padding-top:20px; font-size:.75rem; font-weight:700; }
.crm-hero-notes span::before { content:'↗'; margin-right:10px; }
.crm-section { padding-block:96px; }
.crm-section .section-label { padding-top:0; }
.crm-section-intro { padding-top:48px; max-width:1000px; }
.crm-section-intro h2 { margin:0; font-size:clamp(2.4rem,4.7vw,5rem); line-height:1.06; letter-spacing:-.055em; }
.crm-section > p { max-width:760px; font-size:1.1rem; color:#62665e; margin:28px 0 48px; }
.crm-channel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--line); }
.crm-channel-grid article { padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.crm-channel-grid article:nth-child(3n+1) { padding-left:0; }
.crm-channel-grid article:nth-child(3n) { border-right:0; }
.crm-channel-mark { display:inline-grid; place-items:center; width:46px; height:40px; border:1px solid var(--ink); font:700 .8rem monospace; color:var(--ink); background:var(--acid); }
.crm-channel-grid h3 { font-size:1.35rem; letter-spacing:-.035em; margin:24px 0 10px; }
.crm-channel-grid p { color:#62665e; margin:0; }
.crm-section > p[data-i18n="crm_channels_note"], .crm-section > p[data-i18n="crm_offer_terms"] { font-size:.83rem; line-height:1.65; max-width:1000px; margin:26px 0 0; }
.crm-workspace { background:var(--ink); color:var(--paper); padding-block:96px; }
.crm-workspace .section-label, .crm-levels .section-label { border-color:rgba(255,255,255,.22); }
.crm-workspace .section-label > span:last-child, .crm-levels .section-label > span:last-child { color:var(--acid); }
.crm-workspace-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:48px; margin-top:52px; align-items:start; }
.crm-page figure { margin:0; min-width:0; }
.crm-image-frame { overflow:hidden; border:1px solid var(--line); }
.crm-image-frame img { display:block; width:100%; height:auto; border-radius:0; }
.crm-page figcaption { font:.7rem/1.5 monospace; margin-top:14px; opacity:.65; }
.crm-workspace-copy > p { font-size:1.1rem; line-height:1.6; margin:0 0 30px; color:#b6bcb2; }
.crm-workspace-copy ol { list-style:none; margin:0; padding:0; }
.crm-workspace-copy li { display:flex; gap:18px; border-top:1px solid rgba(255,255,255,.2); padding:18px 0; font-size:.95rem; }
.crm-workspace-copy li > span:first-child { color:var(--acid); font:.7rem monospace; padding-top:4px; }
.crm-offer-banner { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr); gap:70px; background:var(--acid); padding:48px; margin-top:52px; }
.crm-offer-banner h2 { font-size:clamp(2rem,3.4vw,3.7rem); letter-spacing:-.05em; line-height:1.08; margin:10px 0 24px; }
.crm-offer-banner p { max-width:650px; margin:0 0 30px; }
.crm-zero { border-left:1px solid rgba(11,12,12,.25); padding-left:48px; display:flex; flex-direction:column; justify-content:center; }
.crm-zero strong { font-size:clamp(7rem,14vw,12rem); line-height:.85; letter-spacing:-.08em; }
.crm-zero span { font:.75rem/1.5 monospace; margin-top:24px; text-transform:uppercase; }
.crm-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid currentColor; padding-block:10px; font-weight:700; }
.crm-link:hover, .crm-link:focus-visible { color:#687b1f; }
.crm-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; border:1px solid var(--line); }
.crm-plan-grid > article { display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); }
.crm-plan-grid > article:last-child { border-right:0; }
.crm-plan-grid img { width:100%; aspect-ratio:1.6; object-fit:cover; object-position:top; height:auto; border-bottom:1px solid var(--line); }
.crm-plan-body { padding:28px; display:flex; flex-direction:column; flex:1; }
.crm-plan-body h3 { margin:16px 0; font-size:1.6rem; letter-spacing:-.04em; line-height:1.15; }
.crm-plan-body .eyebrow { font-size:.63rem; }
.crm-plan-price { font-size:.95rem; min-height:3em; }
.crm-plan-body ul { list-style:none; padding:0; margin:18px 0 28px; }
.crm-plan-body li { border-top:1px solid var(--line); padding:12px 0; font-size:.9rem; color:#62665e; }
.crm-plan-body .crm-link { margin-top:auto; font-size:.85rem; }
.crm-levels { background:var(--ink); color:var(--paper); padding-block:96px; }
.crm-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:56px; }
.crm-level-grid article { border-top:1px solid rgba(255,255,255,.25); padding-top:24px; }
.crm-level-num { color:var(--acid); font:.8rem monospace; }
.crm-level-grid h3 { font-size:2rem; letter-spacing:-.04em; margin:40px 0 16px; }
.crm-level-grid p { color:#b6bcb2; margin:0; }
.crm-case-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:64px; margin-top:48px; align-items:center; }
.crm-case-grid p { font-size:1.1rem; color:#62665e; line-height:1.65; }
.crm-case-flow { padding-block:24px; margin-block:28px; border-block:1px solid var(--line); font:.8rem/1.7 monospace; }
.crm-case-grid .crm-link { font-size:.9rem; }
.crm-cap-heading { padding-top:0; }
.crm-page .crm-deliverables { padding-top:56px; padding-bottom:96px; }
.crm-faq-list { margin-top:48px; }
.crm-faq details { border-top:1px solid var(--line); }
.crm-faq details:last-child { border-bottom:1px solid var(--line); }
.crm-faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:28px; cursor:pointer; padding:26px 0; font-weight:700; font-size:1.2rem; }
.crm-faq summary::-webkit-details-marker { display:none; }
.crm-faq summary:hover, .crm-faq summary:focus-visible { color:#687b1f; }
.crm-faq details[open] .chevron::before { transform:translateY(-50%) rotate(-40deg); }
.crm-faq details[open] .chevron::after { transform:translateY(-50%) rotate(40deg); }
.crm-faq details > div { max-width:850px; padding-bottom:28px; }
.crm-faq details p { color:#62665e; margin:0; line-height:1.7; }
.crm-page .cta-section > p[data-i18n="crm_final_text"] { max-width:650px; font-size:1.1rem; text-transform:none; letter-spacing:0; font-weight:400; line-height:1.6; margin-bottom:28px; }
@media(max-width:1000px) {
 .crm-workspace-grid, .crm-case-grid { grid-template-columns:1fr; gap:32px; }
 .crm-workspace-copy ol { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
 .crm-plan-body { padding:20px; }
 .crm-plan-body h3 { font-size:1.3rem; }
 .crm-plan-price { min-height:4em; }
 .crm-offer-banner { gap:40px; padding:36px; }
}
@media(max-width:700px) {
 .crm-page .crm-hero { min-height:0; padding-block:28px 36px; }
 .crm-page .crm-hero h1 { font-size:clamp(2.2rem,9.4vw,4rem); margin:18px 0; }
 .crm-hero-notes { flex-direction:column; gap:10px; }
 .crm-section, .crm-workspace, .crm-levels { padding-block:64px; }
 .crm-section-intro { padding-top:32px; }
 .crm-section-intro h2 { font-size:clamp(2rem,8.3vw,3.2rem); }
 .crm-channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .crm-channel-grid article:nth-child(n) { padding:22px 16px; border-right:1px solid var(--line); }
 .crm-channel-grid article:nth-child(2n+1) { padding-left:0; }
 .crm-channel-grid article:nth-child(2n) { border-right:0; padding-right:0; }
 .crm-channel-grid h3 { font-size:1.15rem; overflow-wrap:anywhere; }
 .crm-channel-grid p { font-size:.9rem; }
 .crm-workspace-copy ol, .crm-offer-banner, .crm-plan-grid, .crm-level-grid { grid-template-columns:1fr; }
 .crm-offer-banner { padding:28px 24px; gap:36px; margin-top:36px; }
 .crm-zero { border-left:0; border-top:1px solid rgba(11,12,12,.25); padding:30px 0 0; flex-direction:row; align-items:center; gap:28px; justify-content:flex-start; }
 .crm-zero strong { font-size:7rem; }
 .crm-zero span { margin:0; max-width:150px; }
 .crm-plan-grid > article { border-right:0; border-bottom:1px solid var(--line); }
 .crm-plan-grid > article:last-child { border-bottom:0; }
 .crm-plan-body { padding:24px; }
 .crm-plan-body h3 { font-size:1.6rem; }
 .crm-plan-price { min-height:0; }
 .crm-plan-grid img { max-height:270px; }
 .crm-level-grid h3 { margin-top:24px; }
 .crm-page .crm-deliverables { padding-block:36px 64px; }
 .crm-faq summary { font-size:1.05rem; padding-block:22px; }
 .crm-page .cta-section h2 { font-size:clamp(2.5rem,10vw,4rem); }
}

.crm-page .cta-section > p[data-i18n="crm_final_text"] { margin-top:24px; margin-bottom:0; }
.crm-page .cta-section > a { margin-top:32px; }

/* Approved Construct identity: vector wordmark and orbital cube. */
.brand { display:inline-flex; flex-shrink:0; gap:0; }
.site-logo { display:block; width:178px; height:auto; }
.footer-brand .site-logo { width:220px; }
@media (max-width:540px) {
  .site-header .site-logo { width:142px; }
  .footer-brand .site-logo { width:184px; }
}

/* Three complementary service infographics share the graphite/lime materials. */
.direction-card { min-width:0; }
.direction-symbol.service-infographic {
  width:100%; height:clamp(240px,25vw,340px); max-width:600px;
  margin:24px auto 32px; display:block;
}
.service-infographic img { display:block; width:100%; height:100%; object-fit:contain; }
.direction-card.flagship {
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:6%; row-gap:24px; min-height:440px;
}
.direction-card.flagship .direction-meta { grid-column:1 / -1; }
.direction-card.flagship .service-infographic { margin:0; height:320px; max-width:none; }
@media (max-width:900px) {
  .direction-card { min-height:0; }
  .direction-symbol.service-infographic { height:clamp(220px,48vw,340px); }
  .direction-card.flagship { grid-template-columns:minmax(0,1fr); min-height:0; gap:24px; }
  .direction-card.flagship .service-infographic { height:clamp(220px,48vw,340px); margin:0 auto; }
}
@media (prefers-reduced-motion:reduce) {
  .direction-card { transition:none; }
}

/* Isolated product objects blend into the page, with the full trio visible on mobile. */
.product-art { background:transparent; }
.product-art img { width:100%; max-width:100%; margin-left:0; }

/* The approved cube/orbit mark replaces the old W badge in every contact section. */
.cta-orbit img { display:block; width:66%; height:auto; }