@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

* { box-sizing: border-box; }
:root {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color: #202522;
  background: #f4efe5;
  --charcoal: #202522;
  --paper: #fffdf8;
  --sawdust: #e8b44f;
  --orange: #d95f32;
  --green: #466b4b;
  --muted: #697067;
  --contractor-yellow: #f5b400;
  --contractor-black: #101210;
  --contractor-cream: #f6f1e8;
}
body { margin: 0; background: #f4efe5; background-image: radial-gradient(#d9d0c0 0.7px, transparent 0.7px); background-size: 14px 14px; }
.wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: var(--charcoal); color: white; border-bottom: 4px solid var(--sawdust); }
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { color: white; text-decoration: none; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 800; letter-spacing: .03em; font-size: 1.35rem; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 5px; color: var(--charcoal); background: var(--sawdust); font-size: 1.4rem; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { color: #d8d5c9; text-decoration: none; padding: 10px 14px; border-bottom: 2px solid transparent; font-weight: 700; font-size: .9rem; }
.nav-links a:hover, .nav-links a.active { color: white; border-bottom-color: var(--sawdust); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 42px; align-items: center; padding: 72px 0 52px; }
.hero-copy-block { max-width: 620px; }
.eyebrow { margin: 0 0 10px; font-family: "Barlow Condensed", sans-serif; font-size: .85rem; font-weight: 800; letter-spacing: .14em; color: var(--orange); }
h1, h2 { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; }
h1 { font-size: clamp(3.2rem, 7vw, 6.2rem); line-height: .88; letter-spacing: .01em; margin: 0 0 22px; }
h2 { margin: 0 0 8px; font-size: 2rem; letter-spacing: .01em; }
.hero-copy { font-size: 1.08rem; line-height: 1.6; color: #596158; max-width: 580px; }
.hero-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 14px; color: var(--charcoal); font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 5px; }
.hero-link span { color: var(--orange); font-size: 1.3rem; }
.hero-image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--paper); outline: 1px solid #cbbfa9; box-shadow: 12px 12px 0 var(--sawdust); transform: rotate(2deg); }
.page-intro { padding: 58px 0 34px; max-width: 680px; }
.page-intro h1 { font-size: clamp(3rem, 7vw, 5.5rem); margin-bottom: 18px; }
.page-intro .hero-copy { margin: 0; }
.projects-page { padding-bottom: 20px; }
.project-list { display: grid; gap: 16px; }
.project-card { background: var(--paper); border: 1px solid #d8cdbb; border-left: 5px solid var(--green); box-shadow: 5px 5px 0 rgba(32,37,34,.08); }
.project-card summary { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; padding: 24px 28px; cursor: pointer; list-style: none; }
.project-card summary::-webkit-details-marker { display: none; }
.project-card summary::after { content: "+"; color: var(--orange); font-family: "Barlow Condensed", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.project-card[open] summary::after { content: "-"; }
.project-number { color: var(--orange); font-family: "Barlow Condensed", sans-serif; font-size: 2.5rem; font-weight: 800; }
.project-summary { display: grid; gap: 5px; }
.project-summary strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .01em; }
.project-summary small { color: var(--muted); font-size: .9rem; }
.summary-action { color: var(--green); font-size: .85rem; font-weight: 800; text-transform: uppercase; }
.project-content { border-top: 1px solid #e1d8ca; padding: 24px 28px 28px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.project-meta span { background: #edf0e8; color: var(--green); padding: 6px 10px; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.project-columns { display: grid; grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); gap: 42px; }
.project-columns h2 { font-size: 1.35rem; margin-bottom: 14px; }
.supply-list, .steps { margin: 0; padding-left: 22px; color: #53605a; line-height: 1.65; }
.supply-list li, .steps li { padding-left: 5px; margin-bottom: 8px; }
.project-tool-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 24px; color: var(--charcoal); font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 4px; }
.project-tool-link span { color: var(--orange); font-size: 1.2rem; }
.calculator-card { background: var(--paper); border: 1px solid #d8cdbb; border-top: 5px solid var(--charcoal); border-radius: 4px; padding: clamp(22px, 4vw, 38px); box-shadow: 7px 7px 0 rgba(32,37,34,.1); overflow-wrap: anywhere; }
.card-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.card-heading > div:first-child { flex: 1; min-width: 0; }
.card-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.calculator-image { width: 92px; height: 72px; object-fit: cover; border: 4px solid white; outline: 1px solid #cbbfa9; transform: rotate(-2deg); flex: 0 0 auto; }
.badge { background: var(--sawdust); color: var(--charcoal); height: fit-content; padding: 7px 12px; border-radius: 2px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 700; font-size: .9rem; flex: 0 0 auto; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
label { font-weight: 700; font-size: .9rem; color: #3c4942; min-width: 0; }
input, select { width: 100%; min-width: 0; margin-top: 8px; padding: 13px 12px; border: 1px solid #cbbfa9; border-radius: 2px; font: inherit; background: white; }
input:focus, select:focus { outline: 3px solid #f5d994; border-color: var(--orange); }
button { margin-top: 22px; border: 0; border-radius: 2px; padding: 14px 20px; font: inherit; font-weight: 800; cursor: pointer; background: var(--orange); color: white; }
button:hover { filter: brightness(.95); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--sawdust); outline-offset: 3px; }
.result { margin-top: 24px; padding: 22px; border-radius: 2px; background: #edf0e8; border: 1px solid #c9d4c3; border-left: 5px solid var(--green); }
.result-number { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 2.8rem; font-weight: 800; letter-spacing: .01em; }
.result p { margin: 6px 0 0; color: #53605a; line-height: 1.5; }
.tools { padding: 58px 0 25px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.tool { background: white; border: 1px solid #dce3de; border-radius: 15px; padding: 20px; display: grid; gap: 6px; }
.tool span { font-size: 1.6rem; }
.tool small { color: #6a766f; }
.note { padding: 25px 0 65px; color: #66736b; }
.note p { line-height: 1.6; }
footer { background: var(--charcoal); color: #d2cec1; padding: 25px 0; font-size: .85rem; border-top: 4px solid var(--sawdust); }
.secondary-card { margin-top: 24px; }

/* Contractor-style shared navigation */
.contractor-header { background: #0d0f0e; border-bottom: 0; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.contractor-header .nav { min-height: 112px; }
.contractor-brand { position: relative; display: inline-flex; align-items: baseline; padding: 28px 0 18px; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: .9; letter-spacing: -.02em; text-shadow: 0 2px 0 #000; }
.contractor-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 5px; background: var(--contractor-yellow); box-shadow: 0 3px 0 #5b4300; }
.brand-roof { position: absolute; left: 2px; top: 12px; width: 54%; height: 16px; border-top: 5px solid var(--contractor-yellow); transform: skewY(-5deg); transform-origin: left center; }
.brand-honey { color: var(--contractor-yellow); }
.brand-planner { color: #fffaf0; }
.contractor-nav { gap: 22px; }
.contractor-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 18px 4px 12px; color: #f2eee6; border-bottom: 4px solid transparent; font-family: "Barlow Condensed", sans-serif; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.contractor-nav a:hover, .contractor-nav a.active { color: var(--contractor-yellow); border-bottom-color: var(--contractor-yellow); }
.nav-icon { font-size: 1.35em; line-height: 1; }
.hazard-stripe { height: 13px; background: repeating-linear-gradient(-45deg, var(--contractor-yellow) 0 18px, #111 18px 36px); box-shadow: inset 0 1px rgba(255,255,255,.15); }

/* Homepage contractor hero */
.home-page { background: #f4efe5; }
.home-page .contractor-hero { position: relative; overflow: hidden; background: #17130d; color: white; }
.contractor-hero-grid { min-height: 600px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: stretch; position: relative; z-index: 1; }
.contractor-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 52px 64px 0; position: relative; z-index: 2; }
.contractor-hero-copy::before { content: ""; position: absolute; inset: 0 -80px 0 -9999px; background: linear-gradient(90deg, rgba(8,8,7,.98) 0%, rgba(15,13,9,.96) 72%, rgba(15,13,9,.18) 100%); z-index: -1; }
.contractor-kicker { margin: 0 0 16px; color: var(--contractor-yellow); font-family: "Barlow Condensed", sans-serif; font-weight: 800; letter-spacing: .16em; font-size: .92rem; }
.contractor-hero-copy h1 { display: grid; margin: 0 0 24px; font-size: clamp(4.2rem, 7vw, 7.2rem); line-height: .82; color: #f7f4ed; text-shadow: 0 3px 0 #000; }
.contractor-hero-copy h1 strong { color: var(--contractor-yellow); font-weight: 800; }
.contractor-hero-copy > p:not(.contractor-kicker) { margin: 0; max-width: 620px; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; color: #f1eee7; }
.contractor-hero-photo { min-height: 600px; background-image: linear-gradient(90deg, rgba(20,15,9,.42), rgba(20,15,9,0) 28%), url('https://images.unsplash.com/photo-1581783898377-1c85bf937427?auto=format&fit=crop&w=1600&q=88'); background-size: cover; background-position: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.contractor-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 24px; border: 3px solid var(--contractor-yellow); border-radius: 4px; text-decoration: none; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 1.15rem; letter-spacing: .03em; box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .15s ease, filter .15s ease; }
.contractor-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.contractor-btn.primary { background: var(--contractor-yellow); color: #141310; }
.contractor-btn.secondary { background: rgba(16,18,16,.78); color: white; }

.feature-strip { background: var(--contractor-cream); border-top: 1px solid #d8d0c2; border-bottom: 1px solid #d8d0c2; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; padding: 34px 22px; border-right: 1px solid #d8d0c2; }
.feature-item:first-child { padding-left: 0; }
.feature-item:last-child { border-right: 0; padding-right: 0; }
.feature-icon { width: 64px; height: 64px; display: grid; place-items: center; background: #111; color: var(--contractor-yellow); border-radius: 10px; border: 3px solid #111; box-shadow: inset 0 0 0 3px rgba(245,180,0,.18); font-family: "Barlow Condensed", sans-serif; font-size: 2rem; font-weight: 800; }
.feature-icon.hardhat { border-radius: 50% 50% 42% 42%; }
.feature-item h2 { margin: 0 0 6px; font-size: 1.55rem; line-height: .98; }
.feature-item p { margin: 0; color: #4f544f; line-height: 1.45; font-size: .95rem; }
.home-disclaimer { padding: 42px 0 54px; color: #5f665f; }
.home-disclaimer h2 { color: #202522; }
.home-disclaimer p { max-width: 820px; line-height: 1.6; }

@media (max-width: 980px) {
  .contractor-header .nav { min-height: 96px; }
  .contractor-brand { font-size: clamp(1.9rem, 4vw, 2.8rem); }
  .contractor-nav { gap: 12px; }
  .contractor-nav a { font-size: 1rem; }
  .contractor-hero-grid { grid-template-columns: 1fr 1fr; min-height: 520px; }
  .contractor-hero-copy { padding-right: 28px; }
  .contractor-hero-photo { min-height: 520px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-item { border-bottom: 1px solid #d8d0c2; }
  .feature-item:nth-child(2) { border-right: 0; }
  .feature-item:nth-child(3), .feature-item:nth-child(4) { border-bottom: 0; }
  .feature-item:first-child, .feature-item:last-child { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 720px) {
  .nav { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 10px 8px; }
  .hero { grid-template-columns: 1fr; padding-top: 48px; gap: 30px; }
  .hero-image { max-width: 420px; justify-self: center; }
  .grid, .tool-grid { grid-template-columns: 1fr; }
  .project-card summary { grid-template-columns: 48px 1fr 20px; gap: 12px; padding: 20px 16px; }
  .project-number { font-size: 2rem; }
  .project-summary strong { font-size: 1.35rem; }
  .summary-action { display: none; }
  .project-content { padding: 20px 16px 24px; }
  .project-columns { grid-template-columns: 1fr; gap: 24px; }
  .card-heading { align-items: flex-start; }
  .calculator-image { width: 76px; height: 62px; }
  input, select { font-size: 16px; }
  button { min-height: 48px; }
  .contractor-header .nav { flex-wrap: wrap; justify-content: center; padding: 10px 0 14px; }
  .contractor-brand { width: 100%; justify-content: center; padding-top: 24px; font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .brand-roof { left: 22%; width: 34%; }
  .contractor-nav { width: 100%; justify-content: center; }
  .contractor-hero-grid { display: block; min-height: 0; }
  .contractor-hero-copy { min-height: 520px; padding: 54px 0 56px; }
  .contractor-hero-copy::before { inset: 0 -9999px; background: linear-gradient(rgba(10,10,8,.90), rgba(10,10,8,.90)); }
  .contractor-hero-photo { position: absolute; inset: 0; min-height: 100%; opacity: .52; z-index: -1; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-item { border-right: 0; border-bottom: 1px solid #d8d0c2 !important; padding: 26px 0 !important; }
  .feature-item:last-child { border-bottom: 0 !important; }
}

@media (max-width: 520px) {
  .wrap { width: min(100% - 22px, 1080px); }
  .nav { flex-wrap: wrap; justify-content: center; padding: 12px 0 10px; }
  .brand { width: 100%; text-align: center; font-size: 1.2rem; }
  .nav-links { width: 100%; justify-content: center; flex-wrap: wrap; }
  .nav-links a { padding: 9px 10px; font-size: .85rem; }
  h1 { font-size: clamp(2.7rem, 15vw, 4rem); }
  .page-intro { padding-top: 38px; }
  .calculator-card { padding: 20px 16px; box-shadow: 4px 4px 0 rgba(32,37,34,.1); }
  .card-heading { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .card-heading > div:first-child { grid-column: 1 / -1; }
  .calculator-image { grid-column: 1; grid-row: 2; }
  .badge { grid-column: 2; grid-row: 2; align-self: center; }
  button { width: 100%; }
  .result { padding: 18px 16px; }
  .result-number { font-size: 2.35rem; }
  .project-card summary { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  .contractor-brand { font-size: clamp(1.95rem, 9vw, 2.7rem); }
  .contractor-nav a { font-size: .9rem; gap: 5px; }
  .nav-icon { font-size: 1.1em; }
  .contractor-hero-copy h1 { font-size: clamp(3.5rem, 18vw, 5.2rem); }
  .hero-actions { display: grid; }
  .contractor-btn { width: 100%; justify-content: center; }
  .feature-item { grid-template-columns: 58px 1fr; gap: 14px; }
  .feature-icon { width: 54px; height: 54px; font-size: 1.7rem; }
}