/* ============================================================
   QuickVolt Circuit — design tokens
   ============================================================ */
:root{
  --bg:#120F0C;
  --surface:#1E1811;
  --surface-raised:#241D15;
  --ink:#F7F3EA;
  --ink-muted:#B7ADA0;
  --accent:#FF7A1A;
  --accent-soft:#FFB347;
  --accent-deep:#E85D04;
  --line:rgba(255,122,26,.2);
  --line-soft:rgba(247,243,234,.1);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Manrope', sans-serif;

  --xs:8px; --sm:16px; --md:32px; --lg:64px; --xl:120px;
  --r-sm:6px; --r-md:12px; --r-pill:999px; --r-clip:16px;

  --container:1240px;
  --shadow-warm:0 20px 40px -20px rgba(255,122,26,.25);
}

@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

/* ============================================================
   Reset — :where() so component rules always win
   ============================================================ */
:where(*,*::before,*::after){box-sizing:border-box;margin:0;padding:0;}
:where(html){scroll-behavior:smooth;}
:where(body){background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
:where(img,svg){display:block;max-width:100%;}
:where(a){color:inherit;text-decoration:none;}
:where(ul,ol){list-style:none;}
:where(button){font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
:where(input,textarea){font:inherit;color:inherit;}
:where(h1,h2,h3,h4){font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.01em;}

@media (prefers-reduced-motion: reduce){
  :where(*,*::before,*::after){animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ============================================================
   Layout helpers
   ============================================================ */
.qv-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sm);}
@media (min-width:640px){.qv-container{padding-inline:var(--md);}}

.qv-section{padding-block:var(--xl);position:relative;}
.qv-section--tight{padding-block:var(--lg);}
.qv-eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sm);}

.qv-grid{display:grid;gap:var(--md);}

/* Reveal-on-scroll: degrade to visible if JS never runs */
.qv-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.js .qv-reveal{opacity:0;}
.qv-reveal.is-visible{opacity:1;transform:none;}

/* ============================================================
   Buttons
   ============================================================ */
.qv-btn{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.7em;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:700;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.qv-btn--primary{background:linear-gradient(135deg,var(--accent-soft),var(--accent));color:#1a1108;}
.qv-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-warm);}
.qv-btn--ghost{border:1px solid var(--line-soft);color:var(--ink);}
.qv-btn--ghost:hover{border-color:var(--accent);color:var(--accent-soft);}
.qv-phone-link{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:.01em;}
.qv-phone-link:hover{color:var(--accent-soft);}

/* ============================================================
   Header / Nav
   ============================================================ */
.qv-header{position:sticky;top:0;z-index:100;background:rgba(18,15,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.qv-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--md);padding-block:14px;}
.qv-logo img{height:34px;width:auto;display:block;}
.qv-nav{display:none;}
.qv-nav ul{display:flex;align-items:center;gap:28px;}
.qv-nav a{font-size:.92rem;font-weight:500;color:var(--ink-muted);transition:color .2s ease;}
.qv-nav a:hover, .qv-nav a.is-active{color:var(--ink);}
.qv-header__actions{display:flex;align-items:center;gap:22px;}
.qv-header__phone{display:none;}
.qv-burger{display:flex;flex-direction:column;gap:5px;width:26px;padding:6px 0;}
.qv-burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}

@media (min-width:960px){
  .qv-nav{display:block;}
  .qv-header__phone{display:inline-flex;}
  .qv-burger{display:none;}
}

.qv-mobile-panel{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;padding:var(--md);transform:translateX(100%);transition:transform .35s ease;}
.qv-mobile-panel.is-open{transform:translateX(0);}
.qv-mobile-panel__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--lg);}
.qv-mobile-panel ul{display:flex;flex-direction:column;gap:22px;}
.qv-mobile-panel a{font-family:var(--font-display);font-size:1.6rem;font-weight:700;}
.qv-mobile-panel__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;}

/* ============================================================
   Hero
   ============================================================ */
.qv-hero{position:relative;padding-block:var(--lg) var(--xl);overflow:hidden;}
.qv-hero__grid{display:grid;gap:var(--lg);align-items:center;}
.qv-hero__eyebrow-row{display:flex;align-items:center;gap:10px;margin-bottom:var(--sm);}
.qv-hero h1{font-size:clamp(2.4rem,6vw,4.1rem);max-width:12ch;}
.qv-hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--accent-soft),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.qv-hero p{margin-top:var(--sm);color:var(--ink-muted);font-size:1.08rem;max-width:46ch;line-height:1.7;}
.qv-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:var(--md);}
.qv-hero__visual{position:relative;aspect-ratio:1/1;justify-self:center;width:100%;max-width:440px;}
.qv-hero__panel{position:absolute;inset:6% 2% 2% 8%;background:var(--surface);border:1px solid var(--line);clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,0 100%);}
.qv-hero__glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.35),transparent 70%);filter:blur(10px);top:-10%;right:-10%;}
.qv-hero__spark{position:absolute;inset:0;}

