:root {
  --blue:#2f4fa3;
  --teal:#67cacc;
  --orange:#ff7a00;
  --deep-orange:#ff4b00;
  --pink:#da2f68;
  --purple:#ad3470;
  --ink:#081747;
  --muted:#586176;
  --soft:#f8f8fd;
  --line:#e7eaf3;
  --white:#ffffff;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}

a { color:inherit; text-decoration:none; }

.site-header {
  max-width:1240px;
  margin:0 auto;
  padding:20px 28px 8px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
}

.logo {
  width:210px;
  display:block;
}

.logo-main {
  background:var(--pink);
  color:#fff;
  font-size:50px;
  line-height:.9;
  font-weight:900;
  font-style:italic;
  letter-spacing:-2px;
  padding:13px 18px 12px;
}

.logo-sub {
  margin-top:4px;
  background:var(--pink);
  color:#fff;
  font-size:13px;
  font-weight:800;
  font-style:italic;
  padding:6px 12px;
  white-space:nowrap;
}

.nav {
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:800;
  font-size:14px;
}

.nav a {
  padding:10px 0;
}

.nav .active {
  color:var(--pink);
  border-bottom:3px solid var(--pink);
}

.nav .enquiry {
  color:#fff;
  background:var(--pink);
  padding:13px 22px;
  border-radius:10px;
  margin-left:8px;
}

.hero {
  max-width:1240px;
  margin:0 auto;
  padding:32px 28px 34px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:36px;
}

.hero h1 {
  font-size:clamp(40px,5vw,66px);
  line-height:1.03;
  letter-spacing:-2px;
  margin:0 0 18px;
}

.hero h1 span {
  color:var(--pink);
}

.lead {
  color:var(--muted);
  font-size:20px;
  margin:0 0 24px;
}

.hero-note {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:14px;
  align-items:start;
  max-width:620px;
  margin-bottom:30px;
}

.hero-note-icon {
  font-size:28px;
  color:var(--blue);
}

.hero-note strong {
  font-size:15px;
  line-height:1.45;
}

.trust-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  max-width:700px;
}

.trust-row article {
  text-align:center;
  padding:0 18px;
  border-right:1px solid #dce1ec;
}

.trust-row article:last-child {
  border-right:0;
}

.trust-icon {
  font-size:28px;
  margin-bottom:8px;
}

.trust-row h3 {
  font-size:13px;
  line-height:1.35;
  margin:0 0 8px;
}

.trust-row p {
  color:var(--muted);
  font-size:11.5px;
  margin:0;
}

.blue { color:var(--blue); }
.teal { color:var(--teal); }
.orange { color:var(--orange); }
.pink { color:var(--pink); }
.purple { color:var(--purple); }

.hero-buttons {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn {
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 24px;
  border-radius:9px;
  font-weight:900;
  font-size:15px;
}

.primary {
  background:var(--pink);
  color:#fff;
}

.outline {
  background:#fff;
  color:var(--pink);
  border:2px solid var(--pink);
}

.hero-art {
  min-height:520px;
  position:relative;
  overflow:hidden;
  border-radius:0 0 0 120px;
  background:
    radial-gradient(circle at 24% 18%, rgba(218,47,104,.35), transparent 16%),
    radial-gradient(circle at 72% 18%, rgba(218,47,104,.55), transparent 26%),
    radial-gradient(circle at 52% 38%, rgba(173,52,112,.62), transparent 28%),
    radial-gradient(circle at 82% 49%, rgba(47,79,163,.60), transparent 30%),
    radial-gradient(circle at 70% 72%, rgba(103,202,204,.82), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.25) 50%, rgba(103,202,204,.30) 100%);
}

.hero-art::before {
  content:"";
  position:absolute;
  inset:-15%;
  background:
    linear-gradient(118deg, transparent 0 11%, rgba(218,47,104,.58) 11% 24%, transparent 24%),
    linear-gradient(134deg, transparent 0 20%, rgba(173,52,112,.44) 20% 36%, transparent 36%),
    linear-gradient(150deg, transparent 0 32%, rgba(47,79,163,.44) 32% 48%, transparent 48%),
    linear-gradient(165deg, transparent 0 46%, rgba(103,202,204,.60) 46% 65%, transparent 65%),
    linear-gradient(30deg, transparent 0 38%, rgba(255,122,0,.25) 38% 48%, transparent 48%);
  transform:skewX(-7deg);
}

.hero-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(152deg, transparent 0 54px, rgba(255,255,255,.58) 55px 57px, transparent 58px 100px),
    radial-gradient(circle at 72% 35%, rgba(255,255,255,.6) 0 1px, transparent 2px);
  background-size:auto, 12px 12px;
  opacity:.75;
  mix-blend-mode:screen;
}

