/* THEME COLORS */
:root{
  --bg:#241932;
  --accent:#e23bd6;
  --muted:#6f6472;
  --card:#6b5f6f;
  --cream:#f3e8f0;
  --btn:#b4179f;          /* white text on this = 5.9:1 (WCAG AA) */
  --btn-hover:#8f1280;
  --link:#d9a8f0;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#fff;
  line-height:1.6;
}
.container{max-width:1200px;margin-inline:auto;padding-inline:20px}   /* side gap is set ONLY here, so nothing can zero it */

/* ===========================
      WHITE NAVBAR + LOGO
   =========================== */
.header{
  background:#ffffff;        /* white background to match logo JPG */
  padding:18px 0;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #e6e6e6;
}

.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{display:block}
.logo img{
  height:90px;              /* <— ZOOM LOGO HERE (increase for bigger) */
  width:auto;
  object-fit:contain;
  display:block;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* NAV LINKS */
.nav a{
  color:#3b2b3e;
  text-decoration:none;
  margin-left:28px;
  font-weight:600;
  font-size:18px;
}
.nav a:hover{
  color:var(--btn);
}
.nav a[aria-current="page"]{
  color:var(--btn);
  border-bottom:3px solid var(--btn);
  padding-bottom:3px;
}
.nav a.nav-cta{
  background:var(--btn);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  border-bottom:0;
}
.nav a.nav-cta:hover{background:var(--btn-hover);color:#fff}



/* ===========================
        HERO VIDEO SECTION
   =========================== */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* FULL-BLEED VIDEO (black bars are cropped out of the file itself) */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  z-index:-2;
}

/* DARK OVERLAY */
.hero .overlay{
  position:absolute;
  inset:0;
  background:rgba(36,25,50,0.55);
  z-index:-1;
}

/* HERO TITLE */
.hero h1{
  position:relative;
  color:#fff;
  font-size:64px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:900;
  line-height:1.05;
  padding:0 20px;
  max-width:90%;
  text-shadow:0 6px 18px rgba(0,0,0,0.45);
  z-index:3;
}



/* ===========================
        SECTION HEADERS
   =========================== */
.section-title{
  padding-block:70px 30px;
  text-align:center;
}
.section-title h1,
.section-title h2{
  font-size:clamp(40px,6vw,72px);
  color:#fff;
  letter-spacing:2px;
}
.underline{
  width:140px;
  height:10px;
  background:var(--accent);
  margin:18px auto;
  border-radius:4px;
}



/* ===========================
        SERVICES GRID
   =========================== */
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding-block:40px;
}

.card{
  background:rgba(255,255,255,0.06);
  padding:26px;
  border-radius:3px;
  min-height:360px;
  display:flex;
  flex-direction:column;
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  margin-bottom:14px;
}

.card h3{
  color:var(--cream);
  font-size:28px;
  margin-bottom:12px;
}

.card p{
  color:#e6dfe7;
  flex:1;
}



/* ===========================
          CONTACT SECTION
   =========================== */
.contact{
  padding-block:60px;
}

.contact .cols{
  display:flex;
  gap:40px;
}

.col{
  flex:1;
}



/* ===========================
           FOOTER (circuit skyline)
   =========================== */
.site-footer{
  position:relative;
  margin-top:90px;
  color:#efe6f7;
}

/* silhouette of chips / traces rising out of the page */
.footer-skyline{
  display:block;
  width:100%;
  line-height:0;
  margin-bottom:-1px;              /* no seam between skyline and body */
}
.footer-skyline img{
  display:block;
  width:100%;
  height:auto;
}

