/* Ace Pro Home Services — base styles & brand tokens */
:root {
  --navy: #1F3A56;
  --gray: #7C7F8C;
  --brass: #D6A848;
  --walnut: #5C3A1A;
  /* Text sitting on a BRASS TINT (a wash of brass over the page, not solid
     brass). The tint follows the page, so it is pale in light mode and dark in
     dark mode — which means walnut text on it vanishes after dark. This token
     flips; --walnut stays put for text on solid brass. */
  --on-tint: #5C3A1A;
  --cream: #F4EFE6;
  --ink: #2B2118;
  --paper: #FFFFFF;
  --line: #E4DACA;
  --shadow: rgba(43, 33, 24, 0.14);
  --serif: "Georgia", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1B1713;
    --paper: #241E18;
    --ink: #EFE6D6;
    --line: #3A3128;
    --gray: #A7A9B2;
    --shadow: rgba(0, 0, 0, 0.5);
    --on-tint: #EFC98E;
  }
}
:root[data-theme="dark"] {
  --cream: #1B1713; --paper: #241E18; --ink: #EFE6D6; --line: #3A3128; --gray: #A7A9B2;
  --shadow: rgba(0,0,0,0.5);
  --on-tint: #EFC98E;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; font-weight: 700; }
a { color: var(--navy); }
:root[data-theme="dark"] a, @media (prefers-color-scheme: dark){ a { color: var(--brass); } }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--gray); }
.center { text-align: center; }

/* ---- buttons ---- */
/* ---- reduced-motion support ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.btn {
  display: inline-block; padding: 0.8rem 1.4rem; border-radius: 10px;
  font-weight: 600; text-decoration: none; cursor: pointer; border: 0;
  background: var(--navy); color: #fff; transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--brass); }
.btn.brass { background: var(--brass); color: var(--walnut); }

/* ---- header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 16px; max-width: var(--wrap); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 30%, transparent); }
.nav-links { display: flex; gap: 1.1rem; align-items: center; }
.nav-links a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: .96rem; }
.nav-links a:hover { color: var(--navy); }
.nav-links a.cta { color: #fff; background: var(--navy); padding: .5rem .9rem; border-radius: 8px; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem 16px 1rem; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .nav-links a.cta { text-align: center; margin-top: .6rem; }
}

/* ---- hero ---- */
.hero {
  padding: 1.1rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
  /* Artisanal wood watermark across the top: strong cream veil on the text side,
     wood showing through behind the portrait; fades to cream at the bottom. */
  background-image:
    linear-gradient(to bottom, transparent 80%, var(--cream) 100%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--cream) 92%, transparent) 0%,
      color-mix(in srgb, var(--cream) 89%, transparent) 100%),
    url("/assets/workshop-bg-v2.webp");
  background-size: cover, cover, cover;
  background-position: center, center, right 42%;
  background-repeat: no-repeat;
}
.hero-art { margin-top: -0.5rem; }
@media (max-width: 860px){ .hero-art { margin-top: 0; } }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 .4rem; }
.hero .tag { color: var(--brass); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.hero p.lead { font-size: 1.15rem; color: var(--gray); margin: .6rem 0 1.3rem; }
.hero .cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 860px){ .hero .cta-row { justify-content: center; } }

