/*
Theme Name: Viskonti
Theme URI: https://viskonti.co.uk/
Author: Web Level Up
Author URI: https://weblevelup.co.uk/
Description: Custom lightweight, SEO-first theme for Viskonti Ltd — builders, painting & decorating, cleaning and fit-out across Cheltenham, London & Gloucestershire. Zero page-builder bloat, fast Core Web Vitals.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: viskonti
*/

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}

/* ============ TOKENS ============ */
:root{
  --ink:#0e2338;        /* deep navy — headings / dark sections */
  --navy:#16324c;
  --navy-800:#112a41;
  --accent:#f5a524;     /* amber — CTAs, highlights */
  --accent-600:#e08e0b;
  --accent-ink:#3a2a05;
  --text:#33414f;
  --muted:#647587;
  --line:#e5eaf0;
  --bg:#ffffff;
  --alt:#f5f8fb;
  --alt2:#eef3f8;
  --ok:#16a34a;
  --star:#f59e0b;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 24px rgba(14,35,56,.08);
  --shadow-lg:0 20px 50px rgba(14,35,56,.16);
  --container:1180px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ============ BASE ============ */
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1rem}
strong{color:var(--ink);font-weight:700}

.vk-container{max-width:var(--container);margin:0 auto;padding:0 20px}
.vk-section{padding:64px 0}
.vk-section--tight{padding:44px 0}
.vk-section--alt{background:var(--alt)}
.vk-section--ink{background:var(--ink);color:#cdd8e4}
.vk-section--ink h1,.vk-section--ink h2,.vk-section--ink h3{color:#fff}
.vk-narrow{max-width:820px;margin-inline:auto}
.vk-center{text-align:center}
.vk-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-600);margin-bottom:12px}
.vk-section--ink .vk-eyebrow{color:var(--accent)}
.vk-lead{font-size:1.15rem;color:var(--muted)}
.vk-mt{margin-top:28px}

/* ============ BUTTONS ============ */
.vk-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-sm);
  border:2px solid var(--accent);cursor:pointer;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(245,165,36,.32);
}
.vk-btn:hover{background:var(--accent-600);border-color:var(--accent-600);transform:translateY(-2px)}
.vk-btn--lg{padding:1.05rem 2rem;font-size:1.08rem}
.vk-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.vk-btn--ghost:hover{background:var(--alt);border-color:var(--muted);color:var(--ink)}
.vk-section--ink .vk-btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.vk-section--ink .vk-btn--ghost:hover{background:rgba(255,255,255,.08)}
.vk-btn--phone{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}
.vk-btn--phone:hover{background:var(--alt)}

/* ============ HEADER ============ */
.vk-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.vk-header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.vk-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em}
.vk-logo b{color:var(--accent-600)}
.vk-logo__mark{width:34px;height:34px;flex:0 0 auto}
.vk-nav{display:none;align-items:center;gap:26px}
.vk-nav a{font-weight:600;font-size:.96rem;color:var(--ink);padding:6px 0;position:relative}
.vk-nav a:hover{color:var(--accent-600)}
.vk-header__cta{display:none;align-items:center;gap:12px}
.vk-header__tel{font-weight:800;color:var(--ink);white-space:nowrap}
.vk-header__tel span{color:var(--muted);font-weight:600;font-size:.72rem;display:block;letter-spacing:.04em;text-transform:uppercase}
.vk-burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.vk-burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
#vk-navtoggle{display:none}
#vk-navtoggle:checked~.vk-mobilenav{display:block}
.vk-mobilenav{display:none;border-top:1px solid var(--line);padding:14px 0 22px;background:#fff}
.vk-mobilenav a{display:block;padding:12px 20px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--alt)}
.vk-mobilenav .vk-btn{margin:16px 20px 0;justify-content:center;display:flex}

