:root{--dgc-bg:#14161a;--dgc-navy:#1d2a3a;--dgc-panel:#1e2127;--dgc-ink:#f4f1ea;--dgc-muted:#b8b2a4;--dgc-accent:#f2760a;--dgc-amber:#ffb03a;--dgc-line:#2e333d;--dgc-radius:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--dgc-bg);color:var(--dgc-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:var(--dgc-amber)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--dgc-amber);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;background:rgba(20,22,26,.96);border-bottom:3px solid var(--dgc-accent);z-index:10}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:900;letter-spacing:.03em;font-size:1.15rem;color:var(--dgc-ink);text-decoration:none;text-transform:uppercase}
.logo span{color:var(--dgc-accent)}
nav.main{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.main a{display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;color:var(--dgc-ink);text-decoration:none;font-weight:700}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--dgc-amber);text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;padding:0;display:block}
.hero img{width:100%;height:52vh;min-height:340px;object-fit:cover;display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,28,.88) 30%,rgba(16,20,28,.25))}
.hero .inner{position:absolute;inset:0;display:flex;align-items:center}
.kicker{display:inline-block;background:var(--dgc-accent);color:#14100a;font-weight:900;padding:3px 12px;border-radius:4px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.hero h1{font-size:clamp(2.3rem,6.5vw,4.1rem);line-height:.98;margin:.3em 0;text-transform:uppercase;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--dgc-amber)}
.lede{font-size:clamp(1.02rem,2.4vw,1.28rem);color:#e8e2d4;max-width:46ch}
.cta{display:inline-block;background:var(--dgc-accent);color:#171106;font-weight:900;padding:14px 26px;border-radius:8px;text-decoration:none;text-transform:uppercase;letter-spacing:.05em}
.cta:hover{transform:translateY(-2px)}
.cta.ghost{background:transparent;color:var(--dgc-ink);border:2px solid #4a505c;margin-left:10px}
section{padding:44px 0}h2{font-size:clamp(1.5rem,4vw,2.25rem);text-transform:uppercase;margin:0 0 8px}
.sub{color:var(--dgc-muted);max-width:64ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px}
.card{background:var(--dgc-panel);border:1px solid var(--dgc-line);border-top:4px solid var(--dgc-accent);border-radius:var(--dgc-radius);padding:22px;color:var(--dgc-ink);text-decoration:none;display:block}
.card h3{margin:.2em 0;text-transform:uppercase}
.card p{color:var(--dgc-muted)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#171106;background:var(--dgc-amber);padding:2px 8px;border-radius:4px}
.note{background:#0e1013;border:1px dashed #454b57;border-radius:10px;padding:14px 16px;color:var(--dgc-muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}
.step{background:var(--dgc-navy);border-radius:var(--dgc-radius);padding:22px}
.step b{color:var(--dgc-amber);font-size:1.6rem}
figure.shot{margin:0}figure.shot img{width:100%;border-radius:var(--dgc-radius);display:block}
figure.shot figcaption{color:var(--dgc-muted);font-size:.92rem;margin-top:8px}
footer.site{border-top:3px solid var(--dgc-accent);padding:32px 0;color:var(--dgc-muted);font-size:.95rem;background:#101216}
footer.site a{color:var(--dgc-muted)}
form.contact{display:grid;gap:12px;max-width:560px}form.contact label{font-weight:700}
form.contact input,form.contact textarea,form.contact select{background:#0e1013;border:1px solid #454b57;border-radius:8px;color:var(--dgc-ink);padding:12px}
form.contact button.send[type="submit"]{background:var(--dgc-accent)!important;color:#171106!important;border:0!important;border-radius:8px!important;font-weight:900;padding:13px 24px;min-height:48px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
/* --- PocketPapi MCP effect: gradient-mesh (Backgrounds, stageable) - palette adaptation --- */
[data-sc-effect="gradient-mesh"]{position:relative;isolation:isolate;overflow:hidden;background:#171d27}
[data-sc-effect="gradient-mesh"]::before{content:"";position:absolute;inset:-35%;z-index:-1;background:radial-gradient(circle at 20% 30%,#f2760a 0 10%,transparent 38%),radial-gradient(circle at 82% 72%,#31517a 0 10%,transparent 36%);filter:blur(30px);opacity:.38;animation:sc-mesh 16s ease-in-out infinite alternate}
@keyframes sc-mesh{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){[data-sc-effect="gradient-mesh"]::before{animation:none}}
/* --- PocketPapi MCP effect: fade-up-reveal (Scroll reveals, stageable) --- */
[data-sc-effect="fade-up"]{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms ease}
[data-sc-effect="fade-up"].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-sc-effect="fade-up"]{opacity:1;transform:none;transition:none}}
/* --- PocketPapi MCP effect: staggered-list (Scroll reveals, stageable) --- */
[data-sc-effect="stagger"] [data-sc-stagger-item]{opacity:0;transform:translateY(12px);transition:opacity 450ms ease,transform 450ms ease;transition-delay:calc(var(--sc-index,0)*var(--sc-motion-stagger,70ms))}
[data-sc-effect="stagger"].is-visible [data-sc-stagger-item]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-sc-effect="stagger"] [data-sc-stagger-item]{opacity:1;transform:none;transition:none}}
/* --- PocketPapi MCP effect: hover-lift-card (Micro-interactions, stageable) --- */
[data-sc-effect="hover-lift"]{transition:transform 180ms ease,box-shadow 180ms ease}
[data-sc-effect="hover-lift"]:hover,[data-sc-effect="hover-lift"]:focus-visible{transform:translateY(-5px);box-shadow:0 16px 30px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){[data-sc-effect="hover-lift"]{transition:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta:hover{transform:none}}

/* --- Theme-collision hardening (2026-11-08 fix) ---
   /pocketpapi-theme.css loads AFTER this file and sets body/heading colors directly
   (html[data-site-theme="1"] rules). These overrides restore the authored palette. */
html[data-site-theme="1"] body{background:var(--dgc-bg)!important;color:var(--dgc-ink)!important}
html[data-site-theme="1"] :is(h1,h2,h3,h4,h5,h6){color:inherit}
.hero .lede{color:#e8e2d4}
html[data-site-theme="1"] :is(a,button,input,textarea,select):focus-visible{outline:3px solid var(--dgc-amber);outline-offset:2px}

/* --- Mobile sidebar menu + minimized cookie consent (2026-11-08) --- */
/* Consent palette: the platform consent surface reads --pp-cookie-* tokens;
   these are Denny's values (charcoal panel, cream text, safety-orange accent). */
:root{--pp-cookie-background:#14161a;--pp-cookie-text:#f4f1ea;--pp-cookie-muted:#b8b2a4;--pp-cookie-border:#2e333d;--pp-cookie-accent:#f2760a;--pp-cookie-accent-text:#171106}
/* COOKIE MINIMIZED: the pre-choice expanded banner card never shows; only the
   platform's own round settings button is visible (platform JS untouched, so
   tap -> its settings dialog -> Save persists via the platform's own code path). */
body .pp-cookie-consent{display:none!important}
html body .pp-cookie-consent__settings[hidden]{display:grid!important}
html body .pp-cookie-consent__settings{background:var(--dgc-bg)!important;border:2px solid var(--dgc-accent)!important;color:var(--dgc-amber)!important;width:52px;height:52px;min-height:52px!important;box-shadow:0 10px 26px rgba(0,0,0,.5)}
html body .pp-cookie-consent__settings .pp-cookie-consent__mark{background:transparent}
html body .pp-cookie-consent__settings .pp-cookie-consent__eye{background:var(--dgc-accent);border-color:var(--dgc-bg);color:#171106}
html.dgc-sidebar-open .pp-cookie-consent__settings{z-index:800}
/* Consent settings dialog, on-palette */
body .pp-cookie-consent__dialog{background:rgba(8,9,12,.66)}
.pp-cookie-consent__card h2{text-transform:none;letter-spacing:0;color:var(--dgc-ink)}
.pp-cookie-consent__card .pp-cookie-consent__close{width:44px;height:44px;min-height:44px!important;font-size:1.25rem!important}
.pp-cookie-consent__dialog-actions button{background:var(--dgc-accent);color:#171106;border:0;border-radius:8px;min-height:48px;padding:0 24px;font:inherit;font-weight:900;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.pp-cookie-consent__dialog-actions button:hover{filter:brightness(1.07)}
/* MOBILE NAV: hamburger + slide-in sidebar at <=820px (desktop nav untouched).
   Class names are dgc-prefixed: the platform starter CSS owns .nav-toggle. */
.dgc-nav-toggle{display:none}
.dgc-sidebar{display:none}
.dgc-scrim{display:none}
@media (max-width:1180px){
.nav{flex-wrap:nowrap;padding:10px 0;gap:12px}
.logo{font-size:1rem;line-height:1.18;min-height:48px;flex:1 1 auto;min-width:0}
nav.main{display:none}
.dgc-nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin-left:auto;padding:0;background:var(--dgc-panel);border:1px solid var(--dgc-line);border-radius:8px;cursor:pointer}
.dgc-nav-toggle__bars{position:relative;display:block;width:24px;height:2px;background:var(--dgc-ink)}
.dgc-nav-toggle__bars::before,.dgc-nav-toggle__bars::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--dgc-ink)}
.dgc-nav-toggle__bars::before{top:-7px}
.dgc-nav-toggle__bars::after{top:7px}
.dgc-nav-toggle[aria-expanded="true"] .dgc-nav-toggle__bars,.dgc-nav-toggle[aria-expanded="true"] .dgc-nav-toggle__bars::before,.dgc-nav-toggle[aria-expanded="true"] .dgc-nav-toggle__bars::after{background:var(--dgc-amber)}
.dgc-scrim{display:block;position:fixed;inset:0;z-index:890;background:rgba(8,9,12,.62);opacity:0;transition:opacity 240ms ease}
.dgc-scrim[hidden]{display:none}
.dgc-scrim.is-open{opacity:1}
.dgc-sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:900;width:min(320px,86vw);height:100dvh;background:var(--dgc-panel);border-right:3px solid var(--dgc-accent);box-shadow:18px 0 44px rgba(0,0,0,.45);transform:translateX(-106%);visibility:hidden;transition:transform 260ms ease,visibility 0s linear 260ms}
.dgc-sidebar.is-open{transform:none;visibility:visible;transition:transform 260ms ease,visibility 0s}
.dgc-sidebar__head{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--dgc-line)}
.dgc-sidebar__brand{font-weight:900;letter-spacing:.03em;font-size:1rem;color:var(--dgc-ink);text-transform:uppercase;line-height:1.2}
.dgc-sidebar__brand span{color:var(--dgc-accent)}
.dgc-sidebar__close{flex:none;margin-left:auto;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--dgc-line);border-radius:8px;color:var(--dgc-ink);font-size:1.5rem;line-height:1;cursor:pointer}
.dgc-sidebar__nav{display:flex;flex-direction:column;padding:8px 0}
.dgc-sidebar__nav a{display:flex;align-items:center;min-height:56px;padding:10px 20px;color:var(--dgc-ink);text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--dgc-line)}
.dgc-sidebar__nav a:last-child{border-bottom:1px solid var(--dgc-line)}
.dgc-sidebar__nav a[aria-current="page"]{color:var(--dgc-amber);box-shadow:inset 4px 0 0 var(--dgc-accent);background:rgba(242,118,10,.08)}
.dgc-sidebar__foot{margin-top:auto;padding:18px 20px 22px;border-top:1px solid var(--dgc-line);display:grid;gap:6px}
.dgc-sidebar__cta{text-align:center}
.dgc-sidebar__fb{display:inline-flex;align-items:center;min-height:48px;color:var(--dgc-amber);font-weight:700;text-decoration:none}
html.dgc-sidebar-open,html.dgc-sidebar-open body{overflow:hidden}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){.dgc-sidebar,.dgc-scrim{transition:none}}

/* === Modernize pass 2026-11-08 (taste + impeccable finish, crew-gated) ===
   Logo system, gallery treatment, steps timeline, card/button polish.
   Catalog effects integrated this pass: timeline-draw (steps band) and
   parallax-layer (hero) — compose-only recipes adapted to the --dgc tokens;
   gallery hover-zoom = the taste motion layer (transform + opacity only). */
.logo-mark{height:42px;width:auto;display:block;border-radius:6px;border:1px solid var(--dgc-line)}
.dgc-sidebar__logo{width:168px;max-width:72%;height:auto;display:block;border-radius:8px;border:1px solid var(--dgc-line)}
.footer-logo{width:180px;max-width:60%;height:auto;display:block;border-radius:10px;border:1px solid var(--dgc-line)}
.footer-tag{color:var(--dgc-amber);font-weight:700}
.brand-logo{width:min(320px,80%);height:auto;display:block;border-radius:12px;border:1px solid var(--dgc-line)}
.brand-tag{color:var(--dgc-amber);font-weight:800;font-size:1.05rem;margin-top:14px}
.brand-band{background:#101216;border-top:1px solid var(--dgc-line);border-bottom:1px solid var(--dgc-line)}
section{padding:48px 0}
h2{letter-spacing:.02em}
.card{padding:24px;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease}
.card:hover{border-color:#454b57}
.cta{transition:transform 160ms ease,filter 160ms ease}
.cta:hover{filter:brightness(1.06)}
.cta:active{transform:translateY(0)}
figure.shot{position:relative;background:var(--dgc-panel);border:1px solid var(--dgc-line);border-radius:var(--dgc-radius);overflow:hidden}
figure.shot img{aspect-ratio:4/3;object-fit:cover;transition:transform 600ms ease}
figure.shot:hover img,figure.shot:focus-within img{transform:scale(1.03)}
figure.shot figcaption{padding:14px 16px 16px;margin:0;color:var(--dgc-muted)}
figure.shot figcaption strong{color:var(--dgc-ink)}
.shot-chip{position:absolute;top:12px;left:12px;z-index:2;display:inline-block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2a1503;background:var(--dgc-amber);padding:5px 10px;border-radius:999px}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:46px;height:3px;background:var(--dgc-line)}
.steps::after{content:"";position:absolute;left:0;top:46px;height:3px;width:var(--sc-timeline-progress,0%);background:var(--dgc-accent);transition:width 500ms ease}
.step{position:relative;z-index:1}
.step b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(242,118,10,.14);border:2px solid var(--dgc-accent);color:var(--dgc-amber);font-size:1.35rem;margin-bottom:6px}
[data-sc-effect="parallax"]{overflow:hidden}
.hero.parallax-on img{transition:transform 180ms ease;will-change:transform;transform:scale(1.07)}
@media (min-width: 821px){ section{padding:60px 0} }
@media (max-width: 820px){
  .logo-mark{height:36px}
  .steps::before,.steps::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  figure.shot img{transition:none}
  figure.shot:hover img,figure.shot:focus-within img{transform:none}
  .steps::after{transition:none}
  .card,.cta{transition:none}
}

/* === Real project gallery 2026-11-09 ===
   22 photos from the Page's own posts, grouped by job on work.html.
   Portrait frames keep phone-shot photos honest (no heavy cover crop);
   landscape shots keep the standard 4/3 frame. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:20px;align-items:start}
figure.shot--portrait img{aspect-ratio:3/4}
.job-quote{color:var(--dgc-muted);border-left:3px solid var(--dgc-accent);padding-left:12px;max-width:64ch;margin:4px 0 0}
.job h2{margin-bottom:6px}

/* Heading contrast restoration (2026-11-09): the platform import-theme stylesheet forces #101a35 headings in the release render, which is near-invisible on the site's dark ground (#14161a / #1e2127, ~1.05:1). Headings take the site's ink token, as the line-65 inherit guard intended. */
html[data-site-theme="1"] body { color: var(--dgc-ink) !important; }
html[data-site-theme="1"] :is(h1,h2,h3,h4,h5,h6) { color: var(--dgc-ink) !important; }

/* === Mobile UI crew round 2026-11-09 (Brandon's phone screenshots) ===
   1) Transparent logo system: the PNG marks carry alpha — no tile, no border,
      the artwork sits directly on the bar/panel. (Supersedes the bordered
      .logo-mark / .dgc-sidebar__logo / .footer-logo / .brand-logo rules above.)
   2) Icon-only refresh button in the header nav row (platform pattern:
      ?site_refresh=1 + data-site-refresh + circular-arrow SVG).
   3) Paired CTAs sit TWO PER ROW on phones: equal widths, shrunk type and
      padding, no wrap, and the ghost button's desktop margin-left no longer
      indents it onto its own line. Lone CTAs go full-row for thumb reach. */
.logo-mark,.dgc-sidebar__logo,.footer-logo,.brand-logo{border:0;border-radius:0}
.dgc-refresh{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;color:var(--dgc-ink);text-decoration:none;border-radius:8px}
.dgc-refresh svg{width:22px;height:22px;display:block}
.dgc-refresh:hover{color:var(--dgc-amber)}
.dgc-refresh:active{transform:rotate(-24deg)}
.dgc-refresh{transition:transform 200ms ease,color 160ms ease}
@media (max-width:820px){
.dgc-refresh{background:var(--dgc-panel);border:1px solid var(--dgc-line)}
.logo{font-size:clamp(.85rem,3.9vw,1rem);gap:10px}
.logo-mark{height:34px}
}
@media (prefers-reduced-motion:reduce){.dgc-refresh{transition:none}.dgc-refresh:active{transform:none}}
@media (max-width:640px){
p:has(>.cta+.cta){display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
p:has(>.cta+.cta)>.cta{margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:13px 8px;font-size:.86rem;letter-spacing:.03em;line-height:1.25;min-height:54px}
p:has(>:only-child.cta)>.cta{display:block;text-align:center}
}
/* Crew fix (same round): .nav{padding:14px 0} later in this file than
   .wrap{padding:0 20px} at equal specificity zeroed the header's side
   padding — logo tile at x=0, controls flush to the right edge (the cutoff
   in Brandon's screenshots). Restore the 20px inset for the header row. */
.site .nav{padding-left:20px;padding-right:20px}
/* Crew fix (same round): the header wordmark overflowed its flex box and ran
   UNDER the hamburger (letters clipped) once the refresh button joined the
   row. The name now lives in .dgc-wordmark, which can shrink and wrap: on
   phones it stacks as DENNY'S / GENERAL / CONSTRUCTION inside the bar. */
.dgc-wordmark{min-width:0}
@media (max-width:820px){
.dgc-wordmark{line-height:1.14}
.dgc-wordmark>span{display:block}
}
/* Crew fix (same round): .logo span{color:accent} now also matches the new
   .dgc-wordmark wrapper — restore cream for the name, accent only inside. */
.logo .dgc-wordmark{color:var(--dgc-ink)}
.logo .dgc-wordmark>span{color:var(--dgc-accent)}

/* === Mobile crew ROUND 2 2026-11-09 (Brandon's live screenshot) ===
   The mark rendered squashed on iOS: the platform base sheet
   (img{max-width:100%;height:auto}) plus the flex header row lets WebKit
   shrink the <img> flex item horizontally while the height holds — the
   artwork compresses. Fix: the mark is a fixed-ratio, non-shrinking box.
   Same guard on the sidebar lockup. Plus the depth/polish layer: layered
   shadows, gradient CTAs, tactile press states (transform/opacity only). */
.logo-mark{flex:none;width:107px;height:41px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.dgc-sidebar__logo{flex:none}
@media (max-width:820px){.logo-mark{width:89px;height:34px}}
header.site{background:linear-gradient(180deg,#1b1e24,rgba(20,22,26,.97));box-shadow:0 10px 28px rgba(0,0,0,.42)}
.cta{background:linear-gradient(180deg,#ff8a2a,var(--dgc-accent));box-shadow:0 8px 20px rgba(242,118,10,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.cta.ghost{background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cta:active{transform:scale(.98)}
.card{box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.card:active{transform:scale(.99)}
.step b{box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.dgc-refresh,.dgc-nav-toggle{box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.dgc-refresh:active,.dgc-nav-toggle:active{transform:scale(.96)}
figure.shot{box-shadow:0 14px 30px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.cta:active,.card:active,.dgc-refresh:active,.dgc-nav-toggle:active{transform:none}}

/* === Mobile crew ROUND 3 2026-11-09 (Brandon: logo "appearing cropped", "isnt resizing") ===
   Measured on his screenshot: displayed artwork ratio 2.64 vs source 2.63 — the browser is
   NOT distorting it. The tight 6px trim made the art run edge-to-edge in a 34px-tall box,
   so it reads as cropped and the hammer detail dies. Round 3: the nav mark is a padded
   asset (artwork inset on its canvas, air on all sides) in a visibly larger box; header
   spacing rebalanced so the stacked wordmark still fits at 360px. The stylesheet URL is
   versioned (?v=20261109r3 in the pages) so no webview cache can serve the old sizing. */
.logo-mark{width:140px;height:54px}
@media (max-width:820px){
.logo-mark{width:124px;height:47px}
.site .nav{padding-left:14px;padding-right:14px}
.nav{gap:10px}
.logo{font-size:.8rem;gap:8px}
}
@media (max-width:380px){.logo{font-size:.78rem}}
/* Round 3 fit correction (same day): at 360px the stacked wordmark's longest
   word overflowed its box by 18px toward the menu button. Small phones get a
   slightly smaller mark box and wordmark type so every letter stays inside. */
@media (max-width:380px){
.logo-mark{width:106px;height:40px}
.logo{font-size:.74rem;letter-spacing:.01em}
}

/* === Mobile crew ROUND 4 2026-11-09 — small-size responsive mark ===
   Rounds 1–3 fixed geometry; Brandon still read the nav logo as cropped/flat,
   and his screenshot measured clean (artwork ratio 2.65 vs source 2.63). The
   real defect: the full wide emblem's detail (crossed hammers) is illegible at
   any header height that fits a phone row. Standard responsive-logo practice:
   phones get the SMALL-SIZE MARK — the centre detail of the official artwork
   (crossed hammers + centre roof), official pixels only, served via <picture>.
   Desktop keeps the full lockup; sidebar/footer keep the full official logo. */
.logo-pic{flex:none;display:flex;line-height:0}
@media (max-width:820px){.logo-mark{width:82px;height:50px}}
@media (max-width:380px){.logo-mark{width:76px;height:46px}.logo{font-size:.8rem}}

/* === ROUND 5 2026-11-09 — FULL LOGO IN THE MOBILE HEADER (Brandon's actual ask) ===
   Brandon, verbatim: "Its not showing full logo resized to fit in header as it
   should." He has meant the COMPLETE official logo (emblem + name in the
   artwork) all along; rounds 1–4 kept shipping the wide mark and he kept
   calling it cropped. Round 5: at ≤820px the header brand IS logo-official.png
   (the full transparent lockup) fitted to the header height, and the HTML
   wordmark hides (the name is in the artwork). Desktop unchanged. */
@media (max-width:1180px){
.dgc-wordmark{display:none}
.logo-mark{width:82px;height:58px}
.logo{gap:0}
}

/* === Mobile UI + conversion round 2026-11-09 (Brandon: bottom bar, call or
   quote as co-equal paths) ===
   1) Fixed bottom action bar at <=820px: Call and Get a quote are the two lead
      actions (equal emphasis); Services / Work / Menu stay secondary. The bar
      is always one thumb-tap away, respects the safe-area inset, and the body
      carries matching bottom padding so it never covers footer content.
   2) The minimized cookie settings button (platform: fixed, bottom:18px,
      z-index 100000) is raised fully clear above the bar on phones.
   3) Header gains a tap-to-call button on phones, beside the refresh icon.
   4) Form fields are explicitly 16px so iOS never zooms on focus.
   5) Contact page call/email blocks. */
.dgc-bar{display:none}
.dgc-call{display:none}
@media (max-width:1180px){
.dgc-bar{position:fixed;left:0;right:0;bottom:0;z-index:840;display:flex;align-items:stretch;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(16,18,22,.97);border-top:2px solid var(--dgc-line);box-shadow:0 -10px 28px rgba(0,0,0,.45)}
.dgc-bar__item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;background:transparent;border:0;border-radius:10px;color:var(--dgc-muted);font:inherit;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dgc-bar__item svg{width:22px;height:22px;flex:none}
.dgc-bar__item--call{flex:1.35 1 0;background:linear-gradient(180deg,#ff8a2a,var(--dgc-accent));color:#171106;box-shadow:0 6px 16px rgba(242,118,10,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.dgc-bar__item--quote{flex:1.35 1 0;background:var(--dgc-navy);color:var(--dgc-amber);box-shadow:inset 0 0 0 2px var(--dgc-accent)}
.dgc-bar__item[aria-current="page"]{color:var(--dgc-amber);box-shadow:inset 0 -3px 0 var(--dgc-accent)}
.dgc-bar__item--quote[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--dgc-accent),inset 0 -3px 0 var(--dgc-accent)}
.dgc-bar__item:active{transform:scale(.97)}
.dgc-bar__item{transition:transform 140ms ease}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
html body .pp-cookie-consent__settings{bottom:calc(98px + env(safe-area-inset-bottom))!important}
.dgc-call{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;background:var(--dgc-panel);border:2px solid var(--dgc-accent);border-radius:8px;color:var(--dgc-amber);text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.dgc-call svg{width:22px;height:22px;display:block}
.dgc-call:active{transform:scale(.96)}
.dgc-call{transition:transform 140ms ease}
.dgc-sidebar__foot .cta{margin:0}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){.dgc-bar__item,.dgc-call{transition:none}.dgc-bar__item:active,.dgc-call:active{transform:none}}
form.contact input,form.contact textarea,form.contact select{font-size:16px}
.contact-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:22px 0 6px;max-width:820px}
.contact-block{background:var(--dgc-panel);border:1px solid var(--dgc-line);border-top:4px solid var(--dgc-accent);border-radius:var(--dgc-radius);padding:20px 22px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.contact-block h2{font-size:1.05rem;margin:0 0 4px}
.contact-block a.big{display:inline-block;font-size:1.28rem;font-weight:900;color:var(--dgc-amber);text-decoration:none;padding:8px 0 4px;overflow-wrap:anywhere}
.contact-block p{color:var(--dgc-muted);margin:2px 0 0}

/* === HOME REBUILD 2026-11-09 (Brandon: "Build a better home page... more
   immersive, 3D motion — nails being hammered, flooring sliding together") ===
   New home sections: proof strip, photo service cards, recent-work strip, and
   a CTA band whose floor planks slide together on scroll while a hammer drives
   a nail beside the copy. All motion is transform/opacity only, scroll- or
   time-driven CSS, gated for reduced motion. */
/* proof strip */
.strip{background:#101216;border-bottom:1px solid var(--dgc-line)}
.strip-in{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:16px;padding-bottom:16px;font-weight:700;letter-spacing:.02em}
.strip-in span{display:inline-flex;align-items:center}
.strip-in span::before{content:"";width:8px;height:8px;margin-right:11px;background:var(--dgc-accent);transform:rotate(45deg);flex:none}
/* photo service cards */
.card.has-media{padding:0;overflow:hidden}
.card-media{display:block;overflow:hidden}
.card-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 600ms ease}
.card.has-media:hover .card-media img{transform:scale(1.045)}
.card-body{display:block;padding:20px 22px 22px}
.grid{perspective:1200px}
.card[data-tilt]{transform-style:preserve-3d;will-change:transform}
/* recent work strip */
.workband{background:#0e1013}
.workstrip{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.workshot{display:block;color:var(--dgc-ink);text-decoration:none}
.workshot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--dgc-radius);border:1px solid var(--dgc-line);transition:transform 500ms ease,border-color 200ms ease}
.workshot:hover img{transform:scale(1.02);border-color:#454b57}
.workshot span{display:block;margin-top:8px;font-size:.92rem;color:var(--dgc-muted)}
.more{margin-top:18px}.more a{font-weight:700}
/* CTA band */
.ctaband{background:#171d27}
.floorlay{display:grid;gap:5px;margin-bottom:30px}
.floorlay i{display:block;height:26px;border-radius:3px;box-shadow:inset 0 -3px 0 rgba(46,24,6,.5),inset 0 2px 0 rgba(255,226,180,.14);background-color:#8a5a2e;background-image:repeating-linear-gradient(93deg,rgba(62,34,10,.28) 0 2px,transparent 2px 74px,rgba(255,222,175,.09) 74px 76px,transparent 76px 138px),repeating-linear-gradient(90deg,transparent 0 300px,rgba(43,23,7,.6) 300px 304px),linear-gradient(180deg,#9c6b3a,#7e5228);transform:translateX(-108%);transition:transform 950ms cubic-bezier(.22,.9,.26,1)}
.floorlay i:nth-child(2){background-color:#96632f;background-position:60px 0,140px 0,0 0;transform:translateX(108%);transition-delay:140ms}
.floorlay i:nth-child(3){background-color:#83552a;background-position:20px 0,220px 0,0 0;transition-delay:280ms}
.ctaband .wrap.is-visible .floorlay i{transform:translateX(0)}
.cta-row{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-copy{flex:1 1 340px;max-width:62ch}
.cta-copy .sub{max-width:56ch}
/* hammered-nail scene (SVG, CSS keyframes; plays when the band is visible) */
.nailscene{flex:0 1 300px;min-width:230px}
.nailscene svg{width:100%;height:auto;display:block;overflow:visible}
.nailscene .hammer{transform-box:fill-box;transform-origin:88% 88%;transform:rotate(-30deg)}
.nailscene .nail{transform-box:fill-box}
.nailscene .ping{opacity:0;transform-box:fill-box;transform-origin:center}
.ctaband .wrap.is-visible .nailscene .hammer{animation:dgc-swing 4.4s ease-in-out infinite}
.ctaband .wrap.is-visible .nailscene .nail{animation:dgc-sink 4.4s linear infinite}
.ctaband .wrap.is-visible .nailscene .ping{animation:dgc-ping 4.4s linear infinite}
.ctaband .wrap.is-visible .nailscene .wood{animation:dgc-shake 4.4s linear infinite}
@keyframes dgc-swing{0%{transform:rotate(-30deg)}14%{transform:rotate(-36deg)}22%{transform:rotate(3deg)}30%{transform:rotate(-24deg)}42%{transform:rotate(3deg)}50%{transform:rotate(-24deg)}62%{transform:rotate(3deg)}74%{transform:rotate(-20deg)}90%{transform:rotate(-20deg)}100%{transform:rotate(-30deg)}}
@keyframes dgc-sink{0%,21%{transform:translateY(0)}24%,41%{transform:translateY(13px)}44%,61%{transform:translateY(26px)}64%,90%{transform:translateY(39px);opacity:1}95%{transform:translateY(39px);opacity:0}98%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes dgc-ping{0%,21%{opacity:0;transform:scale(.5)}24%{opacity:.9;transform:scale(1.5)}30%,41%{opacity:0;transform:scale(1.9)}44%{opacity:.9;transform:scale(1.5)}50%,61%{opacity:0;transform:scale(1.9)}64%{opacity:.9;transform:scale(1.5)}72%,100%{opacity:0;transform:scale(2)}}
@keyframes dgc-shake{0%,21%{transform:translateY(0)}23%{transform:translateY(1.6px)}26%,41%{transform:translateY(0)}43%{transform:translateY(1.6px)}46%,61%{transform:translateY(0)}63%{transform:translateY(1.6px)}66%,100%{transform:translateY(0)}}
@media (max-width:820px){.floorlay i{height:19px}.nailscene{flex-basis:230px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){
.floorlay i{transition:none;transform:none}
.nailscene .hammer{animation:none;transform:rotate(-30deg)}
.nailscene .nail{animation:none;transform:translateY(39px)}
.nailscene .ping{display:none}
.card.has-media:hover .card-media img,.workshot:hover img{transform:none}
.card[data-tilt]{will-change:auto}
}

/* Home rebuild fixes (same day, from rendered QC):
   1) Reduced-motion must actually win over the is-visible animation rules —
      the first reduce block lost on specificity, so the nail kept animating.
   2) On phones the nail scene now leads the CTA row (above the heading)
      instead of trailing below the buttons where nobody saw it. */
@media (prefers-reduced-motion:reduce){
.ctaband .wrap .nailscene .hammer,.ctaband .wrap .nailscene .nail,.ctaband .wrap .nailscene .ping,.ctaband .wrap .nailscene .wood{animation:none!important}
.ctaband .wrap .nailscene .nail{transform:translateY(39px)}
.ctaband .wrap .nailscene .hammer{transform:rotate(-30deg)}
}
@media (max-width:820px){.nailscene{order:-1;flex-basis:215px}}

/* === FORMATTING FIX ROUND 2026-11-09 (Brandon: "Fix formatting more
   especially the buttons text size and spacing inside the buttons on
   mobile especially and spacing in regards to being smooshed to text
   above the button") ===
   Measured BEFORE, house render at 390px: the index hero CTA row sat
   0px under the lede (flush); every other CTA row sat 16px under its
   text; the bottom bar's SERVICES label had 2px of air at each edge
   (11.84px type, 6px/2px item padding, 3px icon gap); paired CTAs ran
   13.76px type in 13px/8px padding; the form submit sat 12px under the
   last field; sidebar CTAs stacked 6px apart with 26px side padding
   squeezing a 16px label onto two lines.
   The system this round sets (mobile, <=820px):
   - THE JOINT: a button row never sits closer than 24px under the
     heading or paragraph above it — one named gap, every page.
   - Button type steps UP a rung and internal padding grows with it;
     nothing is shrunk to fit (Brandon's standing rule) — the bar's
     outer container padding is what gives back the height, so the bar
     stays its verified ~74px and the cookie keeps its 24px of air. */
/* The joint: text -> button row */
@media (max-width:1180px){
main p:has(> .cta){margin-top:24px}
.contact-blocks{margin-top:24px}
form.contact button.send[type="submit"]{margin-top:12px}
}
/* CTA internals on phones: one text line-height, roomier pads */
@media (max-width:1180px){
.cta{line-height:1.3}
.cta.ghost{margin-left:12px}
.dgc-sidebar__foot{gap:12px}
.dgc-sidebar__cta{padding:16px 18px;font-size:.95rem;line-height:1.3}
form.contact button.send[type="submit"]{padding:16px 24px;min-height:54px;line-height:1.3}
}
@media (max-width:640px){
p:has(>.cta+.cta){gap:12px}
p:has(>.cta+.cta)>.cta{padding:16px 14px;font-size:.9375rem;line-height:1.3;min-height:58px}
p:has(>:only-child.cta)>.cta{padding:16px 20px;font-size:.95rem;line-height:1.3}
}
/* Bottom bar internals: type 11.84 -> 12.8px, icon 22 -> 24px, icon gap
   3 -> 4px, item padding 6px/2px -> 8px/6px; container padding/gap trim
   8px/6px -> 6px/5px so overall bar height is unchanged. Body pad and
   cookie offset re-based on the same bar height. */
@media (max-width:1180px){
.dgc-bar{gap:5px;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.dgc-bar__item{min-height:58px;padding:8px 6px;gap:4px;font-size:.8rem;line-height:1.2;letter-spacing:.03em}
.dgc-bar__item svg{width:24px;height:24px}
body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
html body .pp-cookie-consent__settings{bottom:calc(100px + env(safe-area-inset-bottom))!important}
}
/* Header row: control-to-control air 10 -> 12px */
@media (max-width:1180px){
.nav{gap:12px}
}

/* === TABLET/DESKTOP NAV + LOGO ROUND 2026-11-09 (Brandon's live-site
   report, 17:55 ET: nav items on multiple rows on tablet and desktop;
   logo zoomed in/cropped just like it did on mobile) ===
   Measured BEFORE, house render: at 834 and 1024 the header wrapped —
   logo on row 1, links + refresh dropped to a second row (nav height
   145.6px vs 82px on one row) because .nav and nav.main both carried
   flex-wrap:wrap and the full row (logo 501px + links ~502px + refresh
   + gaps ~1083px) cannot fit under ~1180px. Squeezing it in was
   rejected: Brandon's rule is never shrink-to-fit. Instead the mobile
   treatment now takes over at <=1180px (the media queries above were
   raised 820 -> 1180, and the header <picture> swaps to the full
   official lockup at the same width), and above 1180 the desktop nav
   is pinned nowrap so a wrap can never come back.
   LOGO: the header box was 140x54 (aspect 2.5926) for a 982x375 asset
   (natural 2.6187) — any cascade that loses object-fit:contain turns
   that mismatch into a crop/zoom, the mobile squash class all over
   again. Every logo placement now carries its asset's exact aspect as
   a fixed-ratio box with contain pinned, so the full artwork shows at
   its natural aspect with clear margin in any cascade. */
@media (min-width:821px){
.nav{flex-wrap:nowrap}
nav.main{flex-wrap:nowrap}
}
.logo-mark{object-fit:contain}
@media (min-width:1181px){
.logo-mark{width:144px;height:55px;aspect-ratio:982/375}
}
@media (max-width:1180px){
.logo-mark{width:85px;height:60px;aspect-ratio:931/656}
}
.dgc-sidebar__logo,.footer-logo,.brand-logo{aspect-ratio:931/656;object-fit:contain}

/* === DESKTOP JOINT ROUND 2026-11-09 (Brandon approved the flagged fix:
   extend THE JOINT past the 1180px breakpoint) ===
   Measured BEFORE, house render at 1280 (identical at 1440): the index
   hero CTA row sat 0px under the lede on wide desktop — the joint rule
   from the formatting round stopped at 1180px. Audit of every other
   >1180 text->button joint found the same tight class: CTA band 16px,
   Work closer 16px, About closer 16px, form submit 12px, contact
   blocks 22px. This block mirrors the <=1180 joint rules so the 24px
   system holds at every width. Nothing else changes: the joints that
   were already healthy (section rhythm, label->input grouping) are
   untouched. */
@media (min-width:1181px){
main p:has(> .cta){margin-top:24px}
.contact-blocks{margin-top:24px}
form.contact button.send[type="submit"]{margin-top:12px}
}

/* === BUTTONS + ICONS ROUND 2026-11-10 (Brandon: call buttons just say Call,
   not the whole phone number + use more icons across the site) ===
   CTA buttons are icon+label flex rows now; service cards carry an icon chip
   beside their tag; contact methods get icon chips. Icons are inline SVG in
   the site's lucide-style stroke system, currentColor throughout. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cta svg{width:19px;height:19px;flex:none}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.svc-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:1px solid var(--dgc-line);border-radius:10px;background:rgba(242,118,10,.09);color:var(--dgc-accent)}
.svc-ic svg{width:19px;height:19px}
.card-body .tag{margin-bottom:0}
.svc-top{margin-bottom:10px}
.ci-row{display:inline-flex;align-items:center;gap:10px}

.contact-block .big svg{width:.92em;height:.92em;vertical-align:-.1em;margin-right:.32em}
.contact-block .big[href^="mailto"]{display:flex;align-items:center;gap:.35em}
.contact-block .big[href^="mailto"] span{min-width:0;overflow-wrap:anywhere}


/* === HEADER OVERLAP + FULL LOGO ROUND 2026-11-10 (Brandon, live site:
   "header now overlaps part of the pages content" + "when i say full logo
   not a cropped or zoomed in portion like is appearing on tablet and
   desktop in his header currently") ===
   FULL LOGO, EVERY WIDTH: the header brand is now ONLY logo-official.png —
   the COMPLETE official artwork (crossed hammers + roofs, the
   DENNYS GENERAL CONSTRUCTION name inside the artwork, and the shield
   with two stars at the bottom) — on desktop, tablet and phone alike.
   The mark-only file (logo-mark-nav.png, the top portion of the artwork)
   is out of the header entirely, and the typed HTML wordmark is gone
   (the name is in the artwork). The box below carries the artwork's
   exact aspect (931/656) with object-fit:contain and max-width:none, so
   no cascade (platform img{max-width:100%;height:auto} included) can
   crop, zoom or squash it; it is resized to fit the header, whole.
   OVERLAP: the header stays position:sticky (in-flow, so on load it
   occupies its own space and cannot cover page content), its height is
   now driven by ONE fixed logo box at every width (no wrap, no
   multi-row growth), and html scroll-padding-top + section
   scroll-margin-top reserve the full sticky height (+16px air) so
   anchored / scrolled-to content never slides under it. */
html{scroll-padding-top:128px}
header.site{overflow:visible}
.logo{flex:none;gap:0;min-height:0}
.logo-mark.logo-full{flex:none;display:block;width:119px;height:84px;aspect-ratio:931/656;object-fit:contain;object-position:center;max-width:none}
main section[id],main h1,main h2{scroll-margin-top:128px}
@media (max-width:1180px){
html{scroll-padding-top:108px}
.logo-mark.logo-full{width:97px;height:68px}
main section[id],main h1,main h2{scroll-margin-top:108px}
}
@media (max-width:380px){
html{scroll-padding-top:102px}
.logo-mark.logo-full{width:88px;height:62px}
main section[id],main h1,main h2{scroll-margin-top:102px}
}
/* In-app webviews (Meta/Facebook/Instagram/Messenger): the sticky header
   collides with the host app's own floating bar and covers page content
   there (the Report #241 class). The site-level fix until the platform
   shell ships its own: dennys.js tags those UAs and the header un-sticks
   and goes fully opaque, so it can never overlap content in a webview. */
html.in-app-webview header.site{position:relative;top:auto;background:#14161a}
html.in-app-webview{scroll-padding-top:16px}
html.in-app-webview main section[id],html.in-app-webview main h1,html.in-app-webview main h2{scroll-margin-top:16px}
/* Phone CTA pairs (preview QC finding on cs452, 2026-11-10): at 390px the
   two hero CTAs stayed side-by-side in the <=640px two-column grid and
   their text clipped ("CALL (240) 739-" / "SEND A QUOTE"). Stack the pair
   full-width on small phones so each label fits on one line, whole. */
@media (max-width:560px){
main p:has(>.cta+.cta){grid-template-columns:1fr}
main p:has(>.cta+.cta)>.cta{width:100%}
}
/* Phone hero height (preview diagnosis on cs452, 2026-11-10): at 390px the
   stacked hero content measures ~470px tall, but the hero box is driven by
   the image at 405px and the parallax hero clips overflow — the second
   (quote) CTA fell 65px below the box and was clipped 100%. Grow the hero
   image/box on small phones so ALL hero content, both CTAs included, sits
   inside the visible hero. object-fit:cover keeps the photo framing. */
@media (max-width:560px){
.hero img{height:600px;min-height:600px}
}
@media (max-width:380px){
.hero img{height:640px;min-height:640px}
}