/* JKDD Finish & Remodeling — V10 identity system
   "Shop drawing": a measured, ink-and-brass identity that trades the
   generic warm-cream/serif/rounded-card look for something grounded in
   the trade itself — the precision of a cut list, a corner detail, a
   material sample. Retunes the V7 token set (everything else in v7.css
   and v9.css consumes these same custom properties) and repaints the
   handful of hardcoded section colors and radii that sit outside it. */

:root {
  /* Ink — dominant dark surface (hero, manifesto, portfolio, footer) */
  --v7-dark: #14171B;
  --v7-ink: #14171B;

  /* Paper — light working surface (services, gallery, contact) */
  --v7-bg: #F3F3EE;
  --v7-surface: #FFFFFF;
  --v7-surface-2: #E8E6DC;

  /* Text */
  --v7-text: #2B2D2C;
  --v7-muted: #5E5F59;
  --v7-line: rgba(20, 23, 27, .13);

  /* Accent — one warm metal, two values: a readable brown for small
     text on paper, a bright brass for fills and text on ink. */
  --v7-wood: #8A5A2E;
  --v7-brass: #D3A455;
  --v7-paper-text: rgba(246, 245, 240, .82);
  --v7-paper-text-strong: #F6F5F0;
  --v7-ink-line: rgba(246, 245, 240, .16);

  --v7-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --v7-sans: "Archivo", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --v7-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --v7-shadow: 0 24px 60px rgba(10, 11, 9, .16);
  --v7-radius: 3px;
  --v7-radius-lg: 6px;
}

/* ————— Type & radius system ————— */
.home-page .eyebrow {
  font-family: var(--v7-mono);
  font-weight: 600;
  letter-spacing: .1em;
}

.home-page .button,
.home-page .gallery-filter {
  border-radius: var(--v7-radius);
}

.home-page .service-item,
.home-page .service-item:last-child,
.home-page .gallery-card,
.home-page .process-steps li,
.home-page .service-areas,
.home-page .about-mark,
.home-page .portfolio,
.home-page .contact-form,
.home-page .contact-action,
.home-page .portfolio-dialog,
.home-page .lightbox {
  border-radius: var(--v7-radius-lg);
}

/* Technical numeral tags — bracketed mono, the cut-list callout.
   The service-number badge is a small fixed-diameter circle with no
   room for brackets, so it only picks up the mono weight/letterform. */
.home-page .service-number {
  font-family: var(--v7-mono);
  font-weight: 600;
  letter-spacing: 0;
}

.home-page .process-steps li > span:first-child,
.home-page .area-list li > span:first-child {
  font-family: var(--v7-mono);
  font-weight: 600;
  letter-spacing: 0;
}

.home-page .process-steps li > span:first-child::before,
.home-page .area-list li > span:first-child::before {
  content: "[ ";
}

.home-page .process-steps li > span:first-child::after,
.home-page .area-list li > span:first-child::after {
  content: " ]";
}

/* ————— Header ————— */
.home-page .site-header,
.home-page .site-header.scrolled,
.home-page .site-header.open {
  background: rgba(20, 23, 27, .92);
  color: var(--v7-paper-text-strong);
  border-bottom: 1px solid var(--v7-ink-line);
  backdrop-filter: blur(18px);
}

.home-page .brand {
  padding: 7px 9px;
  border-radius: var(--v7-radius);
  background: #fff;
}

.home-page .desktop-nav a {
  color: rgba(246, 245, 240, .68);
  font-family: var(--v7-mono);
  font-size: 10px;
}

.home-page .desktop-nav a:hover {
  color: var(--v7-paper-text-strong);
}

.home-page .header-cta {
  border: 1px solid var(--v7-brass);
  background: var(--v7-brass);
  color: var(--v7-dark);
  font-family: var(--v7-mono);
}

.home-page .header-cta:hover {
  background: var(--v7-wood);
  border-color: var(--v7-wood);
  color: #fff;
}

.home-page .menu-toggle span {
  background: var(--v7-paper-text-strong);
}

.home-page .mobile-nav a {
  font-family: var(--v7-mono);
  font-size: 12px;
}

/* ————— Hero — dark, measured ————— */
.home-page .hero {
  background: var(--v7-dark);
  color: var(--v7-paper-text);
}

.home-page .hero .eyebrow {
  color: var(--v7-brass);
}

.home-page .hero h1 {
  color: var(--v7-paper-text-strong);
}

.home-page .hero-lede {
  color: var(--v7-paper-text);
}

.home-page .hero-note {
  color: rgba(246, 245, 240, .6);
}

.home-page .hero-note li + li::before {
  background: var(--v7-brass);
}

.home-page .hero .button-gold {
  background: var(--v7-brass);
  border-color: var(--v7-brass);
  color: var(--v7-dark);
}

.home-page .hero .button-gold:hover {
  background: var(--v7-wood);
  border-color: var(--v7-wood);
  color: #fff;
}

.home-page .hero .button-outline {
  border-color: rgba(246, 245, 240, .38);
  color: var(--v7-paper-text-strong);
}

.home-page .hero .button-outline:hover {
  border-color: var(--v7-brass);
  background: rgba(211, 164, 85, .1);
}

