/* board1-polish.css — offline premium pass (boundary-line setting)
   Loaded AFTER board1.css. Tokens only. No copy changes. */

/* ---------------------------------------------------------------------------
   1. HERO — grain, slight photo lift, accent mesh, boundary motif
   --------------------------------------------------------------------------- */
.hero .hero-bg img {
  filter: grayscale(0.92) contrast(0.92) brightness(0.48);
}
:root[data-theme="light"] .hero .hero-bg img {
  filter: grayscale(0.45) contrast(1.04) brightness(1.05);
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image:
    url("assets/polish/grain-tile.svg"),
    url("assets/polish/paper-metal-grain.png");
  background-size: 180px 180px, 420px 420px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
}
:root[data-theme="light"] .hero-overlay::before {
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* Accent mesh — right third, quiet */
.hero-overlay::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 18%;
  width: 48%;
  height: 62%;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  filter: blur(64px);
  opacity: 0.55;
  transform: translate3d(0, 0, 0);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .hero-overlay::after {
    background: rgba(31, 160, 145, 0.12);
  }
}

/* Boundary motif watermark in hero right third */
.hero::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 18%;
  width: min(42vw, 420px);
  height: 48px;
  background: url("assets/polish/boundary-line-motif.svg") center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 2;
}
:root[data-theme="light"] .hero::before {
  opacity: 0.18;
  filter: invert(0.92) hue-rotate(160deg) saturate(1.2);
}

/* CTA band grain + boundary break */
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("assets/polish/grain-tile.svg");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}
.cta-banner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(520px, 70%);
  height: 28px;
  transform: translateX(-50%);
  background: url("assets/polish/crowned-edge-device.svg") center top / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Section boundary hairline under titles that already use set-out ticks */
.section-title::after {
  /* reinforce existing centred title ticks with a longer struck rule */
}
.diff-section .section-header,
.builds-section .section-header,
.services-section .section-header,
.faq-section .section-header,
.contact-section .section-header {
  position: relative;
}
.diff-section .section-header::after,
.builds-section .section-header::after,
.services-section .section-header::after {
  content: "";
  display: block;
  width: min(220px, 40%);
  height: 24px;
  margin-top: var(--setout-s, 18px);
  color: var(--color-accent);
  background: url("assets/polish/boundary-rule.svg") left center / contain no-repeat;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   2. WHY-US — glass cards + drawn accent rule under title
   --------------------------------------------------------------------------- */
.diff-card {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 3px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .diff-card { background: var(--color-surface); }
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .diff-card { background: var(--color-surface); }
}

.diff-card h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.diff-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms var(--draw, cubic-bezier(0.55, 0, 0.45, 1));
}
.diff-card:hover h3::after,
.diff-card:focus-within h3::after,
.diff-card.is-open h3::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .diff-card h3::after { transition: none; transform: scaleX(1); }
}

