@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy-900:#141A29;
  --navy-700:#1E2340;
  --navy-050:#EDEFF6;
  --amber:#F2A63A;
  --amber-dark:#D6871C;
  --violet:#8B5CF6;
  --teal:#2DD4BF;
  --rose:#F472B6;
  --blue:#5B8DEF;
  --paper:#F1F2ED;
  --paper-raised:#FFFFFF;
  --slate:#5B6270;
  --slate-light:#8A8F99;
  --line:#DEDDD3;
  --line-navy:rgba(255,255,255,0.14);
  --radius-s:10px;
  --radius-m:18px;
  --radius-l:26px;
  --shadow-none: none;
  --maxw:1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--navy-900);
  font-family:'Inter', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ---------- Ambient colour animation (site-wide) ---------- */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  filter:blur(80px);
  opacity:0.4;
  will-change:transform;
}
body::before{
  top:-18vw; left:-14vw;
  width:60vw; height:60vw;
  max-width:700px; max-height:700px;
  background:
    radial-gradient(circle at 30% 30%, rgba(242,166,58,0.55), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(139,92,246,0.45), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(45,212,191,0.4), transparent 60%);
  animation: blobDrift1 24s ease-in-out infinite;
}
body::after{
  bottom:-20vw; right:-16vw;
  width:55vw; height:55vw;
  max-width:640px; max-height:640px;
  background:
    radial-gradient(circle at 60% 40%, rgba(91,141,239,0.5), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(244,114,182,0.42), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(242,166,58,0.35), transparent 60%);
  animation: blobDrift2 28s ease-in-out infinite;
}
@keyframes blobDrift1{
  0%,100%{ transform:translate(0,0) scale(1) rotate(0deg); }
  33%{ transform:translate(4vw,3vw) scale(1.12) rotate(8deg); }
  66%{ transform:translate(-3vw,4vw) scale(0.94) rotate(-6deg); }
}
@keyframes blobDrift2{
  0%,100%{ transform:translate(0,0) scale(1) rotate(0deg); }
  33%{ transform:translate(-4vw,-3vw) scale(1.1) rotate(-8deg); }
  66%{ transform:translate(3vw,-4vw) scale(0.95) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}

h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  color:var(--navy-900);
  margin:0 0 0.4em;
  line-height:1.1;
  letter-spacing:-0.01em;
}
h1{ font-size:56px; font-weight:700; letter-spacing:-0.02em; }
h2{ font-size:34px; font-weight:600; }
h3{ font-size:20px; font-weight:600; }
p{ margin:0 0 1em; color:var(--slate); }
a{ color:inherit; text-decoration:none; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

section{ padding:96px 0; }
section.tight{ padding:64px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary{ background:var(--amber); color:var(--navy-900); }
.btn-primary:hover{ background:var(--amber-dark); }
.btn-ghost{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-ghost:hover{ background:var(--navy-900); color:var(--paper); }
.btn-ghost-light{ background:transparent; color:var(--paper); border-color:var(--line-navy); }
.btn-ghost-light:hover{ background:rgba(255,255,255,0.08); }

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(241,242,237,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; }
.brand svg{ display:block; }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--navy-900); }
.nav-links a.active{ color:var(--amber-dark); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }

/* ---------- Services dropdown ---------- */
.nav-item-dropdown{ position:relative; }
.nav-caret{ font-size:11px; margin-left:3px; opacity:0.7; }
.nav-dropdown{
  position:absolute; top:100%; left:0; margin-top:8px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  padding:8px;
  min-width:180px;
  box-shadow:0 16px 32px rgba(20,26,41,0.10);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown a{ display:block; padding:10px 12px; border-radius:6px; font-size:14px; font-weight:500; }
.nav-dropdown a:hover{ background:var(--navy-050); }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:16px 32px; width:100%; border-top:1px solid var(--line); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }

  .nav-item-dropdown{ width:100%; }
  .nav-dropdown{
    position:static; margin-top:0;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-radius:0; padding:0;
  }
  .nav-dropdown a{ padding:14px 32px 14px 44px; border-top:1px solid var(--line); border-radius:0; font-size:14px; }
}

