/* ServPatch brand refresh: September 2026
   The brand system is deliberately quiet: blue provides structure,
   teal marks key care moments, and decorative patterns stay secondary. */

:root {
  --sp-navy: #10233f;
  --sp-navy-2: #173254;
  --sp-blue: #0b3f8f;
  --sp-action: #245be7;
  --sp-action-dark: #1748c6;
  --sp-teal: #45b8ad;
  --sp-teal-dark: #167f78;
  --sp-ice: #eef5fd;
  --sp-ice-2: #f7faff;
  --sp-care-tint: #dff3f0;
  --sp-line: #d6e3f2;
  --sp-muted: #5e7088;
  --sp-white: #ffffff;

  --text: var(--sp-navy);
  --text-2: var(--sp-navy-2);
  --muted: var(--sp-muted);
  --blue: var(--sp-action);
  --blue-2: var(--sp-action-dark);
  --blue-soft: var(--sp-ice);
  --line: var(--sp-line);
  --focus: var(--sp-action);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--sp-navy);
  background: var(--sp-white);
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--sp-navy);
  background: rgba(69, 184, 173, .28);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(36, 91, 231, .3);
  outline-offset: 3px;
}

.nav {
  top: 14px;
  padding-inline: 18px;
}

.nav-inner,
.premium-home .nav-inner {
  min-height: 68px;
  padding: 9px 10px 9px 18px;
  border: 1px solid rgba(214, 227, 242, .92);
  border-radius: 20px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 38px rgba(16, 35, 63, .09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand { gap: 11px; }

.brand-logo,
.premium-home .brand-logo {
  width: 54px;
  height: 44px;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

.brand-name,
.premium-home .brand-name {
  color: var(--sp-blue);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.nav-links a,
.premium-home .nav-links a {
  color: #4d6078;
  font-weight: 550;
}

.nav-links a:hover,
.premium-home .nav-links a:hover {
  color: var(--sp-navy);
  background: var(--sp-ice);
}

.nav-links a.active:not(.btn),
.premium-home .nav-links a.active:not(.btn) {
  color: var(--sp-blue);
  background: var(--sp-ice);
}

.btn,
.premium-home .nav-links .btn {
  min-height: 46px;
  border-radius: 13px;
  background: var(--sp-action);
  box-shadow: 0 8px 22px rgba(36, 91, 231, .18);
  font-weight: 650;
}

.btn:hover,
.premium-home .nav-links .btn:hover {
  background: var(--sp-action-dark);
  transform: translateY(-1px);
  box-shadow: 0 11px 28px rgba(36, 91, 231, .24);
}

.btn.secondary {
  color: var(--sp-blue);
  border-color: var(--sp-blue);
  background: var(--sp-white);
  box-shadow: none;
}

.premium-kicker,
.eyebrow {
  color: var(--sp-blue);
  letter-spacing: .04em;
}

.premium-kicker span,
.eyebrow::before {
  background: var(--sp-teal);
}

/* First-view refresh */
.premium-hero {
  min-height: auto;
  padding: 142px 0 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f6faff 60%, #e8f5f2 100%);
}

.premium-hero::before {
  width: 620px;
  height: 260px;
  top: 110px;
  right: -120px;
  border: 30px solid rgba(23, 74, 150, .07);
  border-left-color: transparent;
  border-radius: 160px;
  transform: rotate(-5deg);
  background: transparent;
}

.premium-hero::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -112px;
  width: 520px;
  height: 220px;
  border: 26px solid rgba(23, 74, 150, .06);
  border-right-color: transparent;
  border-radius: 150px;
  transform: rotate(6deg);
  pointer-events: none;
}

.premium-hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  gap: clamp(52px, 6vw, 96px);
  min-height: 630px;
  align-items: center;
}

.premium-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 0;
}

.premium-hero-copy h1 {
  max-width: 720px;
  margin-bottom: 25px;
  color: var(--sp-navy);
  font-size: clamp(58px, 6.2vw, 88px);
  line-height: .98;
  letter-spacing: -.06em;
}

.premium-hero-copy h1 strong {
  display: block;
  color: var(--sp-blue);
  font-weight: 700;
}

.premium-lead {
  max-width: 610px;
  color: #455a73;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65;
}

.premium-actions { gap: 20px; }

.premium-primary { padding-inline: 23px; }

.premium-secondary {
  padding-inline: 23px;
  color: var(--sp-blue);
  border: 1px solid rgba(11, 63, 143, .28);
  background: rgba(255, 255, 255, .78);
}

.premium-secondary:hover { color: var(--sp-action); border-color: var(--sp-action); }

.premium-text-action {
  color: var(--sp-blue);
  font-weight: 650;
}

.premium-text-action:hover { color: var(--sp-action); }

.hero-fit {
  padding-top: 18px;
  border-top: 1px solid rgba(23, 74, 150, .13);
}

.hero-fit > span:not(.hero-fit-label) { color: var(--sp-navy-2); }

.hero-patch-link {
  border-color: rgba(23, 74, 150, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 12px 28px rgba(16, 35, 63, .06);
}

.hero-patch-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--sp-white);
  border-radius: 50%;
  background: var(--sp-care-tint);
  box-shadow: 0 8px 18px rgba(16, 35, 63, .1);
}

