/* Salesolve Ltd — site styles (extracted from the original Tailwind v4 build, trimmed to what the page uses) */

@layer theme, base, utilities;

@layer theme {
  :root {
    --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --default-font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;   --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;  --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;   --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;  --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;  --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem; --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base {
  *, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family); -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
  button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0; }
  button { cursor: pointer; -webkit-appearance: button; appearance: button; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
  * { border-color: hsl(var(--rule)); outline-color: hsl(var(--teal) / .5); }
  body { background-color: hsl(var(--ivory)); color: hsl(var(--ink-navy)); font-feature-settings: "ss01", "cv01"; }
  ::selection { background-color: hsl(var(--teal) / .22); color: hsl(var(--ink-navy)); }
}

@layer utilities {
  .pointer-events-none { pointer-events: none; }
  .absolute { position: absolute; }
  .relative { position: relative; }
  .sticky { position: sticky; }
  .top-0 { top: 0; }
  .right-4 { right: calc(var(--spacing) * 4); }
  .bottom-3 { bottom: calc(var(--spacing) * 3); }
  .left-4 { left: calc(var(--spacing) * 4); }
  .z-50 { z-index: 50; }
  .mx-auto { margin-inline: auto; }
  .mt-1 { margin-top: var(--spacing); }
  .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
  .mt-2 { margin-top: calc(var(--spacing) * 2); }
  .mt-3 { margin-top: calc(var(--spacing) * 3); }
  .mt-4 { margin-top: calc(var(--spacing) * 4); }
  .mt-5 { margin-top: calc(var(--spacing) * 5); }
  .mt-6 { margin-top: calc(var(--spacing) * 6); }
  .mt-9 { margin-top: calc(var(--spacing) * 9); }
  .mt-10 { margin-top: calc(var(--spacing) * 10); }
  .mt-12 { margin-top: calc(var(--spacing) * 12); }
  .mt-14 { margin-top: calc(var(--spacing) * 14); }
  .block { display: block; }
  .flex { display: flex; }
  .grid { display: grid; }
  .hidden { display: none; }
  .inline-flex { display: inline-flex; }
  .aspect-square { aspect-ratio: 1 / 1; }
  .h-1\.5 { height: calc(var(--spacing) * 1.5); }
  .h-2 { height: calc(var(--spacing) * 2); }
  .h-3\.5 { height: calc(var(--spacing) * 3.5); }
  .h-4 { height: calc(var(--spacing) * 4); }
  .h-6 { height: calc(var(--spacing) * 6); }
  .h-7 { height: calc(var(--spacing) * 7); }
  .h-8 { height: calc(var(--spacing) * 8); }
  .h-11 { height: calc(var(--spacing) * 11); }
  .h-14 { height: calc(var(--spacing) * 14); }
  .h-full { height: 100%; }
  .h-px { height: 1px; }
  .min-h-screen { min-height: 100vh; }
  .w-1\.5 { width: calc(var(--spacing) * 1.5); }
  .w-2 { width: calc(var(--spacing) * 2); }
  .w-3\.5 { width: calc(var(--spacing) * 3.5); }
  .w-4 { width: calc(var(--spacing) * 4); }
  .w-6 { width: calc(var(--spacing) * 6); }
  .w-7 { width: calc(var(--spacing) * 7); }
  .w-8 { width: calc(var(--spacing) * 8); }
  .w-11 { width: calc(var(--spacing) * 11); }
  .w-14 { width: calc(var(--spacing) * 14); }
  .w-full { width: 100%; }
  .max-w-2xl { max-width: var(--container-2xl); }
  .max-w-6xl { max-width: var(--container-6xl); }
  .max-w-\[440px\] { max-width: 440px; }
  .max-w-md { max-width: var(--container-md); }
  .max-w-sm { max-width: var(--container-sm); }
  .max-w-xl { max-width: var(--container-xl); }
  .shrink-0 { flex-shrink: 0; }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .gap-2 { gap: calc(var(--spacing) * 2); }
  .gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
  .gap-3 { gap: calc(var(--spacing) * 3); }
  .gap-4 { gap: calc(var(--spacing) * 4); }
  .gap-6 { gap: calc(var(--spacing) * 6); }
  .gap-8 { gap: calc(var(--spacing) * 8); }
  .gap-10 { gap: calc(var(--spacing) * 10); }
  .gap-12 { gap: calc(var(--spacing) * 12); }
  .gap-px { gap: 1px; }
  .gap-x-8 { column-gap: calc(var(--spacing) * 8); }
  .gap-y-3 { row-gap: calc(var(--spacing) * 3); }
  .overflow-hidden { overflow: hidden; }
  .rounded-\[2px\] { border-radius: 2px; }
  .rounded-\[3px\] { border-radius: 3px; }
  .rounded-full { border-radius: 9999px; }
  .border { border-style: solid; border-width: 1px; }
  .border-t { border-top-style: solid; border-top-width: 1px; }
  .border-b { border-bottom-style: solid; border-bottom-width: 1px; }
  .bg-ivory { background-color: hsl(var(--ivory)); }
  .p-4 { padding: calc(var(--spacing) * 4); }
  .p-7 { padding: calc(var(--spacing) * 7); }
  .p-8 { padding: calc(var(--spacing) * 8); }
  .px-3 { padding-inline: calc(var(--spacing) * 3); }
  .px-4 { padding-inline: calc(var(--spacing) * 4); }
  .px-5 { padding-inline: calc(var(--spacing) * 5); }
  .px-6 { padding-inline: calc(var(--spacing) * 6); }
  .py-1 { padding-block: var(--spacing); }
  .py-2 { padding-block: calc(var(--spacing) * 2); }
  .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); }
  .py-3 { padding-block: calc(var(--spacing) * 3); }
  .py-4 { padding-block: calc(var(--spacing) * 4); }
  .py-10 { padding-block: calc(var(--spacing) * 10); }
  .py-20 { padding-block: calc(var(--spacing) * 20); }
  .pt-8 { padding-top: calc(var(--spacing) * 8); }
  .pt-16 { padding-top: calc(var(--spacing) * 16); }
  .pb-16 { padding-bottom: calc(var(--spacing) * 16); }
  .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
  .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
  .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
  .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }
  .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }
  .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
  .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
  .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); }
  .text-\[0\.6rem\] { font-size: .6rem; }
  .text-\[0\.7rem\] { font-size: .7rem; }
  .text-\[2\.6rem\] { font-size: 2.6rem; }
  .leading-\[1\.04\] { --tw-leading: 1.04; line-height: 1.04; }
  .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }
  .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); }
  .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
  .font-medium { font-weight: var(--font-weight-medium); }
  .font-semibold { font-weight: var(--font-weight-semibold); }
  .tracking-\[0\.22em\] { letter-spacing: .22em; }
  .tracking-tight { letter-spacing: var(--tracking-tight); }
  .text-ink-muted { color: hsl(var(--ink-muted)); }
  .text-ink-navy { color: hsl(var(--ink-navy)); }
  .text-ink-navy-soft { color: hsl(var(--ink-navy-soft)); }
  .text-teal { color: hsl(var(--teal)); }
  .uppercase { text-transform: uppercase; }
  .backdrop-blur-md { -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
  .transition-all { transition-property: all; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); }
  .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration); }
  .last\:border-b-0:last-child { border-bottom-width: 0; }

  @media (hover: hover) {
    .hover\:gap-2\.5:hover { gap: calc(var(--spacing) * 2.5); }
    .hover\:text-ink-navy:hover { color: hsl(var(--ink-navy)); }
    .hover\:opacity-70:hover { opacity: .7; }
  }

  @media (width >= 40rem) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:px-8 { padding-inline: calc(var(--spacing) * 8); }
    .sm\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
  }

  @media (width >= 48rem) {
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }
    .md\:gap-8 { gap: calc(var(--spacing) * 8); }
    .md\:py-28 { padding-block: calc(var(--spacing) * 28); }
    .md\:pt-24 { padding-top: calc(var(--spacing) * 24); }
    .md\:pb-24 { padding-bottom: calc(var(--spacing) * 24); }
    .md\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }
    .md\:text-\[4\.2rem\] { font-size: 4.2rem; }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* ---- Brand colours & custom components (unlayered, so they win over utilities) ---- */