@media (min-width:860px){
  .qv-hero__grid{grid-template-columns:1.1fr .9fr;}
}

/* ============================================================
   Trust bar
   ============================================================ */
.qv-trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.qv-trust__row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--md);padding-block:var(--md);}
.qv-trust__item{display:flex;align-items:center;gap:12px;}
.qv-trust__item svg{flex:none;width:26px;height:26px;color:var(--accent);}
.qv-trust__item span{font-size:.92rem;font-weight:600;color:var(--ink);}
@media (min-width:720px){.qv-trust__row{grid-template-columns:repeat(4,1fr);}}

/* ============================================================
   Bento services grid
   ============================================================ */
.qv-bento{display:grid;gap:18px;grid-template-columns:1fr;}
.qv-bento__card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);clip-path:polygon(0 0,calc(100% - var(--r-clip)) 0,100% var(--r-clip),100% 100%,0 100%);padding:30px 26px;display:flex;flex-direction:column;gap:14px;transition:transform .3s ease, border-color .3s ease;}
.qv-bento__card:hover{transform:translateY(-4px);border-color:var(--accent);}
.qv-bento__icon{width:44px;height:44px;color:var(--accent);}
.qv-bento__card h3{font-size:1.15rem;}
.qv-bento__card p{color:var(--ink-muted);font-size:.92rem;line-height:1.6;}
.qv-bento__card a{margin-top:auto;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-soft);}

.qv-bento__card--lg{grid-column:span 1;}

@media (min-width:720px){
  .qv-bento{grid-template-columns:repeat(4,1fr);}
  .qv-bento__card--lg{grid-column:span 2;}
}

/* ============================================================
   Why us — asymmetric split
   ============================================================ */
.qv-why{display:grid;gap:var(--lg);}
.qv-why__lead h2{font-size:clamp(1.9rem,4vw,2.6rem);max-width:14ch;}
.qv-why__lead p{margin-top:var(--sm);color:var(--ink-muted);max-width:48ch;line-height:1.75;}
.qv-why__list{display:flex;flex-direction:column;}
.qv-why__list li{display:flex;gap:18px;padding-block:20px;border-top:1px solid var(--line-soft);}
.qv-why__list li:last-child{border-bottom:1px solid var(--line-soft);}
.qv-why__num{font-family:var(--font-display);font-weight:700;color:var(--accent);font-size:1.1rem;flex:none;width:2ch;}
.qv-why__list h3{font-size:1.05rem;margin-bottom:4px;}
.qv-why__list p{color:var(--ink-muted);font-size:.92rem;line-height:1.6;}

@media (min-width:860px){
  .qv-why{grid-template-columns:.85fr 1.15fr;}
}

/* ============================================================
   Portfolio / Our Work
   ============================================================ */
.qv-work-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:640px){.qv-work-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.qv-work-grid{grid-template-columns:repeat(3,1fr);}}

.qv-work-tile{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);}
.qv-work-tile__art{position:absolute;inset:0;}
.qv-work-tile__label{position:absolute;left:18px;bottom:16px;right:18px;}
.qv-work-tile__label span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(247,243,234,.75);margin-bottom:4px;}
.qv-work-tile__label strong{font-family:var(--font-display);font-size:1.05rem;color:#fff;}

.qv-work-note{display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:.85rem;margin-top:var(--md);}
.qv-work-note svg{width:18px;height:18px;color:var(--accent);flex:none;}

/* ============================================================
   CTA banner
   ============================================================ */
.qv-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--lg) var(--md);text-align:left;display:flex;flex-direction:column;gap:22px;align-items:flex-start;position:relative;overflow:hidden;}
.qv-cta h2{font-size:clamp(1.7rem,4vw,2.3rem);max-width:16ch;}
.qv-cta p{color:var(--ink-muted);max-width:44ch;}
@media (min-width:760px){
  .qv-cta{flex-direction:row;align-items:center;justify-content:space-between;}
  .qv-cta__actions{flex:none;}
}

/* ============================================================
   Contact form
   ============================================================ */
.qv-contact{display:grid;gap:var(--lg);}
@media (min-width:900px){.qv-contact{grid-template-columns:.85fr 1.15fr;}}

