/* ==========================================================================
   Lucano Buys Houses: page-type components (2026-10 redesign)
   --------------------------------------------------------------------------
   Components that belong to one kind of page. Loaded after site.css and
   written only against its tokens:
     colour   var(--lbh-bg|surface|surface-2|raised|ink|ink-2|muted|line|line-2|tint|accent|link|btn|on-btn)
     space    var(--lbh-s-1 .. --lbh-s-8), var(--lbh-section-y)
     type     var(--lbh-fs-xs|sm|base|lg|h3|h2|h1), var(--lbh-font-display|text)
     shape    var(--lbh-r-sm|r|r-lg|pill), var(--lbh-shadow-1|2)
   No literal colours. Dark mode is <html data-theme="dark"> and needs no rules
   of its own here if the tokens are used.
   ========================================================================== */

/* == PAGES: STEPS, LISTS, PORTRAIT == */

/* The three steps on /cash-offer/ and /how-it-works/: the homepage process, three up. The number is
   the same 13px display numeral on the same rule, so the two pages are visibly
   the same idea. WordPress gives every block a block-gap top margin, which turns
   a grid into a column, so the children are reset here. */
.lbh-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lbh-s-6);
  margin-block:var(--lbh-s-6);
  max-width:none
}
.lbh-steps>*{margin-block-start:0}
.lbh-steps>.lbh-fineprint{grid-column:1/-1;max-width:none}
.lbh-step{position:relative;margin:0;padding-top:var(--lbh-s-5);border-top:2px solid var(--lbh-line)}
.lbh-step>*{margin-block-start:0}
.lbh-step::before{content:"";position:absolute;top:-2px;left:0;width:44px;border-top:2px solid var(--lbh-btn)}
.lbh-step-number{font-family:var(--lbh-font-display);font-size:var(--lbh-fs-xs);font-weight:600;line-height:1;letter-spacing:.04em;color:var(--lbh-accent);margin:0}
.lbh-step h3{margin-top:var(--lbh-s-4)}
.lbh-step p:last-child{font-size:var(--lbh-fs-sm);color:var(--lbh-muted);margin-top:var(--lbh-s-2)}

/* The closing list of links on an area page: hairline rows, each row a full
   target rather than six words to aim at. Named with two classes so these rules
   outrank the generic .wp-block-list rules in site.css (loaded before this file)
   regardless of source order. */
.wp-block-list.lbh-link-list{list-style:none;padding:0;margin-block:var(--lbh-s-5);max-width:none}
.wp-block-list.lbh-link-list li{margin:0;padding:0;border-top:1px solid var(--lbh-line)}
.wp-block-list.lbh-link-list li+li{margin-top:0}
.wp-block-list.lbh-link-list li:last-child{border-bottom:1px solid var(--lbh-line)}
.lbh-link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--lbh-s-3);min-height:48px;color:var(--lbh-ink);text-decoration:none}
.lbh-link-list a::after{content:"\2192";flex:0 0 auto;color:var(--lbh-muted);transition:color .15s ease,transform .15s ease}
.lbh-link-list a:hover{color:var(--lbh-link)}
.lbh-link-list a:hover::after{color:var(--lbh-link);transform:translateX(3px)}

/* The portrait on /about/: site.css crops and rounds it, this only stops it
   growing to the full column. */
.lbh-portrait{max-width:22rem}

/* Page context. site.css spaces every child of post content with a block-gap
   rule of higher specificity, so the component margins are restated here. */
.lbh-page .wp-block-post-content>.lbh-steps{margin-block:var(--lbh-s-6)}
.lbh-page .lbh-section>.lbh-steps{margin-block:var(--lbh-s-6)}

@media (max-width:1023px){
  .lbh-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .lbh-steps{grid-template-columns:minmax(0,1fr)}
}

/* == END PAGES == */

/* == BLOG == */

/* The blog header, shared by the index, a topic archive and a search: a kicker,
   one h1, a lede and an honest little note, on a reading measure. */
