@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto+Mono:wght@300..700&display=swap");

:root {
  --bp-coral: #ED8C84;
  --bp-coral-deep: #D9736A;
  --bp-coral-soft: #F5B4AE;
  --bp-yellow: #FFFE54;
  --bp-lime: #E1FE00;
  --bp-ink: #2B2B33;
  --bp-ink-soft: #3D3D47;
  --bp-cream: #FDF3F1;
  --bp-cream-deep: #F7E7E4;
  --bp-white: #FFFFFF;
  --bp-ink-80: #4A4A55;
  --bp-ink-60: #6E6E7A;
  --bp-ink-40: #9A9AA4;
  --bp-ink-20: #D2D2D8;
  --bp-ink-10: #E8E5E6;

  --surface-page: var(--bp-cream);
  --surface-card: var(--bp-white);
  --surface-card-alt: var(--bp-cream-deep);
  --text-heading: var(--bp-ink);
  --text-body: var(--bp-ink-80);
  --text-muted: var(--bp-ink-60);
  --text-emphasis: var(--bp-coral);
  --border: var(--bp-ink-20);
  --border-strong: var(--bp-ink);
  --rule-accent: var(--bp-coral);
  --highlight: var(--bp-yellow);
  --link: var(--bp-ink);
  --link-hover: var(--bp-coral);

  --surface-colour: var(--bp-coral);
  --text-on-colour: var(--bp-white);
  --text-on-colour-muted: #FFE3E0;
  --accent-on-colour: var(--bp-yellow);
  --border-on-colour: rgba(255, 255, 255, 0.32);
  --link-on-colour: var(--bp-lime);

  --surface-ink: var(--bp-ink);
  --surface-ink-raised: var(--bp-ink-soft);
  --text-on-ink: var(--bp-white);
  --text-on-ink-muted: #B9B9C2;
  --accent-on-ink: var(--bp-yellow);
  --border-on-ink: rgba(255, 255, 255, 0.18);

  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", Menlo, monospace;
  --weight-display: 300;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;

  --text-display: 60px;
  --text-h1: 40px;
  --text-h2: 30px;
  --text-h3: 22px;
  --text-lead: 20px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  --leading-tight: 1.14;
  --leading-snug: 1.22;
  --leading-normal: 1.45;
  --leading-relaxed: 1.62;
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.14em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --web-max: 1200px;
  --web-gutter: 32px;
  --web-section-y: 96px;

  --radius-none: 0px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;

  --hairline: 1px solid var(--border);
  --hairline-on-colour: 1px solid var(--border-on-colour);
  --rule-thick: 3px solid var(--bp-coral);
  --shadow-sm: 0 1px 2px rgba(43, 43, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(43, 43, 51, 0.10);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms;

  --pattern-contour: url("/assets/patterns/contour-motif-white.png");
  --pattern-opacity: 0.35;
  --hdr-h: 73px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:var(--font-body); color:var(--text-body); background:var(--surface-page); font-size:var(--text-base); line-height:var(--leading-relaxed); }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); }
p { margin:0; }
.wrap { max-width:var(--web-max); margin:0 auto; padding:0 var(--web-gutter); }
h1,h2,h3 { font-family:var(--font-display); font-weight:var(--weight-display); letter-spacing:var(--tracking-display); margin:0; color:var(--text-heading); text-wrap:pretty; }
h2 { font-weight:300; }
h3 { font-weight:500; letter-spacing:-0.01em; }
h1 { font-size:var(--text-display); line-height:var(--leading-tight); }
h2 { font-size:var(--text-h1); line-height:var(--leading-snug); max-width:24ch; }
h3 { font-size:var(--text-h3); line-height:var(--leading-snug); }
.eyebrow { font-family:var(--font-mono); font-size:var(--text-sm); font-weight:400; letter-spacing:var(--tracking-label); text-transform:uppercase; }
.lead { font-size:var(--text-lead); font-weight:400; line-height:1.7; max-width:64ch; }
.rule { width:56px; height:3px; background:var(--bp-coral); margin-bottom:var(--space-4); }
section { padding:var(--web-section-y) 0; }