/* ============ HERO ============ */
.vk-hero{position:relative;background:var(--ink);color:#dbe4ee;overflow:hidden}
.vk-hero__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.28}
.vk-hero__grad{position:absolute;inset:0;background:linear-gradient(120deg,rgba(14,35,56,.96) 0%,rgba(14,35,56,.78) 55%,rgba(14,35,56,.55) 100%)}
.vk-hero__in{position:relative;padding:68px 0 72px;max-width:720px}
.vk-hero h1{color:#fff;margin-bottom:18px}
.vk-hero__sub{font-size:1.2rem;color:#c4d2e0;margin-bottom:26px}
.vk-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.vk-hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.94rem;color:#aebdcc}
.vk-hero__trust b{color:#fff}
.vk-tick{display:inline-flex;align-items:center;gap:7px}
.vk-tick::before{content:"";width:18px;height:18px;flex:0 0 auto;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}

/* trust strip under hero */
.vk-trustbar{background:var(--navy-800);color:#b9c7d6}
.vk-trustbar__in{display:flex;flex-wrap:wrap;gap:18px 34px;justify-content:center;padding:16px 0;font-weight:600;font-size:.92rem;text-align:center}
.vk-trustbar__in span{display:inline-flex;align-items:center;gap:8px}

/* ============ CARDS / SERVICES ============ */
.vk-grid{display:grid;gap:22px}
.vk-grid--2{grid-template-columns:1fr}
.vk-grid--3{grid-template-columns:1fr}
.vk-grid--4{grid-template-columns:1fr 1fr}
.vk-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.vk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.vk-card__ic{width:52px;height:52px;border-radius:12px;background:rgba(245,165,36,.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.6rem}
.vk-card h3{margin-bottom:8px}
.vk-card p{color:var(--muted);font-size:.98rem;margin-bottom:14px}
.vk-card__link{font-weight:700;color:var(--accent-600);display:inline-flex;align-items:center;gap:6px}
.vk-card--service{display:flex;flex-direction:column}
.vk-card--service .vk-card__link{margin-top:auto}

/* feature list with ticks */
.vk-list{list-style:none;display:grid;gap:12px}
.vk-list li{position:relative;padding-left:32px;color:var(--text)}
.vk-list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:rgba(22,163,74,.14);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;background:var(--ok)}
.vk-list li strong{display:block}

/* ============ PROCESS ============ */
.vk-steps{display:grid;gap:22px;counter-reset:step}
.vk-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
.vk-step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:24px;width:40px;height:40px;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 6px 14px rgba(245,165,36,.35)}
.vk-step h3{margin:10px 0 8px}
.vk-step p{color:var(--muted);font-size:.96rem;margin:0}

/* ============ STATS ============ */
.vk-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:center}
.vk-stat__n{font-size:clamp(2.2rem,6vw,3rem);font-weight:800;color:var(--accent);line-height:1}
.vk-stat__l{margin-top:8px;font-weight:600;color:#c4d2e0;font-size:.95rem}

/* ============ TESTIMONIALS ============ */
.vk-quotes{display:grid;gap:22px;grid-template-columns:1fr}
.vk-quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.vk-quote__stars{color:var(--star);letter-spacing:2px;margin-bottom:10px;font-size:1.05rem}
.vk-quote p{color:var(--text);font-style:italic;margin-bottom:14px}
.vk-quote__by{font-weight:700;color:var(--ink);font-size:.95rem}
.vk-quote__by span{display:block;color:var(--muted);font-weight:500;font-size:.85rem}

/* ============ LOCATIONS ============ */
.vk-locs{display:flex;flex-wrap:wrap;gap:10px}
.vk-locs a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.92rem;color:var(--ink);transition:.15s}
.vk-locs a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ============ FAQ ============ */
.vk-faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.vk-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 20px}
.vk-faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.vk-faq summary::-webkit-details-marker{display:none}
.vk-faq summary::after{content:"+";font-size:1.5rem;color:var(--accent-600);font-weight:400;line-height:1}
.vk-faq details[open] summary::after{content:"\2013"}
.vk-faq details>div{padding:0 0 18px;color:var(--muted)}

/* ============ CTA BAND ============ */
.vk-cta{background:linear-gradient(120deg,var(--ink),var(--navy));color:#fff;border-radius:20px;padding:44px 32px;text-align:center}
.vk-cta h2{color:#fff;margin-bottom:12px}
.vk-cta p{color:#c4d2e0;max-width:560px;margin:0 auto 22px}
.vk-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============ PROSE (content pages/blog) ============ */
.vk-prose{max-width:800px}
.vk-prose h2{margin:36px 0 14px}
.vk-prose h3{margin:26px 0 10px}
.vk-prose p{margin-bottom:1.1rem}
.vk-prose ul,.vk-prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.vk-prose li{margin-bottom:.5rem}
.vk-prose a{color:var(--accent-600);font-weight:600;text-decoration:underline}
.vk-prose img{border-radius:var(--radius);margin:1.2rem 0}
.vk-prose blockquote{border-left:4px solid var(--accent);background:var(--alt);margin:1.4rem 0;padding:14px 20px;border-radius:0 10px 10px 0;color:var(--ink)}

/* ============ PAGE HERO (interior) ============ */
.vk-phero{background:var(--ink);color:#c8d4e1;position:relative;overflow:hidden}
.vk-phero__in{position:relative;padding:56px 0}
.vk-phero h1{color:#fff;max-width:820px}
.vk-phero__crumbs{font-size:.85rem;color:#9fb0c1;margin-bottom:14px}
.vk-phero__crumbs a:hover{color:#fff}
.vk-phero__sub{margin-top:14px;font-size:1.12rem;color:#c4d2e0;max-width:720px}

/* ============ FORMS (Formidable) ============ */
.vk-formwrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.frm_forms input[type=text],.frm_forms input[type=email],.frm_forms input[type=tel],.frm_forms input[type=url],.frm_forms textarea,.frm_forms select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;background:#fff;transition:border .15s}
.frm_forms input:focus,.frm_forms textarea:focus,.frm_forms select:focus{outline:none;border-color:var(--accent)}
.frm_forms .frm_submit button,.frm_forms .frm_button_submit{
  background:var(--accent);color:var(--accent-ink);border:0;font-weight:700;padding:.85rem 1.6rem;border-radius:var(--radius-sm);cursor:pointer}
.frm_forms .frm_submit button:hover{background:var(--accent-600)}
.frm_forms label{font-weight:600;color:var(--ink)}

/* ============ FOOTER ============ */
.vk-footer{background:var(--ink);color:#a7b7c7;padding:56px 0 0}
.vk-footer a{color:#c0cddb}
.vk-footer a:hover{color:#fff}
.vk-footer__grid{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:36px}
.vk-footer__brand .vk-logo{color:#fff;margin-bottom:12px}
.vk-footer__brand .vk-logo b{color:var(--accent)}
.vk-footer__brand p{color:#93a5b6;font-size:.95rem}
.vk-footer h4{color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:.02em}
.vk-footer ul{list-style:none;display:grid;gap:9px;font-size:.93rem}
.vk-footer__contact{display:grid;gap:10px;font-size:.95rem}
.vk-footer__contact a{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff}
.vk-footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.85rem;color:#7e91a4}
.vk-footer__bar a{color:#7e91a4}

/* ============ RESPONSIVE ============ */
@media(min-width:600px){
  .vk-grid--3{grid-template-columns:1fr 1fr}
  .vk-stats{grid-template-columns:repeat(4,1fr)}
  .vk-quotes{grid-template-columns:1fr 1fr}
  .vk-steps{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .vk-nav{display:flex}
  .vk-header__cta{display:flex}
  .vk-burger{display:none}
  .vk-grid--2{grid-template-columns:1fr 1fr}
  .vk-grid--3{grid-template-columns:repeat(3,1fr)}
  .vk-grid--4{grid-template-columns:repeat(4,1fr)}
  .vk-quotes{grid-template-columns:repeat(3,1fr)}
  .vk-steps{grid-template-columns:repeat(4,1fr)}
  .vk-footer__grid{grid-template-columns:2fr 1fr 1fr 1.3fr}
  .vk-hero__in{padding:96px 0 100px}
  .vk-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
}