/* ==========================================================================
   Purple Frameworks — purpleframeworks.com
   Responsive stylesheet. Fluid type/spacing first, breakpoints only where the
   layout genuinely has to change shape.
   ========================================================================== */

:root {
  --ink: #0E0A16;
  --text: #F3EFFA;
  --purple: #7C4DFF;
  --purple-deep: #4A22B0;
  --lilac: #B79BFF;
  --lilac-light: #D6C6FF;
  --lime: #B6F03C;
  --lime-deep: #7DAE1E;
  --coral: #FF6B57;

  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .08);
  --surface: rgba(255, 255, 255, .04);

  /* Horizontal page gutter — shrinks on phones, 36px on desktop (design value) */
  --gutter: clamp(18px, 4vw, 36px);
  --container: 1180px;
  --header-h: 78px; /* tallest the sticky header gets (desktop) */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(90% 60% at 82% -5%, rgba(124, 77, 255, .28), transparent 55%),
    radial-gradient(70% 50% at 5% 8%, rgba(255, 107, 87, .1), transparent 50%),
    var(--ink);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--text);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Safety net: decorative shapes must never create a horizontal scrollbar. */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

a { color: var(--lilac); text-decoration: none; }
a:hover { color: var(--lilac-light); }

:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
  border-radius: 6px;
}

.disp { font-family: 'Poppins', system-ui, sans-serif; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--purple);
  color: var(--ink);
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--ink); }

.page { position: relative; overflow: clip; }

/* Shared layout ----------------------------------------------------------- */

.section {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  scroll-margin-top: calc(var(--header-h) + 8px);
}

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.section-title {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 700;
  max-width: 18ch;
  text-wrap: balance;
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px clamp(22px, 2.6vw, 30px);
  border-radius: 999px;
  font-size: clamp(15px, 1.2vw, 15.5px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: filter .18s ease, border-color .18s ease, background .18s ease;
}

.btn-primary {
  background: linear-gradient(140deg, var(--lilac), var(--purple));
  color: var(--ink);
}
.btn-primary:hover { filter: brightness(1.1); color: var(--ink); }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--text);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--lilac); color: var(--text); }

.btn-sm {
  min-height: 42px;
  padding: 11px clamp(16px, 2vw, 22px);
  font-size: clamp(13.5px, 1.1vw, 14px);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(14, 10, 22, .72);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(11px, 1.4vw, 16px) var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px; /* comfortable tap target */
  color: var(--text);
}
.brand:hover { color: var(--text); }

.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--lilac), var(--purple));
  box-shadow: 0 6px 16px rgba(124, 77, 255, .5);
}

