
:root{--paper:#F7F7F6;--panel:#ECEDEA;--raised:#FCFCFA;--band:#DFE2DC;--ink:#303533;--body:#4D5853;--muted:#78827B;--line:#D2D6D1;--petrol:#39656B;--sans:Geist,system-ui,sans-serif;--mono:'Geist Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans)}h1,h2,h3,p,figure,dl{margin:0}a{color:inherit;text-underline-offset:4px}a:focus-visible{outline:2px solid var(--petrol);outline-offset:5px}.wrap{width:100%;max-width:1600px;margin:auto;padding-inline:7vw}.brand{display:inline-flex;gap:10px;align-items:center;font-size:22px;font-weight:600;letter-spacing:-.04em;text-decoration:none}.brand-mark{width:26px;height:26px;border-radius:2px;overflow:hidden;flex:none}.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ffffff35}.nav nav{display:flex;align-items:center;gap:28px;font-size:12px}.nav nav a{text-decoration:none;color:#E0E5DF}.nav nav a:hover{text-decoration:underline}.nav nav a[aria-current]{color:#fff}.hero{position:relative;isolation:isolate;min-height:min(850px,100svh);background:#303533;color:var(--paper);overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 45%;z-index:-3}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#202925f5,#202925b5 48%,#20292520);z-index:-2}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#20292580,transparent 55%);z-index:-1}.hero-content{padding:88px 0 64px;max-width:860px}.eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.065em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:20px}.hero .eyebrow{color:#D1DAD2}.hero h1{font-size:clamp(48px,5.8vw,84px);font-weight:450;line-height:1.03;letter-spacing:-.06em;margin-bottom:28px}.hero-content>p{font-size:18px;line-height:1.6;color:#E0E5DF;max-width:560px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}.btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;border-radius:2px;background:var(--ink);color:var(--raised);text-decoration:none;font-size:13px;font-weight:500}.hero .btn{background:var(--paper);color:var(--ink)}.btn:hover{filter:brightness(.93)}.text-link{font-size:12px}.arrow{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-2px;flex:none}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:24px}.hero-bottom>p{font-size:10px;line-height:1.6;color:#D1DAD2;max-width:370px}.hero-note{max-width:300px;padding:18px 20px;background:var(--paper);color:var(--ink)}.hero-note span{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.hero-note p{font-size:13px;margin-top:12px}.section{padding-block:64px}.section-head{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;margin-bottom:32px}h2{font-size:clamp(28px,1.4rem + .95vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.15}.section-head>p{font-size:15px;color:var(--body);max-width:520px}.conditions{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.condition{border-top:1px solid var(--line);padding-top:20px}.condition h3{font-size:18px;line-height:1.25;font-weight:500;letter-spacing:-.02em;margin-bottom:14px}.condition p{font-size:14px;line-height:1.65;color:var(--body)}.offering-section{background:var(--panel)}.offering-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:64px}.offering-intro p{font-size:15px;color:var(--body);margin:24px 0;max-width:440px}.terms-line{padding:16px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);max-width:440px}.terms-line strong{font-weight:500;color:var(--ink)}.package-list{border-top:1px solid #A6B2A8}.package-row{padding:20px 0;border-bottom:1px solid #BCC6BE;display:grid;grid-template-columns:30px 1fr;gap:20px}.package-row>span{font:11px var(--mono);color:var(--muted);padding-top:4px}.package-row h3{font-size:20px;line-height:1.25;font-weight:500;letter-spacing:-.025em;margin-bottom:10px}.package-row p{font-size:14px;color:var(--body);max-width:550px}.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.workflow article{border-top:1px solid var(--line);padding-top:20px}.workflow .num{font:11px var(--mono);color:var(--muted);display:block;margin-bottom:20px}.workflow h3{font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.025em;margin-bottom:14px}.workflow p{font-size:14px;color:var(--body)}.review-note{margin-top:28px;border-left:2px solid var(--petrol);padding-left:16px;font-size:13px;color:var(--body);max-width:760px}.deployment-section{border-top:1px solid var(--line)}.deployment-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:48px}.deployment-figure{border:1px solid var(--line);padding:24px;border-radius:4px}.deployment-figure svg{display:block;width:100%;height:auto}.deployment-figure figcaption{font-size:11px;color:var(--muted);margin-top:16px}.deployment-label{font:11px var(--mono);fill:var(--ink)}.deployment-detail{font:11px var(--sans);fill:var(--body)}.deployment-title{font:500 19px var(--sans);fill:var(--ink)}.bundle-list{display:flex;flex-direction:column;justify-content:center}.bundle-list article{padding:20px 0;border-bottom:1px solid var(--line)}.bundle-list article:first-child{padding-top:0}.bundle-list h3{font-size:19px;font-weight:500;margin-bottom:10px}.bundle-list p{font-size:14px;color:var(--body)}.bundle-list small{font-size:12px;line-height:1.6;color:var(--muted);display:block;margin-top:20px}.evaluation{background:var(--raised);border-top:1px solid var(--line)}.evaluation-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}.evaluation-list div{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:100px 1fr;gap:16px;font-size:13px}.evaluation-list dt{color:var(--muted)}.evaluation-list dd{margin:0;color:var(--body)}.closing{background:var(--band);padding:48px 0}.closing-inner{display:flex;justify-content:space-between;align-items:center;gap:48px}.closing p{font-size:15px;color:var(--body);max-width:560px;margin-top:20px}.site-footer{background:var(--ink);color:var(--paper);padding:40px 7vw 24px}.footer-top,.footer-bottom{max-width:1376px;margin:auto;display:flex;justify-content:space-between;gap:48px}.footer-identity p{font-size:13px;color:#C0C8C3;margin-top:20px}.footer-navigation{display:grid;grid-template-columns:1fr 1fr;gap:56px}.footer-navigation h3{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C0C8C3;margin-bottom:16px}.footer-navigation a{display:block;font-size:12px;margin-bottom:12px;text-decoration:none}.footer-navigation a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #5E6961;padding-top:18px;margin-top:32px;font-size:11px;color:#C0C8C3}.brand:hover{text-decoration:none}
@media(max-width:900px){.hero h1{font-size:62px}.offering-layout{gap:32px}.deployment-layout{gap:28px}.section-head{gap:32px}.hero-content{padding-top:64px}}@media(max-width:700px){.wrap{padding-inline:24px}.hero{min-height:0}.nav nav{gap:16px}.nav nav a:last-child{display:none}.hero-content{padding-block:56px 40px}.hero h1{font-size:48px}.hero-content>p{font-size:16px}.hero-bottom{align-items:start;flex-direction:column-reverse;gap:20px}.hero-note{max-width:360px}.section{padding-block:40px}.section-head,.offering-layout,.workflow,.conditions,.deployment-layout,.evaluation-list{grid-template-columns:1fr;gap:24px}.package-row{padding:18px 0}.evaluation-list{gap:0}.closing-inner{display:block}.closing .btn{margin-top:24px}.site-footer{padding:32px 24px 20px}.footer-top{flex-direction:column;gap:32px}.footer-navigation{gap:32px}.footer-bottom{gap:20px}.hero-note{padding:16px 20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero::before { background: linear-gradient(90deg, rgba(39,56,55,.98) 0%, rgba(39,56,55,.94) 20%, rgba(39,56,55,.8) 35%, rgba(39,56,55,.61) 45%, rgba(39,56,55,.3) 65%, rgba(39,56,55,.12) 80%, rgba(39,56,55,.02) 100%); }
.hero::after { background: linear-gradient(0deg, rgba(39,56,55,.18), transparent 40%); }

.closing { position: relative; isolation: isolate; overflow: hidden; }
.closing::before { content: ""; position: absolute; inset: 0; background: url("../images/cta-topographic-7.svg") center / 600px auto repeat; opacity: .4; z-index: -1; pointer-events: none; }
@media(max-width:700px) { .closing::before { background-size: 440px auto; opacity: .3; } }

.evaluation-process { list-style: none; margin: 0; padding: 0; }
.evaluation-process li { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.evaluation-process li:last-child { border-bottom: 1px solid var(--line); }
.evaluation-process li > span { font: 12px/1.6 var(--mono); color: var(--muted); padding-top: 3px; }
.evaluation-process h3 { font-size: 20px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 12px; }
.evaluation-process p { font-size: 14px; color: var(--body); max-width: 780px; }
.evaluation-scope { font-size: 12px; color: var(--muted); margin-top: 24px; max-width: 760px; }
@media(max-width:700px) { .evaluation-process li { grid-template-columns: 28px 1fr; gap: 16px; padding: 20px 0; } }

/* A closing invitation with enough detail to make the next step concrete. */
.evaluation-invitation { padding-block: 56px; }
.evaluation-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.evaluation-steps li { border-top: 1px solid #AEB8AE; padding-top: 20px; display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.evaluation-steps li > span { font: 11px/1.5 var(--mono); color: var(--muted); padding-top: 3px; }
.evaluation-steps h3 { font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; }
.evaluation-steps p { font-size: 14px; line-height: 1.6; margin-top: 12px; }
@media(max-width:900px) { .evaluation-steps { gap: 24px; } .evaluation-steps li { grid-template-columns: 1fr; gap: 10px; } }
@media(max-width:700px) { .evaluation-invitation { padding-block: 40px; } .evaluation-steps { grid-template-columns: 1fr; margin-top: 32px; gap: 24px; } .evaluation-steps li { grid-template-columns: 24px 1fr; gap: 14px; } }

/* Fill the opening viewport and give the closing steps more breathing room. */
.hero { min-height: 100svh; }
.evaluation-invitation { padding-bottom: 80px; }
@media(max-width:700px) {
  .evaluation-invitation { padding-bottom: 64px; }
}

/* Shared local-loop treatment, with application-specific detail. */
.application-loop { border: 1px solid var(--line); padding: 24px 24px 38px; }
.local-loop-stages { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: stretch; }
.local-loop-stage { border: 1px solid var(--line); background: var(--raised); padding: 20px; }
.local-loop-stage > span { display: block; font: 400 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.local-loop-stage h3 { font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: -.025em; margin: 12px 0 10px; }
.local-loop-stage p { font-size: 13px; line-height: 1.55; color: var(--body); }
.loop-connector { display: flex; align-items: center; justify-content: center; }
.loop-connector svg { width: 24px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1; }
.local-loop-return { position: relative; border: 1px solid var(--muted); border-top: 0; margin: 0 14%; height: 32px; text-align: center; }
.local-loop-return::before { content: ''; position: absolute; top: 0; left: -4px; width: 7px; height: 7px; border-left: 1px solid var(--muted); border-top: 1px solid var(--muted); transform: rotate(45deg); }
.local-loop-return span { position: relative; top: 21px; padding: 0 12px; background: var(--paper); color: var(--muted); font: 400 10px/1.5 var(--mono); }
@media(max-width:900px) { .application-loop { padding: 18px 18px 32px; } .local-loop-stage { padding: 16px; } }
@media(max-width:650px) {
  .local-loop-stages { grid-template-columns: 1fr; }
  .loop-connector { height: 30px; }
  .loop-connector svg { transform: rotate(90deg); }
  .local-loop-return { margin: 0 8px; height: 28px; }
  .local-loop-return span { top: 18px; font-size: 9px; padding: 0 5px; }
}

/* Petrol background trial for the local learning loop. */
.application-loop { background: var(--petrol); border-color: var(--petrol); color: var(--raised); }
.application-loop .local-loop-stage { background: transparent; border-color: #FFFFFF40; }
.application-loop .local-loop-stage > span { color: #D4E0DE; }
.application-loop .local-loop-stage p { color: #E5ECE9; }
.application-loop .loop-connector svg { stroke: #C4D5D2; }
.application-loop .local-loop-return { border-color: #C4D5D2; }
.application-loop .local-loop-return::before { border-color: #C4D5D2; }
.application-loop .local-loop-return span { background: var(--petrol); color: #D4E0DE; }

/* Extend the petrol treatment to the full local-loop section. */
#improvement { background: var(--petrol); color: var(--raised); }
#improvement .eyebrow { color: #D4E0DE; }
#improvement .section-head > p, #improvement .review-note { color: #E5ECE9; }
#improvement .review-note { border-color: #C4D5D2; }
#improvement .application-loop { border-color: #FFFFFF40; }

.hero-note { background: var(--paper); color: var(--ink); }
.hero-note span { color: var(--muted); }


/* Keep the hero's lower note anchored on tall screens, while allowing content to grow. */
.hero > .wrap { min-height: 100svh; display: flex; flex-direction: column; }
.hero-bottom { margin-top: auto; justify-content: flex-end; }
.offering-intro .text-link { display: inline-block; }
@media(max-width:700px) {
  .hero-content { padding-block: 48px 32px; }
  .hero-bottom { align-items: stretch; padding-bottom: 24px; }
  .hero-note { max-width: 360px; }
}
/* The mobile feedback route runs beside all three stages and returns to Observe. */
@media(max-width:650px) {
  .local-loop-stages { position: relative; margin-left: 12px; padding-left: 18px; border-left: 1px solid #C4D5D2; }
  .local-loop-stages::before { content: ''; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; border-left: 1px solid #C4D5D2; border-top: 1px solid #C4D5D2; transform: rotate(45deg); }
  .local-loop-return { margin: 0 0 0 12px; height: auto; min-height: 32px; border: 0; border-top: 1px solid #C4D5D2; padding: 12px 0 0 18px; text-align: left; }
  .local-loop-return::before { display: none; }
  .local-loop-return span { top: auto; padding: 0; font-size: 9px; }
}
