@charset "utf-8";

/* ===== Tokens ===== */
:root{
  --gold:#d9b868;
  --dark:#1a1a1a;
  --light:#e8e8e8;
  --fg:#fff;
  --muted:#bbbbbb;
  --container:1200px;
  --radius:16px;
  --shadow:0 8px 10px rgba(0,0,0,.8);
  --header-bg: rgba(26,26,26,.95);
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--dark); color:var(--fg);
  font:16px/1.6 'Roboto','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Links: brand colours globally */
a { color:#fff; text-decoration:none; }
a:hover, a:focus { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

/* Utilities */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.w1200{ max-width:var(--container); margin:0 auto; padding:0 25px; }
@media (max-width:1050px){ .w1200{ padding:0 15px; } }

/* Background stars behind whole page */
.wrapper{
  position:relative;
  background:url("https://a-webdesign.co.uk/images/parallax_image.jpg") center/cover no-repeat fixed;
}
@media (max-width:1024px){ .wrapper{ background-attachment:scroll; } }

/* ===== Header (sticky) ===== */
.header{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:24px;
  background:var(--header-bg);
  padding:10px 20px;
}
.logo{ height:60px; width:auto; display:block; }

.nav-wrapper{ margin-left:auto; }
.nav{ display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:1.1rem; }
.nav li a{
  color:#fff; border-bottom:1px solid transparent;
  text-decoration:none;                 /* nav stays clean */
  transition:color .2s, border-color .2s;
}
.nav li a:hover{ color:var(--gold); border-color:currentColor; }

/* ===== HERO (banner) ===== */
.hero{
  position:relative;
  min-height: clamp(900px, 100vh, 1200px);
  background: url("https://a-webdesign.co.uk/images/main.png") right top / cover no-repeat;
  overflow:hidden;
}

/* soft fade at the bottom so the hand-off is seamless */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:260px;
  background:linear-gradient(to bottom, rgba(26,26,26,0) 0%, #1a1a1a 85%);
  pointer-events:none; z-index:1;
}

/* particles canvas (hero full, sections as slabs) */
.particles{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}
.right-slab{
  left:auto; right:0; top:0; bottom:auto;
  width:min(40%, 560px); height:500px;
}
.left-slab{
  left:0; top:0; bottom:auto;
  width:min(40%, 560px); height:500px;
}

/* CTA circle + label */
.cta-wrap{
  position:absolute; left:12%; top:50%; transform:translateY(-50%);
  width:500px; height:500px; border-radius:50%;
  z-index:2; /* above hero fade and particles */
}
@media (max-width:1500px){ .cta-wrap{ width:420px; height:420px; } }
@media (max-width:1100px){ .cta-wrap{ width:320px; height:320px; } }
@media (max-width:700px){  .cta-wrap{ width:220px; height:220px; } }

.cta{ position:relative; display:block; width:100%; height:100%; border-radius:50%; }
.btn{
  position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
  width:100px; height:100px; border-radius:50%;
  background:var(--gold) url("https://a-webdesign.co.uk/images/arrow-down.png") center/60% no-repeat;
}
.text{
  position:absolute; left:0; right:0; bottom:16%;
  text-align:center; color:#fff; letter-spacing:8px; font-weight:300; font-size:2.2em;
  text-shadow:0 0 8px #000, 0 0 16px #000, 0 0 24px #000;
}
.cta:hover .text{ color:var(--gold); }

/* ===== About ===== */
.about{
  background:#1a1a1a; position:relative;
  padding: clamp(2rem,3vw,3.5rem) 0 clamp(3rem,6vw,6rem);
}
.about h2{ color:var(--gold); font-weight:400; font-size:3em; line-height:1; margin:0; }
.about h2 img{ vertical-align:middle; height:40px; margin-left:10px; }
.about .intro{ color:var(--muted); font-size:1.2em; max-width:70ch; margin:.9rem auto; }
.about .w1200{ position:relative; z-index:1; } /* keep text above particles */

.features{
  list-style:none; margin:50px 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.features li{
  background:rgba(255,255,255,.03); border-radius:var(--radius);
  padding:18px; text-align:center;
}
.features li img{ display:block; width:100%; max-width:150px; margin:0 auto; }
.features li h3{ color:var(--gold); font-weight:400; margin:20px 0 0; font-size:1.4em; }
.features li p{ color:var(--muted); margin:.25rem 0 0; }

@media (max-width:1100px){ .features{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){  .features{ grid-template-columns:repeat(2,1fr);} }

/* ===== Free quote ===== */
.cta-secondary{ background:#1a1a1a; padding:2.5rem 0 1rem; }
.center{ text-align:center; }

/* ===== Q&A ===== */
.qa{ background:var(--light); color:#333; padding:50px 0 100px; position:relative; }
.qa h2{ color:#a98b4a; text-align:center; font-weight:400; font-size:3em; margin:0 0 20px; }
.qa .w1200{ position:relative; z-index:1; } /* keep above particles */

.qa-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.qa-grid li{ background:#ccc3; border-radius:14px; padding:12px 16px; }
.q-wrapper{ display:flex; align-items:center; min-height:72px; position:relative; cursor:pointer; }
.q-wrapper::after{
  content:""; width:32px; height:32px; position:absolute; right:0; top:50%; margin-top:-16px;
  background:url("https://a-webdesign.co.uk/images/arrow-down-gold.png") center/80% no-repeat;
  transition:transform .3s;
}
.q-wrapper.active::after{ transform:rotate(180deg); }
.number{
  color:#fff; width:60px; height:60px; line-height:60px; text-align:center; font-size:2em; margin-right:8px;
  background:url("https://a-webdesign.co.uk/images/hex.png") center/cover no-repeat;
}
.q{ color:#5d5d5d; font-size:1.1em; flex:1; padding-right:45px; margin:0; }
.a{ display:none; color:#4d4d4d; background:#ccc; padding:8px 12px; margin:.5rem 0 0; border-radius:10px; }
.a.active{ display:block; }

/* Q&A links styled like original */
.qa a{ color:#a98b4a; text-decoration:underline; }
.qa a:hover{ color:#896e33; }

@media (max-width:900px){ .qa-grid{ grid-template-columns:1fr; } }

/* ===== Footer ===== */
.footer{
  position:relative; z-index:1;       /* ensure nothing overlays it */
  text-align:center; color:#a98b4a;
  padding:14px 20px 24px;
  background:var(--dark);
}
.footer a{ color:#a98b4a; text-decoration:underline; }
.footer a:hover{ color:#fff; }