/* Budget Web Design London — midnight navy, warm cream, burnt sienna */
:root{
  --midnight:#1a2b45;
  --navy:#253351;
  --cream:#f7f4ed;
  --sienna:#b45d3c;
  --sienna-dark:#8c3e21;
  --gold:#d4a855;
  --ink:#1e2126;
  --muted:#5a616b;
  --border:#e0dbd1;
  --cloud:#ffffff;
  --max-width:70rem;
  font-size:100%;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;font-size:1.05rem;}
a{color:var(--sienna);text-decoration:underline;text-underline-offset:.2em;}
a:hover,a:focus{color:var(--sienna-dark);}
:focus{outline:2px solid var(--gold);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:1rem;top:1rem;z-index:100;background:var(--midnight);color:#fff;padding:.5rem 1rem;border-radius:.25rem;}
.container{width:min(92%, var(--max-width));margin-inline:auto;}
img{max-width:100%;height:auto;}

.site-ticker{background:var(--midnight);color:#fff;font-size:.9rem;padding:.5rem 0;text-align:center;}
.site-ticker a{color:var(--gold);font-weight:700;}
.site-ticker a:hover,.site-ticker a:focus{color:#fff;}

.site-header{background:var(--cloud);color:var(--ink);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 0;}
.brand img{display:block;height:auto;}
.main-nav ul{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap;margin:0;padding:0;align-items:center;}
.main-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;}
.main-nav a:hover,.main-nav a:focus{color:var(--sienna);text-decoration:underline;text-underline-offset:.25em;}

main{padding:0 0 2.5rem;}
.page-header,.hero .container{padding:3.5rem 0;}
.hero{background:linear-gradient(120deg, var(--cloud) 0%, #ede7dd 100%);border-bottom:1px solid var(--border);}
.hero .container{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
@media(min-width:55rem){.hero .container{grid-template-columns:1.1fr .9fr;}}
.hero h1,.page h1{color:var(--midnight);font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.1;margin:0 0 1rem;letter-spacing:-.02em;}
.page-header h1{color:var(--midnight);font-size:clamp(2rem,5vw,2.8rem);line-height:1.1;margin:0 0 1rem;}
.hero .lead,.lead{font-size:1.2rem;color:var(--muted);max-width:60ch;margin:0 0 1.75rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}
.hero-image img{border-radius:.75rem;box-shadow:0 16px 50px rgba(31,36,48,.12);}

.btn{display:inline-block;background:var(--sienna);color:#fff;font-weight:700;padding:.85rem 2rem;border-radius:.5rem;text-decoration:none;border:2px solid var(--sienna);transition:.15s ease;}
.btn:hover,.btn:focus{background:var(--cloud);color:var(--sienna);border-color:var(--sienna);}
.btn-secondary{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-secondary:hover,.btn-secondary:focus{background:var(--cloud);color:var(--navy);}

section,.section{margin:0 0 2.5rem;padding:2.5rem 0;}
section h2,.page h2{color:var(--midnight);font-size:1.75rem;margin:0 0 1rem;}
section h2[id]{scroll-margin-top:5rem;}
.page h3{color:var(--navy);font-size:1.25rem;margin:2rem 0 .5rem;}
.direct-answer{background:var(--cloud);border-left:5px solid var(--gold);padding:1.5rem 1.75rem;border-radius:0 .5rem .5rem 0;}
.direct-answer h2{margin-top:0;}
.direct-answer p{margin:0;}

.service-grid,.proof-grid,.audience-grid,.work-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));padding:2rem 0;}
.card{background:var(--cloud);border:1px solid var(--border);padding:1.5rem;border-radius:.75rem;box-shadow:0 2px 8px rgba(31,36,48,.04);transition:.15s ease;}
.card:hover{box-shadow:0 6px 20px rgba(31,36,48,.08);transform:translateY(-2px);}
.card h3{margin-top:0;color:var(--sienna);}
.package-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:2rem 0 0;}
.package-card{background:var(--cloud);color:var(--ink);padding:1.75rem;border-radius:.75rem;border-top:5px solid var(--navy);box-shadow:0 4px 12px rgba(31,36,48,.06);}
.package-card.featured{border-top-color:var(--gold);transform:scale(1.02);}
.package-card h3{color:var(--navy);margin-top:0;}
.package-card .price{font-size:2.2rem;font-weight:800;color:var(--sienna);}
.package-card small{display:block;margin:.5rem 0 0;color:var(--muted);}
.package-card ul{padding-left:1.2rem;}
.package-card li{margin:.35rem 0;}

.faq{border-bottom:1px solid var(--border);padding:1rem 0;}
.faq summary{font-weight:700;cursor:pointer;color:var(--sienna);list-style:none;}
.faq p{margin:.5rem 0 0;}
.cta-section{background:var(--midnight);color:#fff;border-radius:.75rem;padding:2.5rem;text-align:center;margin:3rem 0;}
.cta-section h2{margin-top:0;color:#fff;}
.cta-section .btn{background:#fff;color:var(--midnight);border-color:#fff;}
.cta-section .btn:hover,.cta-section .btn:focus{background:var(--gold);color:var(--midnight);border-color:var(--gold);}
.cta-section .btn-secondary{background:transparent;color:#fff;border-color:#fff;}
.cta-section .btn-secondary:hover,.cta-section .btn-secondary:focus{background:#fff;color:var(--midnight);}

.form-group{margin-bottom:1.25rem;}
label{display:block;font-weight:700;margin:0 0 .35rem;color:var(--midnight);}
input,textarea,select{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:.5rem;font-size:1rem;background:var(--cloud);}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}
button[type=submit]{cursor:pointer;background:var(--sienna);color:#fff;border:0;border-radius:.5rem;padding:.85rem 2rem;font-weight:700;}
button[type=submit]:hover,button[type=submit]:focus{background:var(--sienna-dark);color:#fff;}

.site-footer{background:var(--ink);color:#fff;padding:3rem 0 1.5rem;margin-top:2rem;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem;}
.site-footer a{color:var(--gold);}
.site-footer a:hover,.site-footer a:focus{color:#fff;}
.sub-footer{border-top:1px solid rgba(255,255,255,.25);margin-top:2rem;padding-top:1rem;font-size:.9rem;}

.breadcrumbs ol{list-style:none;display:flex;gap:.75rem;flex-wrap:wrap;padding:0;margin:.75rem 0;font-size:.9rem;}
.breadcrumbs li:not(:last-child)::after{content:">";margin-left:.75rem;color:var(--muted);}
.blog-list article{border-bottom:1px solid var(--border);padding:1.5rem 0;}
.blog-list h2{font-size:1.45rem;margin:0 0 .3rem;}
.blog-list a{text-decoration:none;color:var(--midnight);}
.blog-list a:hover,.blog-list a:focus{text-decoration:underline;color:var(--sienna);}
.blog-list time{color:var(--muted);font-size:.9rem;}

.toc{background:var(--cloud);padding:1.25rem 1.5rem;border-radius:.5rem;border-left:5px solid var(--gold);margin:1.5rem 0;}
.toc h2{margin-top:0;font-size:1.25rem;color:var(--midnight);}
.toc ul{padding-left:1.25rem;}
.toc li{margin:.35rem 0;}

.contact-layout{display:grid;gap:2rem;grid-template-columns:1fr;}
@media(min-width:55rem){.contact-layout{grid-template-columns:1fr 1.2fr;}}

.whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;background:#25d366;border-radius:50%;width:3.5rem;height:3.5rem;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:100;}
.whatsapp-float img{width:2rem;height:2rem;}

@media(max-width:40rem){
  .main-nav ul{gap:1rem;}
  .page-header,.hero .container{padding:2.5rem 0;}
  .package-card.featured{transform:none;}
}

.page-header, .blog-single .toc, .blog-single .article-content, .blog-single .article-footer, .service-page > section, .service-page > .section {
  width:min(92%, var(--max-width));
  margin-inline:auto;
}
.blog-archive .page-header, .about .container, .contact .container, .work .container, .legal .container, .thank-you .container, .error-404 .container, .home .container {
  width:min(92%, var(--max-width));
  margin-inline:auto;
}

/* Animated £150 campaign badge */
.campaign-badge{position:fixed;bottom:1.5rem;left:1.5rem;width:5rem;height:5rem;border-radius:50%;background:var(--sienna);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:100;animation:campaignPulse 2.5s ease-in-out infinite;transition:transform .15s ease;}
.campaign-badge strong{font-size:1.3rem;line-height:1;}
.campaign-badge span{font-size:.6rem;line-height:1;text-transform:uppercase;letter-spacing:.05em;}
.campaign-badge small{font-size:.5rem;line-height:1.1;display:block;max-width:85%;}
.campaign-badge:hover,.campaign-badge:focus{transform:scale(1.08);}
@keyframes campaignPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}90%{transform:scale(1.02);}}

.hero-image img{width:100%;height:auto;display:block;}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.6rem;display:block;margin:0 0 1rem;}
.blog-list img{width:100%;max-width:40rem;aspect-ratio:16/9;object-fit:cover;border-radius:.75rem;display:block;margin:0 0 .8rem;}
.article-hero{width:100%;height:auto;border-radius:.75rem;margin:0 0 1.4rem;display:block;}