/* chadgodoy.io — GoHighLevel service site.
   Idea: an engineer's view of a client path. A blue flow is the pipe; amber drops are
   the people lost at each stage. Amber is never used for text. */

:root {
  --paper: #EEF2EF;      /* page: cool drafting paper */
  --panel: #E3E9E5;      /* alternating bands */
  --white: #FFFFFF;      /* raised surfaces */
  --ink: #1B2430;        /* text */
  --ink-soft: #4A5563;   /* secondary text, 7.1:1 on paper */
  --rule: #C6D0CA;       /* hairlines */
  --flow: #0B5FDB;       /* the logo's blue: pipe, links, buttons */
  --flow-deep: #0848A8;  /* hover, and the closing band */
  --leak: #FFB21A;       /* drops and markers only */

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--flow); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--flow-deep); }
:focus-visible { outline: 3px solid var(--leak); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 64ch; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 14px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--flow); color: var(--white);
  font: 600 1.0625rem/1 var(--body); text-decoration: none;
  border-radius: 10px; border: 2px solid var(--flow);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--flow-deep); border-color: var(--flow-deep); color: var(--white); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: 0.9875rem; }
.btn--ghost { background: transparent; color: var(--flow); }
.btn--ghost:hover { background: var(--white); color: var(--flow-deep); border-color: var(--flow-deep); }
.btn--light { background: var(--white); color: var(--flow-deep); border-color: var(--white); }
.btn--light:hover { background: var(--paper); border-color: var(--paper); color: var(--flow-deep); }
.link { font-weight: 600; }
.link--light { color: var(--white); }
.link--light:hover { color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.25rem/1 var(--display); letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"]:not(.btn) { color: var(--flow); }
.nav__links a[aria-current="page"]:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; }
.nav__toggle { display: none; }

@media (max-width: 820px) {
  .nav__toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    background: transparent; border: 1px solid var(--rule); border-radius: 10px;
    font: 600 1rem/1 var(--body); color: var(--ink); cursor: pointer;
  }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 20px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav__links .btn { margin-top: 16px; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.hero__grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero__lede { font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); color: var(--ink-soft); max-width: 54ch; margin-top: 28px; }
.hero__photo { margin: 0; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px var(--radius) var(--radius); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { max-width: 320px; }
}

/* ---------- the pipe (hero) ---------- */
.pipe { margin: clamp(56px, 7vw, 88px) 0 0; }
.pipe__stages {
  --pipe-h: 12px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  position: relative;
}
/* The pipe itself: a grey track, and the blue flow drawn over it once. */
.pipe__track {
  position: absolute; left: calc(100% / 14); right: calc(100% / 14);
  top: calc(13px - var(--pipe-h) / 2); height: var(--pipe-h); border-radius: 99px;
  background: var(--rule); overflow: hidden;
}
.pipe__flow { position: absolute; inset: 0; background: var(--flow); transform-origin: left center; animation: flow 2.4s cubic-bezier(.6,.1,.3,1) .3s both; }
.pipe__stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; }
.pipe__node {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 4px solid var(--flow);
}
.pipe__stage--start .pipe__node, .pipe__stage--end .pipe__node { background: var(--flow); }
.pipe__stage--end .pipe__node { width: 34px; height: 34px; margin-top: -4px; box-shadow: 0 0 0 6px rgba(11, 95, 219, .16); }
.pipe__label { margin-top: 14px; font: 600 1rem/1.25 var(--body); }
.pipe__stage--start .pipe__label, .pipe__stage--end .pipe__label { font-family: var(--display); font-size: 1.125rem; }
/* A drop falls from under each middle node, timed to when the flow passes it. */
.pipe__drop {
  width: 14px; height: 14px; margin-top: 14px;
  background: var(--leak); border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  animation: drip 1.1s ease-in both;
}
.pipe__stage:nth-child(3) .pipe__drop { animation-delay: .8s; }
.pipe__stage:nth-child(4) .pipe__drop { animation-delay: 1.15s; }
.pipe__stage:nth-child(5) .pipe__drop { animation-delay: 1.5s; }
.pipe__stage:nth-child(6) .pipe__drop { animation-delay: 1.85s; }
.pipe__stage:nth-child(7) .pipe__drop { animation-delay: 2.2s; }
.pipe figcaption { margin: 36px auto 0; max-width: 52ch; text-align: center; color: var(--ink-soft); }

