/* gen.css: components the page generator adds on top of the homepage stylesheet (site.css).
   Everything else (tokens, header, footer, buttons, .sec-head, .count-list, .startlist,
   .price-stack, .bg-panel, .faq, sliders, final CTA) comes from the homepage unchanged. */

/* Hero: one wide photo instead of the homepage slider (DESIGN-RULES 1) */
.g-single{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:21/9;background:#ddd;
  box-shadow:0 18px 44px -22px rgba(40,30,15,.45)}
.g-single img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.g-single{aspect-ratio:16/10}}

/* Section heading centered variant */
.sec-head.is-center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.is-center .sub{margin-left:auto;margin-right:auto}

/* Running text (Paul's paragraphs, word for word) */
.gen-prose{max-width:820px}
.gen-prose p{font-size:1.04rem;line-height:1.75;color:var(--ink);margin:0 0 16px}
.gen-prose p:last-child{margin-bottom:0}
.gen-prose h3{font-family:var(--serif);font-size:1.45rem;font-weight:400;line-height:1.25;color:var(--ink);margin:30px 0 12px}
.gen-prose h3:first-child{margin-top:0}
.gen-prose a,.gen-checks a,.cl-row a,.startstep a,.faq-body a,.gen-table a,.price-card a:not(.btn){color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,82,139,.35)}
.gen-prose a:hover{text-decoration-color:var(--navy)}
.gen-prose strong{font-weight:600}
.gen-prose.is-center{margin-left:auto;margin-right:auto}

/* Two columns side by side (DESIGN-RULES 4) */
.gen-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;max-width:1180px;margin:0 auto}
.gen-split>*{min-width:0}
@media(max-width:900px){.gen-split{grid-template-columns:1fr;gap:32px}}

/* A content photo (DESIGN-RULES 8) */
.gen-photo{position:relative;margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:#ddd;
  box-shadow:0 28px 60px -30px rgba(40,30,15,.4)}
.gen-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gen-photo.is-tall{aspect-ratio:4/5}
/* Paul's photo caption under a photo or quote photo ("See this project here.") */
.gen-fig{margin:0}
.gen-cap{margin:12px 2px 0;font-size:.92rem;line-height:1.55;color:var(--ink-soft);font-style:italic}
.gen-cap a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,82,139,.35)}

/* Short lists: check grid (very short items only; real lists use the white icon card) */
.gen-checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;max-width:980px;margin:0;padding:0}
.gen-checks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--ink)}
.gen-checks li svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--navy)}
.gen-checks.is-one{grid-template-columns:1fr}
@media(max-width:640px){.gen-checks{grid-template-columns:1fr}}

/* Centered white icon card when the list stands alone */
.count-list.is-solo{max-width:880px;margin:0 auto}

/* Tables: white card, dashed rows like the price cards */
.gen-table{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 20px 50px -30px rgba(40,30,15,.32);
  padding:10px 28px 14px;max-width:1040px;margin:0 auto;overflow-x:auto}
.gen-table table{width:100%;border-collapse:collapse;font-size:.96rem}
.gen-table th{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42);text-align:left;padding:16px 14px 12px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.gen-table td{padding:14px;border-bottom:1px dashed var(--line);color:var(--ink);vertical-align:top}
.gen-table tr:last-child td{border-bottom:0}
.gen-table td:first-child,.gen-table th:first-child{padding-left:0}
.gen-table td:last-child,.gen-table th:last-child{padding-right:0}
.gen-table .mkb-price,.gen-table td.is-num{font-family:var(--serif);font-weight:500;white-space:nowrap}
.gen-table-note{max-width:1040px;margin:14px auto 0;font-size:.86rem;font-style:italic;color:var(--ink-soft)}

/* A quote on its own: wide photo with the glass card (DESIGN-RULES 7) */
.gen-quote-wide{position:relative;max-width:1180px;margin:0 auto;border-radius:6px;overflow:hidden;aspect-ratio:21/9;background:#ddd;
  box-shadow:0 28px 60px -30px rgba(40,30,15,.4)}