.hero-shape {
  position:absolute;
  border-radius:45% 55% 45% 55%;
  opacity:.7;
  filter:blur(.2px);
}

.s1 { width:320px;height:190px;right:15%;top:9%;background:rgba(218,47,104,.55);transform:rotate(-18deg); }
.s2 { width:420px;height:240px;right:-8%;top:23%;background:rgba(173,52,112,.50);transform:rotate(-20deg); }
.s3 { width:420px;height:250px;right:5%;bottom:10%;background:rgba(103,202,204,.58);transform:rotate(-14deg); }
.s4 { width:260px;height:160px;left:22%;top:35%;background:rgba(255,122,0,.22);transform:rotate(-12deg); }
.s5 { width:280px;height:170px;right:17%;bottom:22%;background:rgba(47,79,163,.42);transform:rotate(-10deg); }
.s6 { width:260px;height:160px;left:35%;bottom:0;background:rgba(103,202,204,.36);transform:rotate(-12deg); }

.hero-curve {
  position:absolute;
  width:760px;
  height:220px;
  border-top:3px solid rgba(255,255,255,.78);
  border-radius:50%;
  transform:rotate(-12deg);
  z-index:3;
}

.c1 { right:-120px; top:90px; }
.c2 { right:-150px; top:220px; opacity:.75; }
.c3 { right:-180px; bottom:45px; opacity:.75; }

.hero-dots {
  position:absolute;
  width:140px;
  height:110px;
  background-image:radial-gradient(rgba(255,255,255,.78) 1.4px, transparent 1.4px);
  background-size:12px 12px;
  z-index:4;
}

.d1 { right:18%; top:170px; }
.d2 { right:22%; bottom:130px; }

.info-strip {
  max-width:1160px;
  margin:8px auto 0;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:14px;
}

.info-strip article {
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  align-items:center;
  padding:24px;
  border-right:1px solid #dfe3ee;
}

.info-strip article:last-child {
  border-right:0;
}

.strip-icon {
  font-size:48px;
}

.info-strip h2 {
  font-size:19px;
  margin:0 0 6px;
}

.info-strip p {
  font-size:13px;
  margin:0;
  color:var(--ink);
}

.section {
  max-width:1160px;
  margin:0 auto;
  padding:32px 0;
}

.why-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}

.why-card {
  color:#fff;
  border-radius:12px;
  padding:24px;
  min-height:250px;
  box-shadow:0 16px 34px rgba(8,23,72,.10);
}

.card-icon {
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  display:grid;
  place-items:center;
  font-size:24px;
  margin-bottom:16px;
}

.why-card h2 {
  font-size:20px;
  line-height:1.25;
  margin:0 0 14px;
}

.why-card p {
  font-size:13.5px;
  margin:0;
}