.lbh-blog-hero{max-width:46rem;padding-block:var(--lbh-s-6) var(--lbh-s-6)}
.lbh-blog-kicker{font-family:var(--lbh-font-display);font-size:var(--lbh-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lbh-accent);margin:0}
.lbh-blog-h1{font-size:var(--lbh-fs-h1);margin-top:var(--lbh-s-3)}
.lbh-blog-sub{font-size:var(--lbh-fs-lg);color:var(--lbh-ink-2);margin-top:var(--lbh-s-5)}
.lbh-blog-note{font-size:var(--lbh-fs-sm);color:var(--lbh-muted);margin-top:var(--lbh-s-3)}

/* Search: a label, a field and a submit, in the one row they belong in. The
   field is already a control in site.css; the button copies .lbh-button so it
   matches every other primary action on the site. */
.lbh-search-band{margin-block:var(--lbh-s-5) var(--lbh-s-6);max-width:36rem}
/* On a topic archive the header and the search band are direct children of the
   page column, where site.css lets a child take the full container width. Same
   measures here as on the index, which nests them in a group. */
.lbh-page>.lbh-blog-hero{max-width:46rem}
.lbh-page>.lbh-search-band{max-width:36rem}
.lbh-search-label{display:block;font-size:var(--lbh-fs-sm);font-weight:600;color:var(--lbh-ink-2);margin-bottom:var(--lbh-s-2)}
.lbh-search-row{display:flex;gap:var(--lbh-s-2)}
.lbh-search-row>.lbh-search-input{flex:1;min-width:0}
.lbh-search-go{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--lbh-s-2);flex:0 0 auto;
  min-height:48px;padding-inline:var(--lbh-s-5);border-radius:10px;border:1px solid transparent;
  background:var(--lbh-btn);color:var(--lbh-on-btn);
  font-family:var(--lbh-font-display);font-size:var(--lbh-fs-sm);font-weight:600;letter-spacing:.005em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease
}
.lbh-search-go:hover{background:var(--lbh-btn-hover);box-shadow:var(--lbh-shadow-1);text-decoration:none}
.lbh-search-go:active{transform:translateY(1px)}

/* Topic row: the topics read as one line of chips, with the two audience
   entries first, a hairline break, then the categories and their counts. */
.lbh-topics{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lbh-s-2);margin-block:var(--lbh-s-5)}
.lbh-topics-label{font-family:var(--lbh-font-display);font-size:var(--lbh-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lbh-accent);margin:0;margin-right:var(--lbh-s-2)}
.lbh-topic{min-height:32px;border:1px solid var(--lbh-line);background:var(--lbh-raised);color:var(--lbh-ink-2)}
.lbh-topic.is-current{background:var(--lbh-btn);border-color:var(--lbh-btn);color:var(--lbh-on-btn)}
.lbh-topic-count{color:var(--lbh-muted);font-weight:500;margin-left:var(--lbh-s-1)}
.lbh-topic.is-current .lbh-topic-count{color:inherit}
.lbh-topics-divider{flex:0 0 auto;align-self:center;width:1px;height:20px;background:var(--lbh-line-2)}

/* The archive: heading, count, then the list. The index and the categories lay
   the posts out three across, which is the only change to the shared cards. */
.lbh-archive{margin-top:var(--lbh-s-7)}
.lbh-archive-head{font-size:var(--lbh-fs-h2)}
.lbh-count{font-size:var(--lbh-fs-sm);color:var(--lbh-muted);margin-block:var(--lbh-s-3) var(--lbh-s-5)}
.lbh-archive .lbh-cards,
.lbh-search-page .lbh-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lbh-s-5)}

/* Pagination: square targets, the current page in the button colour. */
.lbh-pager-list{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:var(--lbh-s-2);margin-top:var(--lbh-s-7)}
.lbh-pager-item{display:flex;margin:0}
.lbh-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding-inline:var(--lbh-s-3);border:1px solid var(--lbh-line);border-radius:var(--lbh-r-sm);
  color:var(--lbh-ink);font-family:var(--lbh-font-display);font-size:var(--lbh-fs-sm);font-weight:600;
  text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease
}
.lbh-pager .page-numbers:hover{background:var(--lbh-surface);color:var(--lbh-ink);text-decoration:none}
.lbh-pager .is-current .page-numbers{background:var(--lbh-btn);color:var(--lbh-on-btn);border-color:var(--lbh-btn)}
.lbh-pager .dots{border:0;min-width:auto}

