:root {
  --ink: #17312d;
  --ink-soft: #46605b;
  --muted: #6c807b;
  --line: #dce8e3;
  --surface: #ffffff;
  --surface-soft: #f7fbf9;
  --surface-blue: #f2f7fb;
  --green: #2f7d6b;
  --green-dark: #215f52;
  --green-soft: #dfeee8;
  --blue: #5d89a5;
  --blue-soft: #e4eef5;
  --gold: #b68b4b;
  --shadow: 0 18px 50px rgba(32, 69, 61, 0.10);
  --shadow-sm: 0 8px 26px rgba(32, 69, 61, 0.08);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:16px; top:16px; z-index:9999; background:#fff; padding:10px 14px; border-radius:8px; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 92px 0; }
.section-sm { padding: 64px 0; }
.section-soft { background: var(--surface-soft); }
.section-blue { background: var(--surface-blue); }
.eyebrow {
  display: inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  color: var(--green-dark); font-size:.82rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow::before { content:""; width:24px; height:2px; background:var(--green); border-radius:2px; }
.section-title { font-size: clamp(2rem, 3vw, 3rem); line-height:1.12; letter-spacing:-.035em; margin:0 0 18px; }
.section-intro { color: var(--ink-soft); font-size:1.08rem; max-width:760px; margin:0 0 34px; }
.center { text-align:center; }
.center .section-intro { margin-left:auto; margin-right:auto; }
.kicker { color:var(--green-dark); font-weight:800; }

.site-header {
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(220,232,227,.92);
}
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:850; letter-spacing:-.03em; white-space:nowrap; }
.brand img { width:38px; height:38px; }
.brand .domain { color:var(--green); }
.site-nav { display:flex; align-items:center; gap:26px; }
.site-nav a { text-decoration:none; color:var(--ink-soft); font-size:.95rem; font-weight:700; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--green-dark); }
.nav-cta { padding:10px 16px; background:var(--green); color:white !important; border-radius:999px; }
.nav-toggle { display:none; border:0; background:transparent; padding:8px; color:var(--ink); cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; background:currentColor; margin:5px 0; border-radius:2px; }

.hero {
  position:relative; overflow:hidden;
  padding:74px 0 72px;
  background:
    radial-gradient(circle at 88% 8%, rgba(93,137,165,.18), transparent 31%),
    radial-gradient(circle at 8% 94%, rgba(47,125,107,.14), transparent 34%),
    linear-gradient(135deg, #fbfdfc 0%, #f4faf7 53%, #f6f9fc 100%);
}
.hero-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:42px; align-items:center; }
.hero-content { position:relative; z-index:2; }
.hero h1 { font-size:clamp(2.65rem,4.55vw,4.75rem); line-height:.99; letter-spacing:-.052em; margin:0 0 22px; max-width:720px; }
.hero h1 .accent { color:var(--green); }
.hero-copy { font-size:1.16rem; color:var(--ink-soft); max-width:690px; margin:0 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 30px; }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 19px; border-radius:999px; text-decoration:none; font-weight:800; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background:var(--green); color:white; box-shadow:0 12px 28px rgba(47,125,107,.22); }
.button-primary:hover { background:var(--green-dark); }
.button-secondary { background:white; color:var(--ink); border-color:var(--line); box-shadow:0 8px 20px rgba(32,69,61,.06); }
.button-text { padding-left:0; padding-right:0; color:var(--green-dark); }
.hero-proof { display:flex; flex-wrap:wrap; gap:14px 22px; padding-top:4px; color:var(--ink-soft); font-size:.93rem; }
.hero-proof span { display:flex; align-items:center; gap:7px; }
.hero-proof span::before { content:"✓"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--green-soft); color:var(--green-dark); font-weight:900; font-size:.76rem; }
.hero-visual, .page-hero-visual { position:relative; min-width:0; z-index:1; }
.hero-visual::before, .page-hero-visual::before {
  content:""; position:absolute; inset:8% -3% -4% 7%; border-radius:34px;
  background:linear-gradient(145deg,rgba(47,125,107,.10),rgba(93,137,165,.08));
  filter:blur(22px); z-index:-1;
}
.hero-visual img, .page-hero-visual img {
  width:100%; height:auto; border-radius:30px; border:1px solid rgba(193,216,207,.85);
  box-shadow:0 28px 70px rgba(32,69,61,.14); background:#f5faf8;
}
.hero-visual img { transform:translateX(10px); }