.card-blue { background:var(--blue); }
.card-teal { background:var(--teal); color:#0d2442; }
.card-orange { background:var(--orange); }
.card-deep-orange { background:var(--deep-orange); }
.card-pink { background:var(--pink); }

.format-strip {
  max-width:1160px;
  margin:0 auto;
  padding:24px;
  background:var(--soft);
  border-radius:14px;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}

.format-card {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:18px;
  align-items:center;
  justify-content:center;
  padding:0 60px;
}

.format-card:first-child {
  border-right:1px solid #dfe3ee;
}

.format-icon {
  width:70px;
  height:70px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:30px;
}

.purple-soft { background:rgba(173,52,112,.14); color:var(--purple); }
.pink-soft { background:rgba(218,47,104,.14); color:var(--pink); }

.format-card h3 {
  margin:0 0 4px;
  font-size:20px;
}

.format-card p {
  margin:0;
  font-size:14px;
}

.section-title {
  text-align:center;
  font-size:26px;
  margin:0 0 20px;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.service-card {
  background:#fff;
  border-radius:14px;
  border:2px solid;
  padding:26px;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px 18px;
  min-height:230px;
}

.service-icon {
  font-size:40px;
  grid-row:1 / 3;
}

.service-card h3 {
  margin:0 0 8px;
  font-size:20px;
}

.service-card p {
  margin:0;
  font-size:13.5px;
}

.service-meta {
  grid-column:1 / 3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:22px;
}

.service-meta span {
  font-size:13px;
  font-weight:800;
}

.service-meta strong {
  font-size:28px;
}

.service-button {
  grid-column:1 / 3;
  display:block;
  text-align:center;
  color:#fff;
  border-radius:7px;
  padding:13px 16px;
  font-weight:900;
}

.service-blue { border-color:var(--blue); color:var(--blue); }
.service-blue .service-button { background:var(--blue); }
.service-teal { border-color:var(--teal); color:#088c92; }
.service-teal .service-button { background:#0fa3a7; }
.service-pink { border-color:var(--pink); color:var(--pink); }
.service-pink .service-button { background:var(--pink); }

.service-note {
  text-align:center;
  font-weight:800;
  font-size:13px;
  margin:18px 0 0;
}

.steps-section {
  padding-top:10px;
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.step {
  border-radius:14px;
  padding:20px;
  color:#fff;
  min-height:150px;
}

.step span {
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.26);
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:10px;
}

.step h3 {
  font-size:16px;
  margin:0 0 8px;
}

.step p {
  font-size:12.5px;
  margin:0;
}

.step-blue { background:var(--blue); }
.step-teal { background:var(--teal); color:#0d2442; }
.step-orange { background:var(--orange); }
.step-pink { background:var(--pink); }
.step-purple { background:var(--purple); }

.bottom-panels {
  max-width:1160px;
  margin:0 auto 28px;
  display:grid;
  grid-template-columns:1.1fr .55fr 1.1fr 1.1fr;
  gap:16px;
}

.bottom-card {
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
}

.aq-card {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
}

.brain-icon {
  font-size:42px;
  color:var(--blue);
}

.bottom-card h2,
.bottom-card h3 {
  margin:0 0 10px;
}

.bottom-card p {
  font-size:13px;
  margin:0 0 10px;
}

.blue-small {
  background:var(--blue);
  color:#fff;
  min-height:42px;
  padding:10px 18px;
  margin-top:8px;
}

.gauge-card {
  text-align:center;
  display:grid;
  place-items:center;
}

.gauge {
  width:118px;
  height:62px;
  border-radius:118px 118px 0 0;
  background:conic-gradient(from 270deg, var(--teal) 0 42deg, var(--blue) 42deg 70deg, var(--orange) 70deg 112deg, var(--deep-orange) 112deg 136deg, var(--pink) 136deg 180deg, transparent 180deg 360deg);
  position:relative;
}

.gauge::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:44px;
  border-radius:80px 80px 0 0;
  background:#fff;
}

.gauge-card strong {
  font-size:34px;
  margin-top:-42px;
  z-index:2;
}

.gauge-card strong span {
  font-size:14px;
}

.gauge-card small {
  color:var(--muted);
  font-weight:800;
}

.access-card {
  background:rgba(103,202,204,.14);
}

.privacy-card {
  background:rgba(173,52,112,.10);
}

.bottom-icon {
  font-size:30px;
  margin-bottom:8px;
}

.access-card a {
  color:#008d95;
  font-weight:900;
}

.payment-logos {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0;
}

.payment-logos span {
  background:#fff;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:11px;
  font-weight:900;
  padding:7px 8px;
}

.contact-panel {
  max-width:1160px;
  margin:0 auto 30px;
  padding:28px;
  background:rgba(218,47,104,.10);
  border:1px solid rgba(218,47,104,.18);
  border-radius:14px;
}

.footer {
  background:var(--pink);
  color:#fff;
  display:grid;
  grid-template-columns:1.2fr 1fr .75fr 1fr;
  gap:34px;
  padding:38px 46px;
  align-items:center;
}

.footer-logo {
  max-width:260px;
}

.footer-logo-main {
  border:2px solid #fff;
  color:#fff;
  font-size:54px;
  line-height:.9;
  font-weight:900;
  font-style:italic;
  letter-spacing:-2px;
  padding:12px 18px;
}

.footer-logo-sub {
  border:2px solid #fff;
  border-top:0;
  font-weight:800;
  font-style:italic;
  padding:6px 10px;
  font-size:12px;
}

.footer p {
  margin:0;
}

.footer h3 {
  margin:0 0 8px;
}

.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(8,23,72,.75);
  z-index:100;
  padding:30px;
  overflow:auto;
}

.modal.open {
  display:block;
}

.modal-content {
  max-width:850px;
  margin:30px auto;
  background:#fff;
  border-radius:20px;
  padding:34px;
  position:relative;
}

.close {
  position:absolute;
  right:16px;
  top:16px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.question {
  background:var(--soft);
  border-radius:12px;
  padding:16px;
  margin:12px 0;
}

.question label {
  display:block;
  margin:8px 0;
}

#aqResult {
  margin-top:20px;
  background:rgba(103,202,204,.18);
  border-radius:12px;
  padding:18px;
  font-weight:800;
}

@media (max-width:1000px) {
  .site-header,
  .nav {
    flex-direction:column;
    align-items:flex-start;
  }

  .hero,
  .info-strip,
  .why-grid,
  .format-strip,
  .services-grid,
  .steps-grid,
  .bottom-panels,
  .footer {
    grid-template-columns:1fr;
  }

  .hero-art {
    min-height:340px;
  }

  .trust-row {
    grid-template-columns:1fr 1fr;
  }

  .info-strip article,
  .format-card:first-child {
    border-right:0;
    border-bottom:1px solid #dfe3ee;
  }

  .format-card {
    padding:20px;
  }
}


/* Exact uploaded NAAS header logo */
.logo {
  width: 236px;
  display: block;
  flex-shrink: 0;
}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Align hero artwork with the left content block */
.hero {
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-art {
  min-height: auto;
  height: 100%;
  align-self: stretch;
}

/* What is autism section */
.autism-section {
  max-width: 1160px;
  margin: 26px auto 0;
  padding: 34px;
  background: linear-gradient(135deg, rgba(103,202,204,.14), rgba(218,47,104,.08));
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: start;
}

.eyebrow {
  color: var(--pink);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0 0 8px;
}

.autism-copy h2 {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.1;
}

.autism-copy p {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15.5px;
}

.autism-points {
  display: grid;
  gap: 12px;
}

.autism-points article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 24px rgba(8,23,72,.06);
}

.autism-points span {
  color: var(--pink);
  font-weight: 900;
  font-size: 13px;
}

.autism-points h3 {
  margin: 4px 0 6px;
  font-size: 17px;
}

.autism-points p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width:1000px) {
  .logo {
    width: 210px;
  }

  .hero-art {
    height: 360px;
  }

  .autism-section {
    grid-template-columns: 1fr;
    margin: 22px 28px 0;
  }
}


/* Realistic payment method styling */
.payment-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0;
}

.payment-logos .pay{
  min-width:92px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(8,23,72,.08);
  background:#fff;
  box-shadow:0 8px 18px rgba(8,23,72,.05);
}

.payment-logos .visa{
  color:#1A1F71;
}

.payment-logos .mastercard{
  color:#EB001B;
}

.payment-logos .amex{
  color:#006FCF;
}

.payment-logos .apple{
  color:#111111;
}

.payment-logos .google{
  color:#4285F4;
}

.payment-logos .klarna{
  background:#ffb3c7;
  color:#111111;
}


/* Footer logo matches header exactly */
.footer-logo{
  width:240px;
}

.footer-logo img{
  width:100%;
  height:auto;
  display:block;
}


/* Actual payment logo assets */
.payment-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0;
}

