/* Jeske Flooring: the sections this site adds on layout 13 (prefix jf-). Tokens only. */

/* ---------- What he installs: a bento of his photos on the linen tone ---------- */
.jf-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lb .jf-card { display: flex; flex-direction: column; background: var(--light-card); border: 1px solid var(--light-line-soft); overflow: hidden; }
.jf-wide { grid-column: span 2; grid-row: span 2; }
.jf-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tone-3); }
.jf-wide .jf-pic { aspect-ratio: auto; flex: 1; min-height: 300px; }
.jf-pic img, .jf-pic picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jf-body { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; }
.jf-body p { color: var(--light-mute); font-size: 16px; line-height: 1.5; }
.jf-q { color: var(--light-text) !important; font-size: 17px !important; border-top: 1px solid var(--light-line-soft); padding-top: 12px; }
.jf-q span { display: block; margin-top: 4px; font: 700 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-on-light); }
.jf-type { justify-content: center; background: var(--tone-3); }
.jf-type .box { justify-self: start; margin-top: 6px; min-height: 44px; font-size: 13px; padding: 0 14px; }
.jf-grid .jf-type { grid-column: span 2; }
@media (max-width: 1000px) { .jf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jf-wide { grid-row: auto; } .jf-wide .jf-pic { aspect-ratio: 16 / 10; flex: none; min-height: 0; } }
@media (max-width: 600px) { .jf-grid { grid-template-columns: minmax(0, 1fr); } .jf-wide, .jf-grid .jf-type { grid-column: auto; } }

/* ---------- the showpiece: an "Illustration" label, the customer note ---------- */
.lb .show { border: 0; }
.show-stage { position: relative; }
.jf-illus { position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); padding: 7px 9px; }
.jf-show-note { color: var(--mute); margin: -16px 0 var(--s3); max-width: 44ch; font-size: 16px; }
.lb .show-steps li { font-size: 17px; line-height: 1.5; color: var(--text); }
.lb .show { padding: var(--s5) 0; }

/* ---------- photo break: his kitchen, one review over it ---------- */
.jf-break { min-height: clamp(380px, 70vh, 680px); }
.jf-break .wrap { padding-bottom: clamp(40px, 7vw, 88px); width: 100%; }
.jf-break-q { margin: 0; max-width: 30ch; }
.jf-break-q p { font: var(--display-weight) clamp(26px, 3vw, 42px)/1.12 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.jf-break-q cite { display: block; margin-top: 14px; font: 700 14px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #fff; }

/* ---------- reviews: the big 5.0, then all thirteen as a wall of solid cards ---------- */
.jf-rv-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--light-line-soft); }
.jf-big { display: flex; align-items: end; gap: 16px; margin: 0; }
.jf-big .num { font: var(--display-weight) clamp(72px, 9vw, 128px)/0.82 var(--display); color: var(--accent-on-light); }
.jf-big-k { font: 700 14px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--light-mute); }
.jf-tags { font: 400 14px/1.5 var(--mono); letter-spacing: .03em; color: var(--light-mute); max-width: 44ch; margin: 0; }
.jf-wall { columns: 3 300px; column-gap: clamp(16px, 2vw, 24px); }
.jf-wall .rq { break-inside: avoid; margin: 0 0 clamp(16px, 2vw, 24px); background: var(--light-card); border-color: var(--light-line-soft); padding: 26px 24px 22px; display: block; }
.jf-wall .rq p { color: var(--light-text); font-size: 17px; line-height: 1.55; }
.jf-wall .rq cite { display: block; margin-top: 16px; color: var(--light-head); border-top-color: var(--light-line-soft); }

/* ---------- where he works ---------- */
.jf-area-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: end; }
.jf-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.jf-towns li { font: var(--display-weight) clamp(28px, 3.6vw, 52px)/1.08 var(--display); text-transform: uppercase; color: var(--head); }
.jf-towns li.home { color: var(--accent-text); }
.jf-contact { align-self: end; }
@media (max-width: 900px) { .jf-area-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* ---------- the closing band ---------- */
.lb .closing { padding: clamp(72px, 9vw, 120px) 0; }
.lb .closing .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); }
.lb .closing h2 { font-size: clamp(32px, 4.4vw, 64px); }
.lb .closing .box { color: var(--on-tone-brand); border-color: var(--on-tone-brand); }
.lb .closing .box:hover { background: rgba(0,0,0,.08); }