/* The bottom half of /blog/: recommended reads, the chooser, the glossary and
   the self-check. It is a second act, so it opens on a rule. */
.lbh-blog-head{font-size:var(--lbh-fs-h2)}
.lbh-blog-lead{font-size:var(--lbh-fs-lg);color:var(--lbh-ink-2);margin-top:var(--lbh-s-3)}
.lbh-rec-reads .lbh-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lbh-s-4)}
.lbh-blog-curated{margin-block:var(--lbh-s-7);padding-top:var(--lbh-s-7);border-top:1px solid var(--lbh-line)}
.lbh-blog-subhead{font-size:var(--lbh-fs-h3);margin-top:var(--lbh-s-6)}

/* The chooser: four doors per audience. Each card is one link, so the whole
   panel is the target and the "Read this" sits at the foot of it. */
.lbh-chooser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lbh-s-4);margin-top:var(--lbh-s-4)}
.lbh-choose{
  display:flex;flex-direction:column;gap:var(--lbh-s-2);
  padding:var(--lbh-s-5);background:var(--lbh-raised);border:1px solid var(--lbh-line);border-radius:var(--lbh-r-lg);
  color:var(--lbh-ink);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease
}
.lbh-choose:hover{border-color:var(--lbh-line-2);box-shadow:var(--lbh-shadow-2);color:var(--lbh-ink);text-decoration:none}
.lbh-choose-q{font-family:var(--lbh-font-display);font-weight:600}
.lbh-choose-d{font-size:var(--lbh-fs-sm);color:var(--lbh-muted)}
.lbh-choose-go{color:var(--lbh-link);font-weight:600;font-size:var(--lbh-fs-sm);margin-top:auto}

/* The glossary: two columns of hairline rows. Each row is a native details, so
   it opens without JavaScript; the word itself is the target, and "tap" is the
   hint telling you that. */
.lbh-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--lbh-s-6)}
.lbh-word{margin:0;padding-block:var(--lbh-s-4);border-top:1px solid var(--lbh-line)}
.lbh-word>summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--lbh-s-3);cursor:pointer;list-style:none;
  font-family:var(--lbh-font-display);font-weight:600;font-size:var(--lbh-fs-base);color:var(--lbh-ink)
}
.lbh-word>summary::-webkit-details-marker{display:none}
.lbh-word>summary:focus-visible{outline:2px solid var(--lbh-focus);outline-offset:3px;border-radius:var(--lbh-r-sm)}
.lbh-word-tap{flex:0 0 auto;font-family:var(--lbh-font-text);font-size:var(--lbh-fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lbh-link)}
.lbh-word>p{margin:var(--lbh-s-2) 0 0;font-size:var(--lbh-fs-sm);line-height:1.6;color:var(--lbh-ink-2)}

/* The self-check: a tinted panel of checkboxes, no submit, nothing sent. */
.lbh-selfcheck{display:grid;gap:var(--lbh-s-3);background:var(--lbh-tint);border-radius:var(--lbh-r-lg);padding:var(--lbh-s-5)}
.lbh-selfcheck>*{margin-block-start:0}
.lbh-selfcheck>h2{font-size:var(--lbh-fs-h3)}
.lbh-selfcheck>p:not(.lbh-selfcheck-out){font-size:var(--lbh-fs-sm);color:var(--lbh-ink-2)}
.lbh-selfcheck label{display:flex;align-items:flex-start;gap:var(--lbh-s-3);font-size:var(--lbh-fs-sm);color:var(--lbh-ink-2);cursor:pointer}
.lbh-selfcheck input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--lbh-btn)}
.lbh-selfcheck-out{margin-top:var(--lbh-s-4);font-size:var(--lbh-fs-sm);color:var(--lbh-ink-2)}

/* A single post: date, title, byline, then the prose. The article keeps the
   centred reading column that site.css gives .lbh-article. */
