/* Clientori. Built from brand/brand-guidelines.html. Tokens first; never add a colour outside them. */

:root {
  color-scheme: light;

  /* Brand: deep teal from the logo, one scale */
  --teal-950: #00202e;
  --teal-900: #003044;   /* the brand colour: logo, hero, header, buttons, numbers */
  --teal-800: #0a4560;   /* hover on teal */
  --teal-600: #2c6f8c;   /* links on white */
  --teal-200: #bcd2dc;   /* secondary text on teal */
  --teal-100: #e1ecf1;   /* tags, tints */
  --teal-50:  #f3f7f9;   /* alternate section background */
  --aqua:     #46d6b9;   /* accent: small marks on teal only, never text on white */

  /* Neutrals */
  --white: #ffffff;
  --ink: #0b2230;
  --body: #3d4a52;
  --muted: #5f6c74;
  --hairline: #dbe4e8;

  /* Status, for appointment pills only */
  --ok: #1d7048;  --ok-bg: #e2f3e9;
  --no: #8a3b2a;  --no-bg: #f7e7e1;

  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --page: 1120px;
  --gutter: 24px;
  --section: 88px;
  --r-btn: 6px;
  --r-card: 8px;
  --r-pop: 12px;
  --head-h: 72px;
  --shadow-card: 0 1px 2px rgba(0, 48, 68, 0.06), 0 0 0 1px rgba(0, 48, 68, 0.07);
  --shadow-pop: 0 14px 36px rgba(0, 48, 68, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
body { margin: 0; background: var(--white); color: var(--body); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-head); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--teal-900); }
:focus-visible { outline: 2px solid var(--teal-900); outline-offset: 3px; border-radius: 2px; }
.on-teal :focus-visible, .site-head :focus-visible { outline-color: var(--aqua); }
img, svg { display: block; max-width: 100%; }
ul { margin: 0 0 1rem; padding-left: 1.1rem; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 30; background: var(--white); color: var(--ink); padding: 10px 14px; border: 1px solid var(--ink); }

.eyebrow { display: inline-block; margin-bottom: 14px; font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-900); }
.on-teal .eyebrow { color: var(--aqua); }

/* Buttons: one shape, two colourways */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-btn); border: 1px solid transparent; font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-teal { background: var(--teal-900); border-color: var(--teal-900); color: var(--white); }
.btn-teal:hover { background: var(--teal-800); border-color: var(--teal-800); color: var(--white); }
.btn-white { background: var(--white); border-color: var(--white); color: var(--teal-900); }
.btn-white:hover { background: var(--teal-100); border-color: var(--teal-100); color: var(--teal-900); }

/* Header: same teal as the hero, so there is no seam */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--teal-900); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--teal-200); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--white); }
.site-nav a.btn { padding: 10px 18px; font-size: 0.9rem; color: var(--teal-900); }
.site-nav a.btn:hover { color: var(--teal-900); }

/* Hero */
.hero { background: var(--teal-900); color: var(--white); padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6vw, 88px); }
.hero h1 { color: var(--white); }
.hero-copy { max-width: 760px; }
.hero .lead { color: var(--teal-200); font-size: 1.15rem; max-width: 50ch; margin-top: 22px; }
.hero .actions { margin-top: 32px; }

/* The four brand cards */
.brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.brand-card { display: flex; flex-direction: column; gap: 10px; background: var(--white); border-radius: var(--r-card); padding: 24px 22px 22px; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.brand-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); color: var(--ink); }
.brand-card .logo-slot { height: 40px; display: flex; align-items: center; margin-bottom: 8px; }
.brand-card img { width: auto; margin: 0; }
.brand-card .ind { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-900); }
.brand-card .what { font-size: 0.95rem; line-height: 1.45; color: var(--body); }

/* Partner logos: balanced by eye, wide wordmarks sit lower than stacked lockups */
img.lg-km { height: 38px; } img.lg-ci { height: 20px; } img.lg-cb { height: 17px; } img.lg-cl { height: 28px; }
.vertical .label img.lg-km { height: 28px; } .vertical .label img.lg-ci { height: 16px; } .vertical .label img.lg-cb { height: 14px; } .vertical .label img.lg-cl { height: 22px; }
.ping-foot img.lg-km { height: 24px; } .ping-foot img.lg-ci { height: 13px; } .ping-foot img.lg-cb { height: 11px; } .ping-foot img.lg-cl { height: 18px; }

/* Sections */
section { padding: var(--section) 0; }
section.fog { background: var(--teal-50); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head p { margin-top: 12px; font-size: 1.05rem; }

/* Showcase: the industry list lights up in step with the booked card */
.showcase .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.showcase h2 { margin-bottom: 26px; }
.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.legend li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--muted); animation: legend-cycle 12s infinite; }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); animation: dot-cycle 12s infinite; animation-delay: inherit; }
.legend li:nth-child(2), .ping-item:nth-child(2) { animation-delay: 3s; }
.legend li:nth-child(3), .ping-item:nth-child(3) { animation-delay: 6s; }
.legend li:nth-child(4), .ping-item:nth-child(4) { animation-delay: 9s; }
@keyframes legend-cycle { 0%, 23% { color: var(--ink); } 25%, 100% { color: var(--muted); } }
@keyframes dot-cycle { 0%, 23% { background: var(--teal-900); } 25%, 100% { background: var(--hairline); } }