/* ---------- the work page: filters, the contact sheet, the viewer dialog ---------- */
.jf-work-head { max-width: 760px; margin-bottom: var(--s4); }
.jf-work-head h1 { font-size: clamp(40px, 6vw, 84px); line-height: .95; }
.jf-work-head .lead { margin-top: var(--s3); }
.jf-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); }
.jf-filter .box span { color: var(--mute); font-weight: 400; }
.jf-filter .box[aria-pressed="true"] { background: var(--act); color: var(--on-act); border-color: var(--act); }
.jf-filter .box[aria-pressed="true"] span { color: var(--on-act); }
.jf-sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.jf-sheet li[hidden] { display: none; }
.jf-open { display: block; width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--well); color: var(--head); text-align: left; cursor: zoom-in; border-radius: var(--r-s); }
.jf-open:hover { border-color: var(--line-strong); }
.jf-open img, .jf-open picture { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.jf-open span { display: block; padding: 12px 4px 4px; font: 400 13px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.jf-open b { color: var(--head); margin-right: 6px; }
.jf-view { width: min(1100px, 100vw - 24px); max-height: calc(100svh - 24px); padding: 0; border: 1px solid var(--line); background: var(--well); color: var(--text); }
.jf-view::backdrop { background: rgba(8, 6, 5, .86); }
.jf-view-in { padding: 14px; display: grid; gap: 12px; }
.jf-view figure { margin: 0; }
.jf-view img { display: block; width: 100%; height: auto; max-height: calc(100svh - 170px); object-fit: contain; }
.jf-view figcaption { margin-top: 10px; font: 400 13px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.jf-view-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jf-view .act { min-height: 44px; padding: 0 16px; font-size: 13px; }
.jf-work-open { padding-bottom: var(--s6); }

/* ---------- the quote page ---------- */
.jf-q-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.jf-q-side h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; }
.jf-q-side .lead { margin-top: var(--s3); }
.jf-q-call { margin-top: var(--s4); }
.jf-q-mail { margin-top: 14px; font: 400 15px/1.4 var(--mono); }
.jf-q-mail a { color: var(--head); text-underline-offset: 3px; overflow-wrap: anywhere; }
.jf-q-proof { margin-top: var(--s4); }
.jf-form { border: 1px solid var(--line); padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; background: var(--band); }
.jf-form label { display: grid; gap: 8px; font: 700 14px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--head); }
.jf-form input:not([type=checkbox]):not([type=radio]), .jf-form select, .jf-form textarea { font: 400 17px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--head); background: var(--well); border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: 12px 14px; min-height: 48px; width: 100%; }
.jf-form input:focus-visible, .jf-form select:focus-visible, .jf-form textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.jf-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jf-form .hint { font: 400 14px/1.4 var(--body); color: var(--mute); margin: -8px 0 0; }
.jf-form fieldset { border: 0; padding: 0; margin: 0; }
.jf-form legend { font: 700 14px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--head); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chips label { display: inline-flex; position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-s); font: 700 14px/1 var(--mono); letter-spacing: .05em; color: var(--head); }
.chips input:checked + span { background: var(--act); color: var(--on-act); border-color: var(--act); }
.chips input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.jf-form .send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.jf-form .send .hint { margin: 0; }
.jf-form .ok { font: 700 15px/1.4 var(--mono); color: var(--accent-text); }
@media (max-width: 900px) { .jf-q-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
@media (max-width: 520px) { .jf-form .two { grid-template-columns: minmax(0, 1fr); } }

.jf-404 { min-height: 60vh; display: grid; align-content: center; }
.jf-404 h1 { font-size: clamp(36px, 5vw, 72px); }
.jf-404 .lead { margin-top: var(--s3); }

/* round 1 fixes: the drawing sits at the top of its section so step 1 plays on screen; the photo-break quote fits */
.lb .show { padding: 0; }
@media (min-width: 981px) { .lb .show .show-pin { align-items: start; } .lb .show .show-stage { margin-top: 24px; } }
.jf-break-q { max-width: 34ch; }
.jf-break-q p { font-size: clamp(24px, 2.4vw, 36px); overflow-wrap: normal; word-break: normal; hyphens: none; }
.jf-break::after { background: linear-gradient(to top, rgb(13 11 9 / .82), rgb(13 11 9 / .25) 60%, transparent), linear-gradient(to right, rgb(13 11 9 / .55), transparent 60%); }
.jf-installs[data-tex="motif"]::before { background-size: 160px auto; opacity: .05; }

/* round 1 look check: room inside buttons and between them (his "cramped boxes" rule) */
.actions { gap: 16px; }
.box, .act { min-height: 52px; padding: 0 22px; }
.lbh .box, .lbh .act, .lbx-nav .box, .pbar .act, .pbar .box { min-height: 46px; }
.chips span { min-height: 50px; padding: 0 20px; }
.chips { gap: 12px; }
.lbx-frame { padding: 16px; }
.lbx-item figcaption { padding-left: 6px; }
.jf-body { padding: 24px 24px 26px; }
@media (min-width: 761px) { .actions { gap: 20px; } .box, .act { min-height: 60px; padding: 0 26px; } .lbx-frame { padding: 20px; } .chips span { min-height: 60px; padding: 0 22px; } .jf-type .box { min-height: 56px; padding: 0 20px; } }
.lb .foot h2 { font-size: 15px; color: var(--head); }

/* the backsplash quote beside his kitchen photo, framed like the viewer (a 1600 px photo stays sharp at 720 px) */
.jf-split-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s5); align-items: center; }
.jf-split .jf-break-q p { font: var(--display-weight) clamp(26px, 2.6vw, 40px)/1.12 var(--display); text-transform: uppercase; color: var(--head); text-wrap: balance; }
.jf-split .jf-break-q cite { color: var(--accent-text); }
.jf-frame { position: relative; margin: 0; border: 1px solid var(--line); padding: 16px; background: var(--well); max-width: 760px; justify-self: end; }
.jf-frame img { display: block; width: 100%; height: auto; }
.jf-frame figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.jf-frame .what { color: var(--head); font-weight: 700; margin-right: 8px; }
@media (max-width: 900px) { .jf-split-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .jf-frame { justify-self: stretch; } }
.lb .foot h2 { margin-bottom: 12px; font-family: var(--display); text-transform: uppercase; }
.jf-type .box { padding: 0 20px; min-height: 52px; }
.jf-frame { padding: 20px; }
@media (min-width: 761px) { .jf-type .box { min-height: 60px; } }