/* Spacing utilities */
.mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); }
.mt-4 { margin-top:var(--space-4); }
.mt-5 { margin-top:var(--space-5); }
.mt-6 { margin-top:var(--space-6); }
.mt-7 { margin-top:var(--space-7); }
.mt-8 { margin-top:var(--space-8); }
.mt-9 { margin-top:var(--space-9); }

/* Color utilities */
.eyebrow-yellow { color:var(--bp-yellow); }
.eyebrow-coral { color:var(--bp-coral); }
.eyebrow-white { color:var(--bp-white); }
.eyebrow-ink { color:var(--bp-ink); }
.coral-text { color:var(--bp-coral); }
.yellow-text { color:var(--bp-yellow); }
.muted-text { color:var(--text-muted); }
.text-heading { color:var(--text-heading); }
.text-on-colour-muted { color:var(--text-on-colour-muted); }
.text-on-ink-muted { color:var(--text-on-ink-muted); }

/* Background utilities */
.bg-white { background:var(--bp-white); }

/* Buttons */
.btn { font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:var(--tracking-label); text-transform:uppercase; border:1px solid transparent; border-radius:var(--radius-pill); padding:14px 24px; display:inline-block; line-height:1; cursor:pointer; transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); }
.btn-primary { background:var(--bp-ink); color:var(--bp-white); }
.btn-primary:hover { background:var(--bp-coral); color:var(--bp-white); }
.btn-onColour { background:var(--bp-white); color:var(--bp-ink); }
.btn-onColour:hover { background:var(--bp-yellow); color:var(--bp-ink); }
.btn-ghost { border-color:rgba(255,255,255,.6); color:var(--bp-white); }
.btn-ghost:hover { background:rgba(255,255,255,.14); }
.btn-outline { border-color:var(--bp-ink); color:var(--bp-ink); }
.btn-outline:hover { background:var(--bp-ink); color:var(--bp-white); }
.btn-hdr { background:var(--bp-yellow); color:var(--bp-ink); border-color:var(--bp-ink); white-space:nowrap; }
.btn-hdr:hover { background:var(--bp-ink); color:var(--bp-white); }

/* Header */
header { position:fixed; top:0; left:0; right:0; z-index:20; height:var(--hdr-h); background:var(--bp-white); border-bottom:1px solid var(--border); transition:box-shadow var(--dur-base) var(--ease-standard); }
header .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
header nav { display:flex; gap:var(--space-6); align-items:center; }
header nav a { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-heading); }
header nav a:hover { color:var(--bp-coral); }
header.stuck { box-shadow:var(--shadow-sm); }
.header-logo { height:32px; display:block; }
.hdr-right { display:flex; align-items:center; gap:var(--space-5); }
.lang { display:flex; gap:6px; align-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-label); }
.lang a { color:var(--bp-ink-60); }
.lang a[aria-current] { color:var(--text-heading); }
.lang span { color:var(--border); }

/* Hero */
.hero { background:var(--surface-colour); color:var(--text-on-colour); position:relative; overflow:hidden; padding:var(--space-10) 0 var(--space-9); margin-top:var(--hdr-h); }
.hero .contour { position:absolute; right:-490px; top:22px; width:764px; height:601px; background-image:var(--pattern-contour); background-size:contain; background-repeat:no-repeat; opacity:.05; pointer-events:none; }
.hero-inner { position:relative; }
.hero h1 { color:var(--bp-white); max-width:20ch; }
.hero .yellow { color:var(--bp-yellow); }
.hero-ctas { display:flex; gap:var(--space-4); margin-top:var(--space-7); flex-wrap:wrap; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); margin-top:var(--space-9); border-top:1px solid var(--border-on-colour); padding-top:var(--space-6); }
.metric-n { font-family:var(--font-display); font-weight:300; font-size:32px; line-height:1.1; color:var(--bp-yellow); }
.metric-l { font-size:15px; line-height:var(--leading-normal); margin-top:var(--space-2); color:var(--text-on-colour); }