.hero-patch-avatar img { transform: scale(1.16); }

.hero-patch-link small em {
  color: var(--sp-blue);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.16em;
  letter-spacing: -.01em;
  font-style: normal;
}

.hero-patch-link small { text-transform: none; }

.premium-hero-visual {
  min-height: 650px;
  --hero-frame-y: 0px;
  --hero-frame-scale: 1;
  --hero-image-scale: 1.07;
  --hero-preview-y: 0px;
  --hero-caption-y: 0px;
  --hero-glow-scale: 1;
}

.human-hero-frame {
  inset: 0 0 22px 0;
  border: 8px solid rgba(255, 255, 255, .94);
  border-radius: 34px 92px 34px 34px;
  box-shadow: 0 30px 70px rgba(16, 35, 63, .18);
  transform: translate3d(0, var(--hero-frame-y), 0) scale(var(--hero-frame-scale));
  transform-origin: 50% 54%;
  will-change: transform;
}

.human-hero-frame img {
  height: calc(100% + 88px);
  transform: translate3d(0, var(--parallax-y, -8px), 0) scale(var(--hero-image-scale));
}

.human-hero-glow {
  transform: scale(var(--hero-glow-scale));
  transform-origin: center;
  will-change: transform;
}

.human-hero-shade {
  background: linear-gradient(180deg, transparent 54%, rgba(8, 28, 53, .72));
}

.human-hero-caption span { background: var(--sp-teal); }

.human-hero-caption {
  transform: translate3d(0, var(--hero-caption-y), 0);
  will-change: transform;
}

.hero-app-preview {
  right: -10px;
  bottom: 0;
  border-color: rgba(214, 227, 242, .9);
  border-radius: 24px;
  box-shadow: 0 28px 56px rgba(16, 35, 63, .22);
  transform: translate3d(0, var(--hero-preview-y), 0) rotate(1.4deg);
  will-change: transform;
}

.human-hero-visual:hover .hero-app-preview {
  transform: translate3d(0, calc(var(--hero-preview-y) - 4px), 0) rotate(.5deg);
}

.care-signal {
  width: 11px;
  height: 11px;
  border: 3px solid rgba(69, 184, 173, .22);
  border-radius: 50%;
  background: var(--sp-teal);
  box-sizing: content-box;
}

.hero-care-note { display: none; }

@media (min-width: 1121px) {
  .premium-hero-visual {
    height: 650px;
    margin-right: calc((100vw - 100%) / -2);
  }

  .human-hero-frame {
    inset: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 18%, #000 34%), linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 18%, #000 34%), linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }

  .human-hero-frame img { height: 100%; }
  .human-hero-frame::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(246, 250, 255, .98) 0%, rgba(246, 250, 255, .82) 8%, rgba(246, 250, 255, .2) 25%, transparent 39%),
      linear-gradient(180deg, rgba(246, 250, 255, .08), transparent 32%, rgba(11, 63, 143, .18) 100%);
  }
  .human-hero-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 13%;
    right: 8%;
    width: 190px;
    height: 190px;
    border: 2px solid rgba(69, 184, 173, .48);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(24deg);
    pointer-events: none;
  }
  .human-hero-shade { background: linear-gradient(180deg, transparent 48%, rgba(8, 28, 53, .2) 100%); }
}

.outcome-card-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  color: var(--sp-teal);
  font-weight: 800;
  text-decoration: none;
}