.lbh-post-meta{font-size:var(--lbh-fs-sm);color:var(--lbh-muted);margin-bottom:var(--lbh-s-3)}
.lbh-byline{display:flex;align-items:center;gap:var(--lbh-s-3);margin-block:var(--lbh-s-5) var(--lbh-s-6)}
.lbh-byline-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;object-fit:cover}
.lbh-byline-name{display:block;font-family:var(--lbh-font-display);font-weight:600;color:var(--lbh-ink)}
.lbh-byline-role{display:block;font-size:var(--lbh-fs-xs);color:var(--lbh-muted)}

/* The post body. Only direct children of the content, so the closing call to
   action inside it keeps the colours site.css gives that band. */
.lbh-article .wp-block-post-content>p,
.lbh-article .wp-block-post-content>ul,
.lbh-article .wp-block-post-content>ol{color:var(--lbh-ink-2);line-height:1.7}
.lbh-article .wp-block-post-content>h2{font-size:var(--lbh-fs-h3);margin-top:var(--lbh-s-7)}
/* Posts type their h2 in capitals. Real small caps keep the emphasis without
   shouting, and the size comes down with them: text-transform cannot help,
   because the capitals are already in the text. This wins over the h3 size
   above, which is what a sentence-case h2 would have used. */
.lbh-article .wp-block-post-content>h2{
  font-variant-caps:all-small-caps;letter-spacing:.03em;font-size:var(--lbh-fs-lg)
}
.lbh-article .wp-block-post-content>h3{font-size:var(--lbh-fs-base);margin-top:var(--lbh-s-6)}

/* The joke: the one aside in the prose, so it gets the tint and nothing else. */
.lbh-joke{background:var(--lbh-tint);border-radius:var(--lbh-r-lg);padding:var(--lbh-s-5)}
.lbh-joke-label{font-family:var(--lbh-font-display);font-size:var(--lbh-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lbh-accent);margin:0}
.lbh-joke-setup{margin:var(--lbh-s-2) 0 0;color:var(--lbh-ink)}
.lbh-joke-punch{margin-top:var(--lbh-s-2);font-family:var(--lbh-font-display);font-weight:600;color:var(--lbh-ink)}

/* Related posts and the way back. */
.lbh-article .lbh-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.lbh-back-link{margin-top:var(--lbh-s-6)}

/* The 404. Its title and sentence are bare children of the page column, which
   lets them run the full container width, and the core search block puts the
   field and the button edge to edge. A measure, and the blog's search width. */
.error404 .lbh-page>h1,
.error404 .lbh-page>p{max-width:var(--lbh-measure)}
.error404 .wp-block-search{max-width:36rem;margin-top:var(--lbh-s-5)}
.error404 .wp-block-search__label{display:block;font-size:var(--lbh-fs-sm);font-weight:600;color:var(--lbh-ink-2);margin-bottom:var(--lbh-s-2)}
.error404 .wp-block-search__inside-wrapper{display:flex;gap:var(--lbh-s-2)}
.error404 .wp-block-search__input{flex:1;min-width:0}

@media (max-width:1023px){
  .lbh-archive .lbh-cards,
  .lbh-search-page .lbh-cards,
  .lbh-rec-reads .lbh-cards,
  .lbh-article .lbh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .lbh-archive .lbh-cards,
  .lbh-search-page .lbh-cards,
  .lbh-rec-reads .lbh-cards,
  .lbh-article .lbh-cards{grid-template-columns:minmax(0,1fr)}
  .lbh-chooser{grid-template-columns:minmax(0,1fr)}
  .lbh-words{grid-template-columns:minmax(0,1fr)}
}

/* == END BLOG == */

/* == BLOG v2: PHOTOS, LEAD STORIES, PROMOTION  == */

/* Cards with a photograph: the picture runs edge to edge across the top and the
   text sits in its own padded body, the way a publication's index reads. */
.lbh-card.lbh-card--media{padding:0;gap:0;overflow:hidden}
.lbh-card-media{position:relative;overflow:hidden;background:var(--lbh-surface-2)}
.lbh-card-media picture,.lbh-card-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lbh-card-media img{transition:transform .4s ease}
.lbh-card:hover .lbh-card-media img{transform:scale(1.03)}
.lbh-card-body{display:flex;flex-direction:column;gap:var(--lbh-s-3);flex:1;padding:var(--lbh-s-5)}