.qv-contact__info h2{font-size:clamp(1.7rem,4vw,2.2rem);max-width:14ch;}
.qv-contact__info p{color:var(--ink-muted);margin-top:var(--sm);max-width:40ch;line-height:1.7;}
.qv-contact__detail{display:flex;gap:14px;align-items:flex-start;margin-top:22px;}
.qv-contact__detail svg{width:22px;height:22px;color:var(--accent);flex:none;margin-top:2px;}
.qv-contact__detail strong{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:2px;}
.qv-contact__detail span, .qv-contact__detail a{font-weight:600;}

.qv-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--md);box-shadow:var(--shadow-warm);}
.qv-field{margin-bottom:18px;}
.qv-field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:8px;}
.qv-field label .req{color:var(--accent);}
.qv-field input, .qv-field textarea{width:100%;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:13px 14px;color:var(--ink);font-size:.95rem;transition:border-color .2s ease;}
.qv-field input:focus, .qv-field textarea:focus{outline:none;border-color:var(--accent);}
.qv-field textarea{min-height:120px;resize:vertical;}
.qv-field__error{display:none;color:#ff8a8a;font-size:.78rem;margin-top:6px;}
.qv-field.has-error input, .qv-field.has-error textarea{border-color:#ff8a8a;}
.qv-field.has-error .qv-field__error{display:block;}
.qv-form__foot{color:var(--ink-muted);font-size:.85rem;margin-top:6px;line-height:1.6;}
.qv-form__hp{position:absolute;left:-9999px;top:-9999px;}
.qv-form__status{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);font-size:.9rem;display:none;}
.qv-form__status.is-success{display:block;background:rgba(255,122,26,.12);border:1px solid var(--line);color:var(--ink);}
.qv-form__status.is-error{display:block;background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.4);color:#ffb3b3;}
.qv-form button[type=submit]{width:100%;justify-content:center;margin-top:4px;}
.qv-form button[type=submit][disabled]{opacity:.6;cursor:progress;}

/* ============================================================
   Footer
   ============================================================ */
.qv-footer{border-top:1px solid var(--line-soft);padding-block:var(--lg) var(--md);}
.qv-footer__grid{display:grid;gap:var(--lg);}
.qv-footer__brand img{height:30px;margin-bottom:14px;}
.qv-footer__brand p{color:var(--ink-muted);font-size:.9rem;max-width:32ch;line-height:1.7;}
.qv-footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-muted);margin-bottom:16px;}
.qv-footer ul{display:flex;flex-direction:column;gap:11px;}
.qv-footer a{font-size:.92rem;color:var(--ink);}
.qv-footer a:hover{color:var(--accent-soft);}
.qv-footer__bottom{margin-top:var(--lg);padding-top:var(--sm);border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px;color:var(--ink-muted);font-size:.8rem;}
@media (min-width:640px){.qv-footer__bottom{flex-direction:row;justify-content:space-between;}}
@media (min-width:640px){.qv-footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}}

/* ============================================================
   Page header (inner pages)
   ============================================================ */
.qv-pagehead{padding-block:var(--lg) var(--md);border-bottom:1px solid var(--line-soft);}
.qv-pagehead h1{font-size:clamp(2rem,5vw,3rem);max-width:16ch;}
.qv-pagehead p{color:var(--ink-muted);margin-top:14px;max-width:50ch;}

/* Services page */
.qv-service-block{padding-block:var(--lg);border-top:1px solid var(--line-soft);display:grid;gap:var(--md);}
.qv-service-block:first-of-type{border-top:none;}
.qv-service-block__head h2{font-size:1.7rem;}
.qv-service-block__head p{color:var(--ink-muted);margin-top:10px;max-width:52ch;}
.qv-service-block__list{display:grid;gap:10px 24px;grid-template-columns:1fr;}
.qv-service-block__list li{position:relative;padding-left:20px;color:var(--ink-muted);font-size:.94rem;line-height:1.6;}
.qv-service-block__list li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--accent);}
@media (min-width:760px){
  .qv-service-block{grid-template-columns:.8fr 1.2fr;}
  .qv-service-block__list{grid-template-columns:repeat(2,1fr);}
}

/* About page */
.qv-about-lead{display:grid;gap:var(--lg);align-items:start;}
@media (min-width:860px){.qv-about-lead{grid-template-columns:1.1fr .9fr;}}
.qv-about-lead p{color:var(--ink-muted);line-height:1.8;margin-bottom:16px;font-size:1.02rem;}
.qv-about-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;}
.qv-about-card h3{font-size:1rem;margin-bottom:14px;}
.qv-about-card ul{display:flex;flex-direction:column;gap:12px;}
.qv-about-card li{color:var(--ink-muted);font-size:.9rem;display:flex;gap:10px;}
.qv-about-card li strong{color:var(--ink);}

/* Utility */
.qv-center-note{text-align:center;color:var(--ink-muted);font-size:.9rem;margin-top:var(--md);}