.outcome-card-link:hover { color: var(--sp-white); }

/* Keep the multilingual section focused on the current product screen. */
.language-phone-main { left: 50%; right: auto; transform: translateX(-50%) rotate(4deg); }

.founder-section { padding: 12px 0 72px; scroll-margin-top: 110px; }
.founder-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; padding: clamp(24px, 4vw, 54px); border: 1px solid var(--sp-line); border-radius: 28px; background: var(--sp-white); box-shadow: 0 18px 45px rgba(16,35,63,.05); }
.founder-profile { text-align: center; }
.founder-photo-wrap { width: 184px; height: 184px; margin-inline: auto; padding: 5px; border-radius: 50%; background: var(--sp-blue); }
.founder-photo-crop { height: 100%; overflow: hidden; border: 5px solid var(--sp-white); border-radius: 50%; }
.founder-photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0%; transform: scale(1.55); transform-origin: 50% 0%; }
.founder-copy h2 { max-width: 620px; margin-bottom: 24px; }
.founder-copy h3 { margin: 32px 0 12px; color: var(--sp-blue); }
.founder-copy p { max-width: 700px; color: var(--sp-muted); font-size: 1.0625rem; line-height: 1.8; margin: 0 0 20px; }
.founder-copy p:last-child { margin-bottom: 0; }
.founder-copy blockquote { margin: 30px 0; padding: 8px 0 8px 22px; border-left: 3px solid var(--sp-teal); color: var(--sp-blue); font-size: clamp(20px, 2vw, 25px); font-weight: 600; line-height: 1.5; }
.founder-name { display: grid; gap: 4px; margin-top: 18px; color: var(--sp-blue); }
.founder-name strong { font-size: 22px; }
.founder-name span { color: var(--sp-muted); font-size: 14px; }