.brand-name {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-inner .btn { margin-left: auto; flex: none; }

/* Hero -------------------------------------------------------------------- */

/* Same structure as the approved design: the copy is a full-width block and the
   artwork is positioned over it, so the tag row never gets squeezed into a
   second line by a narrow grid column. */
.hero {
  position: relative;
  min-height: 520px;
  padding-block: clamp(36px, 5vw, 70px) clamp(40px, 5vw, 60px);
}

.hero-copy { min-width: 0; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--surface);
  font-size: clamp(12.5px, 1.1vw, 13.5px);
  color: rgba(243, 239, 250, .78);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.hero-title {
  font-size: clamp(46px, 8.6vw, 110px);
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: 700;
  max-width: 12ch;
}

.grad {
  background: linear-gradient(120deg, var(--lilac-light), var(--purple) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: clamp(16.5px, 1.7vw, 21px);
  line-height: 1.5;
  color: rgba(243, 239, 250, .7);
  max-width: 44ch;
  text-wrap: pretty;
}

.hero-actions {
  margin-top: clamp(26px, 3.2vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.tag-row {
  margin-top: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(12.5px, 1.1vw, 13.5px);
  color: rgba(243, 239, 250, .72);
}

/* Hero artwork — one 470px box pinned to the right edge of the section, exactly
   where the approved design puts it. Shapes are sized/positioned in % of this
   box, so the composition holds together as the box shrinks on narrow desktops. */
.hero-art {
  position: absolute;
  top: 100px;
  right: 0;
  width: 470px;
  max-width: 44%;
  aspect-ratio: 1 / 1;
}

.shape { position: absolute; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }

.shape-portrait {
  width: 49%;
  top: 4%;
  right: 23%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--lilac), var(--purple-deep));
  border: 3px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px rgba(124, 77, 255, .45);
}
.shape-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.shape-lime {
  width: 15%;
  top: 11%;
  right: 4%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 38% 32%, #EAFFB0, var(--lime) 46%, var(--lime-deep) 78%, #4F7A12);
  box-shadow: inset -8px -10px 20px rgba(40, 60, 4, .5), 0 24px 38px rgba(0, 0, 0, .42);
  --r: 0deg;
}

.shape-coral {
  width: 20%;
  top: 51%;
  right: 49%;
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 34%),
    linear-gradient(150deg, #FFB3A4, var(--coral) 58%, #DB3F2A);
  box-shadow:
    inset -9px -11px 22px rgba(20, 8, 50, .5),
    inset 7px 8px 16px rgba(255, 255, 255, .35),
    0 26px 42px rgba(0, 0, 0, .45);
  --r: 18deg;
}

.shape-blue {
  width: 12.5%;
  top: 60%;
  right: 32%;
  aspect-ratio: 1 / 1;
  border-radius: 31%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 36%),
    linear-gradient(150deg, #B7EEFF, #4DC3FF 58%, #1E86C7);
  box-shadow:
    inset -9px -11px 22px rgba(20, 8, 50, .5),
    inset 7px 8px 16px rgba(255, 255, 255, .35),
    0 26px 42px rgba(0, 0, 0, .45);
  --r: -14deg;
}

/* Floating animations */
@keyframes pf-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-4.5%) rotate(var(--r, 0deg)); }
}
@keyframes pf-float2 {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(3.8%) rotate(var(--r, 0deg)); }
}
.float-a { animation: pf-float 8s ease-in-out infinite; }
.float-b { animation: pf-float2 7s ease-in-out infinite; }
.shape-blue.float-a { animation-duration: 9s; }
.shape-lime.float-b { animation-duration: 8s; }

/* Proof / stats ----------------------------------------------------------- */

.proof { padding-block: clamp(10px, 2vw, 20px) clamp(48px, 6vw, 80px); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

.stat {
  border-radius: 22px;
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
}

.stat-purple {
  background: linear-gradient(160deg, var(--purple), var(--purple-deep));
  border-color: transparent;
  color: var(--text);
}
.stat-purple .stat-copy { color: rgba(243, 239, 250, .8); }

.stat-lime {
  background: linear-gradient(160deg, var(--lime), var(--lime-deep));
  border-color: transparent;
  color: #141007;
}
.stat-lime .stat-copy { color: rgba(20, 16, 7, .72); }

.stat-num {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.stat-label {
  margin-top: 12px;
  font-size: clamp(13px, 1.15vw, 14px);
  font-weight: 600;
}

.stat-copy {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(243, 239, 250, .6);
  text-wrap: pretty;
}

/* Services ---------------------------------------------------------------- */

.solve { padding-block: clamp(10px, 2vw, 20px) clamp(28px, 3.4vw, 40px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3.4vw, 40px);
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}

.section-lede {
  font-size: clamp(15.5px, 1.4vw, 16.5px);
  line-height: 1.6;
  color: rgba(243, 239, 250, .66);
  max-width: 38ch;
  text-wrap: pretty;
}

.svc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.svc {
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 80px) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 30px) clamp(16px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
  border-radius: 16px;
  transition: background .18s, color .18s;
}

.svc-num {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: rgba(243, 239, 250, .35);
}

.svc-title {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.svc-sub {
  font-size: clamp(14.5px, 1.3vw, 15px);
  line-height: 1.55;
  color: rgba(243, 239, 250, .62);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover { background: var(--purple); color: var(--ink); }
  .svc:hover .svc-sub { color: var(--ink); }
  .svc:hover .svc-num { color: rgba(14, 10, 22, .55); }
}

/* Testimonials ------------------------------------------------------------ */

.testimonials { padding-block: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 30px); }

.testi-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.2vw, 36px);
}

.testi-heading {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  min-width: 0;
}