/* Industries / marquee */
.industries { background:var(--bp-coral-deep); padding:var(--space-6) 0; overflow:hidden; }
.industries .cap { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--bp-yellow); margin-bottom:var(--space-5); }
.marquee { position:relative; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track { display:flex; align-items:center; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track { animation-play-state:paused; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce) { .marquee-track{animation:none} }
.marquee img { width:auto; max-width:220px; opacity:.95; flex:none; margin-right:var(--space-9); object-fit:contain; height:28px; }
.marquee img[data-mark="univio"] { height:28px; }
.marquee img[data-mark="divante"] { height:30px; }
.marquee img[data-mark="flybox"] { height:19.5px; }
.marquee img[data-mark="pagero"] { height:34px; }
.marquee img[data-mark="cloudflight"] { height:28px; }
.marquee img[data-mark="cycommsec"] { height:19px; }
.marquee img[data-mark="right-hello"] { height:37.5px; }

/* Model section: role description */
.role { font-size:16px; line-height:var(--leading-relaxed); margin-top:var(--space-4); }

/* Packages grid */
.pkgs { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-top:var(--space-7); }
.pkg { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-7); display:flex; flex-direction:column; }
.when { font-size:16px; line-height:var(--leading-normal); color:var(--bp-coral); margin-top:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.pkg .body { font-size:16px; line-height:var(--leading-relaxed); margin-top:var(--space-4); }
.pkg .btn { align-self:flex-start; margin-top:var(--space-6); }
.pkg-note { font-size:15px; line-height:var(--leading-relaxed); color:var(--text-muted); margin-top:var(--space-6); max-width:70ch; }

/* Payoff / yellow callout */
.payoff { background:var(--bp-yellow); color:var(--bp-ink); border-radius:var(--radius-lg); padding:var(--space-7); margin-top:var(--space-7); display:grid; grid-template-columns:auto 1fr; gap:var(--space-7); align-items:start; }
.payoff .eyebrow { color:var(--bp-ink); opacity:.7; white-space:nowrap; }
.payoff p { font-size:var(--text-lead); line-height:var(--leading-relaxed); color:var(--bp-ink); max-width:70ch; }
.payoff-body { font-size:18px; color:#2B2B33A4; }

/* Split columns */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); margin-top:var(--space-7); }
.split-col { border-top:3px solid var(--bp-coral); padding-top:var(--space-5); }
.split-col:last-child { border-top-color:var(--bp-ink); }
.split-note { font-size:15px; line-height:var(--leading-normal); color:var(--text-muted); margin-top:var(--space-3); }

/* Dash list */
ul.dash { list-style:none; margin:var(--space-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
ul.dash li { display:flex; gap:var(--space-3); font-size:16px; line-height:var(--leading-normal); }
ul.dash li::before { content:"—"; flex:none; color:var(--bp-coral); }
.split-col:last-child ul.dash li::before { color:var(--bp-ink); }

/* Closer line */
.closer { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--border); font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; color:var(--text-heading); }

/* Ink section */
.ink { background:var(--surface-ink); color:var(--text-on-ink); }
.ink h2,.ink h3 { color:var(--bp-white); }
.ink .rule { background:var(--bp-yellow); }
.ink .lead { color:var(--text-on-ink-muted); }
.ink ul.dash li { color:var(--text-on-ink-muted); }
.ink ul.dash li::before { color:var(--bp-yellow); }

/* Flow: agent vs human */
.flow { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:var(--space-7); margin-top:var(--space-7); }
.flow-arrow { font-family:var(--font-mono); font-size:20px; color:var(--bp-yellow); padding-top:38px; }
.flow-arrow::after { content:"→"; }
.flow h3 { font-size:var(--text-h3); }
.flow .eyebrow { color:var(--bp-yellow); }

/* Timeline */
.timeline { margin-top:var(--space-7); border-left:1px solid var(--border); max-width:78ch; }
.tstep { position:relative; padding:0 0 var(--space-7) var(--space-7); }
.tstep:last-child { padding-bottom:0; }
.tstep::before { content:""; position:absolute; left:-5px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--bp-coral); }
.tstep .tmeta { display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap; }
.tstep .tnum { font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-label); color:var(--bp-ink-40); }
.tstep h3 { margin-top:var(--space-3); }
.tstep p { font-size:16px; line-height:var(--leading-relaxed); margin-top:var(--space-3); }

/* Objection box */
.objection { background:var(--surface-card); border:1px solid var(--border); border-left:none; border-radius:var(--radius-md); padding:var(--space-6); margin-top:var(--space-7); }
.objection h3 { color:var(--text-heading); }
.objection p { font-size:16px; line-height:var(--leading-relaxed); margin-top:var(--space-3); max-width:78ch; }
.contrast-note { font-family:var(--font-mono); font-size:13px; line-height:var(--leading-normal); color:var(--text-muted); margin-top:var(--space-5); padding-left:var(--space-5); border-left:1px solid var(--border); max-width:70ch; }

