/* Corbella Accounting — deep green + brass.
   The lattice motif in the hero echoes the logo mark: a woven grid that reads
   equally as orchard rows, a ledger grid, and the mark itself. */
:root{
  --pine:#14342B; --pine-deep:#0C2019; --green:#1E5140; --green-soft:#3C6B58;
  --brass:#C08A2E; --brass-deep:#9A6D22; --clay:#A8542F;
  --parchment:#F6F4EE; --paper:#FFFFFF; --ink:#1B2320; --muted:#5C665F; --line:#DFE1D8;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--parchment);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;}
a{color:var(--green);}
h1,h2,h3{font-family:"Palatino Linotype",Palatino,"Iowan Old Style","Book Antiqua",Georgia,serif;}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px;}

header.site{background:var(--paper); color:var(--ink); border-bottom:3px solid var(--brass);}
header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; flex-wrap:wrap;}
/* Logo mark as the icon, firm name as live text: the wordmark in the source
   lockup is unreadable at header scale, and real text stays crisp at any DPI.
   Tracking and weight below echo the wordmark in the logo file. */
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--pine);}
.brand-mark{display:block; width:42px; height:42px; flex:none;}
.brand-name{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:.98rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  line-height:1.2; white-space:nowrap;
}
nav.main{display:flex; gap:18px; flex-wrap:wrap;}
nav.main a{color:var(--pine); text-decoration:none; font-size:.92rem; font-weight:600; opacity:.82;}
nav.main a:hover,nav.main a:focus{opacity:1; text-decoration:underline; text-decoration-color:var(--brass);}
.tel{background:var(--green); color:#fff; text-decoration:none; padding:9px 15px; border-radius:3px; font-weight:700; font-size:.92rem; white-space:nowrap;}
.tel:hover{background:var(--pine);}
@media (max-width:560px){
  .brand-mark{width:34px; height:34px;}
  .brand-name{font-size:.84rem; letter-spacing:.12em;}
}

/* Hero — lattice weave echoing the logo mark */
.hero{
  position:relative; color:#fff; padding:64px 0 0;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.030) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 38px),
    linear-gradient(165deg,var(--pine) 0%,var(--pine-deep) 100%);
}
.hero h1{font-size:clamp(1.75rem,4vw,2.6rem); line-height:1.18; margin:0 0 14px; max-width:20ch; text-wrap:balance;}
.hero p.lead{font-size:1.08rem; max-width:56ch; margin:0 0 26px; color:#E4EAE4;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap;}
.btn{display:inline-block; padding:12px 22px; border-radius:3px; text-decoration:none; font-weight:700; letter-spacing:.01em; border:1px solid transparent;}
.btn.primary{background:var(--brass); color:var(--pine-deep);}
.btn.primary:hover{background:#D39F44;}
.btn.ghost{border-color:rgba(255,255,255,.45); color:#fff;}
.btn.ghost:hover{border-color:var(--brass); color:var(--brass);}
.hero .service-area{margin-top:22px; font-size:.85rem; color:#A9BBAE;}

.industries{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none;}
.industries li{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  color:#E4EAE4; font-size:.82rem; padding:6px 14px; border-radius:20px; letter-spacing:.02em;
}

.horizon{display:block; width:100%; height:44px; margin-top:46px;}
.horizon path{fill:var(--parchment);}

section{padding:52px 0;}
section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
h2{font-size:1.55rem; margin:0 0 8px; color:var(--pine);}
.kicker{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-soft); font-weight:700; margin:0 0 6px;}
.section-intro{max-width:62ch; color:var(--muted); margin:0 0 28px;}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:22px; border-top:3px solid var(--brass);}
section.alt .card{background:var(--parchment);}
.card h3{margin:0 0 8px; font-size:1.05rem; color:var(--pine);}
.card p{margin:0; font-size:.93rem; color:var(--muted);}

.split{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;}
@media (max-width:760px){.split{grid-template-columns:1fr;}}

.faq details{border-bottom:1px solid var(--line); padding:14px 0;}
.faq summary{font-weight:600; cursor:pointer; color:var(--pine);}
.faq details p{margin:10px 0 0; color:var(--muted); max-width:68ch;}

.contact-box{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:26px; border-top:3px solid var(--green);}
.contact-box dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 18px;}
.contact-box dt{font-weight:600; color:var(--pine);}
.contact-box dd{margin:0; color:var(--muted);}
form .field{margin-bottom:14px;}
form label{display:block; font-weight:600; font-size:.88rem; margin-bottom:4px;}
form input,form textarea,form select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:4px;
  font:inherit; background:var(--paper); color:var(--ink);
}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);}
form textarea{min-height:110px; resize:vertical;}

footer.site{background:var(--pine-deep); color:#C3D0C6; padding:36px 0; font-size:.88rem; border-top:3px solid var(--brass);}
footer.site .cols{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
footer.site a{color:#fff;}
footer.site .nap{line-height:1.8;}

:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}