/* itsadiamond.com: Paseo Del Este incentives (design Option A, approved by CJ 2026-09-11)
   on /inventory and the homepage, the branded print header, and the inventory table-fit fix.
   GENERATED by ../ItsaDiamond Incentive Designs/port-to-site.py. Edit there, not here. */

/* Shared by all three options. Brand: SW Iron Ore #434341, SW Rojo Marron #4B3029,
   light gold #DCC794 (gold-ink #7A6636 for small text on the page's cream). The live
   page's own fonts (Cormorant Garamond + Jost) are used so the incentive blocks belong. */
:root {
  --inc-iron: #434341; --inc-iron-deep: #2e2e2c;
  --inc-rojo: #4b3029; --inc-rojo-2: #5d3b33;
  --inc-gold: #dcc794; --inc-gold-soft: #eadfbf; --inc-gold-ink: #7a6636; --inc-gold-line: #b89b5e;
  --inc-cream: #f5f0e4;
  --inc-ease: cubic-bezier(.23, 1, .32, 1);
}

/* filter notice above the table */
.inc-filter { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .7rem 1rem; background: var(--inc-rojo); color: var(--inc-cream); font-size: .88rem; }
.inc-filter[hidden] { display: none; }
.inc-filter span { flex: 1; }
.inc-filter button { background: transparent; border: 1px solid rgb(245 240 228 / .45); color: var(--inc-cream); font: inherit; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: .4rem .9rem; cursor: pointer; transition: border-color 160ms ease, transform 160ms var(--inc-ease); }
.inc-filter button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .inc-filter button:hover { border-color: var(--inc-gold); } }
.inv-table.inc-filtered .inv-sect,
.inv-table.inc-filtered .inv-row:not([data-inc]),
.inv-table[data-inc-filter="ready"] .inv-row[data-inc="presale"],
.inv-table[data-inc-filter="presale"] .inv-row[data-inc="ready"] { display: none; }