/* Registration-mark corners on the hero photograph — a measured-drawing
   detail, not a decoration borrowed from another kind of site. */
.home-page .hero-visual {
  border-bottom-left-radius: 0;
}

.home-page .hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 22px;
  width: 26px;
  height: 26px;
  border-top: 2px solid rgba(246, 245, 240, .78);
  border-left: 2px solid rgba(246, 245, 240, .78);
  pointer-events: none;
}

.home-page .hero-visual::after {
  background: linear-gradient(0deg, rgba(10, 11, 9, .5), transparent 46%);
}

/* ————— Market-positioning strip — an ink band, not a beige rule ————— */
.home-page .specialty-strip {
  background: var(--v7-dark);
  border-color: var(--v7-ink-line);
}

.home-page .marquee-track span {
  color: rgba(246, 245, 240, .7);
  font-family: var(--v7-mono);
}

.home-page .marquee-track i {
  background: var(--v7-brass);
}

/* ————— Services (paper) ————— */
.home-page .service-item li {
  background: var(--v7-surface-2);
  color: #565349;
}

/* ————— Manifesto — ink ————— */
.home-page .manifesto {
  background: var(--v7-dark);
  color: var(--v7-paper-text);
}

.home-page .manifesto h2 {
  color: var(--v7-paper-text-strong);
}

.home-page .manifesto-copy > p:not(.eyebrow),
.home-page .manifesto-copy li {
  color: var(--v7-paper-text);
}

.home-page .manifesto-copy ul,
.home-page .manifesto-copy li {
  border-color: var(--v7-ink-line);
}

.home-page .manifesto-copy li span {
  font-family: var(--v7-mono);
  color: var(--v7-brass);
}

.home-page .manifesto-media .photo-label {
  color: rgba(246, 245, 240, .7);
}

/* ————— Gallery (paper) ————— */
.home-page .gallery-filter {
  border-color: var(--v7-line);
}

.home-page .gallery-filter.is-active {
  background: var(--v7-dark);
  border-color: var(--v7-dark);
  color: #fff;
}

/* ————— Process — pale stone band ————— */
.home-page .process {
  background: var(--v7-surface-2);
}

.home-page .process-steps li {
  background: rgba(255, 255, 255, .6);
}

/* ————— Service areas — align the V9 texture panel to the ink tone ————— */
.home-page .service-areas {
  background:
    linear-gradient(120deg, rgba(20, 23, 27, .93), rgba(20, 23, 27, .86)),
    url("assets/photos/crown-molding.webp") center 30% / cover no-repeat;
}

.home-page .service-areas .eyebrow {
  color: var(--v7-brass);
}

.home-page .service-areas .button-dark {
  background: var(--v7-brass);
  border-color: var(--v7-brass);
  color: var(--v7-dark);
}

.home-page .service-areas .button-dark:hover {
  background: var(--v7-wood);
  border-color: var(--v7-wood);
  color: #fff;
}

/* ————— About (paper) ————— */
.home-page .about-mark {
  background:
    linear-gradient(180deg, rgba(20, 23, 27, .1), rgba(20, 23, 27, .34)),
    url("assets/photos/wall-molding.webp") center / cover no-repeat;
}

/* ————— Portfolio — ink ————— */
.home-page .portfolio {
  background: var(--v7-dark);
}

.home-page .portfolio h2 {
  color: var(--v7-paper-text-strong);
}

.home-page .portfolio-copy .eyebrow {
  color: var(--v7-brass);
}

.home-page .portfolio-copy > p:not(.eyebrow) {
  color: var(--v7-paper-text);
}

.home-page .portfolio-note {
  color: rgba(246, 245, 240, .58);
}

.home-page .portfolio .button-dark {
  background: var(--v7-brass);
  border-color: var(--v7-brass);
  color: var(--v7-dark);
}

.home-page .portfolio .button-dark:hover {
  background: var(--v7-wood);
  border-color: var(--v7-wood);
  color: #fff;
}

/* ————— Contact (paper) ————— */
.home-page .contact {
  background: var(--v7-surface-2);
}

.home-page .contact-action {
  border-color: var(--v7-line);
  background: rgba(255, 255, 255, .7);
}

.home-page .contact-action.is-primary {
  background: var(--v7-dark);
}

.home-page .contact-action span {
  font-family: var(--v7-mono);
  color: var(--v7-wood);
}

.home-page .contact-action.is-primary span {
  color: var(--v7-brass);
}

/* ————— Footer — ink, aligned to the same dark token ————— */
.home-page .site-footer {
  background: var(--v7-dark);
}

.home-page .footer-column a:hover {
  color: var(--v7-brass);
}

.home-page .footer-cta {
  color: var(--v7-brass);
}

/* ————— V9 layer alignment ————— */
.home-page .back-to-top {
  border-radius: 999px;
}

.home-page .back-to-top:hover {
  background: var(--v7-dark);
}

.home-page .gallery-expand,
.home-page .lightbox-close {
  border-radius: 999px;
}

.home-page .lightbox {
  border-radius: var(--v7-radius-lg);
}

@media (max-width: 640px) {
  .home-page .hero-visual::before {
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
  }
}