/* SSC Consulting. Started from forgetthefunnel.com (measured 2026-09-04): cream page,
   very heavy geometric sans, uppercase small buttons, organic colour blobs, a dark
   chocolate band for the method. Palette: Shannon's LinkedIn violet, sea green and amber.
   Shannon (call, Oct 2026) liked it "if it just didn't have this weird comic sans font",
   so the cards and phase labels use Outfit, not a hand-lettered face. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap');

:root {
  --cream: #FDF3E4;
  --cream-2: #F6E9D6;
  --choc: #2E2925;
  --choc-2: #3A342F;
  --ink: #1E1A17;
  --text: #2E2925;
  --muted: #7A6E63;
  --rule: #E6D9C6;
  --sea: #3FA7A0;
  --brick: #E46B5B;
  --amber: #F2C14E;
  --violet: #D1B9D2;
  --violet-ink: #7F5A8C;
  --radius: 6px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font-family: "Outfit", -apple-system, sans-serif; font-size: 19px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 900; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 72px; line-height: 1.0; }
h2 { font-size: 46px; line-height: 1.1; }
h3 { font-size: 24px; line-height: 1.25; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
img.brand-dark { display: none !important; }

/* buttons */
.btn {
  display: inline-block; font-weight: 500; font-size: 15px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); background: transparent; border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 12px 22px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn-primary { background: var(--violet-ink); border-color: var(--violet-ink); color: var(--cream); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-lg { font-size: 16px; padding: 14px 28px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(253,243,228,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav .brand img { height: 32px; width: auto; display: block; }
.nav .btn { font-size: 13px; padding: 10px 16px; }

/* hero: centred statement on a blob field */
.hero { position: relative; overflow: hidden; padding: 120px 0 130px; text-align: center; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; }
.hero::before { left: -180px; bottom: -220px; width: 460px; height: 460px; border: 42px solid var(--violet); }
.hero::after { right: -140px; bottom: -160px; width: 380px; height: 380px; background: var(--amber); }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 20ch; margin: 0 auto; }
.hero .lede { font-size: 20px; line-height: 1.5; max-width: 58ch; text-wrap: balance; margin: 28px auto 34px; color: var(--muted); }
.hero .actions { display: flex; justify-content: center; gap: 12px; }

section { padding: 100px 0; }

/* problem: speech-bubble cards, three colours */
.problem { text-align: center; }
.problem h2 { max-width: 22ch; margin: 0 auto; }
.problem .cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.problem .card {
  position: relative; padding: 30px 28px 34px; border-radius: 14px; text-align: left;
  font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.problem .card h3 { font-size: 24px; font-weight: 900; margin-bottom: 10px; }
.problem .card p { text-wrap: balance; }
.problem .card::after {
  content: ""; position: absolute; left: 36px; bottom: -16px; width: 0; height: 0;
  border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 18px solid currentColor;
}
.problem .card:nth-child(1) { background: var(--violet); color: var(--violet); }
.problem .card:nth-child(2) { background: var(--amber); color: var(--amber); margin-top: 28px; }
.problem .card:nth-child(3) { background: var(--sea); color: var(--sea); }
.problem .card p { color: var(--ink); }

/* method: the dark band */
.method { background: var(--choc); color: var(--cream); }
.method h2 { color: var(--cream); }
.method .phases { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.method .phase { background: var(--choc-2); border-radius: 14px; padding: 32px 32px 36px; }
.method h3 { color: var(--cream); font-size: 24px; }
.method .label { display: block; font-weight: 900; font-size: 20px; line-height: 1; color: var(--violet); margin-bottom: 12px; }
.method p { margin-top: 14px; color: #D9CDBD; font-size: 18px; }

/* about */
.about h2 { text-align: center; }
.about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; margin-top: 48px; }
.about .portrait { position: relative; }
.about .portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--violet); border-radius: 18px; z-index: 0; }
.about .portrait img { position: relative; z-index: 1; display: block; width: 100%; border-radius: 18px; }
.about-copy p { font-size: 19px; max-width: 60ch; }
.about-copy p + p { margin-top: 14px; }
.about-copy .hey { font-size: 34px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.about-copy .ready { font-weight: 700; color: var(--violet-ink); margin-top: 26px; font-size: 20px; }

/* faq */
.faq { background: var(--cream-2); }
.faq h2 { text-align: center; margin-bottom: 40px; }
.qa { max-width: 760px; margin: 0 auto; }
.qa details { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; }
.qa summary { cursor: pointer; font-size: 19px; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--violet-ink); font-weight: 900; }
.qa details[open] summary::after { content: "\2212"; }
.qa p { margin-top: 10px; color: var(--muted); }

/* contact */
.contact { text-align: center; }
.contact-form { max-width: 720px; margin: 0 auto; }
.contact-form h2 { margin-bottom: 28px; }
.contact-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; text-align: left; }
.contact-form textarea { grid-column: 1 / -1; resize: vertical; }
.contact-form input[type=email] { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 14px 16px; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--violet-ink); }
.contact-form .btn { font: inherit; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; font-weight: 500; cursor: pointer; }