@keyframes flow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drip {
  0% { opacity: 0; transform: translateY(-18px) rotate(45deg) scale(.4); }
  60% { opacity: 1; transform: translateY(4px) rotate(45deg) scale(1); }
  100% { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); }
}

/* Vertical pipe on narrow screens. */
@media (max-width: 720px) {
  .pipe__stages { grid-template-columns: 1fr; row-gap: 26px; }
  .pipe__track { left: calc(13px - var(--pipe-h) / 2); right: auto; top: 13px; bottom: 13px; width: var(--pipe-h); height: auto; }
  .pipe__flow { transform-origin: center top; animation-name: flow-down; }
  .pipe__stage { flex-direction: row; text-align: left; gap: 16px; }
  .pipe__stage--end .pipe__node { margin: 0 0 0 -4px; }
  .pipe__label { margin: 0; }
  .pipe__drop { margin: 0 0 0 auto; }
  .pipe figcaption { text-align: left; margin-left: 0; }
}
@keyframes flow-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- trusted by ---------- */
.trusted { border-top: 1px solid var(--rule); padding: 28px 0; }
.trusted__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; }
.trusted__title { margin: 0; font: 600 1rem/1.2 var(--body); letter-spacing: 0; color: var(--ink-soft); }
.trusted__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; flex: 1; justify-content: space-between; }
.trusted__name { font: 800 clamp(1.25rem, 2vw, 1.625rem)/1 var(--display); letter-spacing: -0.02em; color: #5D6774; padding: 0 28px; }
.trusted__name + .trusted__name { border-left: 1px solid var(--rule); }
.trusted__name:first-child { padding-left: 0; }
.trusted__name--serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
@media (max-width: 720px) {
  .trusted__inner { flex-direction: column; align-items: flex-start; }
  .trusted__list { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trusted__name { padding: 0; }
  .trusted__name + .trusted__name { border-left: 0; }
}

/* ---------- proof strip ---------- */
.proof { border-block: 1px solid var(--rule); background: var(--white); }
/* One credential now, so it's centred and large: badge above, name and line below. */
.proof__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.proof__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 44px 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.4; }
.proof__item strong { display: block; color: var(--ink); font: 700 clamp(1.625rem, 2.6vw, 2.125rem)/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 6px; }
.proof__item--badge img { width: 120px; height: 120px; flex: none; }
@media (max-width: 560px) { .proof__item--badge img { width: 96px; height: 96px; } }

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section--tight { padding-top: 0; }
.section--panel { background: var(--panel); }
.section__title { margin-bottom: 40px; }
.section__headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 40px; }
.section__headrow .section__title { margin: 0; }

.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split__head { position: sticky; top: 110px; }
.split__head p { color: var(--ink-soft); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__head { position: static; }
}

/* Pain points: each one a drop. */
.leaks { list-style: none; margin: 0; padding: 0; }
.leaks li {
  position: relative; padding: 20px 0 20px 40px; border-bottom: 1px solid var(--rule);
  font: 500 clamp(1.1875rem, 1.6vw, 1.375rem)/1.4 var(--body);
}
.leaks li:first-child { padding-top: 0; }
.leaks li::before {
  content: ""; position: absolute; left: 4px; top: calc(20px + 0.42em);
  width: 13px; height: 13px; background: var(--leak); border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
.leaks li:first-child::before { top: 0.42em; }
.leaks__close { margin-top: 28px; font: 700 1.3125rem/1.35 var(--display); letter-spacing: -0.01em; }

/* What I build: plain definition rows. */
.build { margin: 0; }
.build__row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--rule); }
.build__row:last-child { border-bottom: 1px solid var(--rule); }
.build dt { font: 700 1.25rem/1.3 var(--display); letter-spacing: -0.01em; }
.build dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) { .build__row { grid-template-columns: 1fr; } }

/* How we work together: a real sequence, so it's numbered, on its own short pipe. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: step; position: relative; }
/* The line runs from the first node to the last one: 4 columns, 32px gaps, 48px nodes. */
.steps::before { content: ""; position: absolute; top: 21px; left: 24px; right: calc((100% - 96px) / 4 - 24px); height: 6px; border-radius: 99px; background: var(--flow); }
.steps__item { counter-increment: step; position: relative; }
.steps__item::before {
  content: counter(step); display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 22px; border-radius: 50%;
  background: var(--white); border: 4px solid var(--flow); color: var(--flow);
  font: 800 1.25rem/1 var(--display); position: relative;
}
.steps__item p { color: var(--ink-soft); font-size: 1.0625rem; }
.steps__cta { margin: 48px 0 0; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { top: 24px; bottom: 24px; left: 21px; right: auto; width: 6px; height: auto; }
  .steps__item { padding: 0 0 32px 76px; }
  .steps__item::before { position: absolute; left: 0; top: 0; margin: 0; }
  .steps__item h3 { padding-top: 10px; }
}