@media (max-width: 620px) {
  .premium-actions,
  .premium-actions.centered {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .premium-actions > *,
  .premium-actions .btn,
  .premium-actions .premium-primary,
  .premium-actions .premium-secondary,
  .premium-actions .premium-text-action {
    width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 1120px) {
  .premium-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .premium-hero-copy {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
  }

  .premium-lead,
  .hero-fit { margin-inline: auto; }
}

@media (max-width: 820px) {
  .nav,
  .premium-home .nav { top: 8px; padding-inline: 8px; }
  .nav-inner,
  .premium-home .nav-inner { min-height: 60px; border-radius: 16px; }
  .brand-logo,
  .premium-home .brand-logo { width: 48px; height: 39px; }
  .premium-hero { padding: 116px 0 72px; }
  .premium-hero-copy h1 { font-size: clamp(50px, 12vw, 68px); }
  .premium-hero-visual { min-height: 530px; }
}

@media (max-width: 620px) {
  .premium-hero { padding: 104px 0 58px; }
  .premium-hero-copy { text-align: left; }
  .premium-actions { align-items: stretch; }
  .premium-actions .btn { justify-content: center; }
  .hero-fit { margin-inline: 0; }
  .premium-hero-visual { min-height: 440px; }
  .human-hero-frame { inset: 0 0 20px; border-width: 6px; border-radius: 26px 64px 26px 26px; }
  .human-hero-frame img { height: calc(100% + 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .human-hero-frame,
  .human-hero-glow,
  .human-hero-caption { transform: none; }
  .human-hero-frame img { transform: scale(1.04); }
  .hero-app-preview,
  .human-hero-visual:hover .hero-app-preview { transform: rotate(1deg); }
}

/* Shared section rhythm and surfaces */
.premium-section { padding: 104px 0; }

.premium-section-head { max-width: 760px; margin-bottom: 48px; }

.premium-section-head h2,
.human-connection-copy h2,
.product-story-copy h2,
.patch-home-copy h2,
.page-hero h1,
.sector-landing-copy h1,
.resource-hero h1,
.article-hero h1 {
  color: var(--sp-navy);
  letter-spacing: -.045em;
}

.premium-section-head p,
.human-connection-copy > p,
.product-story-copy > p,
.patch-home-lead,
.page-hero .lead,
.sector-landing-copy .lead,
.resource-hero .lead,
.article-hero .lead {
  color: var(--sp-muted);
  line-height: 1.68;
}

.feature-outcomes {
  position: relative;
  color: var(--sp-white);
  background: var(--sp-blue);
}

.feature-outcomes::after {
  display: none;
}

.feature-outcomes .premium-section-head h2,
.feature-outcomes .premium-section-head p,
.feature-outcomes .premium-kicker { color: var(--sp-white); }

.feature-outcomes .premium-kicker span { background: var(--sp-teal); }

.outcome-grid { gap: 18px; }

.outcome-card {
  min-height: 285px;
  padding: 28px;
  border-color: var(--sp-line);
  border-radius: 20px;
  background: var(--sp-white);
  box-shadow: 0 14px 36px rgba(16, 35, 63, .055);
  transition: transform .3s var(--ease-out-quart), border-color .3s ease, box-shadow .3s ease;
}

.outcome-card:hover {
  transform: translateY(-6px);
  border-color: rgba(36, 91, 231, .38);
  box-shadow: 0 22px 46px rgba(16, 35, 63, .11);
}

.outcome-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 4px;
  height: 34px;
  border-radius: 0 99px 99px 0;
  background: var(--sp-teal);
}

.outcome-icon::before,
.outcome-icon::after,
.outcome-icon-visits::before,
.outcome-icon-visits::after { display: none !important; }

.outcome-number { color: rgba(23, 74, 150, .42); }

.premium-home .outcome-icon,
.premium-home .outcome-icon.blue,
.premium-home .outcome-icon.aqua,
.premium-home .outcome-icon.violet,
.premium-home .outcome-icon.coral {
  color: var(--sp-white);
  background: linear-gradient(145deg, #5e92f0 0%, var(--sp-action) 54%, var(--sp-blue) 100%) !important;
  box-shadow: 0 12px 28px rgba(36, 91, 231, .18);
}

.premium-home .outcome-card:nth-child(even) .outcome-icon {
  color: var(--sp-white);
  background: linear-gradient(145deg, #83dbd3 0%, var(--sp-teal) 54%, var(--sp-teal-dark) 100%) !important;
  box-shadow: 0 12px 28px rgba(69, 184, 173, .18);
}

/* Patch is presented as a real product aid, not a character-led spectacle. */
.patch-home-section {
  position: relative;
  overflow: hidden;
  color: var(--sp-white);
  background: var(--sp-blue);
}

.patch-home-section::before {
  content: "";
  position: absolute;
  left: -150px;
  top: 100px;
  width: 640px;
  height: 230px;
  border: 28px solid rgba(255, 255, 255, .075);
  border-right-color: transparent;
  border-radius: 150px;
  transform: rotate(-8deg);
}

.patch-home-shell {
  position: relative;
  z-index: 1;
  gap: clamp(50px, 7vw, 100px);
}

.patch-home-copy h2,
.patch-home-copy .patch-home-lead,
.patch-home-copy .premium-kicker { color: var(--sp-white); }

.patch-home-copy .premium-kicker span { background: var(--sp-teal); }

.patch-capabilities article {
  border-color: rgba(255, 255, 255, .15);
}

.patch-capabilities article > span { color: var(--sp-teal); }
.patch-capabilities strong { color: var(--sp-white); }
.patch-capabilities p { color: rgba(255, 255, 255, .7); }

.patch-help-card {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .075);
}

.patch-help-card:hover { background: rgba(255, 255, 255, .12); }
.patch-help-card strong { color: var(--sp-white); }
.patch-help-card p { color: rgba(255, 255, 255, .7); }
.patch-help-card-primary { border-color: rgba(69, 184, 173, .5); }

.patch-stage {
  min-height: 580px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 72% 22%, rgba(69, 184, 173, .2), transparent 28%),
    rgba(255, 255, 255, .075);
  box-shadow: 0 28px 72px rgba(5, 24, 57, .28);
}

.patch-mascot,
.patch-orbit,
.patch-signal { display: none; }

.patch-stage-grid {
  display: none;
}

.patch-product-grid { display: none; }

.patch-conversation {
  width: auto;
  left: 32px;
  right: 32px;
  top: 32px;
  transform: none;
  border: 1px solid rgba(214, 227, 242, .9);
  border-radius: 22px;
  background: var(--sp-white);
  box-shadow: 0 24px 54px rgba(5, 24, 57, .26);
}

.patch-conversation-head span {
  color: var(--sp-teal-dark);
  background: var(--sp-care-tint);
}

.patch-question { color: var(--sp-white); }
.patch-demo-answer { color: var(--sp-muted); }

.patch-prompt-list button {
  border-color: var(--sp-line);
  color: var(--sp-blue);
  background: var(--sp-white);
}

.patch-prompt-list button:hover,
.patch-prompt-list button.active {
  color: var(--sp-white);
  border-color: var(--sp-action);
  background: var(--sp-action);
}

.patch-human-led {
  left: 32px;
  right: 32px;
  bottom: 24px;
  max-width: none;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 30, 67, .48);
  box-shadow: none;
}

.patch-human-led strong { color: var(--sp-white); }
.patch-human-led p { color: rgba(255, 255, 255, .72); }

/* Real care moments */
.human-connection-section {
  position: relative;
  overflow: hidden;
  background: var(--sp-ice-2);
}

.connection-main-photo {
  border-radius: 28px 88px 28px 28px;
  box-shadow: 0 24px 54px rgba(16, 35, 63, .15);
}

.connection-detail-photo {
  border: 7px solid var(--sp-white);
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(16, 35, 63, .16);
}

.connection-detail-photo span { background: var(--sp-blue); }

.connection-principles article { border-color: var(--sp-line); }
.connection-principles article > span { color: var(--sp-teal-dark); background: var(--sp-care-tint); }

.product-story { background: var(--sp-white); }

.story-list > div > span {
  color: var(--sp-teal-dark);
  background: var(--sp-care-tint);
}

.product-canvas {
  border-color: var(--sp-line);
  border-radius: 30px;
  background: linear-gradient(145deg, var(--sp-ice) 0%, #f9fbff 64%, var(--sp-care-tint) 140%);
}

.canvas-orbit { border-color: rgba(23, 74, 150, .1); }
.canvas-label span { background: var(--sp-teal); }

.ui-phone {
  border-color: rgba(16, 35, 63, .78);
  box-shadow: 0 24px 54px rgba(16, 35, 63, .2);
}

.sectors-premium { background: var(--sp-ice-2); }

.sector-premium-card {
  border-color: var(--sp-line);
  border-radius: 24px;
  background: var(--sp-white);
  box-shadow: 0 16px 38px rgba(16, 35, 63, .065);
}

.sector-premium-card:hover {
  border-color: rgba(36, 91, 231, .3);
  box-shadow: 0 22px 48px rgba(16, 35, 63, .12);
}

.sector-photo { border-radius: 18px 18px 0 0; }
.sector-chip { color: var(--sp-teal-dark); background: var(--sp-care-tint); }

.security-premium { background: var(--sp-white); }
.security-premium-shell,
.security-panel { border-color: var(--sp-line); border-radius: 26px; background: var(--sp-blue); }
.security-premium-list > div > span { color: var(--sp-blue); background: var(--sp-ice); }

.setup-premium { background: var(--sp-ice); }

.setup-steps article {
  border-color: var(--sp-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
}

.setup-steps article > span { color: var(--sp-white); background: var(--sp-blue); }

.premium-final-section { background: var(--sp-white); }

.premium-final-cta,
.callout {
  overflow: hidden;
  border-radius: 28px;
  background: var(--sp-blue);
  box-shadow: 0 28px 64px rgba(16, 35, 63, .18);
}

.premium-final-cta::before,
.callout::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 180px;
  right: -150px;
  top: -35px;
  border: 24px solid rgba(255, 255, 255, .075);
  border-left-color: transparent;
  border-radius: 120px;
  transform: rotate(8deg);
  pointer-events: none;
}

.premium-final-cta > img { display: none; }
.final-route { opacity: .65; }
.premium-final-cta .premium-light,
.callout .premium-light {
  color: var(--sp-blue);
  border-color: var(--sp-white);
  background: var(--sp-white);
  box-shadow: 0 10px 26px rgba(5, 24, 57, .16);
}

.premium-final-cta .premium-light:hover,
.callout .premium-light:hover {
  color: var(--sp-blue);
  background: var(--sp-ice);
}

/* General pages */
.page-hero,
.sector-landing-hero,
.resource-hero,
.article-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--sp-ice-2), var(--sp-ice));
}