/* body: starts on the colour the silhouette ends on, fades into the site bg (#241932) */
.footer-body{
  background:linear-gradient(180deg,#43295f 0%,#32204a 55%,#241932 100%);   /* ends on the site's own background purple */
  padding:14px 20px 30px;
  text-align:center;
}
.footer-brand{
  font-size:22px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
}
.footer-brand span{color:#f3b6ee}
.footer-nav{
  margin:16px 0 18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 26px;
}
.footer-nav a{
  color:#efe6f7;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.footer-nav a:hover{color:#f3b6ee}
.footer-contact{
  margin-top:14px;
  font-size:15px;
  line-height:1.9;
  color:#e3d6f0;
}
.footer-contact a{color:inherit;text-decoration:none}
.footer-contact a:hover{color:#f3b6ee}
.footer-copy{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:13px;
  color:#cdbbe0;
}

@media (max-width:700px){
  .footer-skyline img{height:170px;object-fit:cover;object-position:center bottom}
  .footer-nav{gap:6px 16px}
}



/* ===========================
          RESPONSIVE
   =========================== */
@media (max-width:900px){

  .hero{
    height:70vh;
  }


  .hero h1{
    font-size:38px;
  }

  .services{
    grid-template-columns:1fr;
  }

  .logo img{
    height:70px;
  }

  .nav a{
    margin-left:12px;
    font-size:14px;
  }

  .section-title h2{
    font-size:48px;
  }
}

@media (max-width:480px){

  .hero{
    height:60vh;
  }


  .hero h1{
    font-size:28px;
  }

  .logo img{
    height:60px;
  }
}


/* ===========================
   ABOUT + DROPDOWN styles added
   =========================== */

/* About paragraph styling */
.about-text {
  color: #e6dfe7;
  margin-top: 18px;
  line-height: 1.7;
  font-size: 18px;
}

/* About list */
.about-list {
  color: #e6dfe7;
  margin-top: 18px;
  line-height: 1.8;
  padding-left: 20px;
}

/* Dropdown Button (Client Testimonials) */
.dropdown-btn {
  width: 100%;
  background: #ffffff;
  color: #3b2b3e;
  padding: 18px;
  font-size: 22px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  transition: 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dropdown-btn:hover {
  background: #f3e8f0;
}

.dropdown-btn[aria-expanded="true"] {
  background: #f3e8f0;
}

/* Dropdown Content */
.dropdown-content {
  margin-top: 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.9,.2,1), padding .25s ease;
  background: rgba(255,255,255,0.03);
  padding: 0 20px;
  border-radius: 6px;
}

.dropdown-content.open {
  padding: 20px;
}

/* headings & text inside dropdown */
.dropdown-heading {
  color: #fff;
  margin-top: 0;
  font-size: 20px;
}

.dropdown-text {
  color: #e6dfe7;
  line-height: 1.7;
  margin-top: 8px;
}

/* Client list */
.client-list {
  color: #e6dfe7;
  margin-top: 10px;
  padding-left: 20px;
  line-height: 1.8;
}

.client-list li {
  margin-bottom: 8px;
}

/* small screen tweaks */
@media (max-width:700px){
  .dropdown-btn { font-size:18px; padding:14px; }
  .dropdown-content { padding: 0 14px; }
  .dropdown-content.open { padding: 14px; }
}


/* ===========================
   ACCESSIBILITY + GLOBAL
   =========================== */
img{max-width:100%;height:auto}
.skip-link{
  position:absolute;left:-999px;top:8px;
  background:#fff;color:#241932;padding:10px 16px;border-radius:6px;
  font-weight:700;z-index:200;text-decoration:none;
}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid #f3b6ee;outline-offset:3px}
.header :focus-visible{outline-color:var(--btn)}
main{display:block}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
html{scroll-behavior:smooth;scroll-padding-top:130px}

/* ===========================
   BUTTONS (one primary CTA style)
   =========================== */
.btn{
  display:inline-block;
  background:var(--btn);
  color:#fff;
  border:2px solid var(--btn);
  padding:14px 28px;
  border-radius:999px;
  font:inherit;
  font-size:18px;
  font-weight:700;
  letter-spacing:.5px;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-ghost{background:transparent;border-color:#d9c3ea;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero-cta{position:relative;z-index:3;margin-top:28px}
.hero{flex-direction:column}

/* ===========================
   MOBILE NAVIGATION
   =========================== */
.nav-toggle{
  display:none;
  background:none;border:2px solid #3b2b3e;border-radius:8px;
  width:46px;height:42px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:3px;background:#3b2b3e;border-radius:2px}
@media (max-width:900px){
  .header{padding:10px 0}
  .nav-toggle{display:flex}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid #e6e6e6;
    flex-direction:column;padding:12px 20px 20px;gap:4px;
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }
  .nav.open{display:flex}
  .nav a{margin:0;padding:12px 4px;font-size:18px;border-bottom:1px solid #f0e8f2}
  .nav a[aria-current="page"]{border-bottom:3px solid var(--btn);padding-bottom:12px}
  .nav a.nav-cta{margin-top:10px;text-align:center;border-bottom:0}
}

/* ===========================
   CONTACT + ENQUIRY FORM
   =========================== */
.contact .section-title,.contact-heading{padding-block:10px 20px;text-align:left}
.contact-heading{font-size:clamp(32px,5vw,48px)}
.contact .cols{align-items:flex-start}
.contact .col h3{margin-bottom:8px;color:var(--cream)}
.contact .col p{color:#e6dfe7}
.contact a{color:var(--link)}
.form-card{
  background:rgba(255,255,255,.06);
  padding:28px;border-radius:6px;
}
.form-card h3{font-size:26px;margin-bottom:6px}
.form-row{margin-top:16px}
.form-row label{display:block;font-weight:600;margin-bottom:6px;color:#fff}
.form-row .opt{font-weight:400;color:#cdbbe0}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=tel],.form-row textarea{
  width:100%;padding:12px 14px;border-radius:6px;
  border:2px solid #6b5a82;background:#fff;color:#241932;font:inherit;
}
.form-row textarea{min-height:130px;resize:vertical}
.form-row input[aria-invalid="true"],.form-row textarea[aria-invalid="true"]{border-color:#ff8aa0}
.field-error{display:block;color:#ffb3c1;font-size:14px}
.field-error:not(:empty){margin-top:5px}
.check-row label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:#e6dfe7}
.check-row input{margin-top:5px;width:18px;height:18px;flex:none}
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;min-height:1.4em;font-weight:600}
.form-status.ok{color:#b8f0c8}
.form-status.error{color:#ffb3c1}
.form-actions{margin-top:20px}
@media (max-width:800px){
  .contact .cols{flex-direction:column;gap:28px}
  .form-card{padding:20px;width:100%}
}

/* ===========================
   COOKIE BANNER
   =========================== */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:300;
  max-width:880px;margin:0 auto;
  background:#fff;color:#241932;
  padding:18px 22px;border-radius:10px;
  box-shadow:0 10px 36px rgba(0,0,0,.45);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.cookie-banner p{flex:1 1 320px;font-size:15px;line-height:1.5;color:#241932}
.cookie-banner a{color:var(--btn);font-weight:600}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner .btn{padding:10px 20px;font-size:15px}
.cookie-banner .btn-ghost{color:#241932;border-color:#6b5a82}
.cookie-banner .btn-ghost:hover{background:#f3e8f0;border-color:#241932;color:#241932}

/* ===========================
   LEGAL PAGES + 404
   =========================== */
.legal{max-width:860px;padding-block:50px 20px}
.legal h1{font-size:clamp(34px,5vw,52px);line-height:1.15;margin-bottom:6px}
.legal .updated{color:#cdbbe0;margin-bottom:26px}
.legal h2{font-size:24px;margin:34px 0 10px;color:var(--cream)}
.legal p,.legal li{color:#e6dfe7;line-height:1.75;margin-top:10px}
.legal ul{padding-left:22px}
.legal a{color:var(--link)}
.legal table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.legal th,.legal td{text-align:left;padding:10px 12px;border:1px solid #4a3a60;vertical-align:top;color:#e6dfe7}
.legal th{background:rgba(255,255,255,.08);color:#fff}
.legal .table-wrap{overflow-x:auto}
.notfound{text-align:center;padding-block:90px 40px}
.notfound .code{font-size:clamp(90px,22vw,200px);font-weight:900;line-height:1;color:#7d5fae;letter-spacing:6px}
.notfound h1{font-size:clamp(28px,5vw,44px);margin:10px 0}
.notfound p{color:#e6dfe7;max-width:520px;margin:10px auto 26px}

/* footer legal links */
.footer-legal{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;font-size:14px}
.footer-legal a,.footer-legal button{
  color:#efe6f7;background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;
}
.footer-legal a:hover,.footer-legal button:hover{color:#f3b6ee}

/* ===========================
   EXTRA MOBILE FIXES
   =========================== */
@media (max-width:900px){
  .container{padding-inline:16px}
  .card{min-height:0;padding:20px}
  .card h3{font-size:24px}
  .section-title{padding-block:44px 16px}
  .underline{height:8px;width:110px}
  .hero h1{letter-spacing:1px}
}
@media (max-width:480px){
  .hero{min-height:420px}
  .btn{font-size:16px;padding:12px 22px}
  .logo img{height:54px}
}

/* ===========================
   ABOUT HIGHLIGHTS + DISCLAIMERS
   =========================== */
.about-highlights{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:34px;
  padding:0;
}
.about-highlights li{
  background:rgba(255,255,255,.06);
  border-left:4px solid var(--btn);
  border-radius:4px;
  padding:16px 18px;
  color:#e6dfe7;
  line-height:1.45;
}
.about-highlights strong{display:block;font-size:26px;color:#fff;margin-bottom:2px}
.about-note{
  margin-top:30px;
  padding:16px 18px;
  border:1px solid #4a3a60;
  border-radius:6px;
  color:#cdbbe0;
  font-size:14px;
  line-height:1.6;
}
.footer-disclaimer{
  max-width:780px;
  margin:18px auto 0;
  font-size:12.5px;
  line-height:1.55;
  color:#cdbbe0;
}
@media (max-width:700px){
  .about-highlights{grid-template-columns:1fr}
}

.about-heading{font-size:clamp(34px,5vw,52px);line-height:1.15;letter-spacing:1px;color:#fff;text-align:left}
.about-heading + .underline{margin-top:14px;margin-bottom:22px}