.payment-logo{
  width:92px;
  height:46px;
  background:#fff;
  border-radius:10px;
  border:1px solid rgba(8,23,72,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(8,23,72,.05);
  overflow:hidden;
}

.payment-logo svg{
  width:100%;
  height:100%;
}


/* Uniform booking card sizing */
.services-grid{
  align-items:stretch;
}

.service-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:420px;
}

.service-content{
  flex-grow:1;
}

.service-button{
  margin-top:auto;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.service-meta{
  margin-top:20px;
}


/* Ensure hero trust icons display correctly */
.trust-row{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:0 !important;
  max-width:700px !important;
}


/* FINAL HERO IMAGE FIX — use supplied NAAS geometric image only */
.hero {
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-art {
  min-height: auto !important;
  height: auto !important;
  align-self: stretch;
  background-image: url("assets/naas-hero-geometric.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 0 0 120px;
}

.hero-art::before,
.hero-art::after,
.hero-shape,
.hero-curve,
.hero-dots {
  display: none !important;
}

@media (max-width:1000px) {
  .hero-art {
    min-height: 360px !important;
  }
}


/* NICE guidance badge */
.nice-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:7px 10px;
  border-radius:8px;
  background:#ffffff;
  color:#2f4fa3;
  border:1px solid rgba(47,79,163,.20);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}

/* Service pricing update formatting */
.service-meta strong small{
  font-size:15px;
  font-weight:900;
}

.service-teal .service-meta strong{
  line-height:1.05;
  text-align:right;
}


/* FINAL HERO IMAGE RESTORE */
.hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.1fr) !important;
  align-items: stretch !important;
  gap: 36px !important;
}

.hero-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.hero-art {
  display: block !important;
  position: relative !important;
  min-height: 520px !important;
  height: 100% !important;
  align-self: stretch !important;
  background: url("assets/naas-hero-geometric.png") center center / cover no-repeat !important;
  border-radius: 0 0 0 120px !important;
  overflow: hidden !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.hero-art::before,
.hero-art::after,
.hero-art .hero-shape,
.hero-art .hero-curve,
.hero-art .hero-dots {
  display: none !important;
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero-art {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 360px !important;
  }
}