/* Brazos Site Co. — niche pages (/builders, /salons). Loaded after site.css on those pages only.
   Everything shared (header, sketch stage, spec sheet, website check, package builder, pledge, questions, form,
   footer, action bar) comes from site.css unchanged. This file adds only what these pages have and the homepage
   doesn't: the picture-first hero, the sketch plate without a picture, six more little spec-sheet UIs, the cost
   box, the suite block, the compact about and the cross-link line. */

/* ---------- hero: the picture first, the headline under it ---------- */
.nhero { padding-top: 12px; }
.nhero::before { display: none; }
.nart { position: relative; margin: 0 12px; height: clamp(360px, 46vh, 560px); border-radius: 22px; overflow: hidden; isolation: isolate; background: #2A241E; }
.nart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
html.js .nart img { animation: plateIn 2.4s var(--ease) backwards; }
.nart::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(9,11,16,0) 64%, rgba(9,11,16,.38) 100%); }
.nart-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.nart-mat { display: flex; gap: 6px; }
.nart-mat span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: rgba(9,11,16,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(242,244,248,.92); font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.nart-mat i { width: 9px; height: 9px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.nhero-copy { padding-top: clamp(28px, 3.6vw, 52px); }
/* The headline runs the full width under the picture, two lines; the pitch and the buttons sit on a ruled line below it. */
.nh1 { font-size: clamp(2.5rem, 6vw, 5.6rem); }
.nh1 > span { display: block; }
.nh1 > .stag { display: inline-block; }
/* "Job-Ready" and "Chair-Ready" never break at the hyphen in a heading */
.nw { white-space: nowrap; }
.nhero-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 22px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(26px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--line-2); }
.nhero-row .lede { max-width: 48ch; }
/* the hero price line sits on paper here, not on the dark plate */
.nhero .hero-price { margin-top: 16px; color: var(--muted); }
.nhero .hero-price b { color: var(--ink); }

/* ---------- the sketch, on a framed dark plate with no picture ---------- */
.nmock { background: var(--dark); }
.nmock::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 12% 0%, rgba(39,71,232,.28), rgba(39,71,232,0) 70%); }
.nmock::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(242,244,248,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(242,244,248,.045) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask: linear-gradient(to bottom, #000, transparent 80%); mask: linear-gradient(to bottom, #000, transparent 80%); }
.nmock-head { display: grid; gap: 10px; padding-top: 6px; }
.nmock-head .label { margin: 0; }
.niche--salons #gTrades:empty { min-height: 44px; }

/* ---------- six more little UIs for the spec sheet (they render in the row box and in the sticky panel alike) ---------- */
.ui-tag { position: absolute; top: 12px; left: 12px; z-index: 3; font: 700 10.5px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line-2); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.spec-row[data-ui="bar"] .spec-ui .ui-tag, .sp-item[data-ui="bar"] .ui-tag { align-self: start; }

/* recent projects: the example cover beside its project list */
.ui-proj { width: min(420px, 92%); display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; }
.ui-cover { aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 5px #1E1F21, 0 24px 40px -22px rgba(11,13,18,.5); }
.ui-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ui-list { display: grid; border-top: 1px solid var(--line-2); }
.ui-list li { display: grid; grid-template-columns: 26px 1fr; gap: 1px 8px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.ui-list .cap { color: var(--blue-ink); font-size: 11px; padding-top: 3px; }
.ui-list b { font-weight: 620; letter-spacing: -.01em; }
.ui-list em { grid-column: 2; font-style: normal; color: var(--muted); font-size: 13px; }
.sp-item .ui-proj { width: min(470px, 94%); grid-template-columns: 168px minmax(0, 1fr); gap: 26px; }
.spec-row .ui-proj { width: min(380px, 92%); grid-template-columns: 86px minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.spec-row .ui-list li { padding: 6px 0; font-size: 14px; }

/* service area, set as type */
.ui-towns { width: min(440px, 92%); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .42em; text-align: center; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; color: var(--ink); }
.ui-towns span { white-space: nowrap; }
.ui-towns span:nth-child(3n+2) { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; }
.ui-towns span:nth-child(3n) { color: var(--muted); font-weight: 500; }
.ui-towns span:first-child { color: var(--ember-ink); }
.spec-row .ui-towns { font-size: 24px; margin-top: 14px; }

/* truck page + review cards */
.ui-qr { display: flex; align-items: center; gap: 30px; }
.ui-cards { position: relative; width: 132px; height: 164px; }
.ui-cards span { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.ui-cards span:nth-child(1) { transform: rotate(-8deg) translate(-8px, 6px); background: #F6F4EF; }
.ui-cards span:nth-child(2) { transform: rotate(4deg) translate(6px, 2px); background: #EFEDE7; }
.ui-cards b { font-size: 15px; line-height: 1.15; letter-spacing: -.02em; font-weight: 620; }
.ui-cards small { width: 46px; height: 46px; border-radius: 4px; background: conic-gradient(from 90deg, var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 11.5px 11.5px; opacity: .85; }
.ui-cards i { font: 700 10px/1.2 var(--sans); font-stretch: 78%; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.spec-row .ui-qr { gap: 20px; transform: scale(.86); }

/* salons: Book with, price list, hours and parking, booking apps */
.bookw { width: min(360px, 88%); display: grid; gap: 8px; padding: 20px; background: #F6F1F3; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.bookw p { font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: #7A666D; }
.bookw span { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: #fff; border-radius: 10px; font-family: var(--serif); font-style: italic; font-size: 22px; color: #2B2622; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.bookw span svg { width: 16px; height: 16px; color: #A34E5E; }
.spec-row[data-ui="book"] .spec-ui { align-items: end; padding-bottom: 14px; }
.spec-row .bookw { width: min(300px, 78%); gap: 4px; padding: 10px 12px; }
.spec-row .bookw span { padding: 6px 12px; font-size: 18px; }
.ui-menu { width: min(360px, 88%); padding: 22px 22px 16px; background: #F6F1EA; border-radius: 4px; box-shadow: 0 0 0 1px rgba(42,36,32,.12), 0 30px 50px -28px rgba(42,36,32,.35); color: #2A2420; }
.ui-menu p { font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: #A34E5E; margin-bottom: 8px; }
.ui-menu li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(42,36,32,.1); }
.ui-menu li:last-child { border-bottom: 0; }
.ui-menu b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.ui-menu i { flex: 1; border-bottom: 1px dotted rgba(42,36,32,.3); transform: translateY(-5px); }
.ui-menu span { font-size: 14px; font-weight: 560; font-variant-numeric: tabular-nums; }
.spec-row .ui-menu { padding: 12px 16px 8px; margin-top: 16px; }
.spec-row .ui-menu li { padding: 4px 0; }
.spec-row .ui-menu b { font-size: 18px; }
.ui-visit { width: min(330px, 90%); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.ui-visit .gbp-map { height: 78px; }
.ui-visit li { display: grid; grid-template-columns: 26px 1fr; gap: 0 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ui-visit li:last-child { border-bottom: 0; }
.ui-visit li svg { width: 17px; height: 17px; color: #A34E5E; grid-row: span 2; margin-top: 2px; }
.ui-visit li b { font-weight: 600; letter-spacing: -.01em; }
.ui-visit li > span { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.ui-visit .open { color: var(--ok); font-weight: 600; }
.spec-row .ui-visit { transform: scale(.78); transform-origin: 50% 60%; }
.ui-apps { display: grid; justify-items: center; gap: 14px; padding: 24px 12px 12px; }
.ui-apps ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; }
.ui-apps li { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 560; color: var(--ink-2); }
.ui-link { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ui-link svg { width: 14px; height: 14px; transform: rotate(90deg); color: var(--faint); }
.ui-book { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: #A34E5E; color: #fff; font-family: var(--serif); font-style: italic; font-size: 21px; }
.ui-book svg { width: 16px; height: 16px; }
.spec-row .ui-apps { gap: 10px; transform: scale(.9); }

/* ---------- cost box (builders) ---------- */
.ncost { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-2); background: var(--surface); }
.ncost-n { display: grid; gap: 10px; font-size: clamp(3.6rem, 7.5vw, 6.6rem); line-height: .86; letter-spacing: -.06em; font-weight: 600; font-stretch: 104%; color: var(--ember-ink); font-variant-numeric: tabular-nums; }
.ncost-n .cap { color: var(--muted); letter-spacing: .08em; }
.ncost-copy { display: grid; gap: 10px; }
.ncost h3 { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.03em; font-weight: 600; line-height: 1.12; }
.ncost-copy > p:not(.fine) { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.ncost .fine a { color: var(--blue-ink); }

/* ---------- suite renters (salons) ---------- */
.nsuite { padding-top: var(--sec); }
.nsuite-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.nsuite-art { position: relative; margin: 0; overflow: hidden; background: #E6E9EF; border: 1px solid var(--line-2); aspect-ratio: 16 / 10; }
.nsuite-art img { width: 100%; height: 100%; object-fit: cover; }
.nsuite-copy .h2 { margin-bottom: 20px; }
.nsuite-copy .lede { margin-bottom: 22px; }
.nsuite-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px; color: var(--muted); font: 700 12px/1.3 var(--sans); font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase; }
.nsuite-facts li { display: inline-flex; align-items: center; gap: 8px; }
.nsuite-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #A34E5E; }
.nsuite-facts b { color: var(--ink); }

/* ---------- pricing with one or two packages ---------- */
.pk-ex { max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niche--builders .pk-grid { grid-template-columns: 1fr; }
@media (min-width: 961px) {
  .niche--builders .pk-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr auto; column-gap: 24px; padding: 12px 14px 16px 12px; }
  .niche--builders .pk-art { grid-row: 1 / span 4; margin: 0; aspect-ratio: auto; height: 100%; min-height: 240px; }
  .niche--builders .pk-top, .niche--builders .pk-for, .niche--builders .pk-list, .niche--builders .pk-time { grid-column: 2; }
  .niche--builders .pk-top { padding-top: 8px; }
  .niche--builders .pk-name { font-size: 21px; }
  .niche--builders .pk-price { font-size: 27px; }
  .niche--salons .pk-grid, .niche--salons .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- questions: the line to the other page ---------- */
.ncross { grid-column: 2; margin-top: -16px; color: var(--muted); font-size: 16.5px; }
.ncross a { color: var(--ink); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.ncross a:hover { text-decoration-color: var(--ink); }

/* ---------- compact about ---------- */
.nabout { padding-top: var(--sec); }
.nabout-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding-top: 28px; border-top: 1px solid var(--line-2); }
.nabout-fig { margin: 0; width: 140px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.nabout-fig img { width: 100%; height: 100%; object-fit: cover; }
.nabout-fig:not(:has(img:not([hidden]))) { display: none; }
.nabout-in:not(:has(.nabout-fig img:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.nabout .about-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nhero-row { grid-template-columns: 1fr; }
  .ncross { grid-column: 1; }
  .nsuite-in { grid-template-columns: 1fr; }
  .ncost { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nart { height: 300px; margin-inline: 12px; border-radius: 18px; }
  .nart-cap { left: 12px; right: 12px; bottom: 12px; }
  .nart-mat { display: none; }
  .nhero-copy { padding-top: 24px; }
  .nh1 { font-size: clamp(2.2rem, 9.6vw, 3.6rem); }
  .ui-qr { gap: 18px; }
  .nabout-in { grid-template-columns: 1fr; }
  /* content heights at 390px for the sections site.css lays out late on phones */
  .niche .incl { contain-intrinsic-size: auto 2500px; }
  .niche--builders .pricing { contain-intrinsic-size: auto 2900px; }
  .niche--salons .pricing { contain-intrinsic-size: auto 3300px; }
}