/* the glows on the linen bands: oak instead of slate (slate on linen read as lilac) */
.amb-bg[data-tone="light"] .amb-o2 .amb-b { --c: color-mix(in srgb, #b98a52 24%, transparent); }
.amb-bg[data-tone="light"] .amb-o1 .amb-b { --c: color-mix(in srgb, #c4734a 16%, transparent); }
/* the honeycomb fades in at the top of its band as well as out at the bottom */
.jf-installs[data-tex]::before { -webkit-mask-image: linear-gradient(transparent, #000 240px, #000 50%, transparent); mask-image: linear-gradient(transparent, #000 240px, #000 50%, transparent); }

/* phones: the 13 reviews as a row you swipe, each card about one screen wide */
.jf-swipe-hint { display: none; }
.jf-contact dd { overflow-wrap: normal; }
@media (max-width: 700px) {
  .jf-swipe-hint { display: block; margin: 0 0 12px; font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--light-mute); }
  .jf-wall { columns: auto; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s2) 12px; scroll-padding: 0 var(--s2); scrollbar-width: thin; align-items: stretch; }
  .jf-wall .rq { flex: 0 0 84%; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; justify-content: space-between; }
}
.jf-work-open, .jf-q-open { padding-top: clamp(24px, 4vw, 56px); }
/* the showpiece's "Illustration" label: easier to see */
.jf-illus { font-size: 13px; padding: 8px 11px; color: var(--text); background: rgb(13 11 9 / .6); }
.jf-form .err { font: 700 15px/1.4 var(--mono); color: #ffb4a8; }
.jf-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jf-form [data-send]:disabled { opacity: .6; cursor: wait; }