.testi-badge {
  flex: none;
  width: clamp(74px, 8vw, 104px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .4));
}

.testi-nav { display: flex; gap: 12px; }

.carousel-btn {
  width: clamp(46px, 4.6vw, 52px);
  height: clamp(46px, 4.6vw, 52px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, background .18s ease;
}
.carousel-btn:hover { border-color: var(--lilac); background: rgba(124, 77, 255, .18); }

.testi-track {
  display: flex;
  gap: clamp(14px, 1.8vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.testi-track::-webkit-scrollbar { display: none; }

.tcard {
  scroll-snap-align: start;
  flex: 0 0 min(85vw, 380px);
  max-width: min(85vw, 380px);
  border-radius: 22px;
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .18s ease;
}
.tcard:hover { border-color: rgba(183, 155, 255, .4); }

.tcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stars { color: var(--lime); font-size: 16px; letter-spacing: 2px; }

.tcard-logo {
  height: 20px;
  width: auto;
  border-radius: 4px;
  display: block;
}

.tcard-quote {
  font-size: clamp(15.5px, 1.4vw, 16.5px);
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
  flex: 1;
}

.tcard-role {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: rgba(243, 239, 250, .6);
}

/* Tools marquee ----------------------------------------------------------- */

.tools {
  position: relative;
  padding-block: clamp(48px, 6vw, 70px);
}

.tools-head {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto clamp(24px, 3vw, 34px);
  padding-inline: var(--gutter);
  text-align: center;
}
.tools-head .eyebrow { margin-bottom: 14px; }

.tools-title {
  font-size: clamp(27px, 3.6vw, 40px);
  letter-spacing: -.03em;
  font-weight: 700;
}

.marquee { overflow: hidden; }

@keyframes pf-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-inner {
  display: flex;
  width: max-content;
  animation: pf-marquee 40s linear infinite;
}

.pill-row {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  padding-right: clamp(10px, 1.2vw, 16px);
}

.pill {
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 26px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(15px, 1.9vw, 22px);
  font-weight: 500;
  white-space: nowrap;
  color: rgba(243, 239, 250, .85);
}
.pill-purple { background: var(--purple); border-color: transparent; color: var(--ink); }
.pill-lime { background: var(--lime); border-color: transparent; color: #141007; }
.pill-coral { background: var(--coral); border-color: transparent; color: var(--ink); }

.shape-tools-a {
  width: clamp(38px, 5vw, 64px);
  aspect-ratio: 1 / 1;
  border-radius: 31%;
  left: 6%;
  top: 0;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 36%),
    linear-gradient(150deg, #CDB8FF, var(--purple) 58%, var(--purple-deep));
  box-shadow:
    inset -9px -11px 22px rgba(20, 8, 50, .5),
    inset 7px 8px 16px rgba(255, 255, 255, .35),
    0 26px 42px rgba(0, 0, 0, .45);
  --r: 20deg;
}

.shape-tools-b {
  width: clamp(32px, 4vw, 52px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  right: 8%;
  bottom: 6px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 38% 32%, #FFC3B7, var(--coral) 48%, #DB3F2A 80%);
  box-shadow: inset -7px -9px 18px rgba(90, 20, 10, .5), 0 22px 34px rgba(0, 0, 0, .42);
  --r: 0deg;
}

/* Contact ----------------------------------------------------------------- */

.contact { padding-block: clamp(40px, 5vw, 60px) clamp(56px, 7vw, 90px); }

.contact-card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 32px);
  padding: clamp(38px, 6vw, 76px) clamp(24px, 5vw, 60px);
  background:
    radial-gradient(80% 130% at 15% 0%, rgba(124, 77, 255, .55), transparent 60%),
    linear-gradient(160deg, #2A1A52, #150E28);
  border: 1px solid rgba(183, 155, 255, .25);
}

.contact-card .eyebrow { margin-bottom: clamp(14px, 2vw, 20px); }

.contact-title {
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 700;
  max-width: 16ch;
}

.contact-sub {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(243, 239, 250, .72);
  max-width: 42ch;
  text-wrap: pretty;
}

.contact-actions {
  margin-top: clamp(26px, 3.2vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.contact-actions .btn { padding-block: 17px; font-size: clamp(15px, 1.3vw, 16px); }

.shape-contact-a {
  width: clamp(64px, 9vw, 120px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  right: 6%;
  top: -20px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 38% 32%, #E4D8FF, #9F7BF5 46%, #6B3FD6 76%, #3F1E9E);
  box-shadow: inset -12px -14px 28px rgba(30, 10, 80, .55), 0 30px 46px rgba(0, 0, 0, .45);
  --r: 0deg;
}

.shape-contact-b {
  width: clamp(44px, 6vw, 70px);
  aspect-ratio: 1 / 1;
  border-radius: 31%;
  right: 22%;
  bottom: 20px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 36%),
    linear-gradient(150deg, #EAFFB0, var(--lime) 58%, var(--lime-deep));
  box-shadow:
    inset -9px -11px 22px rgba(40, 60, 4, .5),
    inset 7px 8px 16px rgba(255, 255, 255, .4),
    0 26px 42px rgba(0, 0, 0, .45);
  --r: 16deg;
}

/* Footer ------------------------------------------------------------------ */

.site-footer { border-top: 1px solid var(--line-soft); }

.footer-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(22px, 2.6vw, 28px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 18px);
  align-items: center;
  font-size: 13.5px;
  color: rgba(243, 239, 250, .5);
}

.footer-brand { font-weight: 700; color: rgba(243, 239, 250, .78); font-size: 15px; }
.footer-mail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* comfortable tap target */
}

/* Tilt (JS adds transforms; pointer-capable devices only) ------------------ */

.tilt {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
  transform-style: preserve-3d;
}

/* ==========================================================================
   Breakpoints — only where the layout has to change shape
   ========================================================================== */

/* Laptop / small desktop: stats drop to 3 across before they get cramped */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablets and phones: the hero artwork (portrait + floating primitives) comes
   out entirely. 1024 is the cut because below it the coral cube starts landing
   on the tag row, and the artwork would have to stack under the copy — pushing
   the call to action off the first screen. */
@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero-art { display: none; }
  .hero-title { max-width: none; }
}

@media (max-width: 900px) {
  /* 11.5px uppercase mono is hard to read on a handheld screen */
  .eyebrow { font-size: 12px; }
}

/* Services stack: number above the title, copy full width */
@media (max-width: 820px) {
  .svc {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
  .svc-num { font-size: 20px; }
  .svc-title { margin-top: 2px; }
  .svc-sub { margin-top: 4px; }
}

@media (max-width: 760px) {
  .section-head { align-items: flex-start; }
  .testi-head { align-items: flex-start; }
  .testi-nav { margin-left: auto; }

  /* Full-bleed carousel so cards can peek past the gutter on phones */
  .testi-track {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* Phones: stats to 2 across, decorative shapes out of the contact card */
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-copy { font-size: 12px; }
  .tcard { flex-basis: min(88vw, 340px); max-width: min(88vw, 340px); }
  .shape-contact-a, .shape-contact-b { display: none; }
  .shape-tools-a, .shape-tools-b { display: none; }
  .footer-mail { margin-left: 0; }
  .footer-inner { gap: 6px 14px; }
}

/* Very small phones: full-width CTAs, and single-column stats below 340px
   where a two-up "30–50%" would start to crowd its card. */
@media (max-width: 400px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .brand-name { font-size: 14.5px; }
}

/* Five cards over two columns: let the last one fill the orphan row. Scoped to
   the two-column range — `span 2` in a one-column grid invents a second track. */
@media (min-width: 340px) and (max-width: 620px) {
  .stat-grid .stat:last-child { grid-column: span 2; }
}

@media (max-width: 339px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Short viewports (landscape phones, split view): tighten the vertical rhythm.
   The artwork is already gone below 1024px, so nothing can collide here. */
@media (max-height: 560px) and (max-width: 1024px) {
  .hero { padding-block: 24px 28px; }
}

/* Large screens: let the composition breathe a little */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* Accessibility ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-a, .float-b, .marquee-inner { animation: none !important; }
  .testi-track { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

@media print {
  .site-header, .testi-nav, .marquee { display: none; }
  body { background: #fff; color: #111; }
}