/* Sketch row — reserved slots for footing diagrams */
.why-sketch-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--setout-m, 24px);
  margin-top: var(--setout-l, 36px);
  padding-top: var(--setout-m, 24px);
  border-top: 1px solid var(--color-divider);
}
@media (min-width: 900px) {
  .why-sketch-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.why-sketch-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--setout-x, 12px);
}
.why-sketch-frame {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 3px);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--color-accent);
  overflow: hidden;
}
.why-sketch-frame::before,
.why-sketch-frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--color-accent);
  border-style: solid;
  pointer-events: none;
}
.why-sketch-frame::before {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}
.why-sketch-frame::after {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}
.why-sketch-frame img,
.why-sketch-frame object {
  max-width: 86%;
  max-height: 86%;
  display: block;
}
.why-sketch-placeholder {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
  padding: var(--setout-s, 18px);
}
.why-sketch-item figcaption {
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   3. SERVICES — corner ticks on photo frames
   --------------------------------------------------------------------------- */
.services-section .service-card:not(.service-card--build) .service-card-image {
  position: relative;
  border-radius: var(--radius-md, 3px);
  overflow: hidden;
}
.services-section .service-card:not(.service-card--build) .service-card-image::before,
.services-section .service-card:not(.service-card--build) .service-card-image::after,
.builds-snap .service-card--build .service-card-image::before,
.builds-snap .service-card--build .service-card-image::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 150ms var(--seat, cubic-bezier(0.72, 0, 0.28, 1));
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) top left / 14px 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) top left / 1px 14px no-repeat;
}
.services-section .service-card:not(.service-card--build) .service-card-image::after,
.builds-snap .service-card--build .service-card-image::after {
  top: auto; left: auto; right: 8px; bottom: 8px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom right / 1px 14px no-repeat;
}
.services-section .service-card:not(.service-card--build) .service-card-image::before,
.builds-snap .service-card--build .service-card-image::before {
  top: 8px; left: 8px;
}
/* Extra two corners via child tick (HTML hook) */
.corner-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.corner-ticks::before,
.corner-ticks::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.72;
  transition: opacity 150ms var(--seat, cubic-bezier(0.72, 0, 0.28, 1));
}
.corner-ticks::before {
  top: 8px; right: 8px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) top right / 14px 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) top right / 1px 14px no-repeat;
}
.corner-ticks::after {
  bottom: 8px; left: 8px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom left / 1px 14px no-repeat;
}
.service-card:hover .service-card-image::before,
.service-card:hover .service-card-image::after,
.service-card:hover .corner-ticks::before,
.service-card:hover .corner-ticks::after,
.service-card:focus-within .service-card-image::before,
.service-card:focus-within .service-card-image::after,
.service-card:focus-within .corner-ticks::before,
.service-card:focus-within .corner-ticks::after {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   4. RECENT BUILDS — CSS scroll-snap row (no Embla/Splide/Swiper)
   --------------------------------------------------------------------------- */
.builds-snap-wrap {
  position: relative;
}
.builds-snap {
  display: flex;
  gap: var(--setout-m, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4, 1rem);
  padding-bottom: var(--setout-s, 18px);
  -webkit-overflow-scrolling: touch;
}
.builds-snap .service-card--build {
  flex: 0 0 78vw;
  scroll-snap-align: start;
  max-width: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 3px);
  background: var(--color-surface);
}
@media (min-width: 900px) {
  .builds-snap .service-card--build {
    flex: 0 0 calc(32% - 12px);
  }
}
.builds-snap .service-card-image {
  position: relative;
  border-radius: var(--radius-md, 3px) var(--radius-md, 3px) 0 0;
  overflow: hidden;
}
.builds-snap-nav {
  display: flex;
  gap: var(--setout-x, 12px);
  margin-top: var(--setout-s, 18px);
}
.builds-snap-nav[hidden] { display: none !important; }
.builds-snap-nav .btn {
  border-radius: var(--radius-sm, 1px);
  transition: transform 150ms var(--seat, cubic-bezier(0.72, 0, 0.28, 1));
}
.builds-snap-nav .btn:active {
  transform: translateY(1px);
}
.builds-google-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--setout-x, 12px);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.95rem);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.builds-google-link:hover {
  color: var(--color-accent-hover, var(--color-accent));
}
@media (prefers-reduced-motion: reduce) {
  .builds-snap { scroll-behavior: auto; }
}
@supports (scroll-behavior: smooth) {
  .builds-snap { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    .builds-snap { scroll-behavior: auto; }
  }
}

/* ---------------------------------------------------------------------------
   5. FAQ + CONTACT — glass + draw rhythm (150ms seat)
   --------------------------------------------------------------------------- */