.gen-quote-wide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gen-quote-wide .img-glass{max-width:560px;right:auto}
@media(max-width:760px){.gen-quote-wide{aspect-ratio:auto;min-height:440px}.gen-quote-wide .img-glass{right:16px;left:16px;bottom:16px}}

/* Info cards: 3-up variant of the Investment cards + text cards */
.price-stack.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.price-stack.is-3 .price-card{margin:-56px 18px 0;padding:24px 22px 22px}
.price-stack.is-1{grid-template-columns:minmax(0,640px);justify-content:center}
.price-card .pc-text{font-size:.96rem;line-height:1.65;color:var(--ink-soft);margin:0 0 12px}
.price-card .pc-text:last-child{margin-bottom:0}
.price-card .btn{margin-top:8px}
@media(max-width:1000px){.price-stack.is-3{grid-template-columns:1fr;max-width:640px}}

/* Gallery pages: full grid, no slider (DESIGN-RULES 9 exception) */
.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1240px;margin:0 auto}
.gal-item{position:relative;display:block;border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:#ddd;cursor:zoom-in}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item .cap{display:none}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gal-grid{grid-template-columns:1fr}}

/* Embeds (calculators, assessments, video) */
.gen-embed{max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 20px 50px -30px rgba(40,30,15,.32)}
.gen-embed iframe{display:block;width:100%;border:0}
.gen-embed video{display:block;width:100%;height:auto;background:#000}

/* Button rows inside content */
.gen-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-top:30px}
.gen-btns.is-center{justify-content:center}

/* Space between stacked components inside one section */
.gen-stack>*+*{margin-top:34px}

/* White icon card rows that are a single sentence (Paul's plain list items) */
.cl-row .body p.cl-one{font-size:1rem;line-height:1.55;color:var(--ink);margin:0}
.cl-row:has(.cl-one){align-items:center}

/* White icon card: two columns, and rows without the icon tile */
.count-list.is-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;max-width:1180px}
.count-list.is-2col .cl-row:nth-last-child(-n+2){border-bottom:none}
@media(max-width:760px){.count-list.is-2col{grid-template-columns:1fr}.count-list.is-2col .cl-row:nth-last-child(2){border-bottom:1px solid var(--line)}}
.count-list.no-ic .cl-row{gap:0}
.gen-list-note{max-width:1180px;margin:18px auto 0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.count-grid + .gen-list-note{max-width:1180px}

/* Process steps: duration line above the step title */
.startstep .st-when{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42);margin-bottom:4px}

/* Review cards (homepage style) in a 2-column grid */
.gen-reviews-pill{margin:0 0 26px}
.gen-reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;max-width:1180px;align-items:start}
.gen-reviews .gv-text{font-size:1.02rem}
.gv-rec{display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1877F2;margin:0 0 3px}
@media(max-width:860px){.gen-reviews{grid-template-columns:1fr}}

/* 3 Ways cards on inner pages: the homepage gap below the grid */
.ways-grid + .gen-btns{margin-top:28px}

/* Section bodies share the heading's 1180px column so everything lines up on the left */
.gen-body{max-width:1180px;margin:0 auto}
.gen-body .price-stack{max-width:none}
.gen-body .gen-table{max-width:none}
.gen-body .gen-table-note{max-width:none}
.gen-body > .count-list.is-solo{max-width:none}

/* Tables on phones: one card per row, each value labelled with its column heading */
@media(max-width:640px){
  .gen-table{padding:6px 18px 8px}
  .gen-table table,.gen-table tbody,.gen-table tr,.gen-table td{display:block;width:100%}
  .gen-table thead{display:none}
  .gen-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .gen-table tr:last-child{border-bottom:0}
  .gen-table td{padding:5px 0 !important;border:0;text-align:left}
  .gen-table td.is-num,.gen-table .mkb-price{white-space:normal}
  .gen-table td:first-child{font-family:var(--serif);font-size:1.08rem;padding-bottom:8px !important}
  /* each value: its column label on the left, the value on the right, the same grid on every row
     (2026-10-16: a wrapping row put short values beside the label and long ones under it, which read as jumbled) */
  .gen-table td[data-label]:not(:first-child):not([data-label=""]){display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:14px;align-items:baseline}
  .gen-table td[data-label]:not(:first-child):not([data-label=""])::before{content:attr(data-label);font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.12em;line-height:1.55;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42)}
}