.page-hero::after,
.sector-landing-hero::after,
.resource-hero::after,
.article-hero::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -100px;
  width: 540px;
  height: 210px;
  border: 26px solid rgba(23, 74, 150, .065);
  border-left-color: transparent;
  border-radius: 140px;
  transform: rotate(-6deg);
  pointer-events: none;
}

.page-hero .container,
.sector-landing-hero .container,
.resource-hero .container,
.article-hero .container { position: relative; z-index: 1; }

.page-hero { padding-top: 154px; padding-bottom: 82px; }
.page-hero h1 { max-width: 18ch; font-size: clamp(48px, 6vw, 76px); line-height: 1.02; }
.page-hero .lead { max-width: 68ch; }

.crumbs { color: var(--sp-muted); }
.crumbs a:hover { color: var(--sp-blue); }

.card,
.big-card,
.plan,
.plan-process-step,
.resource-card,
.official-resource-card,
.policy-card,
.article-main,
.source-panel {
  border-color: var(--sp-line);
  border-radius: 18px;
  background: var(--sp-white);
  box-shadow: 0 12px 34px rgba(16, 35, 63, .05);
}

.card:hover,
.resource-card:hover,
.official-resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 91, 231, .32);
  box-shadow: 0 20px 42px rgba(16, 35, 63, .1);
}