/* Lead stories: the newest post large, the next two beside it. */
.lbh-lead-stories{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--lbh-s-5);margin-block:var(--lbh-s-5) var(--lbh-s-7)}
.lbh-feature{position:relative;display:flex;flex-direction:column;background:var(--lbh-raised);border:1px solid var(--lbh-line);border-radius:var(--lbh-r-lg);overflow:hidden}
.lbh-feature-media{overflow:hidden;background:var(--lbh-surface-2)}
.lbh-feature-media picture,.lbh-feature-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.lbh-feature-body{display:flex;flex-direction:column;gap:var(--lbh-s-3);padding:var(--lbh-s-6)}
.lbh-feature-kicker{margin:0;font-family:var(--lbh-font-display);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lbh-accent)}
.lbh-feature-kicker a{position:relative;z-index:1;color:inherit;text-decoration:none}
.lbh-feature-title{margin:0;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.15}
.lbh-feature-title a{color:var(--lbh-ink);text-decoration:none}
.lbh-feature-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.lbh-feature:hover .lbh-feature-title a{color:var(--lbh-link)}
.lbh-feature-sum{margin:0;color:var(--lbh-ink-2);font-size:var(--lbh-fs-base);line-height:1.6}
.lbh-feature .lbh-card-meta{flex-wrap:wrap;margin-top:var(--lbh-s-2)}
.lbh-feature .lbh-byline{margin:0}
.lbh-archive .lbh-cards.lbh-cards--side{grid-template-columns:minmax(0,1fr);gap:var(--lbh-s-5);align-content:start}
.lbh-cards--side .lbh-card-title{font-size:var(--lbh-fs-base)}
.lbh-cards--side .lbh-card-sum{-webkit-line-clamp:2}

/* A single post: topic, date and reading time above the title, then the
   photograph with its credit under the byline. */
.lbh-post-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lbh-s-2) var(--lbh-s-3);margin:0 0 var(--lbh-s-4);font-size:var(--lbh-fs-sm);color:var(--lbh-muted)}

/* On a phone the meta rows break across lines, and the separator dots are
   separate elements, so a wrapped line could begin with a stray bullet. Date and
   reading time now travel together in .lbh-meta-group, which never wraps inside
   itself; the dot is hidden at this width and the group's own gap does the work. */
.lbh-meta-group{display:inline-flex;align-items:center;gap:var(--lbh-s-2);white-space:nowrap}
@media (min-width:721px){
  .lbh-card-meta>.lbh-meta-group:first-child::before,.lbh-post-metaline>.lbh-meta-group:first-child::before{content:none}
  .lbh-meta-group::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
}
@media (max-width:720px){
  .lbh-card-meta,.lbh-post-metaline{row-gap:var(--lbh-s-1)}
  .lbh-card-meta .lbh-card-dot,.lbh-post-metaline .lbh-card-dot{display:none}
}
.lbh-post-hero{margin:var(--lbh-s-5) 0 var(--lbh-s-7)}
.lbh-post-hero picture,.lbh-post-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--lbh-r-lg)}
.lbh-post-hero figcaption{margin-top:var(--lbh-s-2);font-size:var(--lbh-fs-xs);color:var(--lbh-muted)}
.lbh-post-hero figcaption a{color:inherit}
.lbh-article .lbh-article-cta{max-width:var(--lbh-measure)!important}

/* "Keep reading" under a post runs wider than the article, so three cards fit. */
.lbh-article.is-layout-constrained>.lbh-related{max-width:var(--lbh-container);margin-top:var(--lbh-s-8);padding-top:var(--lbh-s-7);border-top:1px solid var(--lbh-line)}
.lbh-related>*+*{margin-block-start:var(--lbh-s-5)}
.lbh-related-head{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:0}
.lbh-related .lbh-back-link{margin-top:var(--lbh-s-6)}

/* "From the blog" at the foot of inner pages. */
.lbh-page-reads{margin-top:var(--lbh-section-y);padding-top:var(--lbh-s-7);border-top:1px solid var(--lbh-line)}
.lbh-page .wp-block-post-content+.lbh-page-reads,.lbh-page>.lbh-page-reads{max-width:var(--lbh-container)}
.lbh-page-reads-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--lbh-s-3) var(--lbh-s-6);margin-bottom:var(--lbh-s-6)}
.lbh-page-reads-head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-top:var(--lbh-s-3)}
.lbh-page-reads .lbh-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lbh-s-5)}