/* ===== LAYOUT RULES (2026-10-15, after the kitchen pilot review) ===== */
/* Side by side: the heading lives in the text column, so text and card start level */
.gen-split .sec-head{margin:0 0 24px;max-width:none}
.gen-split .sec-head h2{max-width:none}
.gen-split .gen-col>*+*{margin-top:22px}
.gen-split .gen-col>.sec-head+*{margin-top:0}
.gen-split.is-media-left .gen-col:last-child{order:0}
/* long text column: the photo/card beside it stays in view instead of floating mid-way */
.gen-split.is-long{align-items:start}
.gen-split.is-long .gen-media{position:sticky;top:110px}
@media(max-width:900px){.gen-split.is-long .gen-media{position:static}}
/* media in a split never grows past a sensible height */
.gen-split .gen-photo{aspect-ratio:4/3}
.gen-split .count-img{min-height:0;aspect-ratio:4/5;max-height:640px}
/* Phones: a quote photo becomes photo + card under it (homepage rule). The frame's inline aspect-ratio (photo
   shape) must give way here, or the card under the photo is clipped out of sight (bug found in run 2). */
@media(max-width:760px){.gen-body .count-img.has-quote{aspect-ratio:auto !important;max-height:none}}
/* (the generator sets each photo frame's aspect-ratio inline from the photo's own shape) */

/* Equal heights: cards in one row are the same height; buttons sit at the bottom */
.gen-body .price-stack{align-items:stretch}
.gen-body .price-stack .price-row{display:flex;flex-direction:column}
.gen-body .price-stack .price-card{flex:1;display:flex;flex-direction:column}
.gen-body .price-stack .price-card>.btn,.gen-body .price-stack .price-card>.btn-with-note{margin-top:auto;align-self:flex-start}
.gen-body .price-stack .price-card .pc-text:last-of-type{margin-bottom:16px}
.ways-grid{align-items:stretch}

/* A photo beside a list never stretches to the list's height */
.gen-body .count-grid{align-items:start}
.gen-body .count-grid>.count-img{min-height:0;aspect-ratio:4/5;max-height:640px;position:sticky;top:110px}
@media(max-width:920px){.gen-body .count-grid>.count-img{position:static}}

/* Long lists: two white cards side by side */
.gen-list-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.gen-list-pair .count-list{align-self:stretch}
@media(max-width:860px){.gen-list-pair{grid-template-columns:1fr;gap:0}.gen-list-pair .count-list:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0}.gen-list-pair .count-list:last-child{border-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:0;box-shadow:none}}
.gen-after{margin-top:34px}

/* White icon card rows that are just a title: compact and centered on the icon */
.cl-row:has(h4.cl-solo){align-items:center;padding:15px 0}
.cl-row h4.cl-solo{margin:0}