/* Systems I've built: three wide rows, not cards. */
.work-list { border-top: 1px solid var(--rule); }
.work-item {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.work-item:hover { color: var(--ink); }
.work-item:hover strong { color: var(--flow); }
.work-item__figure { font: 800 clamp(2.75rem, 5vw, 4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--flow); }
.work-item__body strong { display: block; font: 700 1.375rem/1.25 var(--display); letter-spacing: -0.015em; margin-bottom: 6px; }
.work-item__body span { color: var(--ink-soft); }
@media (max-width: 640px) { .work-item { grid-template-columns: 1fr; gap: 8px; } }

/* Lead magnet: a drawn cover, not a stock mock-up. */
.magnet { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.magnet--head { grid-template-columns: 1.2fr 0.8fr; }
.magnet__cover {
  aspect-ratio: 8.5 / 11; max-width: 380px; width: 100%; justify-self: center;
  background: var(--ink); color: var(--white); border-radius: 6px;
  padding: 36px 30px; display: flex; flex-direction: column;
  box-shadow: 18px 18px 0 var(--flow);
  transform: rotate(-2deg);
}
.magnet__cover-title { font: 800 clamp(2rem, 3.4vw, 2.6rem)/0.98 var(--display); letter-spacing: -0.03em; }
.magnet__cover-sub { margin-top: 16px; font-size: 0.9875rem; line-height: 1.4; color: #C9D3DF; }
.magnet__cover-drops { margin-top: auto; display: flex; gap: 12px; }
.magnet__cover-drops i { width: 14px; height: 14px; background: var(--leak); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.magnet__copy p { color: var(--ink-soft); }
.magnet__copy .btn { margin-top: 12px; }
@media (max-width: 860px) {
  .magnet, .magnet--head { grid-template-columns: 1fr; }
  .magnet__cover { max-width: 260px; justify-self: start; }
  .magnet--head .magnet__cover { order: -1; }
}

/* Meet Chad */
.meet { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.meet__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.meet__copy p { color: var(--ink-soft); }
@media (max-width: 760px) { .meet { grid-template-columns: 1fr; } .meet__photo { max-width: 240px; } }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font: 600 1.1875rem/1.4 var(--body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
  border-right: 2.5px solid var(--flow); border-bottom: 2.5px solid var(--flow); transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq details p { color: var(--ink-soft); padding-bottom: 22px; margin: 0; }

/* Closing band */
.cta { background: var(--flow-deep); color: var(--white); padding: var(--section) 0; }
.cta__title { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 16ch; }
.cta p { color: #DCE6F7; font-size: 1.1875rem; }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.page-head__lede { font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); color: var(--ink-soft); max-width: 56ch; }
.page-head__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 860px) { .page-head__grid { grid-template-columns: 1fr; } }

.mini-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: m; }
.mini-steps li { counter-increment: m; position: relative; padding: 0 0 22px 52px; color: var(--ink-soft); }
.mini-steps li::before {
  content: counter(m); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--flow); color: var(--white); font: 800 1rem/1 var(--display);
}
.mini-steps strong { color: var(--ink); }

.calendar { background: var(--white); border-radius: var(--radius); border: 1px solid var(--rule); padding: 24px; min-height: 240px; }
.calendar iframe { width: 100%; min-height: 700px; border: 0; display: block; }
.calendar__note { margin-top: 14px; color: var(--ink-soft); font-size: 0.9875rem; }

.optin { margin-top: 28px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.optin iframe { width: 100%; min-height: 320px; border: 0; display: block; }
.optin p { margin: 0; }
.optin__note { margin-top: 14px; color: var(--ink-soft); font-size: 0.9875rem; }

.inside { list-style: none; margin: 0; padding: 0; counter-reset: i; border-top: 1px solid var(--rule); }
.inside li {
  counter-increment: i; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.inside li::before { content: counter(i); font: 800 1.375rem/1 var(--display); color: var(--flow); }
.inside strong { font-weight: 600; font-size: 1.1875rem; }
.inside span { color: var(--ink-soft); font-size: 0.9875rem; white-space: nowrap; }

/* Case studies */
.case { padding: var(--section) 0; }
.case--panel { background: var(--panel); }
.case__client { color: var(--flow); font-weight: 600; margin-bottom: 10px; }
.case__head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 8px 48px; align-items: end; margin-bottom: 40px; }
.case__head h2 { margin: 0; grid-column: 1; }
.case__head .case__client { grid-column: 1; margin: 0; }
.case__figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--ink-soft); text-align: right; justify-self: end; }
.case__figure strong { display: block; font: 800 clamp(3.5rem, 7vw, 6rem)/0.9 var(--display); letter-spacing: -0.045em; color: var(--flow); }
.case__body { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 80px); }
.case__text p { color: var(--ink-soft); }
.case__spec { margin: 0; border-top: 1px solid var(--rule); }
.case__spec div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.case__spec dt { font-weight: 700; margin-bottom: 4px; }
.case__spec dd { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }
.case__shots { display: grid; grid-template-columns: 0.6fr 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.case__shots figure { margin: 0; }
.case__shots img { border-radius: 10px; border: 1px solid var(--rule); background: var(--white); }
.case__shots figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 0.9375rem; }
@media (max-width: 860px) {
  .case__head, .case__body { grid-template-columns: 1fr; }
  .case__figure { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; margin-top: 16px; }
  .case__shots { grid-template-columns: 1fr 1fr; }
  .case__shots figure:first-child { grid-row: span 2; }
}
@media (max-width: 520px) { .case__shots { grid-template-columns: 1fr; } .case__shots figure:first-child { grid-row: auto; } }

/* A client path as a plain sequence on the pipe. */
.flow { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.flow li {
  position: relative; font-weight: 600; font-size: 1rem;
  background: var(--white); border: 2px solid var(--flow); border-radius: 99px; padding: 8px 16px;
}
.flow li + li { margin-left: 28px; }
.flow li + li::before { content: ""; position: absolute; left: -30px; top: 50%; width: 28px; height: 4px; margin-top: -2px; background: var(--flow); }
.flow li:last-child { background: var(--flow); color: var(--white); }
@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: flex-start; gap: 20px; }
  .flow li + li { margin-left: 0; }
  .flow li + li::before { left: 22px; top: -22px; width: 4px; height: 20px; margin: 0; }
}

/* About */
.about { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.about__copy > p:not(.page-head__lede) { color: var(--ink-soft); }
.about__photo { margin: 0; position: sticky; top: 110px; }
.about__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { position: static; max-width: 260px; order: -1; }
}

.facts { margin: 0; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #C9D3DF; padding: 64px 0 28px; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--white); }
.footer .brand { color: var(--white); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__brand p { margin-top: 16px; font-size: 0.9875rem; max-width: 40ch; }
.footer__links, .footer__contact { display: flex; flex-direction: column; gap: 12px; font-size: 1rem; }
.footer__base { margin-top: 48px; padding-top: 20px; border-top: 1px solid #34404F; font-size: 0.9375rem; }
@media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } }

/* ---------- Hayes Practice: homepage shot and workflow map ---------- */
.browser { margin: 0; }
.browser img { border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 12px 12px; }
.browser__bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 12px 12px 0 0;
}
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule); }
.browser__bar span { margin-left: 10px; font-size: 0.875rem; color: var(--ink-soft); }
.browser figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 0.9375rem; }
.case .browser { margin-top: 48px; }

