/*
Theme Name: SwiftTech VA
Theme URI: https://swifttechva.com/
Author: SwiftTech VA
Description: One-page theme for SwiftTech VA Services. Content lives in front-page.php; the contact form posts through functions.php.
Version: 2.6
License: GNU General Public License v2 or later
Text Domain: swifttech-va
*/

/* ===================================================================
   SwiftTech VA — single-page site
   Palette taken from the brand graphics: sky blue + mid gray headlines,
   deep navy as the anchor, white base.
   To edit copy, Ctrl+F the text you want and change it in the HTML below.
   =================================================================== */

:root{
  /* Blue and white are TYPE colors only. Every shape, button, circle
     and panel below is black, gray or white. */
  --blue:#4A9FD8;         /* headline blue on dark backgrounds */
  --blue-ink:#226FA9;     /* headline blue darkened for white backgrounds */
  --blue-lift:#8CC8EC;    /* blue lifted for small type on black */
  --navy:#1B1E21;         /* deep anchor — dark sections (now charcoal) */
  --navy-deep:#131517;
  --black:#141618;        /* buttons, circles, frames */
  --gray:#7C8084;         /* mid gray — shapes and secondary type */
  --gray-ink:#5A5E62;
  --gray-soft:#D8DBDE;    /* light gray shape fills on white */
  --ink:#232527;          /* body text */
  --paper:#FFFFFF;
  --mist:#F3F5F7;         /* alternating light section */
  --line:rgba(35,37,39,.14);
  --line-light:rgba(255,255,255,.18);

  --display:'Oswald', ui-sans-serif, system-ui, sans-serif;
  --body:'Poppins', ui-sans-serif, system-ui, sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- the signature two-tone headline ----------
   Line one in blue, line two in gray — straight from the brand graphics.
   <h2>FIRST LINE <span>SECOND LINE</span></h2>                          */
h1,h2,h3{
  font-family:var(--display);font-weight:700;
  line-height:.98;letter-spacing:.01em;text-transform:uppercase;
  margin:0;color:var(--blue-ink);
}
h1{font-size:clamp(2.7rem,7vw,5.1rem)}
h2{font-size:clamp(2.1rem,4.8vw,3.4rem)}
h1 span,h2 span{color:var(--black);display:block}
h3{
  font-size:1.16rem;font-weight:600;letter-spacing:.02em;
  line-height:1.28;color:var(--black);
}
.on-dark h1,.on-dark h2{color:var(--blue)}
.on-dark h1 span,.on-dark h2 span{color:#fff}
.on-dark h3{color:#fff}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-ink);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:2px;flex:1;max-width:60px;background:var(--gray);opacity:.55}
.on-dark .eyebrow{color:rgba(255,255,255,.62)}
.on-dark .eyebrow::after{background:rgba(255,255,255,.4)}

.lede{font-size:clamp(1.02rem,1.8vw,1.17rem);color:var(--gray-ink);max-width:60ch;font-weight:400}
.on-dark .lede{color:rgba(255,255,255,.76)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-weight:600;font-size:.95rem;
  padding:.88rem 1.9rem;border-radius:100px;
  text-decoration:none;border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer;
}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover{background:#34383C;transform:translateY(-2px)}
.on-dark .btn-primary{background:#fff;color:var(--black)}
.on-dark .btn-primary:hover{background:var(--gray-soft)}
.btn-ghost{border-color:var(--line);color:var(--black)}
.btn-ghost:hover{border-color:var(--black);background:rgba(20,22,24,.05)}
.on-dark .btn-ghost{border-color:var(--line-light);color:#fff}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-sm{padding:.6rem 1.3rem;font-size:.86rem}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo{
  font-family:var(--display);font-weight:700;font-size:1.3rem;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  color:var(--black);display:flex;align-items:center;gap:.28rem;
}
.logo em{font-style:normal;color:var(--blue-ink)}
.logo img{height:38px;width:auto}
nav.links{display:flex;gap:1.7rem;font-size:.91rem;font-weight:500}
nav.links a{text-decoration:none;color:var(--gray-ink);transition:color .15s}
nav.links a:hover{color:var(--blue-ink)}
@media(max-width:860px){nav.links{display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem,7vw,5.8rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
/* angled blue wedge, echoing the brand graphics */
.hero::before{
  content:"";position:absolute;top:-80px;right:-120px;
  width:420px;height:420px;background:var(--gray);opacity:.13;
  transform:rotate(45deg);border-radius:40px;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center;position:relative}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.8rem}}
.hero .lede{margin-top:1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-note{
  font-size:.83rem;color:var(--gray);font-weight:500;
  margin-top:1.4rem;letter-spacing:.03em;
}

/* ---------- SIGNATURE: the chaos → clarity stack ---------- */
.stack{
  position:relative;background:var(--black);border-radius:18px;
  padding:1.6rem 1.5rem;min-height:400px;overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(20,22,24,.75);
}
.stack-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  padding-bottom:1rem;border-bottom:1px solid var(--line-light);margin-bottom:1.1rem;
}
.stack-state{color:rgba(255,255,255,.38);transition:color .5s ease}
.stack.settled .stack-state{color:#fff}
.chips{position:relative;display:flex;flex-direction:column;gap:.5rem}
.chip{
  display:flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.07);border:1px solid var(--line-light);
  border-radius:9px;padding:.64rem .85rem;
  font-size:.87rem;font-weight:400;color:rgba(255,255,255,.9);
  transform:translateX(var(--dx)) translateY(var(--dy)) rotate(var(--rot));
  opacity:.5;
  transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .6s ease, background .5s ease, border-color .5s ease;
}
.stack.settled .chip{transform:none;opacity:1;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.chip .dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24);flex:none;
  transition:background .5s ease;
}
.stack.settled .chip .dot{background:#fff}
.chip .who{
  margin-left:auto;font-size:.65rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.3);
  opacity:0;transition:opacity .5s ease .25s;
}
.stack.settled .chip .who{opacity:1;color:#fff}
@media(prefers-reduced-motion:reduce){
  .chip{transition:none}
  .stack .chip{transform:none;opacity:1}
}

/* ---------- section shells ---------- */
section{padding:clamp(3.4rem,7vw,6rem) 0}
/* keep headings clear of the sticky header when jumping to an anchor */
section[id]{scroll-margin-top:74px}
.on-dark{color:rgba(255,255,255,.8)}
.band-deep{background:var(--navy)}
.band-dark{background:var(--navy-deep)}
.band-ice{background:var(--mist)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:2.2rem}}

/* ---------- the check-circle list, straight from the brand graphics ---------- */
.pains{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem}
.pains li{display:flex;gap:1rem;align-items:flex-start;color:rgba(255,255,255,.84)}
.pains .mark{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:#fff;color:var(--black);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;margin-top:.22rem;
}

/* three-up cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:880px){.cards{grid-template-columns:1fr}}
.card{
  background:rgba(255,255,255,.06);border:1px solid var(--line-light);
  border-radius:14px;padding:1.7rem 1.5rem;
}
.card .num{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;
  color:rgba(255,255,255,.55);margin-bottom:1rem;
}
.card p{color:rgba(255,255,255,.72);font-size:.93rem;margin-top:.7rem}

/* how it works */
.steps{display:grid;gap:0;margin-top:2.6rem;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:72px 1fr;gap:1.5rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line);align-items:start;
}
@media(max-width:640px){.step{grid-template-columns:50px 1fr;gap:1rem}}
.step .n{
  font-family:var(--display);font-size:1.7rem;font-weight:700;
  color:var(--blue-ink);line-height:1;padding-top:.1rem;
}
.step p{color:var(--gray-ink);font-size:.95rem;margin-top:.45rem}

/* pricing */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:3rem}
@media(max-width:780px){.tiers{grid-template-columns:1fr}}
.tier{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:2rem 1.8rem;display:flex;flex-direction:column;
}
.tier.featured{border-color:var(--black);border-width:2px;box-shadow:0 20px 46px -28px rgba(20,22,24,.55)}
.tier .tag{
  font-size:.71rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);
}
.tier.featured .tag{color:var(--blue-ink)}
.price{
  font-family:var(--display);font-size:3rem;font-weight:700;
  letter-spacing:.01em;margin:.6rem 0 .1rem;line-height:1;color:var(--blue-ink);
}
.price small{font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--gray);letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem;flex:1}
.tier li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:var(--gray-ink)}
.tier li::before{
  content:"✓";flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--black);color:#fff;font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:.25rem;
}
.tier.featured li::before{background:var(--gray)}
.tier .btn{justify-content:center}
.fineprint{
  font-size:.75rem;color:var(--gray);text-align:center;
  margin-top:.9rem;letter-spacing:.02em;
}