:root {
  --ivory: 42 38% 96%;
  --ivory-deep: 40 33% 92%;
  --ink-navy: 214 41% 16%;
  --ink-navy-soft: 212 28% 30%;
  --ink-muted: 210 16% 45%;
  --teal: 184 48% 38%;
  --teal-deep: 187 52% 28%;
  --teal-soft: 178 40% 88%;
  --rule: 214 41% 16% / .12;
  --rule-strong: 214 41% 16% / .22;
  --card-ivory: 42 44% 98%;
}

body { -webkit-font-smoothing: antialiased; font-family: var(--font-sans); margin: 0; overflow-x: hidden; }

.font-display { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -.018em; }
.eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .22em; color: hsl(var(--teal-deep)); font-size: .7rem; font-weight: 600; }
.hairline { border-color: hsl(var(--rule)); }
.paper-grain {
  background-image:
    radial-gradient(circle at 18% 12%, hsl(var(--teal) / .05) 0%, transparent 38%),
    radial-gradient(circle at 86% 8%, hsl(var(--ink-navy) / .04) 0%, transparent 42%),
    radial-gradient(circle at 50% 120%, hsl(var(--teal) / .06) 0%, transparent 55%);
}

@keyframes sl-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sl-draw { 100% { stroke-dashoffset: 0; } }
@keyframes sl-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.reveal { opacity: 0; }
.reveal.in-view { animation: .8s cubic-bezier(.16, 1, .3, 1) forwards sl-rise; }
.route-line { stroke-dasharray: 1400; stroke-dashoffset: 1400px; }
.route-line.in-view { animation: 2.4s cubic-bezier(.16, 1, .3, 1) forwards sl-draw; }
.orbit-slow { transform-origin: 50%; animation: 48s linear infinite sl-orbit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in-view, .route-line, .route-line.in-view, .orbit-slow {
    opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; transform: none !important;
  }
}

.nav-link { position: relative; }
.nav-link::after { content: ""; background-color: hsl(var(--teal)); width: 0; height: 1px; transition: width .3s cubic-bezier(.16, 1, .3, 1); position: absolute; bottom: -4px; left: 0; }
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }

.service-card { transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .4s; }
.service-card:hover { border-color: hsl(var(--teal) / .5); transform: translateY(-4px); }