.featured { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: 48px; }
.featured__client { color: var(--flow); font-weight: 600; margin-bottom: 8px; }
.featured__copy p:not(.featured__client) { color: var(--ink-soft); }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } }

/* Seven columns in both lanes, so the organisation lane lines up under the first steps. */
.wfmap { margin: 0 0 56px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.case .wfmap { margin: 32px 0 0; }
.wfmap__cap { font: 700 1.25rem/1.3 var(--display); letter-spacing: -0.01em; margin-bottom: 28px; }
.wfmap__lane + .wfmap__lane { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--rule); }
.wfmap__lane-title { font: 700 1.0625rem/1.3 var(--body); letter-spacing: 0; margin: 0 0 22px; }
.wfmap__lane-title span { font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.wfmap__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 14px; position: relative; }
.wfmap__nodes::before {
  content: ""; position: absolute; top: 15px; height: 4px; border-radius: 99px; background: var(--flow);
  left: calc(100% / 14); right: calc(100% - (var(--n) - 0.5) * 100% / 7);
}
.wfmap__node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 0.9375rem; line-height: 1.35; }
.wfmap__node > .wfmap__num {
  width: 34px; height: 34px; display: grid; place-items: center; margin: 0 0 10px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--flow); color: var(--flow);
  font: 800 0.8125rem/1 var(--display); position: relative;
}
.wfmap__node--end > .wfmap__num { background: var(--flow); color: var(--white); }
.wfmap__node strong { font-weight: 600; }
.wfmap__node > span:not(.wfmap__num):not(.wfmap__branch) { color: var(--ink-soft); }
.wfmap__node em {
  font-style: normal; font-weight: 600; font-size: 0.8125rem; color: var(--flow-deep);
  background: #DCE8FA; border-radius: 99px; padding: 3px 10px; margin-top: 4px;
}
.wfmap__branch { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.8125rem; color: var(--ink-soft); }
.wfmap__branch::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--leak); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.wfmap__branch .wfmap__num { font: 800 0.75rem/1 var(--display); color: var(--ink); }