/* Cases */
.cases { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-7); margin-top:var(--space-7); }
.case { border-top:3px solid var(--bp-coral); padding-top:var(--space-5); }
.case .stat { font-family:var(--font-display); font-weight:300; font-size:45px; line-height:1; color:var(--bp-coral); margin-top:var(--space-4); }
.case p { font-size:15px; line-height:var(--leading-relaxed); margin-top:var(--space-4); }

/* FAQ */
.faq { margin-top:var(--space-7); border-top:1px solid var(--border); }
.faq details { border-bottom:1px solid var(--border); }
.faq summary { list-style:none; cursor:pointer; padding:var(--space-5) 0; display:flex; justify-content:space-between; gap:var(--space-5); align-items:baseline; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-h3); color:var(--text-heading); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--bp-coral); flex:none; line-height:1.2; }
.faq details[open] summary::after { content:"–"; }
.faq .a { padding:0 0 var(--space-6); font-size:16px; line-height:var(--leading-relaxed); max-width:74ch; }
.faq .a p+p { margin-top:var(--space-4); }

/* People / team */
.people { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-top:var(--space-7); }
.person--wide { grid-column:1 / -1; }
.person { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; }
.person-head { display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:var(--space-5); align-items:end; }
.person img { width:100%; max-width:120px; height:140px; object-fit:contain; object-position:bottom; }
.person .bio { font-size:15px; line-height:var(--leading-relaxed); color:var(--text-body); }
.person .bio+.bio { margin-top:var(--space-4); }
.pname { font-family:var(--font-mono); font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-heading); }
.prole { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--bp-coral); margin-top:var(--space-2); }
.person .resp { font-size:15px; line-height:var(--leading-normal); margin-top:var(--space-4); }
.pmeta { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:var(--space-4); display:flex; flex-direction:column; gap:3px; }

/* Final CTA section */
.final { background:var(--surface-colour); color:var(--text-on-colour); position:relative; overflow:hidden; }
.final .contour { position:absolute; right:-85px; top:-96px; width:527px; height:614px; background-image:var(--pattern-contour); background-size:contain; background-repeat:no-repeat; opacity:.05; pointer-events:none; }
.final h2 { color:var(--bp-white); }
.final-inner { position:relative; }

/* Footer */
footer { background:var(--surface-ink); color:var(--text-on-ink); padding:var(--space-8) 0; }
footer a { color:var(--text-on-ink-muted); }
footer a:hover { color:var(--bp-yellow); }
.foot-row { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-7); flex-wrap:wrap; }
.foot-links { display:flex; gap:var(--space-5); font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase; flex-wrap:wrap; }
.foot-logo { height:40px; }
.foot-tagline { color:var(--bp-yellow); margin-top:var(--space-4); }
.foot-location { color:var(--text-on-ink-muted); margin-top:var(--space-3); }
.foot-right { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-4); }
.foot-lang a[aria-current] { color:var(--bp-white); }
.foot-lang span { color:var(--border-on-ink); }

/* Responsive */
@media (max-width:1000px) {
  .people,.pkgs,.split { grid-template-columns:1fr; }
  .cases { grid-template-columns:1fr 1fr; }
  .person-head { grid-template-columns:minmax(0,1fr); }
  .flow { grid-template-columns:1fr; }
  .flow-arrow { padding-top:0; justify-self:center; width:max-content; }
  .flow-arrow::after { content:"↓"; }
  .payoff { grid-template-columns:1fr; }
  .metrics { grid-template-columns:1fr 1fr; }
  header nav { display:none; }
  .hero .contour { right:-180px; top:16px; width:420px; height:330px; }
  .final .contour { right:-60px; top:-72px; width:320px; height:373px; }
}
@media (max-width:768px) {
  :root { --text-display:36px; --text-h1:28px; --text-h3:18px; --text-lead:17px; --web-section-y:64px; }
  .cases { grid-template-columns:1fr; }
  .hero { padding:var(--space-9) 0 var(--space-8); }
  .metrics { grid-template-columns:1fr; }
}