/* dalicpa.com — written in one pass. Single light theme, no patches.
   Specificity is kept flat on purpose: every component is styled by its own class,
   never by `.parent element`, so nothing silently outranks anything else. */

:root{
  --bg:#FFFFFF;
  --alt:#F5F7F8;
  --ink:#17232E;
  --body:#55636E;
  --faint:#8A959E;
  --line:#E1E6E9;
  --navy:#1C3247;
  --red:#B72127;
  --red-dark:#8E181D;
  --red-soft:#D4565B;
  --max:1060px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a:focus-visible{outline:2px solid var(--red); outline-offset:3px}

.inner{max-width:var(--max); margin:0 auto; padding-inline:24px}
.band{padding-block:clamp(54px,7.5vw,82px)}
.band-alt{background:var(--alt)}

h1,h2,h3{letter-spacing:-.018em; text-wrap:balance}
.h-lg{margin:0; font-size:clamp(30px,4.8vw,44px); font-weight:700; line-height:1.15}
.h-md{margin:0 0 18px; font-size:clamp(23px,3.2vw,30px); font-weight:700; line-height:1.22}
.sub{margin:0 0 38px; color:var(--body); max-width:64ch; font-size:17px}

/* ---------- nav ---------- */
.nav{background:var(--navy); border-bottom:3px solid var(--red); position:sticky; top:0; z-index:20}
.nav .inner{display:flex; align-items:center; gap:18px; min-height:68px; flex-wrap:wrap}
.brand{color:#fff; text-decoration:none; font-weight:700; font-size:17.5px; line-height:1.2}
.brand em{
  display:block; font-style:normal; font-weight:400; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red-soft); margin-top:3px;
}
.nav-links{list-style:none; display:flex; gap:24px; margin:0 0 0 auto; padding:0; flex-wrap:wrap}
.nav-links a{
  color:#DCE4EA; text-decoration:none; font-size:13.5px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; padding:6px 0;
  border-bottom:2px solid transparent; display:block;
}
.nav-links a:hover{color:#fff; border-bottom-color:var(--red)}
.nav-links .on{color:#fff; border-bottom-color:var(--red)}
.nav-tel{
  color:#fff; text-decoration:none; font-size:15px; font-weight:600;
  white-space:nowrap; border-bottom:2px solid var(--red);
}
.nav-tel:hover{border-bottom-color:#fff}

/* ---------- hero ---------- */
.hero{padding-block:clamp(50px,7vw,84px); border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1fr 250px; gap:56px; align-items:center}
.hero-lede{margin:20px 0 0; color:var(--body); font-size:18px; line-height:1.6; max-width:54ch}
.hero-act{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:32px 0 0}
.hero-photo{width:250px; height:312px; object-fit:cover; display:block}
.cta{
  display:inline-block; background:var(--red); color:#fff; text-decoration:none;
  font-weight:600; font-size:14.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:15px 30px;
}
.cta:hover{background:var(--red-dark)}
.tel-inline{color:var(--body); text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--line)}
.tel-inline:hover{color:var(--ink); border-bottom-color:var(--red)}

/* ---------- inner page headers ---------- */
.page-head{background:var(--alt); border-bottom:1px solid var(--line); padding-block:clamp(42px,6vw,64px)}
.page-lede{margin:18px 0 0; color:var(--body); font-size:17.5px; max-width:62ch}

/* ---------- services ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:44px 46px}
.card{border-top:2px solid var(--line); padding-top:24px}
.card-title{margin:0 0 10px; font-size:18.5px; font-weight:600}
.card-copy{margin:0 0 14px; color:var(--body); font-size:15.5px; line-height:1.62}
.card-list{margin:0; padding-left:18px; color:var(--body); font-size:14.5px; line-height:1.6}
.card-list li{margin-bottom:6px}
.ico{width:30px; height:30px; color:var(--red); display:block; margin-bottom:16px}

/* ---------- who I work with ---------- */
.serve{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 44px}
.serve-title{margin:0 0 8px; font-size:17px; font-weight:600}
.serve-copy{margin:0; color:var(--body); font-size:15px; line-height:1.6}

/* ---------- two-column prose ---------- */
.pair{display:grid; grid-template-columns:repeat(2,1fr); gap:38px}
.pair p{margin:0; color:var(--body); font-size:16.5px; line-height:1.65}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:210px 1fr; gap:44px; align-items:start}
.portrait{width:210px; height:262px; object-fit:cover; display:block; background:var(--line)}
.about-copy{margin:0 0 15px; color:var(--body)}
.about-copy:last-of-type{margin-bottom:0}
.about-copy b{color:var(--ink); font-weight:600}
.facts{margin:26px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:9px}
.facts li{
  font-size:13px; font-weight:500; color:var(--ink);
  border:1px solid var(--line); padding:7px 14px;
}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line); max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:20px 36px 20px 0; font-weight:600; font-size:17.5px;
  list-style:none; position:relative; line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:18px;
  color:var(--red); font-weight:600; font-size:22px; line-height:1;
}
.faq details[open] summary{color:var(--navy)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--navy)}
.faq-answer{margin:-4px 0 24px; color:var(--body); max-width:68ch; font-size:16px; line-height:1.64}

/* ---------- contact ---------- */
.contact{border-top:3px solid var(--red)}
.contact-copy{margin:0 0 28px; color:var(--body); max-width:58ch; font-size:17px}
.mail{
  color:var(--navy); font-size:clamp(20px,3.4vw,27px); font-weight:700;
  text-decoration:none; border-bottom:3px solid var(--red);
  letter-spacing:-.015em; word-break:break-word; display:inline-block;
}
.mail:hover{color:var(--red)}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:48px}
.contact-grid h2{margin:0 0 14px; font-size:18px; font-weight:600}
.plain{margin:0; padding-left:19px; color:var(--body); font-size:15.5px}
.plain li{margin-bottom:9px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); color:var(--body); font-size:13.5px; padding-block:30px}
.foot .inner{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot b{color:var(--ink); font-weight:600}
.foot a{color:var(--body)}
.foot a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .serve{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-photo{width:180px; height:225px; order:-1}
  .about{grid-template-columns:1fr; gap:26px}
  .portrait{width:170px; height:212px}
  .pair{grid-template-columns:1fr; gap:22px}
  .contact-grid{grid-template-columns:1fr; gap:36px}
  .nav .inner{min-height:0; padding-block:14px}
  .nav-links{margin-left:0; gap:18px; width:100%}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr; gap:34px}
  .serve{grid-template-columns:1fr; gap:28px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- who we serve: a list, the way real firm sites do it ---------- */
.serve-list{
  margin:0; padding:0; list-style:none;
  columns:3; column-gap:44px; font-size:15.5px; color:var(--body);
}
.serve-list li{
  break-inside:avoid; padding:9px 0 9px 20px; position:relative; line-height:1.5;
}
.serve-list li::before{
  content:""; position:absolute; left:0; top:17px;
  width:7px; height:7px; background:var(--red);
}

/* ---------- signs you may need support ---------- */
.signs{margin:0; padding:0; list-style:none; max-width:66ch}
.signs li{
  padding:15px 0 15px 30px; position:relative;
  border-bottom:1px solid var(--line); color:var(--body); font-size:16px; line-height:1.55;
}
.signs li:last-child{border-bottom:none}
.signs li::before{
  content:""; position:absolute; left:2px; top:22px;
  width:9px; height:9px; border:2px solid var(--red); border-radius:50%;
}
@media (max-width:900px){ .serve-list{columns:2} }
@media (max-width:560px){ .serve-list{columns:1} }