/* footer */
.footer { background: var(--choc); color: var(--cream); padding: 32px 0; }
.footer h2 { color: var(--cream); max-width: 720px; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--choc-2); }
.footer img.brand-light { display: none !important; }
.footer img.brand-dark { display: block !important; height: 28px; width: auto; }
.footer p { font-size: 15px; color: #C9BDAE; max-width: 60ch; }
.footer .linkedin {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--violet); color: var(--ink); font-weight: 900; font-size: 14px; text-decoration: none;
}
.footer .copyright { font-size: 13px; color: #9A8E80; }
/* one line: logo left, copyright and LinkedIn right; a short centred stack on phones */
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.foot-end { display: flex; align-items: center; gap: 16px; }
@media (max-width: 560px) {
  .foot-row { flex-direction: column; gap: 16px; }
  .foot-end { flex-direction: column-reverse; gap: 12px; }
}

@media (max-width: 900px) {
  h1 { font-size: 46px; } h2 { font-size: 34px; }
  .problem .cards, .method .phases { grid-template-columns: 1fr; }
  .problem .card:nth-child(2) { margin-top: 0; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about .portrait { max-width: 360px; margin: 0 auto; }
  .contact-form .fields { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 100px; }
}

/* 2026 copy: the lines under a heading, the "easier" block, buttons inside sections */
.sub { margin-top: 14px; }
.sub + .sub { margin-top: 4px; }
.easier-copy { max-width: 62ch; margin-top: 24px; }
.easier-copy p + p { margin-top: 10px; }
.easier .actions, .about-copy .actions { margin-top: 28px; }

/* contact form: hidden spam trap, result line under the button */
.contact-form .botcheck { display: none; }
.form-status { margin-top: 14px; min-height: 1.5em; font-size: 15px; }

/* phones: smaller headline, and the two blobs tucked into the bottom corners
   so they sit below the button instead of behind the intro sentence */
@media (max-width: 560px) {
  h1 { font-size: 38px; }
  .hero::before { left: -130px; bottom: -160px; width: 240px; height: 240px; border-width: 22px; }
  .hero::after { right: -100px; bottom: -130px; width: 200px; height: 200px; }
}

/* testimonials: white cards in the page's own style, in place of the testimonial.to widget */
.wall { padding: 72px 0; }
.quote { margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 26px 26px 24px; display: flex; flex-direction: column; }
.quote::before { content: "\201C"; font-weight: 900; font-size: 64px; line-height: .8; height: 30px; color: var(--brick); }
.quote:nth-child(3n+2)::before { color: var(--sea); }
.quote:nth-child(3n+3)::before { color: var(--violet-ink); }
.quote blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.quote blockquote p + p { margin-top: 10px; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.quote figcaption strong { display: block; font-size: 16px; color: var(--ink); }
.quote figcaption img, .quote .initials { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote .initials { display: grid; place-items: center; background: var(--amber); color: var(--ink); font-weight: 900; font-size: 16px; }

/* a wall of same-height cards, each showing its first lines; "Read more" opens one card */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.quotes .quote blockquote { max-height: calc(1.55em * 6); overflow: hidden; }
.quotes .quote blockquote.cut { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.quote .more { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: 700 15px "Outfit", sans-serif; color: var(--violet-ink); text-decoration: underline; cursor: pointer; }
.quote.opens { cursor: pointer; transition: transform .15s ease; }
.quote.opens:hover { transform: translateY(-3px); }
/* the pop-up with one whole testimonial */
.quote-modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 16px; background: transparent; overflow: visible; }
.quote-modal::backdrop { background: rgba(30, 26, 23, .55); }
.quote-modal .quote { max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px 34px 30px; }
.quote-modal blockquote { font-size: 19px; }
.quote-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 24px/1 "Outfit", sans-serif; cursor: pointer; }
.quote-close:hover { background: var(--amber); }