/* fine print */
.inc-fine { margin-top: 1.6rem; font-size: .85rem; font-weight: 300; color: #8a8078; }
.inc-fine strong { font-weight: 500; color: #6f675f; }


/* Money and percentages in lining figures: Cormorant's default old-style numerals make
   "5%" and "$2,500" bounce up and down, which reads as decorative rather than exact. */
.incA-terms dd, .incA-detail-row b { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

/* ---------- printed inventory sheet (the "Print full inventory" PDF) ----------
   Rojo Marron carries the incentive so it reads at a glance on a black-and-white sheet
   too: solid box, solid tag, dark text. print-color-adjust keeps the fills in the PDF. */
@media print {
  .pr-inc-terms { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 3.5mm; border: .8pt solid #cdb88a; break-inside: avoid; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-inc-terms > div { padding: 2.2mm 3.2mm 2.4mm; background: #f3ece0; }
  .pr-inc-terms .is-ready { background: #4b3029; color: #fff; }
  .pr-inc-terms h4 { font-family: var(--sans); font-size: 6.6pt; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #7a6636; margin: 0 0 .8mm; }
  .pr-inc-terms .is-ready h4 { color: #dcc794; }
  .pr-inc-terms p { font-family: var(--serif); font-size: 11.5pt; font-weight: 600; line-height: 1.2; margin: 0; font-variant-numeric: lining-nums; }
  .pr-inc-terms p span { font-weight: 400; color: #7a6636; margin: 0 .6mm; }
  .pr-inc-terms .is-ready p span { color: #dcc794; }
  .pr-inc-ready { display: block; width: fit-content; margin-top: .7mm; padding: .3mm 1.3mm; font-family: var(--sans); font-size: 6pt; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; background: #4b3029; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-h:has(.pr-inc) .pr-r, .pr-h:has(.pr-inc) .pr-n td { border-bottom: 0 !important; }
  .pr-inc td { font-size: 7.4pt; color: #4b3029; padding: 0 1.2mm 1.8mm; border-bottom: .4pt solid #e0e0e0; font-variant-numeric: lining-nums; }
  .pr-inc b { font-weight: 600; color: #2a1a16; }
  .pr-inc i { font-style: normal; color: #b89b5e; margin: 0 1.6mm; }
  .pr-inc-k { display: inline-block; margin-right: 1.8mm; font-size: 6.2pt; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7a6636; }
  .pr-foot .pr-inc-fine { color: #4b3029 !important; }
  .pr-foot .pr-inc-fine strong { color: #4b3029 !important; }

  /* branded header (page 1) */
  .pr-head.pr-head2 { border-bottom: 0; padding: 0; margin: 0 0 6mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ph-band { display: flex; align-items: center; gap: 6mm; padding: 5.5mm 7mm; background: #2e2e2c; border-bottom: 1.2pt solid #b89b5e; }
  .ph-logo { height: 17mm; width: auto; flex: none; filter: brightness(1.75); }
  .ph-title { padding-left: 6mm; border-left: .6pt solid rgb(220 199 148 / .45); }
  .ph-kicker { margin: 0; font-size: 6.8pt; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #dcc794; }
  .pr-head2 .ph-title h1 { margin: .6mm 0 0; font-family: var(--serif); font-size: 25pt; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
  .ph-meta { margin: 1.2mm 0 0; font-size: 7.4pt; letter-spacing: .03em; color: #cbc7bf; }
  .ph-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 6.5mm; padding: 2.4mm 7mm; background: #f3ece0; border-bottom: .5pt solid #cdb88a; font-size: 7.6pt; color: #2e2e2c; }
  .ph-contact b { margin-right: 1.6mm; font-size: 6.2pt; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7a6636; }
  .ph-contact span { white-space: nowrap; }
  .ph-band .ph-web { margin: 0 0 0 auto; align-self: flex-end; font-size: 8pt; font-weight: 500; letter-spacing: .14em; color: #dcc794; }
  .ph-inc { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6mm; row-gap: .9mm; padding: 2.6mm 7mm; background: #4b3029; color: #fff; font-size: 8.4pt; }
  .ph-inc p { margin: 0; white-space: nowrap; }
  .ph-inc .ph-inc-k { grid-row: 1 / span 2; align-self: stretch; display: flex; align-items: center; padding-right: 6mm; border-right: .6pt solid rgb(220 199 148 / .4); font-size: 6.4pt; font-weight: 500; line-height: 1.35; letter-spacing: .2em; text-transform: uppercase; color: #dcc794; }
  .ph-inc b { display: inline-block; min-width: 25mm; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 6.8pt; color: #dcc794; }
  .ph-lender { margin: 2.2mm 0 0; padding-left: 7mm; font-size: 6.8pt; letter-spacing: .16em; text-transform: uppercase; color: #7a6636; }

  /* running header on each later community page */
  .ph-run { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4.5mm; padding-bottom: 1.6mm; border-bottom: 1pt solid #2e2e2c; font-size: 6.4pt; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #434341; }
  .ph-run .ph-mark { color: #b89b5e; }
}

/* Option A: "Offer panel". Two offer cards, one per kind of home, in a panel that rides
   up over the dark hero. Move-in ready is the Rojo Marron card with the gold bonus. */
.inv-hero.incA-hero { padding-bottom: 10.5rem; }
.incA { position: relative; z-index: 2; max-width: 1150px; margin: -8rem auto 0; padding: 0 2rem; }
.incA-panel {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.7fr); gap: 2.6rem; align-items: stretch;
  padding: 2.6rem; background: #fffdf8; border-top: 2px solid var(--inc-gold-line);
  box-shadow: 0 34px 80px -44px rgb(46 40 36 / .6), 0 1px 2px rgb(46 40 36 / .06);
}
.incA-intro { display: flex; flex-direction: column; justify-content: center; }
.incA-eyebrow { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--inc-gold-ink); }
.incA-intro h2 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.05; color: var(--inc-iron-deep); margin: .7rem 0 .9rem; max-width: 12ch; }
.incA-lead { font-weight: 300; font-size: 1rem; color: #57504a; max-width: 38ch; }

.incA-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.incA-offer { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.6rem 1.4rem; background: #f3ece0; border: 1px solid #cdb88a; box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.incA-offer h3 { font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--inc-iron); }
.incA-count { font-size: .86rem; font-weight: 300; color: #7d7268; margin-top: .25rem; min-height: 1.4em; }
.incA-terms { display: grid; gap: .85rem; margin: 1.3rem 0 1.5rem; }
.incA-terms div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .85rem; border-top: 1px solid rgb(122 102 54 / .2); }
.incA-terms dt { font-size: .86rem; font-weight: 300; color: #57504a; }
.incA-terms dd { margin: 0; font-family: var(--serif); font-size: 2.5rem; font-weight: 500; line-height: .9; color: var(--inc-iron-deep); letter-spacing: -.01em; }

.incA-offer.is-feature { background: var(--inc-rojo); border-color: var(--inc-rojo); color: var(--inc-cream); }
.incA-offer.is-feature h3 { color: var(--inc-gold); }
.incA-offer.is-feature .incA-count { color: rgb(245 240 228 / .7); }
.incA-offer.is-feature .incA-terms div { border-top-color: rgb(245 240 228 / .16); }
.incA-offer.is-feature dt { color: rgb(245 240 228 / .82); }
.incA-offer.is-feature dd { color: #fff; }
.incA-offer.is-feature .is-bonus dd { color: var(--inc-gold); }
.incA-flag { position: absolute; top: -1px; right: 1.3rem; padding: .38rem .75rem; background: var(--inc-gold); color: var(--inc-iron-deep); font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }

.incA-cta {
  margin-top: auto; width: 100%; padding: .85rem 1rem; cursor: pointer;
  font-family: var(--sans); font-size: .74rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  background: rgb(255 253 248 / .6); color: var(--inc-iron-deep); border: 1px solid rgb(67 67 65 / .45);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--inc-ease);
}
.incA-cta:active { transform: scale(.97); }
.incA-cta:disabled { opacity: .45; cursor: default; transform: none; }
.is-feature .incA-cta { background: var(--inc-gold); border-color: var(--inc-gold); color: var(--inc-iron-deep); }
@media (hover: hover) and (pointer: fine) {
  .incA-cta:not(:disabled):hover { background: var(--inc-iron-deep); border-color: var(--inc-iron-deep); color: var(--inc-cream); }
  .is-feature .incA-cta:not(:disabled):hover { background: var(--inc-gold-soft); border-color: var(--inc-gold-soft); color: var(--inc-iron-deep); }
}

/* entrance: the panel settles into place once, on load */
@media (prefers-reduced-motion: no-preference) {
  .incA-panel { animation: incA-in 700ms var(--inc-ease) 120ms both; }
  .incA-offer { animation: incA-in 700ms var(--inc-ease) both; }
  .incA-offer:nth-child(1) { animation-delay: 220ms; }
  .incA-offer:nth-child(2) { animation-delay: 290ms; }
}
@keyframes incA-in { from { opacity: 0; transform: translateY(14px); } }



/* table */
.inc-tabtag { display: inline-block; margin-left: .45rem; padding: .16rem .5rem; vertical-align: middle; background: var(--inc-rojo); color: var(--inc-gold); font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.incA-rowtag { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .7rem; font-weight: 400; letter-spacing: .08em; line-height: 1.5; color: var(--inc-gold-ink); white-space: normal; }
.incA-rowtag.is-ready { color: var(--inc-rojo); }
.incA-rowtag.is-ready b { display: inline-block; margin-right: .45rem; padding: .12rem .45rem; background: var(--inc-rojo); color: var(--inc-gold); font-weight: 500; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }

.incA-detail { margin: 1rem 0 .2rem; }
.incA-detail-h { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--inc-gold-ink); margin-bottom: .5rem; }
.incA-detail-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.incA-detail-row div { flex: 1 1 150px; padding: .75rem .9rem; background: #f3ece0; border: 1px solid #cdb88a; }
.incA-detail-row span { display: block; font-size: .72rem; color: #7a7376; }
.incA-detail-row b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--inc-iron-deep); line-height: 1.2; }
.incA-detail-row .is-bonus { background: var(--inc-rojo); border-color: var(--inc-rojo); }
.incA-detail-row .is-bonus span { color: rgb(245 240 228 / .75); }
.incA-detail-row .is-bonus b { color: var(--inc-gold); }

@media (max-width: 980px) {
  .incA-panel { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.8rem; }
  .incA-intro h2 { max-width: none; }
}
@media (max-width: 700px) {
  .inv-hero.incA-hero { padding-bottom: 8rem; }
  .incA { margin-top: -6rem; padding: 0 1rem; }
  .incA-panel { padding: 1.4rem 1.2rem; }
  .incA-offers { grid-template-columns: 1fr; }
  .incA-terms dd { font-size: 2.1rem; }
}

/* ---------- homepage (the same panel in normal flow, above "On the market now") ---------- */
a.incA-cta { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
a.incA-cta[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.incA.is-flat { margin: 0 auto; padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.incA.is-flat .incA-panel, .incA.is-flat .incA-offer { animation: none; }
.incA.is-flat .inc-fine { margin: 1.1rem .2rem 0; font-size: .74rem; line-height: 1.6; }
.ib-inc { display: block; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid rgb(122 102 54 / .18); font-size: .72rem; font-weight: 400; letter-spacing: .04em; line-height: 1.5; color: var(--inc-gold-ink); }
.ib-inc b { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--inc-iron); margin-bottom: .1rem; }
.ib-inc.is-ready { color: var(--inc-rojo); }
.ib-inc.is-ready b { display: table; padding: .12rem .45rem; margin-bottom: .25rem; background: var(--inc-rojo); color: var(--inc-gold); }

/* ---------- the table fits its frame at every width: no sideways scrolling ----------
   The table used to carry min-width:1080px inside an overflow-x:auto box, so anything
   narrower than about 1,280px (a small laptop, an iPad) had to scroll it sideways to see
   price and completion. Below 700px it is already a stack of cards (style.css). Between
   the two it now stays fluid: cells may wrap, padding tightens, and the Package column
   steps out on narrower screens (the expanded row still shows the package). */
@media (min-width: 701px) {
  .inv-table { min-width: 0; }
  .incA-rowtag.is-ready b { display: table; margin: 0 0 .25rem; }
}
/* wide screens: the address stays on one line and its incentive line under it, so the
   address column takes the room it needs instead of the price and date columns */
@media (min-width: 1201px) {
  .inv-addr, .incA-rowtag { white-space: nowrap; }
  .inv-table th, .inv-table td { padding-left: .9rem; padding-right: .9rem; }
  .inv-table th { letter-spacing: .16em; }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .inv-addr { white-space: normal; }
  .inv-table th, .inv-table td { padding-left: .75rem; padding-right: .75rem; }
  .inv-table th { font-size: .64rem; letter-spacing: .16em; white-space: normal; }
  .inv-table td { font-size: .9rem; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .inv-table th:nth-child(6), .inv-table td[data-l="Package"] { display: none; }
  .inv-table th, .inv-table td { padding-left: .55rem; padding-right: .55rem; }
  .inv-addr { font-size: 1.02rem; }
}