@media (max-width:1023px){
  .lbh-lead-stories{grid-template-columns:minmax(0,1fr)}
  .lbh-archive .lbh-cards.lbh-cards--side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lbh-page-reads .lbh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .lbh-feature-body{padding:var(--lbh-s-5)}
  .lbh-archive .lbh-cards.lbh-cards--side,
  .lbh-page-reads .lbh-cards{grid-template-columns:minmax(0,1fr)}
  .lbh-post-hero{margin-inline:calc(-1 * var(--lbh-gutter))}
  .lbh-post-hero picture,.lbh-post-hero img{border-radius:0}
  .lbh-post-hero figcaption{padding-inline:var(--lbh-gutter)}
}

/* == END BLOG v2 == */

/* == LBH PAGES: INTRO, OPTIONS, BENEFITS, AREAS, ABOUT == */

/* The sentence under an inner page's title, and the lead line on a city or
   situation page. One size, so the two read as the same thing. */
.lbh-lead,
.lbh-page:not(.lbh-article) .wp-block-post-content>p:first-child{font-size:var(--lbh-fs-lg);line-height:1.55;color:var(--lbh-ink-2);max-width:var(--lbh-measure)}

/* Two ways to sell, side by side. The direct sale is tinted because it is the
   subject of the site; the listing is drawn plainly and honestly beside it. */
.lbh-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lbh-s-5);margin-block:var(--lbh-s-6);max-width:none}
.lbh-page .wp-block-post-content>.lbh-options{margin-block:var(--lbh-s-6)}
.lbh-options>*{margin-block:0}
.lbh-option{display:flex;flex-direction:column;gap:var(--lbh-s-3);padding:clamp(1.5rem,1rem + 2vw,2.25rem);background:var(--lbh-raised);border:1px solid var(--lbh-line);border-radius:var(--lbh-r-lg);box-shadow:var(--lbh-shadow-1)}
.lbh-option>*{margin-block:0}
.lbh-option-direct{border-color:color-mix(in srgb,var(--lbh-accent) 38%,var(--lbh-line));background:linear-gradient(180deg,var(--lbh-tint) 0%,var(--lbh-raised) 62%)}
.lbh-option h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);letter-spacing:-.02em}
.lbh-option p,.lbh-option li{font-size:var(--lbh-fs-sm);line-height:1.55;color:var(--lbh-ink-2)}
.lbh-option ul{list-style:none;padding:0;display:grid;gap:var(--lbh-s-3);margin-top:var(--lbh-s-2)}
.lbh-option li{position:relative;padding-left:1.625rem;margin:0}
.lbh-option li::before{content:"";position:absolute;left:2px;top:.42em;width:.8rem;height:.45rem;border-left:2px solid var(--lbh-accent);border-bottom:2px solid var(--lbh-accent);transform:rotate(-45deg)}
.lbh-option-listing li::before{width:.5rem;height:2px;border:0;background:var(--lbh-muted);top:.8em;transform:none}
.lbh-option-more,.lbh-option .lbh-option-more{margin-top:auto;font-weight:600;color:var(--lbh-link);text-decoration:none}
.lbh-option-more:hover{color:var(--lbh-ink)}
.lbh-options-note{grid-column:1/-1;font-size:var(--lbh-fs-xs);line-height:1.6;color:var(--lbh-muted);max-width:var(--lbh-measure)}

/* Three reassurances in a row. */
.lbh-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lbh-s-6);margin-block:var(--lbh-s-6) 0;max-width:none}
.lbh-benefits>*{margin-block:0}
.lbh-benefit{padding-top:var(--lbh-s-5);border-top:2px solid var(--lbh-line)}
.lbh-benefit>*{margin-block:0}
.lbh-benefit h3{font-size:var(--lbh-fs-base)}
.lbh-benefit p{font-size:var(--lbh-fs-sm);color:var(--lbh-muted);margin-top:var(--lbh-s-2)}