@media (max-width: 900px) {
  .wfmap__nodes { grid-template-columns: 1fr; gap: 22px; }
  /* Narrow screens: one segment per node, from its circle to the next, so the line stops at the last step. */
  .wfmap__nodes::before { display: none; }
  .wfmap__node:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 26px; bottom: -26px; width: 4px; background: var(--flow); }
  .wfmap__node { padding-left: 52px; align-items: flex-start; text-align: left; }
  .wfmap__node > .wfmap__num { position: absolute; left: 0; top: -4px; margin: 0; }
}

/* ---------- depth (2026-10-29: "the site looks flat") ----------
   Shadows are tinted with ink and the logo blue rather than flat grey, and only
   raised things get them: photo, screenshots, workflow map, calendar, cover. */
:root {
  --grid: rgba(27, 36, 48, 0.07);
  --shadow-1: 0 1px 2px rgba(27, 36, 48, .06), 0 10px 24px -10px rgba(27, 36, 48, .22);
  --shadow-2: 0 2px 6px rgba(27, 36, 48, .06), 0 28px 56px -20px rgba(8, 72, 168, .34);
}

/* Pale sky behind the hero with three blurred ribbons. Each drifts on its own loop
   (9s, 10.5s, 12s) and thins as it turns, so they read as folding past each other.
   The sky fades into the page colour at the bottom. Static under reduced motion. */