.values { display: flex; gap: 1.4rem; margin: 1.6rem 0 0; flex-wrap: wrap; }
@media (max-width: 860px){ .values { justify-content: center; } }
.values .v { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.values .v .ic { color: var(--brass); font-size: 1.2rem; }

/* ---- pop-out portrait ---- */
/* Two layers cut from Steve's own artwork: the hung frame (with the painting
   and the plaque) sits at z=0; Steve, the wrench and The Boss stand out of it.

   A layer at depth z is magnified by perspective/(perspective-z), and its
   parallax travel under rotation grows with z. Those are linked, so a big pop
   normally means a badly oversized Steve. Raising the perspective breaks the
   tie: at 1600px, z=140 gives 1600/1460 = 1.096, trimmed by scale(.97) to about
   6% — enough that he reads as nearer than the frame, while z=140 carries real
   parallax travel when the card turns.

   He must never end up SMALLER than the silhouette inpainted out of the back
   layer, or the smeared patch behind him shows at the edges. Sitting proud is
   the safe direction as well as the right-looking one. */
.stage { width: min(90vw, 470px); aspect-ratio: 1792 / 2400; position: relative; perspective: 1600px; margin: 0 auto; }
.card3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* No CSS transition here on purpose: app.js eases the angle itself in a frame
   loop. Smoothing an already-smoothed value reads as lag, not weight. */
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.layer.back  { transform: translateZ(0); }
.layer.steve {
  transform: translateZ(140px) scale(0.97);
  filter: drop-shadow(0 18px 22px rgba(28, 20, 12, .42))
          drop-shadow(0 3px 5px rgba(28, 20, 12, .30));
}
.portrait-flat { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stage .card3d { display: none; }
  .portrait-flat { display: block; width: min(90vw, 470px); margin: 0 auto; }
}

/* ---- seasonal banner ---- */
.season-banner { background: var(--navy); color: #fff; text-align: center; padding: .7rem 1rem; font-weight: 600; }
.season-banner a { color: var(--brass); }

/* ---- generic section ---- */
section.block { padding: 2.4rem 0; }
section.block h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cardish { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; box-shadow: 0 6px 18px var(--shadow); }

/* ---- philanthropy teaser ---- */
.giving { background: color-mix(in srgb, var(--brass) 14%, var(--cream)); border-radius: 16px; padding: 1.8rem; display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); margin-top: 2rem; padding: 2rem 0; color: var(--gray); }
.foot-grid { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.foot-boss { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); }

/* ---- owner gate page ---- */
body.gate { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.gate-card { max-width: 460px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px var(--shadow); text-align: center; }
.gate-card h1 { margin-top: 0; }
.gate-card .btn { margin-top: 1rem; }

/* ---- simple page header for interior stub pages ---- */
.page-hero { padding: 2.4rem 0 1rem; }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .3rem; }
.soon { display: inline-block; margin-top: .4rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--on-tint); font-weight: 600; font-size: .85rem; }

/* ---- services page ---- */
.svc-tools { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:.8rem 0 .4rem; }
#svc-search { flex:1; min-width:240px; padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:1rem; }
.svc-catnav { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; }
.svc-catnav a { font-size:.82rem; padding:.28rem .6rem; border-radius:999px; background:color-mix(in srgb, var(--brass) 16%, transparent); color:var(--on-tint); text-decoration:none; }
.svc-catnav a:hover { background:color-mix(in srgb, var(--brass) 30%, transparent); }
.svc-cat { margin:1.8rem 0 0; scroll-margin-top:80px; }
.svc-cat h2 { font-size:1.3rem; margin:0 0 .7rem; padding-bottom:.3rem; border-bottom:2px solid color-mix(in srgb, var(--brass) 40%, transparent); }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:.7rem; }
.svc-tile { text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; cursor:pointer; display:flex; flex-direction:column; gap:.25rem; transition:transform .08s ease, border-color .15s ease; font-family:inherit; }
.svc-tile:hover { transform:translateY(-2px); border-color:var(--brass); }
.svc-name { font-weight:600; color:var(--ink); font-size:1rem; }
.svc-price { color:var(--navy); font-weight:700; }
.svc-more { color:var(--gray); font-size:.82rem; }
.modal { position:fixed; inset:0; background:rgba(20,15,10,.55); display:grid; place-items:center; padding:1rem; z-index:100; }
.modal[hidden]{ display:none; }
.modal-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; max-width:520px; width:100%; padding:1.6rem; box-shadow:0 20px 50px var(--shadow); position:relative; max-height:88vh; overflow:auto; }
.modal-x { position:absolute; top:.7rem; right:.9rem; background:none; border:0; font-size:1.7rem; line-height:1; color:var(--gray); cursor:pointer; }
.modal-cat { display:inline-block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--brass); }
.modal-card h2 { margin:.2rem 0 .4rem; }
.modal-steps { margin:.2rem 0 1.1rem; padding-left:1.2rem; }
.modal-steps li { margin:.3rem 0; }

/* ---- print styles ---- */
@media print {
  body { background: white; color: black; }
  .site-header, .site-footer, .btn, .nav-toggle, .modal, [data-print-hide] { display: none !important; }
  a { text-decoration: underline; }
  h1, h2, h3 { page-break-after: avoid; }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
  th { background: #f5f5f5; font-weight: 700; }
  .invoice, .day-sheet, .report { page-break-inside: avoid; margin-bottom: 2rem; }
  .no-print { display: none; }
  img { max-width: 100%; page-break-inside: avoid; }
}