.pings { list-style: none; margin: 0; padding: 0; display: grid; }
.ping-item { grid-area: 1 / 1; background: var(--white); border-radius: var(--r-pop); padding: 20px 22px 18px; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(14px); animation: ping-cycle 12s infinite; }
@keyframes ping-cycle {
  /* each card leaves (21 to 24%) before the next arrives (25%), so two never overlap */
  0%   { opacity: 0; transform: translateY(14px) scale(.98); }
  3%   { opacity: 1; transform: none; }
  21%  { opacity: 1; transform: none; }
  24%  { opacity: 0; transform: translateY(-14px) scale(.98); }
  100% { opacity: 0; transform: translateY(-14px) scale(.98); }
}
.ping-top { display: flex; align-items: center; gap: 10px; }
.ping-top b { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ping-ok { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; }
.ping-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ping-ind { margin-left: auto; font-family: var(--font-head); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-900); background: var(--teal-100); border-radius: 999px; padding: 4px 9px; }
.ping-what { margin: 14px 0; font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.ping-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 0.8rem; color: var(--muted); }
.ping-foot img { width: auto; }

/* Results rows */
.verticals { border-top: 1px solid var(--hairline); }
.vertical { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding: 44px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.vertical .label { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vertical .label .eyebrow { margin: 0; }
.vertical .label img { width: auto; }
.vertical h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); margin-bottom: 12px; }
.vertical p { max-width: 54ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 16px 16px; background: var(--white); }
.stat .n { font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--teal-900); font-variant-numeric: tabular-nums; }
.stat .n small { font-size: 0.6em; font-weight: 600; letter-spacing: 0; }
.stat .l { margin-top: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--body); }
.vertical .note { margin-top: 14px; font-size: 0.86rem; color: var(--muted); }

/* Questions */
.terms { border-top: 1px solid var(--hairline); }
.term { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.term .k { font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.term .v { color: var(--ink); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 22px 22px 20px; }
.step .idx { font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--teal-900); }
.step h3 { font-size: 1.05rem; margin: 10px 0 8px; }
.step p { font-size: 0.95rem; }
.step.you { background: var(--teal-100); box-shadow: none; }

/* Contact */
.cta { background: var(--teal-900); color: var(--white); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.cta h2 { color: var(--white); }
.cta .lead { color: var(--teal-200); font-size: 1.1rem; margin-top: 14px; max-width: 40ch; }
.cta .alt { margin-top: 26px; color: var(--teal-200); font-size: 0.95rem; }
.cta .alt a { color: var(--white); }
.form { background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 28px; }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.form .field { margin-bottom: 14px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--white); border: 1px solid #c3d1d8; border-radius: var(--r-btn); padding: 11px 12px; }
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--teal-900); outline-offset: 1px; border-color: var(--teal-900); }
.form .btn { width: 100%; margin-top: 4px; }
.form .fine { margin-top: 12px; font-size: 0.8rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; }

/* Footer */
.site-foot { background: var(--white); border-top: 1px solid var(--hairline); padding: 44px 0 36px; font-size: 0.9rem; }
.site-foot .top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: 32px; }
.site-foot .brand img { height: 26px; }
.site-foot .entity { color: var(--muted); max-width: 44ch; margin-top: 14px; }
.site-foot h4 { margin-bottom: 12px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.site-foot nav { display: grid; gap: 8px; }
.site-foot nav a { color: var(--ink); text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot .bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.84rem; }
.site-foot .partof { display: inline-flex; align-items: center; gap: 10px; }
.site-foot .partof img { height: 20px; }

/* Legal pages and the thank-you page */
.doc { padding: 56px 0 var(--section); }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: 10px; }
.doc .updated { color: var(--muted); font-size: 0.92rem; margin-bottom: 36px; }
.doc h2 { font-size: 1.3rem; margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { margin: 24px 0 8px; font-size: 1.05rem; }
.doc ul li { margin-bottom: 0.4rem; }
.callout { margin: 28px 0; padding: 22px 24px; border: 1px solid var(--teal-900); border-radius: var(--r-card); background: var(--teal-100); }
.callout h3 { margin: 0 0 10px; }
.callout p { color: var(--ink); }
.thanks { padding: 100px 0 120px; text-align: center; }
.thanks p { max-width: 46ch; margin: 14px auto 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-card { transition: none; }
  .brand-card:hover { transform: none; }
  .ping-item, .legend li, .legend li::before { animation: none; }
  .ping-item:first-child { opacity: 1; transform: none; }
  .legend li:first-child { color: var(--ink); }
  .legend li:first-child::before { background: var(--teal-900); }
}
@media (max-width: 960px) {
  .brand-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase .wrap, .vertical, .cta .wrap { grid-template-columns: 1fr; gap: 32px; }
  .site-foot .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --section: 60px; --gutter: 16px; --head-h: 64px; }
  body { font-size: 16px; }
  .site-nav a:not(.btn) { display: none; }
  .brand img { height: 26px; }
  .brand-grid, .steps { grid-template-columns: 1fr; gap: 10px; }
  .brand-grid { margin-top: 32px; }
  .brand-card { padding: 18px; }
  .stats, .stats.two { grid-template-columns: 1fr 1fr; }
  .term { grid-template-columns: 1fr; gap: 4px; }
  .form .grid { grid-template-columns: 1fr; }
  .form { padding: 20px; }
  .site-foot .top { grid-template-columns: 1fr; }
  .ping-what { font-size: 1.05rem; }
  .legend li { font-size: 0.98rem; padding: 12px 0; }
}