.card.sage,
.card.gold,
.card.coral,
.card.rose,
.card.violet { background: var(--sp-white); }

.card .icon,
.card.sage .icon,
.card.gold .icon,
.card.coral .icon,
.card.rose .icon,
.card.violet .icon {
  color: var(--sp-blue);
  background: var(--sp-ice);
}

.card:nth-child(even) .icon {
  color: var(--sp-teal-dark);
  background: var(--sp-care-tint);
}

.tick::before,
.feature-list .tick::before { color: var(--sp-teal-dark); background: var(--sp-care-tint); }

.plan.featured,
.plan-clear.featured { border-color: var(--sp-action); box-shadow: 0 24px 52px rgba(36, 91, 231, .13); }
.plan-recommended { color: var(--sp-white); background: var(--sp-action); }
.badge,
.plan-badge-violet { color: var(--sp-blue); background: var(--sp-ice); }
.plan-included-strip { border-color: var(--sp-line); background: var(--sp-ice-2); }
.plan-included-chips span { color: var(--sp-navy-2); border-color: var(--sp-line); background: var(--sp-white); }

.pricing-basis { border-color: var(--sp-line); background: var(--sp-ice); }
.pricing-basis-grid article > span,
.plan-process-step > span { color: var(--sp-teal-dark); background: var(--sp-care-tint); }

.sector-value-grid article,
.sector-feature,
.sector-media-card,
.sector-product-panel,
.resource-featured > a,
.publisher-card,
.comparison-provider,
.method-grid article {
  border-color: var(--sp-line);
  border-radius: 18px;
}

.sector-feature-no,
.resource-feature-label,
.publisher-label { color: var(--sp-teal-dark); background: var(--sp-care-tint); }

.sector-product-visual,
.language-visual,
.assist-visual {
  border-color: var(--sp-line);
  background: linear-gradient(145deg, var(--sp-ice), var(--sp-white));
}

.assist-feature { background: var(--sp-ice-2); }
.patch-product-mascot { display: none; }
.patch-product-screen { margin-inline: auto; }
.assist-orbit { border-color: rgba(23, 74, 150, .1); }

.resource-quick-links a,
.article-stat-row span,
.official-resource-grid a { border-color: var(--sp-line); }
.resource-quick-links a:hover { color: var(--sp-blue); border-color: var(--sp-action); }

.article-main a,
.article-side a,
.text-link { color: var(--sp-blue); }

.form .input,
.form .textarea,
.form select,
.input,
.textarea,
select {
  border-color: var(--sp-line);
  border-radius: 12px;
  background: var(--sp-white);
}

.input:focus,
.textarea:focus,
select:focus {
  border-color: var(--sp-action);
  box-shadow: 0 0 0 4px rgba(36, 91, 231, .1);
}

.contact-meta > a {
  border-color: var(--sp-line);
  border-radius: 14px;
}

.contact-meta > a:hover { border-color: rgba(36, 91, 231, .35); background: var(--sp-ice-2); }
.contact-patch-note { border-color: var(--sp-line); background: var(--sp-ice-2); }

/* Footer */
.site-footer,
.premium-footer {
  color: rgba(255, 255, 255, .8);
  background: var(--sp-navy);
}

.site-footer .brand-logo,
.premium-footer .brand-logo { display: none; }

