/* efalataconcretefairfield.com - anti-template, old-school contractor */

:root{
  --ink:#0e0e0e;
  --paper:#efe7d3;
  --paper-2:#e4daba;
  --yellow:#f5cb0e;
  --yellow-d:#d4ad06;
  --rust:#a8431d;
  --faded:#938f80;
  --rule:#1a1a1a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:18px;
}

a{color:var(--rust);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{background:var(--yellow);color:#000;text-decoration:none}

img{max-width:100%;display:block}
hr{border:0;border-top:2px dashed var(--ink);margin:30px 0}
hr.heavy{border-top:6px solid var(--ink);margin:40px 0}

/* ─── Billboard phone banner ─── */
.billboard{
  background:var(--yellow);
  color:#000;
  border-top:6px solid #000;
  border-bottom:6px solid #000;
  text-align:center;
  padding:14px 18px;
  font-family: "Arial Black", Impact, "Franklin Gothic Heavy", sans-serif;
}
.billboard a{color:#000;text-decoration:none;font-size:clamp(1.3rem,4vw,2.2rem);letter-spacing:.02em;line-height:1.1;display:inline-block}
.billboard a:hover{background:#000;color:var(--yellow)}
.billboard small{display:block;font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.78rem;letter-spacing:.25em;margin-top:4px;text-transform:uppercase}

/* ─── Masthead (newspaper-style) ─── */
.masthead{
  border-bottom:4px double var(--ink);
  background:var(--paper);
  padding:16px 18px 10px;
}
.masthead-inner{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.masthead .logo{line-height:1}
.masthead .logo .name{
  font-family:"Arial Black", Impact, "Franklin Gothic Heavy", sans-serif;
  font-size:clamp(1.9rem,4.5vw,2.9rem);
  letter-spacing:-.01em;
  color:var(--ink);
  text-transform:uppercase;
  line-height:.95;
}
.masthead .logo .sub{
  font-family:"Courier New", Courier, monospace;
  font-weight:700;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin-top:8px;
  border-top:1px solid var(--ink);padding-top:6px;display:inline-block;
}
.masthead nav{font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase}
.masthead nav a{margin-left:14px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.masthead nav a:first-child{margin-left:0}
.masthead nav a.active{background:var(--ink);color:var(--yellow);padding:3px 7px;text-decoration:none}

/* ─── Page shell ─── */
.page{max-width:1120px;margin:0 auto;padding:36px 18px 20px}

/* ─── Hero: asymmetric two-column ─── */
.hero-row{
  display:grid;grid-template-columns:260px 1fr;gap:34px;
  padding-bottom:30px;border-bottom:6px solid var(--ink);
}
.card-sidebar{
  background:#111;color:var(--paper);padding:22px;
  font-family:"Courier New", Courier, monospace;font-weight:500;font-size:.9rem;line-height:1.55;
}
.card-sidebar h4{
  font-family:"Arial Black", Impact, sans-serif;color:var(--yellow);
  font-size:1.1rem;letter-spacing:.04em;margin-bottom:12px;text-transform:uppercase;
}
.card-sidebar dl{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.card-sidebar dt{font-size:.74rem;letter-spacing:.2em;color:var(--yellow);text-transform:uppercase;font-weight:700}
.card-sidebar dd{color:#e8e5d8;margin-top:2px;margin-bottom:6px}
.card-sidebar .seal{
  margin-top:18px;border:2px dashed var(--yellow);padding:12px;text-align:center;
}
.card-sidebar .seal .big{font-family:"Arial Black",sans-serif;font-size:1.15rem;letter-spacing:.08em}
.card-sidebar .seal .lic{font-size:.78rem;color:#c9c6b6;margin-top:3px;letter-spacing:.08em;font-weight:700}

.hero-main .kicker{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.8rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--rust);margin-bottom:14px;
  display:inline-block;border-bottom:2px solid var(--rust);padding-bottom:4px;
}
.hero-main h1{
  font-family:"Arial Black", Impact, "Franklin Gothic Heavy", sans-serif;
  font-size:clamp(2.3rem, 5.2vw, 3.6rem);
  line-height:1.05;
  color:var(--ink);
  letter-spacing:-.005em;
  text-transform:none;
  margin-bottom:18px;
}
.hero-main h1 em{font-style:italic;color:var(--rust);font-family:Georgia, serif;font-weight:700}
.hero-main p.intro{
  font-size:1.15rem;max-width:620px;margin-bottom:18px;color:#1c1c1c;
}
.hero-main p.intro strong{background:var(--yellow);padding:0 4px}

/* two-column prose (newspaper-ish) */
.prose-two{
  column-count:2;column-gap:36px;column-rule:1px solid #000;
  font-size:1.05rem;
}
.prose-two p{margin-bottom:12px;break-inside:avoid}

/* ─── Section headings (newspaper-style hinge) ─── */
.hinge{
  display:flex;align-items:baseline;gap:14px;margin:48px 0 18px;
}
.hinge h2{
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:-.005em;text-transform:uppercase;color:var(--ink);
  line-height:1;
}
.hinge .rule{flex:1;border-top:2px solid var(--ink);align-self:center}
.hinge .label{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.78rem;letter-spacing:.22em;
  color:var(--rust);text-transform:uppercase;
}

/* ─── Services as a flowing list (NOT cards) ─── */
.svc-list{display:grid;grid-template-columns:1fr;gap:24px;max-width:860px}
.svc-item{
  display:grid;grid-template-columns:40px 1fr;gap:18px;
  padding-bottom:22px;border-bottom:1px dashed #666;
}
.svc-item:last-child{border-bottom:0}
.svc-item .check{
  font-family:"Arial Black",sans-serif;font-size:1.8rem;color:var(--rust);line-height:1;
}
.svc-item h3{
  font-family:"Arial Black", Impact, sans-serif;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:.005em;
  margin-bottom:6px;
}
.svc-item p{font-size:1.05rem}
.svc-item .note{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.82rem;letter-spacing:.08em;
  color:var(--rust);text-transform:uppercase;margin-top:6px;
}

/* ─── "What we don't pour" ─── */
.wontdo{
  background:#0e0e0e;color:var(--paper);padding:26px 28px;margin-top:18px;
  border-left:10px solid var(--yellow);
}
.wontdo h3{
  font-family:"Arial Black",sans-serif;color:var(--yellow);
  font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px;
}
.wontdo ul{list-style:none;columns:2;column-gap:28px;font-size:1.05rem;line-height:1.9}
.wontdo li::before{content:"X ";color:#e23b3b;font-weight:900;margin-right:6px;font-family:"Arial Black"}
.wontdo p.after{margin-top:14px;font-size:.98rem;color:#d9d6c7;font-style:italic;border-top:1px dashed #333;padding-top:12px}

/* ─── Area as prose, not a grid ─── */
.area-prose{
  background:var(--paper-2);padding:28px 30px;border:2px solid var(--ink);
  font-size:1.12rem;line-height:1.75;
}
.area-prose p{margin-bottom:12px}
.area-prose strong{background:var(--yellow);padding:0 4px;font-weight:700}

/* ─── FAQ ─── */
.faq{display:grid;gap:22px;max-width:820px}
.faq .q{
  font-family:"Arial Black",sans-serif;font-size:1.15rem;
  letter-spacing:.005em;color:var(--ink);line-height:1.3;margin-bottom:8px;
}
.faq .q::before{content:"Q.";color:var(--rust);margin-right:8px;font-family:"Arial Black"}
.faq .a::before{content:"A.";color:#000;margin-right:8px;font-family:"Arial Black";font-weight:900}
.faq .a{padding-bottom:18px;border-bottom:1px dashed #666;font-size:1.05rem}
.faq .a:last-child{border-bottom:0}

/* ─── Owner's letter / about ─── */
.letter{
  background:#fff;border:1px solid var(--ink);padding:30px 34px;
  box-shadow:6px 6px 0 var(--yellow);max-width:860px;
}
.letter h3{
  font-family:"Arial Black",sans-serif;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;color:var(--rust);
}
.letter p{margin-bottom:12px;font-size:1.08rem}
.letter .sign{
  margin-top:18px;font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.86rem;letter-spacing:.12em;
  color:var(--ink);text-transform:uppercase;
}
.letter .sign strong{display:block;font-family:"Arial Black";font-size:1.1rem;letter-spacing:.01em;text-transform:none;margin-bottom:4px}

/* ─── Bottom call-us slab ─── */
.callslab{
  background:#000;color:var(--paper);text-align:center;
  padding:44px 20px 50px;margin-top:50px;
  border-top:8px solid var(--yellow);border-bottom:8px solid var(--yellow);
}
.callslab p.pre{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.9rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:10px;
}
.callslab .big{
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(2.4rem,7vw,5rem);line-height:1;color:var(--yellow);
  text-decoration:none;display:inline-block;letter-spacing:.005em;
}
.callslab .big:hover{background:var(--yellow);color:#000}
.callslab .hours{margin-top:16px;color:#d9d6c7;font-size:1rem}

/* ─── Classified-ad footer ─── */
footer{
  background:var(--paper);
  border-top:6px double var(--ink);
  padding:30px 18px 24px;font-size:.95rem;
}
footer .fwrap{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;
}
footer .fblock h5{
  font-family:"Arial Black",sans-serif;font-size:1rem;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:8px;
}
footer .ad{
  background:var(--paper-2);border:1.5px solid var(--ink);padding:14px 16px;
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.9rem;line-height:1.7;
  letter-spacing:.04em;max-width:360px;
}
footer .ad strong{background:var(--yellow);padding:0 4px}
footer .legal{
  grid-column:1/-1;margin-top:22px;padding-top:14px;border-top:1px dashed #000;
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:.8rem;letter-spacing:.08em;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#333;
}

/* ─── Contact form (if used) ─── */
form.simple{max-width:520px;margin-top:12px}
form.simple label{
  display:block;font-family:"Courier New", Courier, monospace;font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;color:#111;
}
form.simple input,form.simple select,form.simple textarea{
  width:100%;padding:12px 14px;border:2px solid #000;background:#fffdf4;
  font-family: Verdana, Tahoma, sans-serif;font-size:1.05rem;margin-bottom:14px;border-radius:0;
}
form.simple textarea{min-height:120px;resize:vertical}
form.simple button{
  background:var(--yellow);color:#000;border:2px solid #000;
  font-family:"Arial Black",sans-serif;font-size:1.05rem;text-transform:uppercase;
  padding:14px 22px;cursor:pointer;letter-spacing:.02em;
}
form.simple button:hover{background:#000;color:var(--yellow)}
form.simple .hp{position:absolute;left:-9999px}

/* ─── Responsive ─── */
@media(max-width:820px){
  .hero-row{grid-template-columns:1fr}
  .prose-two{column-count:1}
  .wontdo ul{columns:1}
  footer .fwrap{grid-template-columns:1fr}
  .masthead-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .masthead nav a{margin-left:0;margin-right:14px}
}