/* ---------- Animated grid background ---------- */
.bg-grid-wrap{
  position:relative;
  overflow:hidden;
}
.bg-grid-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.bg-grid-wrap > .container{
  position:relative;
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .bg-grid-canvas{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 100px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}
.eyebrow-plain{ font-size:15px; color:var(--slate); margin-bottom:18px; }
.hero p.lead{ font-size:19px; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.stat-row{ display:flex; gap:36px; margin-top:52px; flex-wrap:wrap; }
.stat-row .stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:26px; color:var(--navy-900); }
.stat-row .stat span{ font-size:13px; color:var(--slate-light); }

.relay-visual{ width:100%; height:auto; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  h1{ font-size:42px; }
}

/* ---------- Feature cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }
@media (max-width: 960px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .grid-4{ grid-template-columns:1fr; } }

.feature-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:32px;
}
.feature-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:transform 0.3s ease;
}
.feature-card{ transition:transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 20px 38px -18px rgba(20,26,41,0.22); }
.feature-card:hover .feature-icon{ transform:rotate(-6deg) scale(1.08); }

/* Colour cycling so icon chips vary across a grid, mirroring the ambient palette */
.feature-card:nth-child(6n+2) .feature-icon, .service-card:nth-child(6n+2) .feature-icon{ background:var(--violet); }
.feature-card:nth-child(6n+3) .feature-icon, .service-card:nth-child(6n+3) .feature-icon{ background:var(--teal); }
.feature-card:nth-child(6n+4) .feature-icon, .service-card:nth-child(6n+4) .feature-icon{ background:var(--rose); }
.feature-card:nth-child(6n+5) .feature-icon, .service-card:nth-child(6n+5) .feature-icon{ background:var(--blue); }
.feature-card:nth-child(6n+6) .feature-icon, .service-card:nth-child(6n+6) .feature-icon{ background:var(--amber-dark); }

.section-intro{ max-width:640px; margin-bottom:56px; }
.section-intro h2{ margin-bottom:14px; }

/* ---------- Why Choose Us (colourful accent cards) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
@media (max-width:1080px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .why-grid{ grid-template-columns:1fr; } }

.why-card{
  position:relative;
  background:var(--paper-raised);
  border-radius:var(--radius-m);
  padding:30px 24px;
  overflow:hidden;
  border:1px solid var(--line);
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.why-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--accent);
}
.why-card:hover{
  transform:translateY(-9px) scale(1.02);
  border-color:transparent;
  box-shadow:0 22px 44px -16px var(--accent-shadow, rgba(20,26,41,0.2));
}
.why-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  margin-bottom:20px;
  box-shadow:0 10px 20px -8px var(--accent-shadow, transparent);
  transition:transform 0.35s ease;
}
.why-card:hover .why-icon{ transform:rotate(-8deg) scale(1.1); }
.why-card h3{ font-size:17px; margin-bottom:8px; }
.why-card p{ font-size:14.5px; margin:0; }

.why-card.c-amber{ --accent:var(--amber); --accent-shadow:rgba(242,166,58,0.4); }
.why-card.c-violet{ --accent:var(--violet); --accent-shadow:rgba(139,92,246,0.4); }
.why-card.c-teal{ --accent:var(--teal); --accent-shadow:rgba(45,212,191,0.4); }
.why-card.c-rose{ --accent:var(--rose); --accent-shadow:rgba(244,114,182,0.4); }
.why-card.c-blue{ --accent:var(--blue); --accent-shadow:rgba(91,141,239,0.4); }

/* ---------- Steps ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.step{ padding:0 28px; position:relative; }
.step-num{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  color:var(--amber-dark); font-size:15px; margin-bottom:14px;
}
.step:not(:first-child){ border-left:1px solid var(--line); }
@media (max-width: 860px){
  .steps{ grid-template-columns:1fr; gap:36px; }
  .step:not(:first-child){ border-left:none; border-top:1px solid var(--line); padding-top:32px; }
}

/* ---------- Dark band ---------- */
.band-navy{ background:var(--navy-700); color:var(--paper); }
.band-navy h2, .band-navy h3{ color:var(--paper); }
.band-navy p{ color:#B7BBCB; }
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:left; }
.proof-grid .num{ font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; color:var(--amber); }
.proof-grid .cap{ font-size:14px; color:#B7BBCB; margin-top:6px; }
@media (max-width: 860px){ .proof-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--navy-900);
  border-radius:var(--radius-l);
  padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  color:var(--paper);
}
.cta-banner h2{ color:var(--paper); margin-bottom:6px; }
.cta-banner p{ color:#B7BBCB; margin:0; }
@media (max-width:760px){ .cta-banner{ flex-direction:column; text-align:center; } }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--navy-900); color:#9CA1B0; padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:48px; border-bottom:1px solid var(--line-navy); }
.footer-grid h4{ color:var(--paper); font-size:14px; margin-bottom:16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:14px; color:#9CA1B0; }
.footer-grid a:hover{ color:var(--paper); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:28px; font-size:13px; flex-wrap:wrap; gap:12px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Services hub ---------- */
.service-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:32px;
  display:flex; flex-direction:column;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.service-card:hover{ border-color:var(--amber-dark); transform:translateY(-2px); }
.service-card .feature-icon{ margin-bottom:24px; }
.service-card p{ flex-grow:1; }
.service-card .service-link{
  margin-top:18px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--amber-dark);
}

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:36px 30px;
  background:var(--paper-raised);
  display:flex; flex-direction:column;
}
.price-card.featured{
  background:var(--navy-700);
  color:var(--paper);
  border-color:var(--navy-700);
}
.price-card.featured h3, .price-card.featured .price{ color:var(--paper); }
.price-card.featured p{ color:#B7BBCB; }
.price-card .price{ font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:700; margin:14px 0 4px; }
.price-card .price small{ font-size:15px; font-weight:500; color:var(--slate); }
.price-card.featured .price small{ color:#B7BBCB; }
.price-card ul{ list-style:none; padding:0; margin:24px 0 32px; flex-grow:1; }
.price-card li{ padding:9px 0; border-top:1px solid var(--line); font-size:15px; }
.price-card.featured li{ border-top:1px solid var(--line-navy); }
.price-card li:first-child{ border-top:none; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }

.faq-item{ padding:24px 0; border-top:1px solid var(--line); }
.faq-item:first-child{ border-top:none; }
.faq-item h3{ margin-bottom:8px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:14px; font-weight:500; margin-bottom:8px; color:var(--navy-900); }
.field input, .field textarea{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  background:var(--paper-raised);
  font-family:'Inter', sans-serif;
  font-size:15px;
  color:var(--navy-900);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.contact-info-item{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.contact-info-item:first-child{ border-top:none; }
.contact-info-item .ic{
  width:40px; height:40px; border-radius:10px;
  background:var(--navy-700); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.form-note{ font-size:14px; color:var(--slate-light); margin-top:12px; }
#form-success{ display:none; padding:16px 18px; background:var(--navy-050); border-radius:var(--radius-s); color:var(--navy-900); font-size:15px; margin-top:8px; }

/* ---------- Page hero (non-home) ---------- */
.page-hero{ padding:72px 0 24px; }
.page-hero.bg-grid-wrap{ padding-bottom:40px; }
.page-hero p.lead{ max-width:56ch; font-size:18px; }