.site-footer .brand-name,
.premium-footer .brand-name { color: var(--sp-white); }

.site-footer .footer-grid > div h4,
.site-footer .footer-resources h4 { color: rgba(255, 255, 255, .56); }

.site-footer .footer-grid > div a,
.site-footer .footer-bottom a,
.site-footer .company-line { color: rgba(255, 255, 255, .7); }

.site-footer .footer-grid > div a:hover,
.site-footer .footer-bottom a:hover,
.site-footer .footer-email { color: var(--sp-white); }

.site-footer .footer-brand p { color: rgba(255, 255, 255, .64); }
.site-footer .footer-brand .brand-logo { display: block; width: 42px; height: 42px; }

.site-footer .footer-resources,
.site-footer .footer-bottom { border-color: rgba(255, 255, 255, .12); }

.site-footer .footer-resources-links a {
  color: rgba(255, 255, 255, .7);
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .045);
}

.site-footer .footer-resources-links a:hover {
  color: var(--sp-white);
  border-color: rgba(69, 184, 173, .65);
}

.site-footer .socials a {
  color: var(--sp-white);
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 1120px) {
  .patch-home-shell { grid-template-columns: 1fr; }
  .patch-stage { min-height: 530px; }
}

@media (max-width: 820px) {
  .premium-section { padding: 78px 0; }
  .page-hero { padding-top: 128px; padding-bottom: 66px; }
  .page-hero h1 { font-size: clamp(44px, 10vw, 64px); }
  .feature-outcomes::after { display: none; }
  .patch-stage { min-height: 500px; }
  .patch-human-led { left: 18px; bottom: 18px; }
}

@media (max-width: 620px) {
  .premium-section { padding: 66px 0; }
  .premium-section-head { margin-bottom: 34px; }
  .outcome-card { min-height: auto; }
  .patch-stage { min-height: 560px; }
  .patch-conversation {
    width: calc(100% - 28px);
    left: 14px;
    right: 14px;
    top: 18px;
    transform: none;
  }
  .patch-human-led { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .page-hero { padding-top: 116px; padding-bottom: 58px; }
  .page-hero h1 { max-width: none; }
  .premium-final-cta,
  .callout { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .outcome-card,
  .card,
  .resource-card,
  .official-resource-card,
  .btn { transition: none; }
}

/* Founder story and contact: keep the brand calm and the reading personal. */
.about-page .sheet,
.contact-page .sheet { background: var(--sp-white); }
.about-page .page-hero,
.contact-page .page-hero { padding-top: 88px; background: linear-gradient(180deg, var(--sp-ice-2), var(--sp-white)); }
.about-hero { padding-bottom: 54px; }
.about-hero h1 { max-width: 24ch; }
.about-hero h1 span { color: var(--sp-blue); }
.about-hero .lead { max-width: 680px; }
.story-jump,
.story-link { display: inline-flex; align-items: center; gap: 12px; color: var(--sp-blue); font-size: 15px; font-weight: 600; }
.story-jump { padding-block: 12px; margin-top: 10px; }
.story-link { margin-top: 20px; }
.story-jump:hover,
.story-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.story-principles { padding: 72px 0; background: var(--sp-ice-2); }
.story-principles .card { padding: 28px; background: var(--sp-white); box-shadow: none; }
.story-principles .card p { font-size: 16px; line-height: 1.7; }
.story-contact { padding: 72px 0 96px; }
.story-callout { position: relative; }
.story-callout > * { position: relative; z-index: 1; min-width: 0; }
.story-callout .actions { flex-wrap: wrap; }
.story-callout .btn { min-width: 0; }
.contact-page .page-hero { text-align: center; padding-bottom: 44px; }
.contact-page .page-hero .crumbs { justify-content: center; }
.contact-page .page-hero h1 { max-width: 20ch; margin-inline: auto; }
.contact-page .page-hero .lead { max-width: 680px; margin-inline: auto; }
.contact-section { padding: 16px 0 96px; }
.contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 24px; }
.contact-grid > *,
.contact-grid .big-card,
.contact-grid .field,
.contact-grid .form { min-width: 0; }
.contact-grid .big-card { background: var(--sp-white); padding: 30px; }
.contact-grid .big-card:hover { transform: none; box-shadow: none; }
.contact-form-card { box-shadow: 0 16px 40px rgba(16,35,63,.05); }
.contact-form-card > h2,
.contact-form-card > .muted { text-align: center; }
.contact-grid .input,
.contact-grid select,
.contact-grid .textarea { min-width: 0; max-width: 100%; font-size: 16px; border-color: var(--sp-line); }
.contact-grid select { text-overflow: ellipsis; padding-right: 24px; }
.contact-grid .field label,
.contact-grid .field-label { font-size: 14px; font-weight: 600; color: var(--sp-navy); }
.contact-grid .form { gap: 20px; }
.contact-grid .form-help { display: block; color: var(--sp-muted); font-size: 14px; line-height: 1.6; }
.contact-grid .form-help a { color: var(--sp-blue); overflow-wrap: anywhere; }
.contact-form-note { text-align: center; margin: 18px 0 0; }
.contact-grid .security-field { justify-items: start; gap: 10px; padding-top: 4px; text-align: left; }
.contact-grid #enquiry-security { width: 100%; min-width: 0; line-height: 0; }
.contact-page [hidden] { display: none !important; }
.contact-grid #security-status { text-align: left; margin: 0; }
.contact-grid #enquiry-preview { margin: 0; padding: 12px; border: 1px solid var(--sp-line); border-radius: 10px; background: var(--sp-ice); }
.contact-grid #security-retry { min-height: 44px; font-size: 14px; white-space: normal; }
.contact-grid #enquiry-submit { width: 100%; min-height: 52px; justify-content: center; }
.contact-grid #enquiry-status { font-size: 15px !important; text-align: center; overflow-wrap: anywhere; }
.contact-aside { display: grid; gap: 24px; }
.contact-grid .contact-meta .val { overflow-wrap: anywhere; }
.contact-grid .contact-patch-note p { font-size: 14px; line-height: 1.65; }
.contact-grid .contact-patch-note strong,
.contact-grid .contact-patch-note a { font-size: 14px; }
.contact-grid .contact-patch-note { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; }
.contact-grid .contact-patch-note img { width: 36px; height: 36px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); max-width: 650px; }
  .founder-card { grid-template-columns: 168px minmax(0, 1fr); gap: 32px; }
  .founder-photo-wrap { width: 160px; height: 160px; }
}

