/* Independent styles for the David Construction digital card. */
:root {
  color-scheme: light;
  --dc-navy: #172b3a;
  --dc-navy-2: #233d4d;
  --dc-orange: #ed8a42;
  --dc-orange-dark: #c96825;
  --dc-cream: #f7f5f0;
  --dc-white: #fffefa;
  --dc-text: #1c2a33;
  --dc-muted: #64727a;
  --dc-border: #e5e3dc;
  font-family: "DM Sans", "Manrope", Arial, sans-serif;
  color: var(--dc-text);
  background: var(--dc-cream);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body.dc-page { margin: 0; min-width: 320px; background: var(--dc-cream); }
a { color: inherit; }
.dc-shell { width: min(100% - 40px, 1080px); margin: 0 auto; padding: 30px 0 24px; }
.dc-brand { display: flex; align-items: center; gap: 18px; padding: 4px 0 26px; border-bottom: 1px solid var(--dc-border); }
.dc-logo { display: block; width: 80px; height: 84px; object-fit: contain; }
.dc-brand-name { margin: 0; color: var(--dc-navy); font-size: .98rem; font-weight: 800; letter-spacing: .12em; }
.dc-brand-tagline { margin: 6px 0 0; color: var(--dc-muted); font-size: .88rem; }
.dc-intro { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: clamp(30px, 6vw, 84px); padding: clamp(36px, 7vw, 78px) clamp(4px, 3vw, 28px); }
.dc-intro-copy { max-width: 700px; }
.dc-eyebrow { margin: 0 0 10px; color: var(--dc-orange-dark); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dc-intro h1 { max-width: 720px; margin: 0 0 20px; color: var(--dc-navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5.2vw, 4.15rem); font-weight: 500; line-height: 1.07; letter-spacing: -.035em; }
.dc-intro-copy > p:not(.dc-eyebrow) { max-width: 690px; margin: 0 0 12px; color: var(--dc-muted); font-size: 1rem; line-height: 1.75; }
.dc-promise { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px; margin-top: 23px; padding-left: 16px; border-left: 3px solid var(--dc-orange); }
.dc-promise strong { color: var(--dc-navy); font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 600; }
.dc-promise span { color: var(--dc-muted); font-size: .9rem; }
.dc-owner { width: 100%; margin: 0; text-align: center; }
.dc-owner img { display: block; width: min(100%, 195px); height: 255px; margin: auto; object-fit: contain; object-position: center; border-radius: 100px 100px 16px 16px; background: #ece9e1; }
.dc-owner figcaption { margin-top: 10px; color: var(--dc-muted); font-size: .78rem; }
.dc-services { padding: 44px clamp(20px, 5vw, 58px) 54px; border: 1px solid var(--dc-border); border-radius: 20px; background: var(--dc-white); box-shadow: 0 12px 32px rgb(23 43 58 / 5%); }
.dc-section-heading { margin-bottom: 24px; }
.dc-section-heading h2, .dc-qr-section h2 { margin: 0 0 10px; color: var(--dc-navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 3.8vw, 2.65rem); font-weight: 500; line-height: 1.15; }
.dc-section-heading > p:last-child, .dc-qr-section > div:first-child > p:last-child { margin: 0; color: var(--dc-muted); line-height: 1.65; }
.dc-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.dc-service { display: flex; gap: 14px; min-width: 0; padding: 18px 0; border-top: 1px solid var(--dc-border); }
.dc-service-number { flex: 0 0 auto; padding-top: 2px; color: var(--dc-orange-dark); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.dc-service h3 { margin: 0 0 5px; color: var(--dc-navy); font-size: .98rem; line-height: 1.4; }
.dc-service p { margin: 0; color: var(--dc-muted); font-size: .87rem; line-height: 1.55; }
.dc-actions { margin-top: 30px; padding: clamp(28px, 5vw, 48px); border-radius: 20px; color: var(--dc-white); background: var(--dc-navy); }
.dc-section-heading-light h2 { color: var(--dc-white); }
.dc-section-heading-light .dc-eyebrow { color: #f5a76d; }
.dc-action-buttons { display: flex; flex-wrap: wrap; gap: 11px; }
.dc-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: .9rem; font-weight: 750; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.dc-button:hover { transform: translateY(-1px); }
.dc-button:focus-visible { outline: 3px solid #f7b27d; outline-offset: 3px; }
.dc-button-orange { color: var(--dc-navy); background: var(--dc-orange); }
.dc-button-orange:hover { background: #f2a166; }
.dc-button-light { color: var(--dc-navy); background: var(--dc-white); }
.dc-button-light:hover { background: var(--dc-cream); }
.dc-button-outline { color: var(--dc-white); border-color: rgb(255 254 250 / 45%); background: transparent; }
.dc-button-outline:hover { border-color: var(--dc-orange); color: #ffc18f; }
.dc-button-navy { color: var(--dc-white); background: var(--dc-navy); }
.dc-button-navy:hover { background: var(--dc-navy-2); }
.dc-config-note { margin: 14px 0 0; color: #c6d0d4; font-size: .8rem; line-height: 1.5; }
.dc-contact-details { display: flex; flex-wrap: wrap; gap: 8px 13px; margin: 21px 0 0; color: #e0e5e7; font-size: .9rem; }
.dc-contact-details a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dc-contact-details a:hover { color: #ffc18f; }
.dc-qr-section { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin: 30px 0; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--dc-border); border-radius: 20px; background: var(--dc-white); }
.dc-qr-section > div:first-child { max-width: 520px; }
.dc-qr-area { display: grid; justify-items: center; gap: 10px; }
.dc-qr-frame { padding: 12px; border: 1px solid var(--dc-border); border-radius: 12px; background: #fff; }
.dc-qr-frame img { display: block; width: min(52vw, 260px); height: auto; }
.dc-qr-area .dc-config-note { max-width: 250px; margin: 0; color: var(--dc-muted); text-align: center; }
.dc-qr-error { margin: 0; color: #9a3f20; font-size: .85rem; }
.dc-footer { display: flex; justify-content: space-between; gap: 12px; padding: 20px 4px 0; border-top: 1px solid var(--dc-border); color: var(--dc-muted); font-size: .8rem; }
[hidden] { display: none !important; }

/* Our Work mosaic. Each focal point is horizontal % followed by vertical %. */
.dc-work { margin-top: 30px; padding: 40px clamp(20px, 5vw, 58px) 46px; border: 1px solid var(--dc-border); border-radius: 20px; background: var(--dc-white); box-shadow: 0 12px 32px rgb(23 43 58 / 5%); }
.dc-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "bath garage garage" "bath plumbing flooring" "window egress flooring"; grid-template-rows: 260px 215px 215px; gap: 12px; }
.dc-work-item { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: 11px; background: #e9e6df; }
.dc-work-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dc-work-position, 50% 50%); }
.dc-work-item figcaption { position: absolute; inset: auto 0 0; padding: 28px 13px 12px; color: #fff; background: linear-gradient(transparent, rgb(16 33 45 / 78%)); font-size: .78rem; font-weight: 750; letter-spacing: .015em; }
.dc-work-bath { grid-area: bath; --dc-work-position: 50% 54%; }
.dc-work-garage { grid-area: garage; --dc-work-position: 50% 55%; }
.dc-work-plumbing { grid-area: plumbing; --dc-work-position: 62% 48%; }
.dc-work-flooring { grid-area: flooring; --dc-work-position: 50% 56%; }
.dc-work-window { grid-area: window; --dc-work-position: 50% 34%; }
.dc-work-egress { grid-area: egress; --dc-work-position: 50% 61%; }

@media (max-width: 900px) {
  .dc-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "bath egress" "garage garage" "plumbing plumbing" "flooring window"; grid-template-rows: auto; gap: 10px; }
  .dc-work-item { aspect-ratio: 4 / 5; }
  .dc-work-garage { aspect-ratio: 2.31 / 1; }
  .dc-work-plumbing { aspect-ratio: 4 / 3; }
  .dc-work-item figcaption { padding: 24px 10px 10px; font-size: .72rem; }
}

@media (max-width: 760px) {
  .dc-shell { width: min(100% - 28px, 600px); padding-top: 18px; }
  .dc-brand { gap: 12px; padding-bottom: 18px; }
  .dc-logo { width: 62px; height: 68px; }
  .dc-brand-name { font-size: .82rem; letter-spacing: .1em; }
  .dc-brand-tagline { font-size: .78rem; }
  .dc-intro { grid-template-columns: minmax(0, 1fr) 125px; align-items: start; gap: 14px; padding: 38px 2px 34px; }
  .dc-intro h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .dc-intro-copy > p:not(.dc-eyebrow) { font-size: .93rem; line-height: 1.65; }
  .dc-owner { padding-top: 35px; }
  .dc-owner img { width: 120px; height: 185px; border-radius: 70px 70px 12px 12px; }
  .dc-owner figcaption { font-size: .68rem; }
  .dc-services { padding: 30px 22px 34px; border-radius: 15px; }
  .dc-service-grid { grid-template-columns: 1fr; }
  .dc-work { margin-top: 20px; padding: 30px 22px 34px; border-radius: 15px; }
  .dc-actions { margin-top: 20px; padding: 27px 22px; border-radius: 15px; }
  .dc-action-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .dc-button { min-height: 48px; padding: 11px 12px; font-size: .84rem; }
  .dc-qr-section { grid-template-columns: 1fr; justify-items: center; margin: 20px 0; padding: 26px 22px; border-radius: 15px; }
  .dc-qr-section > div:first-child { justify-self: start; }
  .dc-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .dc-intro { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
  .dc-owner { padding-top: 48px; }
  .dc-owner img { width: 94px; height: 150px; }
  .dc-promise strong { font-size: 1.4rem; }
  .dc-work { padding: 25px 16px 28px; }
  .dc-work-grid { gap: 8px; }
  .dc-work-item figcaption { padding: 22px 8px 8px; font-size: .66rem; }
  .dc-action-buttons { grid-template-columns: 1fr; }
  .dc-contact-details { flex-direction: column; }
  .dc-contact-details span { display: none; }
}

/* WhatsApp CTA is scoped to the independent digital card. */
.dc-button-whatsapp { gap: 9px; color: #fff; background: #25D366; }
.dc-button-whatsapp:hover { background: #1fbd5b; }
.dc-button-whatsapp svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
@media (max-width: 760px) {
  .dc-button-whatsapp { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Primary contact actions under the introduction, spanning the full intro width. */
.dc-intro-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: -4px; }
.dc-intro-actions .dc-button { min-height: 46px; padding: 11px 16px; white-space: normal; }
.dc-intro-actions .dc-button-whatsapp { color: #fff; }
@media (max-width: 520px) {
  .dc-intro-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 0; }
  .dc-intro-actions .dc-button { width: 100%; }
}

/* Service Areas: a clear heading, three compact locality cards, and a consultation note. */
.dc-service-areas{margin:0 0 24px;padding:26px clamp(20px,4vw,38px) 24px;border:1px solid var(--dc-border);border-top:4px solid var(--dc-orange);border-radius:20px;background:var(--dc-white);box-shadow:0 10px 26px rgb(23 43 58 / 6%)}
.dc-service-areas-heading{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.dc-service-areas-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:50%;color:var(--dc-orange-dark);background:var(--dc-cream)}
.dc-service-areas-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-service-areas-heading .dc-eyebrow{margin:0 0 3px;font-size:.66rem}
.dc-service-areas h2{margin:0;color:var(--dc-navy);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,3.4vw,2.1rem);font-weight:500;line-height:1.15}
.dc-service-area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dc-service-area-card{min-width:0;padding:15px 14px;border:1px solid var(--dc-border);border-radius:12px;background:var(--dc-cream)}
.dc-service-area-card h3{margin:0 0 11px;padding-left:9px;border-left:3px solid var(--dc-orange);color:var(--dc-navy);font-size:.73rem;font-weight:800;letter-spacing:.075em;line-height:1.35;overflow-wrap:anywhere}
.dc-service-area-card ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.dc-service-area-card li{max-width:100%;padding:5px 8px;border:1px solid var(--dc-border);border-radius:999px;background:var(--dc-white);color:var(--dc-muted);font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}
.dc-service-area-note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 16px;border-left:3px solid var(--dc-orange);border-radius:0 10px 10px 0;background:#f8f4ed}
.dc-service-area-note h3{margin:0 0 3px;color:var(--dc-navy);font-size:.9rem;line-height:1.35}
.dc-service-area-note p{margin:0;color:var(--dc-muted);font-size:.82rem;line-height:1.5}
.dc-service-area-note a{flex:0 0 auto;color:var(--dc-orange-dark);font-size:.8rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.dc-service-area-note a:hover{color:var(--dc-navy)}
@media(max-width:760px){.dc-service-areas{margin-bottom:20px;padding:22px 18px 18px;border-radius:15px}.dc-service-areas-heading{margin-bottom:14px}.dc-service-area-grid{grid-template-columns:1fr;gap:8px}.dc-service-area-card{padding:13px 14px}.dc-service-area-card ul{gap:6px}.dc-service-area-note{align-items:flex-start;flex-direction:column;gap:8px;margin-top:11px;padding:12px 14px}}
@media(max-width:420px){.dc-service-areas{padding:19px 15px 15px}.dc-service-area-card li{font-size:.73rem}}