/* ============================================================
   Vexabit — site styles
   ============================================================ */

:root{
  --navy:#0E1626;
  --navy-2:#16203A;
  --navy-3:#1E2B4A;
  --red:#E5322D;
  --red-dk:#B8231F;
  --red-soft:#FDECEB;
  --ink:#111827;
  --ink-2:#4B5563;
  --ink-3:#6B7280;
  --line:#E2E6EC;
  --line-2:#CDD4DE;
  --bg:#FFFFFF;
  --bg-2:#F6F8FB;
  --white:#FFFFFF;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(14,22,38,.06), 0 4px 12px -6px rgba(14,22,38,.10);
  --shadow-md:0 2px 4px rgba(14,22,38,.06), 0 14px 34px -14px rgba(14,22,38,.18);
  --wrap:1180px;
  --f-disp:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--f-disp); margin:0; line-height:1.14; letter-spacing:-.02em; text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.15rem,4vw,2rem)}
.wrap.narrow{max-width:820px}
.center{text-align:center}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:200; background:var(--navy); color:#fff; padding:.6rem 1rem; border-radius:6px}
:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:4px}

.eyebrow{
  font-family:var(--f-disp); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin:0 0 .7rem;
}
.lead{font-size:1.12rem; color:var(--ink-2)}
.accent{color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--f-disp); font-weight:600; font-size:.94rem;
  background:var(--red); color:#fff; padding:.72rem 1.35rem;
  border:1px solid var(--red); border-radius:8px; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
  text-decoration:none;
}
.btn:hover{background:var(--red-dk); border-color:var(--red-dk); color:#fff; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:.9rem 1.7rem; font-size:1rem}
.btn-sm{padding:.55rem 1.05rem; font-size:.88rem}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-2); color:var(--navy); border-color:var(--line-2)}
.btn-invert{background:#fff; color:var(--navy); border-color:#fff}
.btn-invert:hover{background:#EDF0F5; color:var(--navy); border-color:#EDF0F5}

/* ---------- topbar ---------- */
.topbar{background:var(--navy); color:#B6C0D2; font-size:.85rem}
.topbar-in{display:flex; align-items:center; gap:.9rem; min-height:44px; flex-wrap:wrap}
.topbar a{color:#D7DEEA}
.topbar a:hover{color:#fff}
.tb-sep{width:1px; height:14px; background:#33415C}
.tb-addr{color:#8E9AB0}
.tb-tel{margin-left:auto; font-weight:600}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:1.5rem; min-height:74px}
.logo{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{width:34px; height:34px; border-radius:9px; flex:0 0 auto}
.logo-txt{
  font-family:var(--f-disp); font-weight:700; font-size:1.32rem;
  letter-spacing:-.03em; color:var(--navy);
}
.logo-txt em{font-style:normal; color:var(--red)}
.logo-w .logo-txt{color:#fff}
.logo-w .logo-txt em{color:#FF6B66}

.nav{margin-left:auto}
.nav-list{display:flex; align-items:center; gap:.25rem}
.nav-list > li > a,
.nav-list > li > button{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--f-disp); font-size:.93rem; font-weight:500;
  color:var(--navy); padding:.55rem .7rem; border-radius:7px;
  background:none; border:0; cursor:pointer; font-family:var(--f-disp);
  text-decoration:none; white-space:nowrap;
}
.nav-list > li > a:hover,
.nav-list > li > button:hover{background:var(--bg-2); color:var(--red); text-decoration:none}
.chev{width:10px; height:7px; opacity:.6; transition:transform .18s ease}
.has-sub{position:relative}
.has-sub[data-open="true"] .chev{transform:rotate(180deg)}
.sub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:16rem;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-md); padding:.4rem; opacity:0; visibility:hidden;
  transform:translateY(-5px); transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub[data-open="true"] .sub,
.has-sub:hover .sub{opacity:1; visibility:visible; transform:translateY(0)}
.sub a{
  display:block; padding:.55rem .75rem; border-radius:6px; font-size:.92rem;
  color:var(--ink); text-decoration:none;
}
.sub a:hover{background:var(--red-soft); color:var(--red-dk); text-decoration:none}
.head-cta{flex:0 0 auto}

.burger{display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:.5rem}
.burger span{display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 88% -8%, rgba(229,50,45,.16), transparent 62%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  color:#fff; padding:clamp(3.5rem,8vw,6.5rem) 0;
}
.hero-in{display:grid; gap:clamp(2.5rem,5vw,4rem)}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.1rem); font-weight:700; margin:0 0 1.1rem}
.hero .eyebrow{color:#FF8B86}
.hero .lead{color:#C3CCDC; max-width:56ch; font-size:1.16rem}
.hero-btns{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5)}

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); overflow:hidden; margin:0;
}
.stats > div{background:rgba(255,255,255,.04); padding:1.15rem 1.25rem}
.stats dt{font-size:.73rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#93A0B8; margin-bottom:.3rem}
.stats dd{margin:0; font-family:var(--f-disp); font-size:2.3rem; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums}
.stats dd span{color:var(--red); font-size:.7em}
.stats-block{background:var(--line); border-color:var(--line)}
.stats-block > div{background:var(--bg-2)}
.stats-block dt{color:var(--ink-3)}
.stats-block dd{color:var(--navy)}

/* ---------- sections ---------- */
.sec{padding:clamp(3rem,7vw,5.25rem) 0}
.sec-alt{background:var(--bg-2); border-block:1px solid var(--line)}
.sec-dark{background:var(--navy); color:#fff}
.sec-dark .eyebrow{color:#FF8B86}
.sec-dark .lead{color:#B6C0D2}
.sec-head{max-width:62ch; margin-bottom:2.4rem}
.sec-head h2{font-size:clamp(1.6rem,3.9vw,2.35rem); font-weight:600}
.sec-head .lead{margin-top:.85rem}
.sec-foot{margin-top:2rem; color:var(--ink-2); font-size:.98rem}

.two-col{display:grid; gap:clamp(2rem,4.5vw,3.5rem); align-items:start}
.two-col h2{font-size:clamp(1.5rem,3.6vw,2.15rem); font-weight:600; margin-bottom:1.1rem}
.two-col .btn{margin-top:.6rem}

.ticks{display:grid; gap:.7rem; align-content:start}
.ticks li{
  position:relative; padding-left:2rem; font-weight:600;
  font-family:var(--f-disp); font-size:.98rem; color:var(--navy);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.2 2.2 4.8-5' fill='none' stroke='%23E5322D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem no-repeat;
}

/* ---------- cards ---------- */
.cards{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sec-alt .card{background:#fff}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.card-n{
  display:inline-block; font-family:var(--f-disp); font-size:.76rem; font-weight:700;
  letter-spacing:.08em; color:var(--red); background:var(--red-soft);
  padding:.2rem .5rem; border-radius:5px; margin-bottom:.85rem;
}
.card h3{font-size:1.09rem; font-weight:600; margin-bottom:.5rem}
.card h3 a{color:var(--navy); text-decoration:none}
.card h3 a:hover{color:var(--red); text-decoration:none}
.card p{color:var(--ink-2); font-size:.97rem; margin:0}
.card .more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-family:var(--f-disp); font-size:.86rem; font-weight:600; color:var(--red);
}
.card .more svg{width:15px; height:9px; transition:transform .18s ease}
.card:hover .more svg{transform:translateX(3px)}

/* Make the whole service card clickable, so "Read more" is a real target.
   Stretched-link pattern: one anchor (the h3) covers the card, so screen
   readers still announce a single link per card. */
.card-link{position:relative}
.card-link h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.card-link:hover h3 a{color:var(--red)}
.card-link .more{position:relative; z-index:0}

/* ---------- steps ---------- */
.steps{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.steps li{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius); padding:1.55rem 1.45rem;
}
.step-n{
  display:block; font-family:var(--f-disp); font-size:1.85rem; font-weight:700;
  color:var(--red); line-height:1; margin-bottom:.8rem; font-variant-numeric:tabular-nums;
}
.steps h3{font-size:1.05rem; font-weight:600; margin-bottom:.45rem; color:#fff}
.steps p{color:#AAB5C8; font-size:.95rem; margin:0}

/* ---------- page title ---------- */
.ptitle{
  background:linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; padding:clamp(2.75rem,6.5vw,4.5rem) 0;
}
.ptitle h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:700; max-width:24ch}
.ptitle .lead{color:#C3CCDC; margin-top:1.05rem; max-width:62ch}

/* ---------- mission / vision ---------- */
.mv{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.mv article{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--radius); padding:1.7rem 1.6rem; box-shadow:var(--shadow-sm);
}
.mv p:not(.eyebrow){color:var(--ink-2); margin:0}

/* ---------- long-form prose ---------- */
.narrow h2{
  font-size:clamp(1.3rem,3vw,1.65rem); font-weight:600;
  margin:2.4rem 0 .7rem; padding-top:.2rem;
}
.narrow h2:first-child{margin-top:0}
.narrow p{color:var(--ink-2)}
.narrow .lead{color:var(--ink); font-size:1.14rem; margin-bottom:1.3rem}
.narrow.center h2{margin-top:0}
.narrow.center .lead{margin:0 auto 1.6rem; max-width:58ch}

/* ---------- contact ---------- */
.contact-grid{display:grid; gap:clamp(2rem,4vw,3rem); align-items:start}
.contact-info{display:grid; gap:1rem}
.contact-info article{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.3rem 1.4rem;
}
.contact-info h3{
  font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.45rem;
}
.contact-info p{font-family:var(--f-disp); font-weight:600; color:var(--navy); margin:0; font-size:1.02rem}
.contact-info a{color:var(--navy)}
.contact-info a:hover{color:var(--red)}

.contact-form-wrap h2{font-size:clamp(1.45rem,3.4vw,1.95rem); font-weight:600; margin-bottom:1.4rem}
.cform{display:grid; gap:1.05rem}
.f-row{display:grid; gap:1.05rem; grid-template-columns:1fr}
.cform label{
  display:grid; gap:.4rem; font-family:var(--f-disp); font-size:.85rem;
  font-weight:600; color:var(--navy);
}
.cform input,.cform textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  padding:.72rem .9rem; border:1px solid var(--line-2); border-radius:8px;
  background:#fff; width:100%; transition:border-color .16s ease, box-shadow .16s ease;
}
.cform input:focus,.cform textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(229,50,45,.13);
}
.cform textarea{resize:vertical; min-height:7rem}
.cform .btn{justify-self:start}
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important}
.f-note{font-size:.87rem; color:var(--ink-3); margin:0}

.form-msg{
  padding:.85rem 1.1rem; border-radius:8px; font-size:.95rem;
  border:1px solid; margin-bottom:1.2rem;
}
.form-msg.ok{background:#E8F5EE; border-color:#A9D8BE; color:#136B41}
.form-msg.err{background:var(--red-soft); border-color:#F0BEBC; color:#9E211D}

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(700px 320px at 82% 120%, rgba(229,50,45,.22), transparent 60%),
    var(--navy);
  color:#fff; padding:clamp(2.5rem,5.5vw,3.75rem) 0;
}
.cta-in{display:flex; flex-wrap:wrap; gap:1.75rem; align-items:center; justify-content:space-between}
.cta-in .eyebrow{color:#FF8B86}
.cta-in h2{font-size:clamp(1.4rem,3.4vw,2.05rem); font-weight:600; max-width:26ch}

/* ---------- footer ---------- */
.site-foot{background:#0A1120; color:#93A0B8; padding:clamp(2.75rem,6vw,4rem) 0 0; font-size:.95rem}
.foot-grid{
  display:grid; gap:2.25rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  padding-bottom:2.5rem;
}
.foot-brand{grid-column:span 2; min-width:0}
.foot-brand p{margin:1.05rem 0 1.2rem; max-width:38ch; color:#8E9AB0}
.foot-col h3{
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:1rem;
}
.foot-col ul{display:grid; gap:.6rem}
.foot-col a{color:#93A0B8; text-decoration:none}
.foot-col a:hover{color:#fff; text-decoration:none}
.foot-contact li{line-height:1.5}
.social{display:flex; gap:.6rem}
.social a{
  display:grid; place-items:center; width:2.15rem; height:2.15rem;
  border:1px solid #23304A; border-radius:7px; color:#93A0B8;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.social a:hover{background:var(--red); border-color:var(--red); color:#fff}
.social svg{width:17px; height:17px}
.foot-base{border-top:1px solid #1A2337; padding-block:1.3rem; font-size:.88rem}
.foot-base p{margin:0; color:#77839A}

/* ---------- responsive ---------- */
@media (min-width:820px){
  .hero-in{grid-template-columns:1.55fr .95fr; align-items:center}
  .two-col{grid-template-columns:1.25fr .85fr}
  .contact-grid{grid-template-columns:.85fr 1.15fr}
  .f-row{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .nav-list > li > a, .nav-list > li > button{padding:.5rem .5rem; font-size:.88rem}
  .head-in{gap:1rem}
}
@media (max-width:900px){
  .burger{display:flex; margin-left:auto}
  .head-cta{display:none}
  .nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    padding:.75rem clamp(1.15rem,4vw,2rem) 1.25rem; margin:0;
    display:none;
  }
  .nav[data-open="true"]{display:block}
  .nav-list{flex-direction:column; align-items:stretch; gap:.15rem}
  .nav-list > li > a, .nav-list > li > button{
    width:100%; justify-content:space-between; padding:.7rem .5rem; font-size:.98rem;
  }
  .sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; padding:.1rem 0 .4rem .5rem;
    margin:0 0 .3rem .5rem; display:none; min-width:0;
  }
  .has-sub[data-open="true"] .sub{display:block}
  .has-sub:hover .sub{opacity:1}
  .foot-brand{grid-column:span 1}
  .tb-addr{display:none}
}
@media (max-width:520px){
  body{font-size:16px}
  .topbar{font-size:.8rem}
  .tb-sep{display:none}
  .tb-tel{margin-left:0}
  .stats dd{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* ---------- photography ---------- */
.fig{
  margin:0; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-2); box-shadow:var(--shadow-md);
}
.fig img{width:100%; height:100%; object-fit:cover; display:block}

/* homepage hero portrait */
.hero-media{
  margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 34px 74px -34px rgba(0,0,0,.7);
  outline:1px solid rgba(255,255,255,.15); outline-offset:-1px;
}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block}

/* right-hand column that pairs an image with the tick list */
.col-media{display:grid; gap:1.5rem; align-content:start}
.col-media .fig{aspect-ratio:4/3}

/* wide banner tucked under the navy page title */
.pbanner{position:relative; z-index:1; margin-top:calc(-1 * clamp(1.25rem,3vw,2.25rem))}
.pbanner .fig{aspect-ratio:16/7}
.pbanner + .sec{padding-top:clamp(2.25rem,5vw,3.5rem)}
@media (max-width:640px){
  .pbanner .fig{aspect-ratio:4/3}
}

@media (min-width:820px){
  .hero-in{grid-template-columns:1.12fr .88fr; align-items:center}
  .hero-in .stats{grid-column:1 / -1; margin-top:.4rem}
}