.faq-item {
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 3px);
  border-left: 1px solid var(--color-divider);
  transition:
    border-color 150ms var(--seat, cubic-bezier(0.72, 0, 0.28, 1)),
    border-left-color 560ms var(--draw, cubic-bezier(0.55, 0, 0.45, 1));
}
.faq-item[open] {
  border-color: var(--color-border);
  border-left-color: var(--color-accent);
  border-left-width: 1px;
}
.faq-question::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(45deg);
  margin-left: var(--space-4);
  transition: transform 150ms var(--seat, cubic-bezier(0.72, 0, 0.28, 1));
  font-size: 0;
  color: transparent;
}
.faq-item[open] .faq-question::after {
  content: "";
  transform: rotate(-135deg); /* 180deg flip from closed = 45deg seat, not a spin */
}
@media (prefers-reduced-motion: reduce) {
  .faq-item { transition: none; }
  .faq-item[open] { border-left-color: var(--color-accent); }
  .faq-question::after { transition: none; }
}

.contact-form-wrapper {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 3px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.contact-form-wrapper::before {
  content: "";
  position: absolute;
  left: var(--setout-m, 24px);
  right: var(--setout-m, 24px);
  top: 0;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.55;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .contact-form-wrapper { background: var(--color-surface); }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .contact-form-wrapper { background: var(--color-surface); }
}

/* Quiet mesh behind contact panel */
.contact-section {
  position: relative;
}
.contact-section::before {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 10%;
  width: 36%;
  height: 40%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  filter: blur(72px);
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
.contact-section > .container { position: relative; z-index: 1; }

/* Trust bar glass */
.trust-bar {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-block: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .trust-bar { background: var(--color-surface); }
}

/* Focus stays accent outline */
.builds-snap .service-card--build:focus-visible,
.diff-card:focus-visible,
.faq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   LIGHT PLAN FIELD — plant the boundary stroke into the paper.
   Dark theme untouched. Hero ::before is left alone (section counter owns it).
   --------------------------------------------------------------------------- */
:root[data-theme="light"] {
  background-color: #f4f5f3;
  background-image:
    url("assets/polish/plan-field-light.svg"),
    url("assets/polish/grain-paper.svg");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 220px 220px;
  background-position: center center, 0 0;
  background-attachment: fixed, scroll;
}
:root[data-theme="light"] body {
  background-color: transparent;
}

/* Construction plan + the same boundary stroke, on the open right of the hero.
   Selector matches board1's light overlay rule so this file (loaded later) wins. */
:root[data-theme="light"] .hero .hero-overlay {
  background-image:
    url("assets/polish/boundary-line-field.svg"),
    url("assets/polish/plan-hero-light.svg"),
    linear-gradient(90deg,
      rgba(244,245,243,0.99) 0%,
      rgba(244,245,243,0.97) 32%,
      rgba(244,245,243,0.86) 48%,
      rgba(244,245,243,0.58) 72%,
      rgba(244,245,243,0.46) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 24% 20px, 100% 100%, auto;
  background-position: right 5.2% top 58.6%, center, center;
}
:root[data-theme="light"] .hero .hero-overlay::after {
  opacity: 0.16;
}

/* Sheet shows through section washes. Panels stay solid paper so type stays clear. */
:root[data-theme="light"] .about-section,
:root[data-theme="light"] .services-section,
:root[data-theme="light"] .contact-section,
:root[data-theme="light"] .diff-section,
:root[data-theme="light"] .areas-section,
:root[data-theme="light"] .faq-section,
:root[data-theme="light"] .builds-section,
:root[data-theme="light"] .map-section,
:root[data-theme="light"] .site-footer,
:root[data-theme="light"] section.section-padding {
  background-color: transparent !important;
  background-image: none;
}
:root[data-theme="light"] .trust-bar {
  background: rgba(244, 245, 243, 0.88);
}
:root[data-theme="light"] .diff-card,
:root[data-theme="light"] .contact-form-wrapper,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .builds-snap .service-card--build {
  background: #fbfbf9;
}
:root[data-theme="light"] .site-header {
  background: rgba(244, 245, 243, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] {
    background-attachment: scroll, scroll;
  }
}