/* quote */
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{
  font-family:var(--display);font-weight:400;text-transform:none;
  font-size:clamp(1.3rem,2.9vw,1.9rem);line-height:1.4;
  letter-spacing:.01em;margin:0;color:#fff;
}
.quote cite{
  display:block;margin-top:1.5rem;font-style:normal;
  font-family:var(--body);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
}

/* ---------- photo slots ----------
   Every .shot is a framed image slot. Drop a file in and it crops to fit;
   leave it empty and a labelled gray placeholder shows instead.        */
.shot{
  position:relative;overflow:hidden;border-radius:14px;
  background:repeating-linear-gradient(45deg,#E9ECEF,#E9ECEF 12px,#DFE3E7 12px,#DFE3E7 24px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.72rem;font-weight:500;color:var(--gray-ink);
  padding:1rem;line-height:1.6;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}


/* service card images */
.tier .shot{aspect-ratio:3/2;margin:-2rem -1.8rem 1.4rem;border-radius:16px 16px 0 0}

/* the wide band image */
.band-photo{position:relative;height:clamp(240px,34vw,400px);overflow:hidden}
.band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.band-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,22,24,.72) 0%,rgba(20,22,24,.34) 48%,rgba(20,22,24,0) 78%);
}
.band-photo .caption{
  position:absolute;inset:0;display:flex;align-items:center;z-index:2;
}
.band-photo .caption .wrap{width:100%}
.band-photo h2{color:#fff;max-width:14ch}
.band-photo h2 span{color:var(--blue)}

/* FAQ */
.faq{max-width:820px;margin:2.6rem auto 0;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.6rem 1.25rem 0;
  font-weight:600;font-size:1rem;position:relative;color:var(--black);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--blue-ink)}