.logo-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.logo-strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; min-height:80px; color:var(--muted); font-weight:750; font-size:.9rem; }
.tool-pill { display:inline-flex; align-items:center; gap:8px; }
.tool-pill::before { content:""; width:8px; height:8px; border-radius:2px; background:var(--green); opacity:.7; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px;
  box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#c7ddd4; }
.card-icon { width:58px; height:58px; margin-bottom:20px; }
.card h3 { margin:0 0 11px; font-size:1.3rem; letter-spacing:-.02em; }
.card p { margin:0 0 18px; color:var(--ink-soft); }
.text-link { color:var(--green-dark); text-decoration:none; font-weight:850; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.check-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:32px; color:var(--ink-soft); }
.check-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green-dark); font-weight:900; font-size:.77rem; }

.process-preview { background:white; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.process-card { background:var(--surface-soft); border:1px solid var(--line); border-radius:15px; padding:19px; min-height:150px; }
.step-number { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff; font-size:.83rem; font-weight:900; margin-bottom:12px; }
.process-card h3 { font-size:1rem; line-height:1.25; margin:0 0 7px; }
.process-card p { margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }

.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.case-card { overflow:hidden; background:white; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.case-card img { aspect-ratio:16/10; object-fit:cover; width:100%; background:var(--surface-soft); }
.case-body { padding:25px; }
.case-tag { display:inline-flex; padding:6px 10px; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:.76rem; font-weight:850; margin-bottom:13px; }
.case-card h3 { margin:0 0 10px; line-height:1.22; }
.case-card p { color:var(--ink-soft); margin:0 0 16px; }
.disclosure { color:var(--muted); font-size:.84rem; }

.cta-band { padding:42px; border-radius:var(--radius-lg); background:linear-gradient(120deg, #1f6254, #376f72 64%, #567e94); color:white; display:flex; align-items:center; justify-content:space-between; gap:34px; box-shadow:var(--shadow); }
.cta-band h2 { margin:0 0 8px; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.1; }
.cta-band p { margin:0; color:rgba(255,255,255,.82); max-width:700px; }
.cta-band .button-secondary { flex:none; }

.page-hero {
  position:relative; overflow:hidden; padding:58px 0 62px;
  background:
    radial-gradient(circle at 90% 8%, rgba(93,137,165,.13), transparent 31%),
    linear-gradient(140deg,var(--surface-soft),var(--surface-blue));
  border-bottom:1px solid var(--line);
}
.page-hero-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:42px; align-items:center; }
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(2.35rem,4vw,4.05rem); line-height:1.01; letter-spacing:-.047em; margin:0 0 19px; }
.page-hero p { color:var(--ink-soft); font-size:1.08rem; max-width:690px; margin:0; }
.page-hero-visual img { transform:translateX(8px); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:.86rem; margin-bottom:16px; }
.breadcrumbs a { color:var(--green-dark); text-decoration:none; }

.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feature { padding:22px; border-left:3px solid var(--green); background:var(--surface-soft); border-radius:0 14px 14px 0; }
.feature h3 { margin:0 0 7px; font-size:1.07rem; }
.feature p { margin:0; color:var(--ink-soft); }

.service-detail { display:grid; grid-template-columns:.88fr 1.12fr; gap:52px; align-items:start; }
.sticky-card { position:sticky; top:105px; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; }
.sticky-card h3 { margin-top:0; }
.service-detail h2 { margin-top:0; font-size:2rem; letter-spacing:-.03em; }
.service-detail h3 { margin-top:30px; }
.service-detail p, .service-detail li { color:var(--ink-soft); }
.tech-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tech-tag { padding:7px 10px; background:white; border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:750; color:var(--ink-soft); }

.case-study-layout { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:52px; align-items:start; }
.case-study-content h2 { font-size:1.75rem; margin-top:46px; letter-spacing:-.025em; }
.case-study-content h2:first-child { margin-top:0; }
.case-study-content p, .case-study-content li { color:var(--ink-soft); }
.case-study-aside { position:sticky; top:105px; border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; background:var(--surface-soft); }
.case-study-aside dl { margin:0; display:grid; gap:16px; }
.case-study-aside dt { font-size:.78rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.case-study-aside dd { margin:3px 0 0; font-weight:800; }
.note { padding:16px 18px; background:#fff8e9; border:1px solid #ecd8b2; border-radius:12px; color:#6d5833; font-size:.92rem; }

.contact-grid { display:grid; grid-template-columns:.83fr 1.17fr; gap:48px; }
.contact-panel { background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; }
.contact-panel h2 { margin-top:0; }
.form { display:grid; gap:17px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label { display:block; font-weight:800; font-size:.9rem; margin-bottom:7px; }
.form input, .form textarea, .form select { width:100%; border:1px solid #cfded8; border-radius:11px; background:white; padding:13px 14px; color:var(--ink); outline:none; }
.form input:focus, .form textarea:focus, .form select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,125,107,.10); }
.form textarea { min-height:150px; resize:vertical; }
.form-help { color:var(--muted); font-size:.84rem; }
.success-message { display:none; margin-top:16px; padding:13px 15px; border-radius:10px; background:var(--green-soft); color:var(--green-dark); font-weight:750; }

.faq { display:grid; gap:12px; }
details { border:1px solid var(--line); border-radius:14px; background:white; padding:18px 20px; }
summary { cursor:pointer; font-weight:850; }
details p { color:var(--ink-soft); margin-bottom:0; }

.site-footer { background:#102b27; color:#d9e5e1; padding:62px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:32px; }
.footer-brand { max-width:340px; }
.footer-brand .brand { color:white; width:max-content; margin-bottom:14px; }
.footer-brand p { color:#acc0ba; }
.footer-col h3 { margin:0 0 14px; font-size:.95rem; color:#fff; }
.footer-col a { display:block; color:#b9cbc6; text-decoration:none; margin:8px 0; font-size:.92rem; }
.footer-col a:hover { color:white; }
.footer-bottom { margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:20px; justify-content:space-between; color:#92aaa3; font-size:.82rem; }
.footer-bottom p { margin:0; max-width:760px; }

@media (max-width: 980px) {
  .hero-grid, .page-hero-grid, .split, .contact-grid, .service-detail { grid-template-columns:1fr; }
  .hero { padding-top:48px; }
  .hero-visual, .page-hero-visual { order:-1; width:min(100%,820px); margin-inline:auto; }
  .hero-visual img, .page-hero-visual img { transform:none; border-radius:26px; }
  .hero-content, .page-hero-content { width:min(100%,820px); margin-inline:auto; }
  .card-grid, .case-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .case-study-layout { grid-template-columns:1fr; }
  .sticky-card, .case-study-aside { position:static; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}

@media (max-width: 760px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .section { padding:68px 0; }
  .nav-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:76px; left:14px; right:14px; padding:18px; background:white; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:5px; }
  .site-nav.open { display:flex; }
  .site-nav a { padding:10px 12px; border-radius:9px; }
  .nav-cta { text-align:center; margin-top:6px; }
  .card-grid, .case-grid, .feature-list, .process-grid, .form-row { grid-template-columns:1fr; }
  .hero h1 { font-size:clamp(2.45rem,11.5vw,3.9rem); }
  .page-hero h1 { font-size:clamp(2.25rem,10vw,3.55rem); }
  .hero-actions .button { width:100%; }
  .hero-proof { display:grid; grid-template-columns:1fr; }
  .cta-band { padding:30px 24px; align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; }
}

@media (max-width: 480px) {
  .brand span { font-size:.95rem; }
  .page-hero, .hero { padding-top:34px; }
  .hero, .page-hero { padding-bottom:48px; }
  .hero-grid, .page-hero-grid { gap:28px; }
  .hero-visual img, .page-hero-visual img { border-radius:20px; box-shadow:0 18px 45px rgba(32,69,61,.12); }
  .section-title { font-size:2rem; }
  .footer-grid { grid-template-columns:1fr; }
  .card, .contact-panel { padding:23px; }
}

/* ==========================================================================\n   IMAGE-LED HERO SYSTEM — rich artwork + live HTML text/actions\n   ========================================================================== */
.media-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: 0;
  isolation: isolate;
}
.media-hero.hero-tone-dark {
  background: #071d1d;
  color: #fff;
}
.media-hero.hero-tone-light {
  background: #f6f7f3;
  color: var(--ink);
}
.media-hero .hero-grid,
.media-hero .page-hero-grid {
  position: relative;
  display: block;
  min-height: 620px;
  padding-top: 78px;
  padding-bottom: 78px;
}
.media-hero .hero-content,
.media-hero .page-hero-content {
  position: relative;
  z-index: 3;
  width: min(53%, 650px);
  min-width: 0;
}
.media-hero .hero-visual,
.media-hero .page-hero-visual {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: min(-20px, calc((var(--container) - 100vw) / 2));
  width: min(62vw, 940px);
  min-width: 610px;
  margin: 0;
  overflow: hidden;
}
.media-hero .hero-visual::before,
.media-hero .page-hero-visual::before { display: none; }
.media-hero .hero-visual img,
.media-hero .page-hero-visual img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.media-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.media-hero.hero-tone-dark::after {
  background: linear-gradient(90deg,
    #071d1d 0%,
    #071d1d 31%,
    rgba(7,29,29,.98) 42%,
    rgba(7,29,29,.80) 53%,
    rgba(7,29,29,.42) 65%,
    rgba(7,29,29,.08) 82%,
    rgba(7,29,29,0) 100%);
}
.media-hero.hero-tone-light::after {
  background: linear-gradient(90deg,
    #f6f7f3 0%,
    #f6f7f3 32%,
    rgba(246,247,243,.98) 43%,
    rgba(246,247,243,.84) 54%,
    rgba(246,247,243,.42) 68%,
    rgba(246,247,243,.03) 86%,
    rgba(246,247,243,0) 100%);
}
.media-hero.hero-tone-dark h1 { color:#fff; }
.media-hero.hero-tone-dark .hero-copy,
.media-hero.hero-tone-dark .page-hero-content > p:not(.eyebrow),
.media-hero.hero-tone-dark .page-hero-content p,
.media-hero.hero-tone-dark .hero-proof { color:rgba(255,255,255,.82); }
.media-hero.hero-tone-dark .eyebrow { color:#a9ddcb; }
.media-hero.hero-tone-dark .eyebrow::before { background:#72c2a7; }
.media-hero.hero-tone-dark .breadcrumbs { color:rgba(255,255,255,.58); }
.media-hero.hero-tone-dark .breadcrumbs a { color:#bde8d9; }
.media-hero.hero-tone-dark .hero h1 .accent,
.media-hero.hero-tone-dark h1 .accent { color:#7dd3b0; }
.media-hero.hero-tone-dark .button-secondary {
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.32);
  box-shadow:none;
  backdrop-filter: blur(8px);
}
.media-hero.hero-tone-dark .button-secondary:hover { background:rgba(255,255,255,.15); }
.media-hero.hero-tone-dark .hero-proof span::before {
  background:rgba(125,211,176,.16);
  color:#a9e8cf;
}
.media-hero .hero-actions { margin-top: 28px; margin-bottom: 26px; }
.media-hero .button { min-height: 48px; }

/* Light visual pages work best with diagram artwork fully visible. */
.page-how-it-works .media-hero .page-hero-visual img,
.page-case-studies-workflow-automation .media-hero .page-hero-visual img {
  object-fit: contain;
  object-position: center;
  padding: 44px 28px 34px;
}
.page-how-it-works .media-hero .page-hero-visual { background:#f7f8f5; }
.page-case-studies-workflow-automation .media-hero .page-hero-visual { background:#eef2ed; }

/* Image gets the first impression on tablet/mobile. */
@media (max-width: 980px) {
  .media-hero .hero-grid,
  .media-hero .page-hero-grid {
    display:flex;
    flex-direction:column;
    min-height:0;
    padding-top:28px;
    padding-bottom:52px;
    gap:30px;
  }
  .media-hero::after { display:none; }
  .media-hero .hero-visual,
  .media-hero .page-hero-visual {
    position:relative;
    inset:auto;
    order:-1;
    width:100%;
    min-width:0;
    height:clamp(300px, 57vw, 500px);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 22px 54px rgba(0,0,0,.16);
  }
  .media-hero .hero-visual img,
  .media-hero .page-hero-visual img {
    border-radius:28px;
  }
  .media-hero .hero-content,
  .media-hero .page-hero-content {
    width:100%;
    max-width:780px;
    margin-inline:auto;
  }
  .page-how-it-works .media-hero .page-hero-visual,
  .page-case-studies-workflow-automation .media-hero .page-hero-visual {
    box-shadow:0 18px 46px rgba(32,69,61,.10);
  }
}

@media (max-width: 600px) {
  .media-hero .hero-grid,
  .media-hero .page-hero-grid {
    width:min(calc(100% - 28px),var(--container));
    padding-top:18px;
    padding-bottom:42px;
    gap:24px;
  }
  .media-hero .hero-visual,
  .media-hero .page-hero-visual {
    height:clamp(265px, 73vw, 390px);
    border-radius:22px;
  }
  .media-hero .hero-visual img,
  .media-hero .page-hero-visual img { border-radius:22px; }
  .media-hero .hero-actions { gap:10px; }
  .media-hero .hero-actions .button { width:100%; }
  .page-how-it-works .media-hero .page-hero-visual img,
  .page-case-studies-workflow-automation .media-hero .page-hero-visual img {
    padding:24px 12px 18px;
  }
}