:root{
  --blue:#003366; --yellow:#FFD60A; --ink:#0a2340; --bg:#ffffff;
  --muted:#f7f9fc; --line:#e2ebf7;
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* --- Header / Nav  --- */
.nav{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:100px}
.brand span{color:var(--blue);font-weight:900;letter-spacing:.3px}
.nav-links{display:flex;gap:22px;align-items:center;justify-content:center}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:700}
.nav-links a:hover{color:var(--blue)}
.header-right{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.btn-cta{background:var(--yellow);color:var(--blue)!important;padding:10px 16px;border-radius:10px;font-weight:900;border:2px solid var(--yellow)}
.btn-cta:hover{filter:brightness(.96)}
.cpa{height:100px}

/* --- HERO: centered + background image + overlay --- */
.hero{
  position:relative;
  background:linear-gradient(180deg,#fbfdff,#f3f7fe);
}
.hero--bg{
  background-image:
    linear-gradient(rgba(0,38,89,.55), rgba(0,38,89,.55)),
    url("images/hero-tax.jpg"); /* put your photo here */
  background-size:cover;
  background-position:center;
  color:#fff;
}
.hero .container{position:relative}
.hero-wrap{
  min-height:72vh;                 /* centers vertically */
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center;
}
.hero h1{font-size:46px;line-height:1.08;margin:0 0 12px}
.hero p.lead{font-size:18px;margin:0 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:lch(100% 0.01 296.81);border-radius:999px;padding:8px 12px;font-weight:800}
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 32px rgba(0,0,0,.08);padding:18px;color:var(--ink)
}
.tabs{display:flex;background:var(--muted);border-radius:12px;padding:6px;margin-bottom:14px}
.tab{flex:1;text-align:center;padding:10px 12px;border-radius:8px;font-weight:900;color:var(--blue);cursor:pointer}
.tab.active{background:hsl(55, 13%, 37%);border:1px solid var(--line)}
.input,.select,.textarea{width:100%;padding:12px 14px;margin:6px 0 14px;border:1px solid var(--line);border-radius:10px}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:900;border:2px solid var(--blue)}
.btn.alt{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}
.helper{font-size:12px;color:#ffffff}

/* --- Sections + image aids --- */
.section{padding:64px 0}
.section h2{text-align:center;color:var(--blue);font-size:32px;margin:0 0 8px}
.section .lead{text-align:center;color:#3d4b60;max-width:900px;margin:0 auto 26px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 10px 20px rgba(0,0,0,.04)}
.card h3{margin:0 0 8px;color:var(--blue)}
.card p{margin:8px 0 12px}

/* NEW: tasteful gallery strip */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.gallery figure{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 16px rgba(0,0,0,.05)}
.gallery figcaption{padding:10px;font-size:13px;color:#4b5b6b;background:#fff}

/* CHECKLIST */
.checklist{max-width:1000px;margin:0 auto}
.group{border:1px solid var(--line);border-radius:14px;margin:12px 0;background:#fff}
.group summary{cursor:pointer;padding:14px 16px;font-weight:900;color:var(--blue);display:flex;align-items:center;justify-content:space-between}
.group summary::-webkit-details-marker{display:none}
.group .items{padding:0 16px 14px}
.item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.item:last-child{border-bottom:none}
.item input{margin-top:3px}
.tool-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:10px 0}
.print{background:#fff;border:2px dashed var(--blue);color:var(--blue);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:900}


/* TRUST & FOOTER */
.trust{background:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-logos{display:flex;gap:22px;align-items:center;justify-content:center;padding:18px 0}
.trust-logos img{height:28px;opacity:.85}
.footer{background:#0d2c55;color:#fff;margin-top:60px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:30px 0}
.footer a{color:#cfe3ff;text-decoration:none}
.footer a:hover{text-decoration:underline}
.copy{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:14px 0;color:#e9e8dd}

/* --- Contact textarea bigger --- */
.textarea{min-height:220px}          /* << bigger box */
@media(min-width:300px){.textarea{min-height:260px}}

/* Responsive */
@media(max-width:980px){
  .hero-wrap{grid-template-columns:1fr;text-align:center}
  .hero-card{max-width:560px;margin:0 auto}
  .footer .cols{grid-template-columns:1fr 1fr}
}

/* ---------- Mobile polish (phones first) ---------- */

/* Make text readable and spacing comfy */
html { -webkit-text-size-adjust: 100%; }
:root{
  --space: clamp(12px, 3.5vw, 20px);
}
.container{ padding: 0 16px; }

/* Nav: reduce logo sizes, simplify grid, allow link scrolling */
@media (max-width: 600px){
  .nav-inner{
    display:grid;
    grid-template-columns: auto 1fr; /* logo | links */
    gap: 8px;
    padding: 10px 0;
  }
  .brand img{ height: 56px; }      /* was 100px */
  .cpa{ height: 40px; }            /* was 100px; avoids header overflow */
  .header-right{ display:none; }   /* hides extra header items on tiny screens */

  .nav-links{
    justify-content:flex-start;
    gap: 14px;
    overflow-x:auto;               /* prevent wrapping chaos */
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ padding: 8px 6px; } /* easier taps without pushing layout */
}

/* Hero: scale typography and height for phones */
.hero h1{ font-size: clamp(26px, 6.5vw, 46px); line-height: 1.15; }
.hero p.lead{ font-size: clamp(14px, 3.8vw, 18px); }
@media (max-width: 600px){
  .hero-wrap{
    min-height: 56vh;              /* was 72vh; fits small screens */
    gap: 18px;
    text-align:center;
  }
}

/* Cards & galleries: tighten gaps on small screens */
@media (max-width: 600px){
  .cards{ gap: 16px; }
  .gallery{ gap: 12px; }
}

/* Tabs: ensure visible touch targets, fix active color contrast */
.tab{ padding: 12px; }
.tab.active{ background: #e9edf5; border-color: #d4ddef; }

/* Forms: full-width comfortable inputs on phones */
.input,.select,.textarea{ padding: 14px 16px; }

/* Footer: single column on small screens */
@media (max-width: 700px){
  .footer .cols{ grid-template-columns: 1fr; }
}

/* Trust logos wrap nicely */
@media (max-width: 600px){
  .trust-logos{
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 0;
  }
  .trust-logos img{ height: 22px; }
}

/* Prevent odd blue-on-yellow contrast shifts for CTA on dark backgrounds */
.btn-cta{ line-height: 1; }

/* Better color fallback for .badge on browsers without LCH support */
.badge{
  color: #ffffff;            /* fallback text color */
  /* original: color:lch(100% 0.01 296.81); */
}