summary::after{
  content:"+";position:absolute;right:.3rem;top:1.05rem;
  font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--gray);
  transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(45deg)}
details .answer{padding:0 2.6rem 1.4rem 0;color:var(--gray-ink);font-size:.94rem}

/* final CTA */
.finale{text-align:center}
.finale h2{max-width:none}
.finale .lede{margin:1.4rem auto 0;text-align:center}
.finale .hero-cta{justify-content:center}


/* ---------- contact form ---------- */
.form-wrap{max-width:620px;margin:2.6rem auto 0;text-align:left}
.field{margin-bottom:1.1rem}
.field label{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:.5rem;
}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:#fff;
  background:rgba(255,255,255,.07);border:1.5px solid var(--line-light);
  border-radius:12px;padding:.85rem 1rem;transition:border-color .15s, background .15s;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:rgba(255,255,255,.1);
}
.form-wrap .btn{width:100%;justify-content:center;margin-top:.4rem}
/* honeypot — hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{
  border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.4rem;
  font-size:.94rem;border:1.5px solid;
}
.form-msg.ok{border-color:rgba(127,200,150,.5);background:rgba(127,200,150,.12);color:#CFEBD9}
.form-msg.err{border-color:rgba(230,140,140,.5);background:rgba(230,140,140,.12);color:#F2D2D2}

/* footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.62);padding:3.4rem 0 2.4rem;font-size:.91rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer a{color:rgba(255,255,255,.84);text-decoration:none}
footer a:hover{color:var(--blue)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--line-light);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s, transform .15s;
}
.socials a:hover{background:rgba(255,255,255,.1);border-color:var(--blue);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:currentColor}
.foot-head{color:#fff;font-weight:600;margin-bottom:.7rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.foot-grid .logo{color:#fff}
.foot-base{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line-light);
  font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.42);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
}