/* Reviews slider (all of Paul's Google reviews + live ones) */
.gr-slider{position:relative;max-width:1180px;margin:0 auto}
.gr-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);column-gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:6px 4px 18px;scroll-padding:0 4px;scroll-behavior:smooth;align-items:stretch}
.gr-track::-webkit-scrollbar{display:none}
.gr-card{scroll-snap-align:start;display:flex;flex-direction:column;padding:22px 24px 18px}
.gr-text{margin:0;font-size:1rem;line-height:1.6;color:#2B2F33;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.gr-card.is-open .gr-text{-webkit-line-clamp:unset;display:block}
.gr-more{align-self:flex-start;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gr-by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid #EFECE6}
.gr-more+.gr-by,.gr-text+.gr-by{margin-top:auto}
.gr-card .gr-text+.gr-more[hidden]+.gr-by{margin-top:auto}
.gr-by .gv-g{width:18px;height:18px;flex:none}
.gr-by .gv-name b{font-size:.8rem;font-weight:400;color:#3C4043}
.gr-by .gv-stars.sm{margin:0 0 3px;font-size:.6rem}
.gr-date{margin-left:auto;font-size:.74rem;color:var(--ink-soft);white-space:nowrap}
.gr-slider .gr-prev{left:-58px} .gr-slider .gr-next{right:-58px}
.gr-slider .proj-arrow{top:calc(50% - 22px)}
@media(max-width:1380px){.gr-slider .gr-prev{left:-24px} .gr-slider .gr-next{right:-24px}}
@media(max-width:1000px){.gr-track{grid-auto-columns:calc((100% - 24px) / 2)}}
@media(max-width:640px){
  .gr-track{grid-auto-columns:100%}
  /* phones: arrows leave the card and sit together under it, so they never cover text */
  .gr-slider{padding-bottom:58px}
  .gr-slider .proj-arrow{top:auto;bottom:0;transform:none;width:42px;height:42px}
  .gr-slider .proj-arrow:hover:not([disabled]){transform:scale(1.05)}
  .gr-slider .gr-prev{left:calc(50% - 50px)} .gr-slider .gr-next{right:calc(50% - 50px)}
}

/* Paul's photo caption, the last line inside the glass card of a full-photo section ("See the full project here") */
.gen-bgcap{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(20,30,40,.12);
  color:var(--ink-soft);font-size:.9rem;font-style:italic;line-height:1.5}
.gen-bgcap a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
/* lists inside FAQ answers */
.faq-body ul{margin:8px 0 14px 4px;padding-left:20px}
.faq-body li{margin:2px 0}

/* inside a glass panel, a block after a button (and its note) gets the same breathing room as the text above it */
.bg-panel>.gen-btns+*{margin-top:30px}

/* a button with a note under it stretches to the note's width, so it lines up with the text above (same as the hero) */
.gen-btns .btn-with-note{align-items:stretch}
.gen-btns .btn-with-note .btn{justify-content:center}

/* Full-photo sections (run 3): the photo must read clearly. Room above and below the card so the photo shows,
   text + CTA left / list + caption right when the card holds both, long step lists in two columns. */
.sec.sec-bgimg.gen-bg{padding:clamp(100px,12vw,160px) 0}
/* the section is at least as tall as the photo's own shape at this width, so the photo's top and bottom line up
   with the section's (nothing cropped, the whole photo shows); capped at 1000px on very wide screens */
@media(min-width:1101px){.sec.sec-bgimg.gen-bg{min-height:min(calc(100vw / var(--bgr)),1000px);display:flex;align-items:center;padding:clamp(56px,6vw,96px) 0}
  .sec.sec-bgimg.gen-bg>.wrap{width:100%}}
.gen-bg .bg-panel{max-width:min(1120px,86vw);padding:40px 44px 34px}
.gen-bg .bg-panel:not(.is-2col):not(:has(.startlist)){max-width:min(980px,86vw)}   /* a short one-column card: narrower, more photo */
.gen-bg .bgp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.gen-bg .bgp-grid>*{min-width:0}
.gen-bg .bgp-col>*+*{margin-top:22px}
.gen-bg .bgp-col>.sec-head+*{margin-top:0}
.gen-bg .bgp-col>.gen-btns+*{margin-top:30px}
.gen-bg .bgp-col .sec-head{margin-bottom:22px}
.gen-bg .bgp-col .gen-checks{grid-template-columns:1fr}
.gen-bg .bgp-col .gen-prose h3:first-child{margin-top:4px}
.gen-bg .startlist.is-2col{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:16px 20px;max-width:none}
.gen-bg .startlist.is-2col .startstep{padding:16px 18px}
.gen-bg .bg-panel>.startlist.is-2col+*{margin-top:24px}
.gen-bg .startlist.is-2col .startstep p{font-size:.92rem;line-height:1.5}
@media(min-width:901px) and (max-width:1200px){.gen-bg .bg-panel{padding:30px 32px 26px}
  .gen-bg .bg-panel>.sec-head{margin-bottom:18px}
  .gen-bg .startlist.is-2col{gap:10px 14px}
  .gen-bg .startlist.is-2col .startstep{padding:13px 15px}
  .gen-bg .startlist.is-2col .startstep p{font-size:.88rem;line-height:1.45}}
@media(max-width:900px){.gen-bg .bgp-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .gen-bg .startlist.is-2col{display:flex;flex-direction:column}}
/* tablets and phones: the photo sits on top at its own shape (never zoomed in), the card overlaps its lower edge;
   a card over the photo only works when the screen is wide enough to frame it */
@media(max-width:1100px){.sec.sec-bgimg.gen-bg{background-size:0 0,100% auto;background-position:0 0,center top;
  background-repeat:no-repeat;background-color:var(--paper);padding:calc(100vw / var(--bgr) - 56px) 0 56px}}

/* final CTA text can carry a small heading; a page's own form may take photo/video uploads (contact page) */
.fc-text .fc-h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.3;color:var(--ink);margin:26px 0 10px}

/* hero without a photo (contact page): text only, less space under it */
.hero.no-photo{padding-bottom:40px}

/* ===== run 5 fixes (full-site run review) ===== */
/* long hero headings wrap instead of running off the page */
.hero h1{white-space:normal;text-wrap:balance}
/* a card with no photo does not slide up over the block above it */
.price-row:not(:has(.pr-img)) .price-card{margin-top:0}
/* "align": "top" on a split */
.gen-split.is-top{align-items:start}
/* logos, charts and portraits shown whole ("fit": "contain") */
.gen-photo.is-contain{aspect-ratio:3/2;background:#fff}
.gen-photo.is-contain img{object-fit:contain;padding:7%}
.pr-img.is-contain{object-fit:contain;background:#fff;padding:6% 10%}
/* cut-out portraits ("portrait": true), about page 2026-10-16: no frame or shadow, the photo's own circle is the shape; no mood board heart on people */
.gen-photo.is-portrait{aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;max-width:520px;margin:0 auto}
.gen-photo.is-portrait img{position:static;display:block;width:100%;height:auto}
.price-stack.is-portraits .price-row{background:none}
.price-stack.is-portraits .pr-img.is-circle{width:min(340px,72%);aspect-ratio:1;height:auto;margin:0 auto;border-radius:50%;box-shadow:none;object-fit:cover}
.price-stack.is-portraits .price-card{position:relative;z-index:1;margin-top:-34px}
.is-portrait .mb-heart,.is-portraits .mb-heart{display:none}
/* phones: a photo beside a list stacks above it and never covers the list (the homepage grid sized the photo row too short) */
@media(max-width:900px){.gen-body .count-grid{display:flex;flex-direction:column;gap:22px}
  .gen-body .count-grid>.count-img{order:-1;width:100%;max-height:none;top:auto}}   /* the desktop sticky offset (top:110px) pushed the photo over the list once it stopped sticking */
/* phones: lists inside a glass card keep a readable text column */
@media(max-width:600px){.gen-bg .bg-panel{padding:26px 16px 22px}
  .gen-bg .count-list{padding:6px 14px}
  .gen-bg .cl-row{gap:12px}
  .gen-bg .cl-row .ic{width:34px;height:34px}}
/* long web addresses used as link text wrap on phones; links in the final CTA text look like links */
.gen-prose a,.fc-text a,.gen-cap a,.cl-row a,.faq-body a,.price-card a,.gen-table a{overflow-wrap:anywhere}
.fc-text a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,82,139,.35)}
/* Paul's "coming soon" placeholders: a quiet label, not a button that goes nowhere */
.btn.is-soon{opacity:.6;cursor:default;pointer-events:none;box-shadow:none}
.gen-photo.is-logo{aspect-ratio:auto;max-width:300px;padding:18px 24px;box-shadow:0 14px 34px -24px rgba(40,30,15,.35);border:1px solid var(--line)}
.gen-photo.is-logo img{position:static;display:block;width:100%;height:auto;max-height:120px;object-fit:contain;padding:0}
.gen-form{max-width:640px}
.gen-form .fc-form{margin:0}
/* embed fit_screen (tool pages): priceguide pins its Next bar to the bottom of its frame, so the frame is one screen
   tall under the sticky header (77px desktop, 91px phones); its own steps scroll inside it */
.gen-embed.is-screen{scroll-margin-top:89px}
.gen-embed.is-screen iframe{height:calc(100vh - 101px);height:calc(100svh - 101px);min-height:560px}
@media(max-width:760px){.gen-embed.is-screen{scroll-margin-top:99px;border-radius:8px}.gen-embed.is-screen iframe{height:calc(100vh - 107px);height:calc(100svh - 107px)}}

/* newsletter_form (tool pages): the shared signup card, same white-card look as the contact form (.fc-form) */
.gen-nl{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 28px 26px;box-shadow:0 20px 50px -28px rgba(40,30,15,.32);max-width:560px;width:100%;scroll-margin-top:100px}
.gen-nl .nl-title{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--ink);margin:0 0 6px}
.gen-nl .nl-title em{font-style:italic;color:var(--navy)}
.gen-nl .nl-text{margin:0 0 18px;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.gen-nl .nl-form{display:flex;flex-direction:column;gap:14px}
.gen-nl .nl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.gen-nl .nl-row{grid-template-columns:1fr}.gen-nl{padding:22px 20px}}
.gen-nl .nl-field label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.gen-nl .nl-field input{width:100%;font-family:var(--sans);font-size:.94rem;color:var(--ink);background:#FAF6EE;border:1px solid var(--line-strong);border-radius:4px;padding:11px 13px}
.gen-nl .nl-field input:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(11,44,73,.1)}
.gen-nl .nl-checks{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.gen-nl .nl-checks-label{width:100%;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.gen-nl .nl-checks label{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--ink);cursor:pointer}
.gen-nl .nl-checks input{width:17px;height:17px;accent-color:var(--navy)}
.gen-nl .nl-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.gen-nl .nl-submit svg{width:16px;height:16px}
.gen-nl .nl-submit:disabled{opacity:.6;cursor:wait}
.gen-nl .nl-msg{font-size:.9rem;line-height:1.5;min-height:0}
.gen-nl .nl-msg:empty{display:none}
.gen-nl .nl-msg.ok{color:var(--green-deep)}
.gen-nl .nl-msg.err{color:#9B2C2C}

/* before_after (before/after gallery page): Paul's drag slider, rules moved unchanged from the old page */
.pj-ba{position:relative;margin:26px 0;border-radius:10px;overflow:hidden;user-select:none;line-height:0;background:#000}
.pj-ba img{width:100%;display:block;margin:0;border-radius:0}
.pj-ba-before{position:absolute;inset:0;width:50%;overflow:hidden}
.pj-ba-before img{width:auto;height:100%;max-width:none;object-fit:cover}
.pj-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
.pj-ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);
    border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.pj-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.pj-ba-tag{position:absolute;bottom:12px;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;background:rgba(15,20,26,.55);padding:5px 10px;border-radius:999px;pointer-events:none}
.gen-ba{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"media head" "media grid";grid-template-rows:auto 1fr;column-gap:clamp(24px,3.2vw,48px);align-items:start;max-width:1180px;margin:0 auto}
.gen-ba+.gen-ba{margin-top:clamp(44px,5.5vw,76px);padding-top:clamp(44px,5.5vw,76px);border-top:1px solid var(--line)}
.gen-ba-head{grid-area:head}
.gen-ba-media{grid-area:media}
.gen-ba .pj-ba{margin:0;border-radius:6px;box-shadow:0 22px 50px -30px rgba(40,30,15,.45)}
.gen-ba-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;color:var(--ink);margin:0 0 10px}
.gen-ba-head p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);margin:0}
.gen-ba-head a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,82,139,.35)}
.gal-grid.gen-ba-grid{grid-area:grid;align-self:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 0;max-width:none}
.gen-ba-grid .gal-item{aspect-ratio:1;border-radius:4px}
@media(max-width:900px){.gen-ba{grid-template-columns:1fr;grid-template-areas:"head" "media" "grid";row-gap:18px}.gal-grid.gen-ba-grid{margin-top:0}}
@media(max-width:520px){.gal-grid.gen-ba-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
/* "narrow": true on a quote (client 2026-10-21, estimate page): the glass card covers half the photo, text 2px larger */
.count-img.gen-q-narrow .img-glass p{font-size:1.1rem}
@media(min-width:761px){.count-img.gen-q-narrow .img-glass{right:auto;width:50%}}
/* quick links (client 2026-10-22): a jump lands the section heading below the floating blue bar, not under it */
section[id]:not(.sec-bgimg){scroll-margin-top:60px}section [id]{scroll-margin-top:146px}   /* photo sections already show their photo above the heading: no offset */