.hero { position: relative; isolation: isolate; }
.hero__sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #DCEBFA 0%, #E7F1FA 45%, var(--paper) 100%);
}
.ribbon {
  position: absolute; left: 50%; top: 30%;
  width: 78vw; height: clamp(120px, 18vw, 240px); margin-left: -39vw;
  border-radius: 50%; filter: blur(42px); opacity: .7;
  will-change: transform;
  animation: ribbon-a 9s ease-in-out infinite;
}
.ribbon--1 { background: linear-gradient(90deg, transparent, #8DB9F6 30%, #B9D6FA 70%, transparent); }
.ribbon--2 { top: 48%; background: linear-gradient(90deg, transparent, #A6DDE8 35%, #CBEBF0 65%, transparent); animation-name: ribbon-b; animation-duration: 10.5s; }
.ribbon--3 { top: 18%; height: clamp(90px, 13vw, 180px); opacity: .55; background: linear-gradient(90deg, transparent, #FFD88A 40%, #FFE9BF 70%, transparent); animation-name: ribbon-c; animation-duration: 12s; }

@keyframes ribbon-a {
  0%, 100% { transform: translate(-28%, 0) rotate(-9deg) skewX(-12deg) scaleY(1); }
  50% { transform: translate(24%, -12%) rotate(7deg) skewX(16deg) scaleY(.4); }
}
@keyframes ribbon-b {
  0%, 100% { transform: translate(26%, 6%) rotate(8deg) skewX(14deg) scaleY(.5); }
  50% { transform: translate(-24%, -6%) rotate(-6deg) skewX(-10deg) scaleY(1.1); }
}
@keyframes ribbon-c {
  0%, 100% { transform: translate(-10%, 20%) rotate(4deg) skewX(8deg) scaleY(.9); }
  50% { transform: translate(18%, 46%) rotate(-10deg) skewX(-18deg) scaleY(.35); }
}

/* Hero photo: a solid blue block behind it, and the badge floating over the corner. */
.hero__photo { position: relative; }
.hero__photo::before {
  content: ""; position: absolute; inset: 0; transform: translate(18px, 18px); z-index: -1;
  background: var(--flow); border-radius: 200px 200px var(--radius) var(--radius);
}
.hero__photo > img { position: relative; box-shadow: var(--shadow-2); }
/* The pipe as a tube: light along the top, shade underneath. */
.pipe__track { background: linear-gradient(to bottom, #D6DED9, var(--rule) 60%, #B3BFB8); box-shadow: inset 0 1px 2px rgba(27, 36, 48, .18); }
.pipe__flow { background: linear-gradient(to bottom, #5A98F5 0%, var(--flow) 45%, #0846A3 100%); }
.pipe__node { box-shadow: 0 4px 10px -2px rgba(8, 72, 168, .35); }
.pipe__drop { box-shadow: 2px 2px 6px rgba(180, 110, 0, .35); }
@media (max-width: 720px) {
  .pipe__track { background: linear-gradient(to right, #D6DED9, var(--rule) 60%, #B3BFB8); }
  .pipe__flow { background: linear-gradient(to right, #5A98F5 0%, var(--flow) 45%, #0846A3 100%); }
}

/* A dark band for contrast; the amber drops are what you see first. */
.section--ink { background: var(--ink); color: var(--white); }
.section--ink .leaks li { border-bottom-color: #34404F; }
.section--ink .leaks li::before { box-shadow: 0 0 0 5px rgba(255, 178, 26, .14); }
.section--ink .leaks__close { color: var(--leak); }

/* Raised surfaces. */
.wfmap, .browser__frame, .calendar, .optin { box-shadow: var(--shadow-2); }
.browser__frame { border-radius: 12px; }
.browser img, .browser__bar { border-color: transparent; }
.wfmap { border-color: transparent; }
.wfmap__node > .wfmap__num, .steps__item::before { box-shadow: 0 4px 10px -2px rgba(8, 72, 168, .3); }
.magnet__cover { box-shadow: 18px 18px 0 var(--flow), 0 40px 60px -20px rgba(27, 36, 48, .45); }
.case__shots img { box-shadow: var(--shadow-1); }
.meet__photo, .about__photo img { box-shadow: var(--shadow-2); }

/* Blueprint grid again in the closing band, in light lines. */
.cta { position: relative; isolation: isolate; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at 80% 50%, #000, transparent 70%);
}

/* ---------- page transition: fade-through ----------
   Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+; other browsers
   just navigate). The old page fades out and shrinks to 0.97 in 150ms, then the
   new page fades in, scaling down from 1.04 over 300ms. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 150ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-in 300ms cubic-bezier(0, 0, .2, 1) 150ms both; }
@keyframes page-out { to { opacity: 0; transform: scale(.97); } }
@keyframes page-in { from { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Home: the sky runs up under a translucent nav, so there's no hard band at the top. */
.page-home .nav { background: rgba(238, 242, 239, 0); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .2s, border-color .2s; }
.page-home .nav.is-scrolled { background: rgba(238, 242, 239, .82); }
.page-home .hero { margin-top: -77px; padding-top: calc(77px + clamp(40px, 6vw, 80px)); }
@media (max-width: 820px) { .page-home .nav__links { background: var(--paper); } }

/* ---------- cursor dot trail ---------- */
.trail { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.trail__dot {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--flow); opacity: 0; will-change: transform, opacity;
}

/* ---------- reading progress ----------
   3px bar fixed to the very top, filling in the accent blue as the page scrolls.
   site.js sets the scale; pages shorter than the window keep it empty. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--flow); transform-origin: left center; transform: scaleX(0); }

/* ---------- smooth scrolling (Lenis 1.3.26, js/vendor/) ----------
   Lenis's own lenis.css, minus its rule that disables iframes while smoothing:
   the HighLevel calendar and form must stay clickable. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- the pipe, alive: intake, running water, leaks, faucet ---------- */
/* Room above the pipe for the intake funnel. --x is the pipe's line on phones. */
.pipe__stages { padding-top: 72px; }
.pipe__track { top: calc(72px + 13px - var(--pipe-h) / 2); }

/* Water keeps running once the pipe has filled. */
.pipe__water {
  position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .5) 22px 30px, transparent 30px 48px);
  animation: water-in .6s ease 2.6s forwards, water-x .9s linear 2.6s infinite;
}
@keyframes water-in { to { opacity: 1; } }
@keyframes water-x { from { background-position: 0 0; } to { background-position: 48px 0; } }

/* Intake: drops fall into the funnel, whose stem meets the first node. */
.pipe__intake { position: absolute; top: -71px; left: 50%; transform: translateX(-50%); overflow: visible; }
.intake__drop { fill: #5A98F5; opacity: 0; animation: intake-drop 1.2s ease-in infinite; }
.intake__drop:nth-of-type(2) { animation-delay: .4s; }
.intake__drop:nth-of-type(3) { animation-delay: .8s; }
@keyframes intake-drop {
  0% { opacity: 0; transform: translateY(-6px); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translateY(20px); }
  100% { opacity: 0; transform: translateY(24px); }
}

/* Leaks drip on a loop after the flow passes, not just once. */
.pipe__drop { animation: drip 1.1s ease-in both, leak 2.4s ease-in 3s infinite; }
.pipe__stage:nth-child(4) .pipe__drop { animation-delay: 1.15s, 3.5s; }
.pipe__stage:nth-child(5) .pipe__drop { animation-delay: 1.5s, 3.2s; }
.pipe__stage:nth-child(6) .pipe__drop { animation-delay: 1.85s, 3.8s; }
.pipe__stage:nth-child(7) .pipe__drop { animation-delay: 2.2s, 3.35s; }
.pipe__stage:nth-child(3) .pipe__drop { animation-delay: .8s, 3.65s; }
@keyframes leak {
  0%, 30% { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); }
  75% { opacity: 1; transform: translateY(22px) rotate(45deg) scale(1); }
  76% { opacity: 0; transform: translateY(22px) rotate(45deg) scale(1); }
  77% { opacity: 0; transform: translateY(0) rotate(45deg) scale(.3); }
  100% { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); }
}

/* Faucet at the end. The body's centre (x 30, y 24) sits where the last node was. */
.pipe__tap { position: relative; display: block; width: 72px; height: 112px; margin-top: -11px; transform: translateX(6px); }
.pipe__tap svg { display: block; filter: drop-shadow(0 4px 8px rgba(8, 72, 168, .3)); }
.pipe__coin {
  position: absolute; left: 50px; top: 46px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font: 800 10px/1 var(--body); font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4FD08A, #1E9E5A 70%); box-shadow: 0 2px 4px rgba(20, 110, 60, .35);
  opacity: 0; animation: coin 1.8s cubic-bezier(.5, 0, .9, .6) infinite;
}
.pipe__coin:nth-of-type(1) { animation-delay: 2.8s; }
.pipe__coin:nth-of-type(2) { animation-delay: 3.4s; }
.pipe__coin:nth-of-type(3) { animation-delay: 4s; }
@keyframes coin {
  0% { opacity: 0; transform: translateY(0) scale(.4); }
  15% { opacity: 1; transform: translateY(2px) scale(1); }
  85% { opacity: 1; transform: translateY(40px) scale(1) rotate(200deg); }
  100% { opacity: 0; transform: translateY(44px) scale(1) rotate(220deg); }
}
.pipe__pile { position: absolute; left: 46px; bottom: 0; width: 24px; height: 22px; }
.pipe__pile i {
  position: absolute; left: 0; width: 24px; height: 8px; border-radius: 50%;
  background: #2DB46B; border: 1.5px solid #17804A;
}
.pipe__pile i:nth-child(1) { bottom: 0; }
.pipe__pile i:nth-child(2) { bottom: 5px; }
.pipe__pile i:nth-child(3) { bottom: 10px; left: 2px; }
.pipe__stage--end .pipe__label { margin-top: 4px; transform: translateX(6px); }

@media (max-width: 720px) {
  .pipe__stages { --x: 32px; padding-top: 72px; }
  .pipe__stage { padding-left: calc(var(--x) - 13px); }
  .pipe__track { left: calc(var(--x) - var(--pipe-h) / 2); top: calc(72px + 13px); bottom: 88px; }
  .pipe__water {
    background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 255, 255, .5) 22px 30px, transparent 30px 48px);
    animation-name: water-in, water-y;
  }
  .pipe__intake { left: var(--x); }
  .pipe__tap { margin: 0 0 0 -17px; transform: none; flex: none; }
  .tap__handle { display: none; } /* the pipe enters from above here */
  .pipe__stage--end .pipe__label { margin: 0; transform: none; }
}
@keyframes water-y { from { background-position: 0 0; } to { background-position: 0 48px; } }

/* ---------- leaks, made obvious ----------
   Each leak sits on the pipe between two stages: a crack, a steady drip, and a
   puddle that grows on the ground below. Replaces the small drop under each label. */
.pipe__drop { display: none; }
.pipe__leak { position: absolute; left: 0; top: calc(13px + var(--pipe-h) / 2 - 2px); width: 0; height: 92px; z-index: 1; }
.leak__crack {
  position: absolute; left: -7px; top: -4px; width: 14px; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--leak) 0 45%, rgba(255, 178, 26, 0) 70%);
  opacity: 0; animation: water-in .3s ease forwards, crack 1.2s ease-in-out infinite;
}
.pipe__leak i {
  position: absolute; left: -7px; top: 0; width: 14px; height: 14px;
  background: var(--leak); border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  box-shadow: 1px 1px 4px rgba(180, 110, 0, .4);
  opacity: 0; animation: fall 1.5s cubic-bezier(.55, 0, 1, .45) infinite;
}
.pipe__leak i:nth-of-type(2) { animation-delay: .5s; }
.pipe__leak i:nth-of-type(3) { animation-delay: 1s; }
.leak__puddle {
  position: absolute; left: -22px; bottom: 0; width: 44px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 178, 26, .85), rgba(255, 178, 26, .25) 65%, rgba(255, 178, 26, 0) 72%);
  transform: scale(0); transform-origin: center; animation: puddle 3s ease-out forwards;
}
@keyframes crack { 50% { transform: scale(1.35); } }
@keyframes fall {
  0% { opacity: 0; transform: translateY(0) rotate(45deg) scale(.3); }
  20% { opacity: 1; transform: translateY(2px) rotate(45deg) scale(1); }
  92% { opacity: 1; transform: translateY(76px) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translateY(80px) rotate(45deg) scale(1.3, .4); }
}
@keyframes puddle { to { transform: scale(1); } }
/* The leaks open as the water reaches them. */
.pipe__stage:nth-child(3) .pipe__leak * { animation-delay: .9s; }
.pipe__stage:nth-child(4) .pipe__leak * { animation-delay: 1.3s; }
.pipe__stage:nth-child(5) .pipe__leak * { animation-delay: 1.7s; }
.pipe__stage:nth-child(6) .pipe__leak * { animation-delay: 2.1s; }
.pipe__stage:nth-child(7) .pipe__leak * { animation-delay: 2.5s; }
.pipe__leak i:nth-of-type(2) { animation-delay: calc(var(--d, 0s) + .5s) !important; }
.pipe__leak i:nth-of-type(3) { animation-delay: calc(var(--d, 0s) + 1s) !important; }
.pipe__stage:nth-child(3) { --d: .9s; }
.pipe__stage:nth-child(4) { --d: 1.3s; }
.pipe__stage:nth-child(5) { --d: 1.7s; }
.pipe__stage:nth-child(6) { --d: 2.1s; }
.pipe__stage:nth-child(7) { --d: 2.5s; }
.pipe { padding-bottom: 8px; }

/* Phones: the pipe runs down the left, so leaks spill out to its right, between rows. */
@media (max-width: 720px) {
  .pipe__leak { left: calc(var(--x) + var(--pipe-h) / 2); top: -22px; height: 26px; }
  .leak__crack { left: -5px; top: 2px; width: 8px; height: 14px; }
  .pipe__leak i { left: 2px; width: 10px; height: 10px; animation-name: fall-short; }
  .leak__puddle { left: 0; width: 30px; height: 7px; }
}
@keyframes fall-short {
  0% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(.3); }
  20% { opacity: 1; transform: translate(4px, 2px) rotate(45deg) scale(1); }
  90% { opacity: 1; transform: translate(10px, 18px) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate(10px, 20px) rotate(45deg) scale(1.3, .4); }
}
@media (prefers-reduced-motion: reduce) {
  .leak__crack, .pipe__leak i:nth-of-type(1) { opacity: 1; }
  .pipe__leak i:nth-of-type(1) { transform: translateY(30px) rotate(45deg); }
  .leak__puddle { transform: none; }
}