/* The service-area hub: every city is a row, and the row is the target. */
.wp-block-list.lbh-area-list{list-style:none;padding:0;margin-block:var(--lbh-s-6);max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--lbh-s-6)}
.wp-block-list.lbh-area-list li{margin:0;padding:0}
.wp-block-list.lbh-area-list li+li{margin-top:0}
.lbh-area-list a{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--lbh-line);color:var(--lbh-ink);font-weight:500;text-decoration:none}
.lbh-area-list a::after{content:"\2192";color:var(--lbh-muted);transition:transform .15s ease,color .15s ease}
.lbh-area-list a:hover{color:var(--lbh-link)}
.lbh-area-list a:hover::after{transform:translateX(3px);color:var(--lbh-link)}

/* /about/: the studio portrait sits beside the first three sections, the way a
   person's page does, instead of standing alone above them. The grid only
   applies to a page whose content opens with a portrait. */
@media (min-width:1024px){
  .lbh-page .wp-block-post-content:has(>.lbh-portrait){display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);column-gap:clamp(2.5rem,1rem + 4vw,5rem);align-items:start}
  .lbh-page .wp-block-post-content:has(>.lbh-portrait)>*{grid-column:2;min-width:0}
  .lbh-page .wp-block-post-content:has(>.lbh-portrait)>.lbh-portrait:first-child{grid-column:1;grid-row:1 / span 3;max-width:none;margin:0;position:sticky;top:calc(var(--lbh-header-h) + var(--lbh-s-5))}
  .lbh-page .wp-block-post-content:has(>.lbh-portrait)>.lbh-final-cta{grid-column:1 / -1}
}

/* The portraits on /about/. */
.lbh-portrait{margin:0 0 var(--lbh-s-6);max-width:22rem}
.lbh-portrait img{display:block;width:100%;height:auto;border-radius:var(--lbh-r-lg);aspect-ratio:2/3;object-fit:cover;object-position:50% 15%}
.lbh-portrait figcaption{margin-top:var(--lbh-s-3);font-size:var(--lbh-fs-xs);color:var(--lbh-muted)}
.lbh-portrait--casual{max-width:20rem;margin-block:var(--lbh-s-5) 0}
.lbh-portrait--casual img{aspect-ratio:3/4;object-position:50% 30%}

/* The telephone number on /contact/, set as the thing it is. */
.lbh-page .wp-block-post-content>.lbh-phone{display:inline-block;font-family:var(--lbh-font-display);font-weight:600;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);letter-spacing:-.01em;color:var(--lbh-ink);text-decoration:none}
.lbh-phone:hover{color:var(--lbh-link)}

/* The direct sale and listing pages carry the form inline after the FAQs. */
.wp-block-post-content>.lbh-lead-form{max-width:40rem;margin-block:var(--lbh-s-6);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);background:var(--lbh-raised);border:1px solid var(--lbh-line);border-radius:var(--lbh-r-lg);box-shadow:var(--lbh-shadow-2)}

@media (max-width:1023px){
  .lbh-benefits{grid-template-columns:minmax(0,1fr);gap:var(--lbh-s-5)}
  .wp-block-list.lbh-area-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .lbh-options{grid-template-columns:minmax(0,1fr)}
  .wp-block-list.lbh-area-list{grid-template-columns:minmax(0,1fr)}
  .lbh-portrait{max-width:16rem}
}

/* An article's title runs long, so it takes a step down from the page title. */
.lbh-article>.wp-block-post-title{font-size:clamp(2rem,1.5rem + 2.2vw,3rem);line-height:1.12}

/* Beside the two stacked cards the lead story is taller than its own text, so the
   photograph takes up the difference instead of leaving a blank panel. */
@media (min-width:1024px){
  .lbh-lead-stories .lbh-feature-media{flex:1 1 auto;display:flex;min-height:20rem}
  .lbh-lead-stories .lbh-feature-media picture{flex:1 1 auto;display:flex}
  .lbh-lead-stories .lbh-feature-media img{height:100%;aspect-ratio:auto}
}

/* == END LBH PAGES == */

/* The 404 has no post content, so the constrained layout would centre its three
   children. Left-aligned, like every other page. */
.error404 .lbh-page.is-layout-constrained>*{margin-inline:0!important}