@media (max-width: 620px) {
  .about-page .container,
  .contact-page .container { width: calc(100% - 32px); }
  .about-page .page-hero,
  .contact-page .page-hero { padding-top: 56px; padding-bottom: 32px; }
  .about-page .page-hero h1,
  .contact-page .page-hero h1 { font-size: clamp(32px, 8.5vw, 46px); line-height: 1.13; }
  .about-page .page-hero .lead,
  .contact-page .page-hero .lead { font-size: 17px; line-height: 1.7; }
  .founder-section { padding: 8px 0 48px; scroll-margin-top: 100px; }
  .founder-card { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 28px 22px; border-radius: 24px; }
  .founder-photo-wrap { width: 164px; height: 164px; }
  .founder-copy h2 { font-size: clamp(27px, 7vw, 34px); }
  .founder-copy h3 { font-size: 21px; line-height: 1.4; }
  .founder-copy p { font-size: 16px; line-height: 1.8; }
  .founder-copy blockquote { font-size: 20px; padding-left: 16px; }
  .story-principles { padding: 48px 0; }
  .story-principles .card { padding: 24px; }
  .story-contact { padding: 48px 0 64px; }
  .story-callout { padding: 30px 22px; text-align: center; gap: 28px; }
  .story-callout .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .story-callout .btn { width: 100%; justify-content: center; padding: 14px 10px; }
  .story-callout .tick { text-align: left; }
  .contact-section { padding: 8px 0 64px; }
  .contact-grid { gap: 20px; }
  .contact-grid .big-card { padding: 26px 20px; border-radius: 22px; }
  .contact-grid h2 { font-size: 27px; text-align: center; }
  .contact-aside { gap: 20px; }
  .contact-grid .contact-meta > a { flex-direction: column; text-align: center; gap: 10px; padding: 20px 12px; }
  .contact-grid .contact-meta .meta-arrow { display: none; }
  .contact-grid .contact-meta .label { font-size: 12px; }
  .contact-grid .contact-meta .val { margin-top: 4px; }
  .contact-grid .contact-patch-note { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .contact-grid .contact-patch-note img { margin-inline: auto; }
}