/* ==========================================================================
   Bradford — site-wide design rules (bradford-design-system.css)

   Moved VERBATIM out of the Elementor custom-code snippets on 2026-09-17
   (site clean-up, cleanup/AUDIT.md §8 Phase 1.1), so that staff can stop editing
   <style> blocks inside snippets. Each section below is one former snippet block,
   in the order the snippets used to print (by their priority):

     §1  15488 "site typography & footer"  <style id="bradford-site">
     §2  18784 "section spacing"           <style id="bhf-spacing-css">
     §3  25732 "design-system guard"       bhf-ds-guard-css, bhf-noanim-css,
                                            bhf-nofade-css, bhf-dl-css, ng-global-css
     §4  25731 "no beige guard"            a JavaScript that whitened warm off-white
                                            backgrounds at runtime — baked here as
                                            static rules for the elements it touched

   This file is enqueued LAST, after every other stylesheet, which is where the
   snippet blocks used to sit in <head>. Pages are verified against screenshot
   captures for pixel parity — do not "tidy" rules here without re-verifying;
   dead selectors are pruned in the phase that rebuilds their page.
   ========================================================================== */


/* §1 ─── 15488 "site typography & footer" (id="bradford-site") ──────────────── */
/* ==========================================================================
   BRADFORD HARDWARE — SITE STYLESHEET
   Paste into: Elementor → Site Settings → Custom CSS
   1. Type correction (labels + CTAs only)
   2. Footer breathing room, modelled on the CURB footer
   ========================================================================== */

/* ---------- 1. LABELS AND CTAs ------------------------------------------ */
h6.elementor-heading-title{
  font-family:"Montserrat",system-ui,sans-serif !important;
  font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  line-height:1.2 !important; color:#171717 !important;
}
.elementor-button,.elementor-button-text{
  font-family:"Montserrat",system-ui,sans-serif !important;
  font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important; line-height:1.2 !important;
}
.elementor-button{
  color:#171717 !important; background:transparent !important; border:0 !important;
  border-bottom:1px solid currentColor !important; border-radius:0 !important;
  padding:0 0 3px !important; transition:color .15s ease,border-color .15s ease;
text-decoration:none !important;}
.elementor-button:hover{ color:#505745 !important; border-bottom-color:#505745 !important; }
.elementor-button .elementor-button-text{text-decoration:none !important}
.elementor-button-text::after{ content:" \2192"; letter-spacing:0; }

/* ---------- 1b. BUTTON VARIANTS (2026-09-16, brand pages) -------------------------
   Add the class in Advanced -> CSS Classes.
   .bhf-btn-solid  on a Button widget: solid ink block button, no arrow.
   .bhf-on-dark    on a container: buttons inside stay white (light text on a photo). */
.bhf-btn-solid .elementor-button{ background:#171717 !important; color:#fff !important; border:0 !important;
  padding:16px 34px !important; letter-spacing:.09em !important; }
.bhf-btn-solid .elementor-button:hover{ background:#3a362f !important; color:#fff !important; }
.bhf-btn-solid .elementor-button-text::after{ content:none !important; }
.bhf-on-dark .elementor-button{ color:#fff !important; }
.bhf-on-dark .elementor-button:hover{ color:rgba(255,255,255,.8) !important; border-bottom-color:rgba(255,255,255,.8) !important; }

/* ---------- 2. FOOTER ---------------------------------------------------- */
/* room around the whole thing */
footer .e-con.e-parent{ padding-top:64px !important; padding-bottom:64px !important; }
footer .e-con.e-parent:last-child{ padding-bottom:44px !important; }

/* column headings: Quick Links, Collections, Spotlight, Inspiration */
footer .elementor-widget-heading .elementor-heading-title{
  font-family:"Montserrat",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  margin-bottom:20px !important;
}
/* the big statements keep their serif */
footer .elementor-widget-heading .elementor-heading-title[class*="size-"]:not(:only-child){}
footer h2.elementor-heading-title{
  font-family:"Noto Serif",Georgia,serif !important;
  font-size:1.9rem !important; letter-spacing:normal !important;
  text-transform:none !important; font-weight:400 !important;
}

/* the links themselves — this is where the tightness was: zero spacing between items */
footer .elementor-icon-list-item{ margin-bottom:14px !important; }
footer .elementor-icon-list-item:last-child{ margin-bottom:0 !important; }
footer .elementor-icon-list-text,
footer .elementor-icon-list-item > a{
  font-family:"Montserrat",system-ui,sans-serif !important;
  font-size:12px !important; font-weight:500 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  line-height:1.5 !important; transition:opacity .15s ease;
}
footer .elementor-icon-list-item > a:hover{ opacity:.62; }

/* space between the columns */
footer .e-con-inner{ column-gap:clamp(28px,5vw,90px) !important; row-gap:44px !important; }

/* hairline above the copyright bar, as CURB has */
footer .e-con.e-parent:last-child{
  border-top:1px solid rgba(255,255,255,.16) !important;
  margin-top:8px !important;
}

/* newsletter block: let it breathe */
footer .elementor-field-group{ margin-bottom:0 !important; }
footer input[type="email"]{ padding:14px 18px !important; font-size:13px !important; letter-spacing:.04em; }

/* the brand logo strip above the newsletter */
footer .elementor-widget-image-carousel .swiper-slide img{
  max-height:46px !important; width:auto !important; margin:0 auto !important;
  filter:grayscale(1); opacity:.9; transition:opacity .15s ease;
}
footer .elementor-widget-image-carousel .swiper-slide img:hover{ opacity:1; }


/* §2 ─── 18784 "section spacing" (id="bhf-spacing-css") ───────────────────────
   The 62 native brand pages (/our-brands/<slug>/) were built with padding 0 on
   their bands and rely on this rule for their vertical rhythm. */
/* Bradford — breathing room between sections, SITE-WIDE (laptop/iPad friendly).
   Space above every top-level section that follows another, on any page. */
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:not(:first-child){
  margin-top: clamp(80px, 8vw, 150px) !important;
}
/* opt-out (Phase 4, 2026-09-19): Advanced → CSS Classes "bhf-no-gap" on a top-level container = no gap above it
   (FAQs 5244: the accordion section sits flush under the hero, as its old faqcta1 patch forced). */
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent.bhf-no-gap{ margin-top:0 !important; }
/* 2026-09-15: the "main.site-main{padding-top:calc(80px + …)}" rule that used to
   live here was removed. It assumed the header floated over the page; the header
   is in normal flow, so the rule only created a gap that the old header templates
   hid with a negative margin. The header is now rendered by the
   Bradford Header & Footer plugin, which also replaced the #3897 logo hacks. */


/* §3 ─── 25732 "design-system guard" — the five <style> blocks ──────────────── */

/* 25732 <style id="bhf-ds-guard-css"> */
/* Bradford base font: body copy = Montserrat everywhere (headings keep their own serif). Kills system-font fallback. */
body,button,input,select,textarea,.elementor-widget-text-editor,.elementor-widget-text-editor p,.elementor-widget-container p,.elementor-widget-container li,.elementor-widget-container span:not([class*="fa-"]){font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* kill Storefront magenta focus/active ring site-wide; keep an ink outline for a11y */
a:focus,button:focus,[type=button]:focus,[type=submit]:focus,[type=reset]:focus,.elementor-button:focus,.button:focus,input:focus,select:focus,textarea:focus{box-shadow:none!important;outline-color:#171717!important}
a:focus-visible,button:focus-visible{outline:2px solid #171717!important;box-shadow:none!important}

/* 25732 <style id="bhf-noanim-css"> */
/* Bradford — remove ALL site-wide motion (entrance + hover animations). Client request 2026-08-12. */
*,*::before,*::after{ animation:none !important; animation-duration:0s !important; animation-delay:0s !important; }
/* Elementor entrance animations start hidden and only reveal via the animation — keep content visible */
.elementor-invisible{ visibility:visible !important; opacity:1 !important; }
.animated{ animation:none !important; opacity:1 !important; transform:none !important; }
/* Neutralize Elementor hover animations (bounce-in, grow, float, pulse, etc.) */
[class*="elementor-animation-"],
[class*="elementor-animation-"]:hover,
[class*="elementor-animation-"]:focus{ animation:none !important; transform:none !important; transition:none !important; }
html{ scroll-behavior:auto !important; }

/* 25732 <style id="bhf-nofade-css"> */
/* Elementor gallery lazyload fades each image in from opacity:0 over --animation-duration.
   Neutralise it at source: no zero-opacity start, no duration, no transition. */
.e-gallery--lazyload{--animation-duration:0ms !important}
.e-gallery--lazyload .e-gallery-image,
.e-gallery--lazyload .e-gallery-item,
.e-gallery-image,.elementor-gallery-item__image{opacity:1 !important}
.e-gallery--lazyload .e-gallery-image{transition-property:transform !important}

/* Bradford - kill AUTO fades on images (Simone, 2026-08-20).
   Elementor's gallery lazy-load starts each image at filter:opacity(0) and
   transitions `filter` over .8s, so photos wash in as you scroll. It is a
   TRANSITION, not a keyframe animation, so the no-animation guard above
   never caught it. Force images to full colour immediately.
   Hover motion is deliberately preserved: transform (the zoom on clickable
   images) still transitions. */
.e-gallery-item img, .elementor-gallery-item img,
.e-gallery-image, .elementor-gallery-item__image,
.elementor-widget-image img, .elementor-widget-gallery img{
  filter:none !important;
  transition-property:transform !important;
  transition-duration:.45s !important;
}
/* NOTE: deliberately NOT forcing opacity on lazy images - that would also
   override the hover fades on clickable logos/links, which Simone wants kept.
   The auto-fade was `filter`, handled above. */

/* 25732 <style id="bhf-dl-css"> */
/* Bradford - the "Download ... Guide" text-link used under a page header.
   Matches the locked editorial text-link role: Montserrat 14/700/.08em caps,
   underline drawn as a 1.5px border (never text-decoration). */
/* page CSS on some templates zeroes margins, so pin these */
.bh-dl-wrap{margin:30px 0 0!important;text-align:center}
/* when a download link is followed straight by tabbed content it needs room,
   otherwise the link sits flush against the tabs */
.bh-dl-wrap + #cabtypes-glossary,
.bh-dl-wrap + .gloss-subfilters,
.bh-dl-wrap + div .gloss-subfilters{margin-top:38px!important}
a.bh-dl{
  display:inline-block;
  font-family:'Montserrat',system-ui,sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:#171717 !important; text-decoration:none !important;
  border-bottom:1.5px solid currentColor; padding-bottom:3px;
}
a.bh-dl:hover{ opacity:.6 }

/* 25732 <style id="ng-global-css"> */
.bh-banner-tag{position:absolute;bottom:18px;right:24px;z-index:6;font-family:"Montserrat",sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.6);pointer-events:none}.ng-dimg{position:relative;aspect-ratio:1/1;width:min(100%,86vh);margin-inline:auto;background:#f0f0f0;display:flex;align-items:center;justify-content:center}.ng-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.12);cursor:pointer;font-size:20px;line-height:1;color:#171717;display:flex;align-items:center;justify-content:center;z-index:3;transition:.12s}.ng-nav:hover{background:#171717;color:#fff}.ng-prev{left:14px}.ng-next{right:14px}.glc-clear,.glc-clear:hover,.glc-clear:focus,.glc-clear:active,.glc-clear:focus-visible{background:none!important;background-color:transparent!important;color:#505745!important;box-shadow:none!important;border:0!important}.ng-modal{position:fixed;inset:0;z-index:100000;background:rgba(23,23,23,.55);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:3vh 16px}.ng-sheet{background:#fff;max-width:1600px;width:100%;padding:40px 44px 48px;position:relative;font-family:"Montserrat",sans-serif}.ng-close{position:absolute;top:16px;right:20px;font-size:28px;line-height:1;background:transparent!important;border:none;cursor:pointer;color:#171717!important;z-index:2;box-shadow:none!important;outline:none!important}.ng-ey{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8477;text-align:center;margin:0}.ng-title{font-family:"Noto Serif",Georgia,serif;font-weight:400;font-size:40px;text-align:center;margin:8px 0 4px;color:#171717}.ng-count{text-align:center;color:#8a8477;font-size:13px;margin:0 0 26px}.ng-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.ng-cell{display:block;aspect-ratio:1/1;overflow:hidden;background:#f0f0f0;cursor:pointer}.ng-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.ng-cell:hover img{transform:scale(1.05)}.ng-foot{text-align:center;margin-top:30px}.ng-foot a{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid #171717;padding-bottom:2px;color:#171717;text-decoration:none}.ng-back{background:none;border:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#171717;cursor:pointer;padding:0;margin-bottom:20px}.ng-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:44px;align-items:start}.ng-dimg img{width:100%;height:100%;object-fit:contain;display:block;background:#f0f0f0}.ng-di-row{padding:12px 0;border-bottom:1px solid #eee}.ng-di-row .k{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8477;margin-bottom:4px}.ng-di-row .v{font-family:"Noto Serif",Georgia,serif;font-size:20px;color:#171717}.ng-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.ng-pin,.ng-shop{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:11px 16px;border:1.5px solid #171717;color:#171717}.ng-pin{background:#fff;color:#171717}.ng-pin:hover{background:#171717;color:#fff}.ng-pin svg{width:14px;height:14px;fill:currentColor}.ng-shop:hover{background:#171717;color:#fff}.ng-shop[hidden]{display:none}@media(max-width:1024px){.ng-detail{grid-template-columns:1fr}.ng-dimg{width:min(100%,72vh)}}@media(max-width:760px){.ng-grid{grid-template-columns:1fr 1fr}.ng-detail{grid-template-columns:1fr}.ng-sheet{padding:32px 22px}}


/* §4 ─── 25731 "no beige guard", baked ─────────────────────────────────────────
   The snippet swept the DOM three times per page-load and set background-color
   #fff on every element whose computed background was a warm off-white
   (min channel >= 232, 3 <= r-b <= 40) unless it had .bhf-keep-bg or a background
   image. Visitors have therefore always seen WHITE on the elements below; these
   rules make that the authored value. Sources that we own were changed at source
   instead (bhf.css .shot tile, bradford-blog blog.css, Elementor container
   settings on 5051 / 5244 / 96287 / 96288). The rest are covered here until the
   page or plugin that carries the colour is rebuilt:
     - bradford-gallery-manager gallery tiles and compact-card plate (#f1efe9)
     - Our Story (5051) showroom-rail tiles .bhsr-item (#f2efe9)  → Phase 4 rebuild
     - The Wilderness (74741) .bwp .why band + image plate (#f7f6f3) → Phase 4 rebuild
   Internal reference pages (24250 design system, competitive pages) are private /
   noindex and keep their authored cream. */
.bgm-gallery .bg-tile .img{background:#fff}
.bgm-gallery.is-compact{--bgm-gc-plate:#fff}
/* The next three override <style> blocks that sit INSIDE the page body (an HTML widget on
   5051, post_content on 74741), which print after this file — hence !important, exactly as
   the snippet's inline style did. Delete each with its Phase 4 rebuild. */
.bhsr-item{background:#fff!important}
.bwp .why{background:#fff!important}
.bwp .hw img{background:#fff!important}


/* §5 ─── Home page components (Phase 2, 2026-09-17) ───────────────────────────
   Rules that native Elementor controls cannot express, keyed by CSS classes set in
   the editor (Advanced → CSS Classes). Everything else about these sections lives in
   the widgets' own settings. */

/* Hero: a native slideshow container carrying .bh-hero. Elementor's own Ken Burns CSS never
   applies with a single slide, so the client's 40 s push-in is declared here; the class selector
   outranks the *{animation:none} guard in §3, exactly as the old hero widget's rule did. */
@keyframes bhHeroKenBurns{from{transform:scale(1)}to{transform:scale(1.07)}}
.bh-hero .elementor-ken-burns,.bh-hero .elementor-background-slideshow__slide__image{animation:bhHeroKenBurns 40s ease-out forwards!important;transform-origin:center center;will-change:transform}

/* Pill buttons on a photo. §1 (ex-15488) turns every Button widget into an underlined text link;
   .bhf-btn-pill restores the hero's white pill, .bhf-btn-pill-ghost the outlined one. */
.bhf-btn-pill .elementor-button{background:#fff!important;color:#171717!important;border:1.5px solid transparent!important;border-radius:0!important;padding:16px 32px!important;
  font-family:'Montserrat',sans-serif!important;font-weight:700!important;font-size:13px!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.5!important;text-decoration:none!important;transition:all .25s}
.bhf-btn-pill .elementor-button:hover{background:rgba(255,255,255,.86)!important;color:#171717!important;border-color:transparent!important}
.bhf-btn-pill .elementor-button-text::after{content:none!important}
/* snippet 18785 (still live) also styles `.elementor-button .elementor-button-text` at (0,2,0) — hence three classes here */
.bhf-btn-pill .elementor-button .elementor-button-text{font-size:13px!important;font-weight:700!important;letter-spacing:.14em!important;line-height:1.5!important;text-transform:uppercase!important}
.bhf-btn-pill-ghost .elementor-button{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.85)!important}
.bhf-btn-pill-ghost .elementor-button:hover{background:rgba(255,255,255,.15)!important;color:#fff!important;border-color:rgba(255,255,255,.85)!important}


/* §6 ─── Editorial Cards widget (bhf_cards) ────────────────────────────────────
   Two card grammars ported from the home page (Phase 2, 2026-09-17): "explore" = the
   .ed-card (Hardware 101 cards: square image → serif title → copy → Explore ›) and
   "tile" = the .g2-tile (Spotlight: square image → kicker → serif title → Explore ›).
   Values are the live computed ones incl. snippet 74723's overrides; the site's own
   breakpoints (900 / 560) are kept instead of Elementor's. */
.bhf-cards{display:grid;gap:40px 30px}
.bhf-cards-c4{grid-template-columns:repeat(4,1fr)}
.bhf-cards-c3{grid-template-columns:repeat(3,1fr)}
.bhf-cards-tile{gap:26px}
.bhf-cards .bhf-card{display:flex;flex-direction:column;color:#171717;text-decoration:none;text-align:left}
.bhf-cards .bhf-card:hover,.bhf-cards .bhf-card:focus{color:#171717}
.bhf-card-shot{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#fff}
.bhf-card-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.bhf-card:hover .bhf-card-shot img{transform:scale(1.04)}
.bhf-cards-explore .bhf-card-meta{display:flex;flex-direction:column;flex:1;padding:18px 2px 0;text-align:left}
.bhf-cards-explore h3{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(19px,1.4vw,23px);line-height:1.2;letter-spacing:0;margin:0 0 10px;color:#171717}
.bhf-cards-explore .bhf-card:hover h3{opacity:.6}
.bhf-cards-explore p{font-family:'Montserrat',sans-serif;font-size:15px;line-height:1.5;color:#6a6a62;max-width:34ch;margin:0 0 18px}
.bhf-cards-explore .bhf-card-link{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:#171717;border-bottom:1.5px solid currentColor;display:inline-block;padding-bottom:2px;margin-top:auto;align-self:flex-start;text-decoration:none}
.bhf-cards-explore .bhf-card:hover .bhf-card-link{opacity:.6}
.bhf-cards-tile .bhf-card{display:block}
.bhf-cards-tile .bhf-card-shot{margin-bottom:12px}
.bhf-cards-tile .bhf-card-kicker{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.5;margin:0 0 4px;color:#171717}
.bhf-cards-tile h3{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(20px,1.5vw,25px);line-height:1.2;letter-spacing:0;margin:0 0 6px;color:#171717}
.bhf-cards-tile .bhf-card-link{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:#171717;border-bottom:1.5px solid currentColor;display:inline-block;padding-bottom:2px}
.bhf-cards-tile .bhf-card:hover .bhf-card-link{opacity:.6}
/* "guide" = the Hardware 101 download cards (.grid.g3 .ed-card on /hardware-101/, Phase 3 2026-09-18) */
.bhf-cards-guide{gap:44px 30px}
.bhf-cards-guide .bhf-card-meta{display:flex;flex-direction:column;flex:1;padding:20px 2px 0;text-align:left}
.bhf-cards-guide h3{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(25px,1.9vw,30px);line-height:1.22;letter-spacing:0;margin:0 0 8px;color:#171717}
.bhf-cards-guide .bhf-card:hover h3{opacity:.6}
.bhf-cards-guide p{font-family:'Montserrat',sans-serif;font-size:17px;line-height:1.5;color:#333333;max-width:22.5em;margin:0 0 18px}
.bhf-cards-guide .bhf-card-link{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:#171717;border-bottom:1.5px solid currentColor;display:inline-block;padding-bottom:2px;margin-top:auto;align-self:flex-start}
.bhf-cards-guide .bhf-card:hover .bhf-card-link{opacity:.6}
@media(max-width:900px){.bhf-cards-c4,.bhf-cards-c3{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.bhf-cards.bhf-cards-guide{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.bhf-cards.bhf-cards-guide{grid-template-columns:1fr}}
@media(max-width:560px){.bhf-cards-c4,.bhf-cards-c3{grid-template-columns:1fr}}


/* §7 ─── Showroom Band widget (bhf_showroom_band) ──────────────────────────────
   Port of the home page's .vb "Visit Bradford" block (Phase 2, 2026-09-17), including the
   eyebrow / h2 / link rules it inherited from .bh-doc (snippet 24129) so it no longer needs them. */
.bhf-vb{max-width:1240px;margin:0 auto;background:#fff;border-top:1px solid #E4E0D6;border-bottom:1px solid #E4E0D6;padding:clamp(48px,6vw,88px) clamp(20px,4vw,52px);font-family:'Montserrat',sans-serif;color:#171717;box-sizing:border-box}
.bhf-vb *{box-sizing:border-box}
.bhf-vb-grid{display:grid;grid-template-columns:52% 40%;column-gap:8%;align-items:center}
.bhf-vb-eyebrow{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#171717;line-height:1.5;display:block;margin:0 0 18px}
.bhf-vb h2{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(30px,3.1vw,44px);line-height:1.12;letter-spacing:-.015em;color:#171717;margin:0 0 20px}
.bhf-vb-body{font-family:'Montserrat',sans-serif;font-size:17px;line-height:1.6;color:#3a3a36;margin:0 0 30px;max-width:34ch}
.bhf-vb-links{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.bhf-vb-cta,.bhf-vb-cta:hover,.bhf-vb-cta:focus,.bhf-vb-cta:visited{display:inline-block;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;text-decoration:none;color:#171717;border-bottom:1.5px solid #171717;padding-bottom:2px}
.bhf-vb-cta:hover{opacity:.62}
.bhf-vb-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.bhf-vb-details{margin-top:36px;font-family:'Montserrat',sans-serif;font-size:15px;line-height:1.7;color:#3a3a36}
.bhf-vb-details p{margin:0 0 14px}
.bhf-vb-details .bhf-vb-name{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:#171717;margin-bottom:8px}
.bhf-vb-details a{color:#3a3a36;text-decoration:none;border-bottom:1px solid #cfcabf}
.bhf-vb-details a:hover{color:#171717}
@media(max-width:820px){.bhf-vb-grid{grid-template-columns:1fr;row-gap:40px}.bhf-vb-details{margin-top:28px}}


/* §8 ─── Glossary Tiles widget (bhf_glossary) ────────────────────────────────────
   Port of the client's .bhf-term grid and gl-pop-js / #glLB lightbox from Exterior 101 (5049) and
   Specialty 101 (5069), Phase 3 2026-09-18. Tile values are the live computed ones (the caps name is
   what snippet 24129 made of the page's <h4>); the lightbox is 25732's ng-modal family plus the pages'
   #glLB overrides, renamed bhf-gl-* so this widget owns its styling. Breakpoints 900 / 560 as on the pages. */
.bhf-gloss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 28px;text-align:left}
.bhf-gloss-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bhf-gloss.has-pop .bhf-gloss-term{cursor:pointer}
.bhf-gloss-term:focus-visible{outline:2px solid #171717;outline-offset:4px}
.bhf-gloss-fig{margin:0;background:#fff;aspect-ratio:1/1;overflow:hidden}
.bhf-gloss-fig img{width:100%;height:100% !important;object-fit:cover;display:block}
.bhf-gloss-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.2;color:#171717;margin:16px 0 6px}
.bhf-gloss-desc{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:400;line-height:1.4;color:#000;margin:0}
@media(max-width:900px){.bhf-gloss,.bhf-gloss-c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bhf-gloss,.bhf-gloss-c3{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}}
.bhf-gl-modal{position:fixed;inset:0;z-index:100000;background:rgba(23,23,23,.55);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:3vh 16px;font-family:'Montserrat',sans-serif}
.bhf-gl-sheet{background:#fff;max-width:1300px;width:100%;padding:40px 44px 48px;position:relative}
.bhf-gl-modal .bhf-gl-close,.bhf-gl-modal .bhf-gl-close:hover,.bhf-gl-modal .bhf-gl-close:focus{position:absolute;top:16px;right:20px;font-size:28px;line-height:1;background:transparent !important;border:none !important;cursor:pointer;color:#171717 !important;z-index:2;box-shadow:none !important;padding:8px 16px;font-family:inherit}
.bhf-gl-modal .bhf-gl-close:focus-visible{outline:2px solid #171717;outline-offset:2px}
.bhf-gl-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:44px;align-items:start}
.bhf-gl-img{position:relative;aspect-ratio:1/1;width:min(100%,86vh);margin-inline:auto;background:#f4f2ec;display:flex;align-items:center;justify-content:center}
.bhf-gl-img img{width:100%;height:100% !important;object-fit:contain;display:block;background:#f4f2ec}
.bhf-gl-modal .bhf-gl-nav,.bhf-gl-modal .bhf-gl-nav:focus,.bhf-gl-modal .bhf-gl-nav:active{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94) !important;border:1px solid rgba(0,0,0,.12) !important;cursor:pointer;font-size:20px;line-height:1;color:#171717 !important;display:flex;align-items:center;justify-content:center;z-index:3;padding:0;box-shadow:none !important;font-family:inherit}
.bhf-gl-modal .bhf-gl-nav:hover{background:#171717 !important;color:#fff !important}
.bhf-gl-modal .bhf-gl-nav:focus-visible{outline:2px solid #171717;outline-offset:2px}
.bhf-gl-prev{left:14px}
.bhf-gl-next{right:14px}
.bhf-gl-ey{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8477;font-weight:600;margin:0 0 8px}
.bhf-gl-title{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:32px;line-height:1.15;margin:0 0 16px}
.bhf-gl-desc{font-size:16px;line-height:1.6;color:#4a4a44;margin:0}
@media(max-width:1024px){.bhf-gl-detail{grid-template-columns:1fr}.bhf-gl-img{width:min(100%,72vh)}}
@media(max-width:760px){.bhf-gl-sheet{padding:32px 22px}}

/* §8b — Glossary Tiles: Door Hardware "card" style, badge, filter tabs (values from /door-hardware/ at 1440) */
.bhf-gloss-wrap{width:100%}
.bhf-gloss-card{gap:26px}
.bhf-gloss-card .bhf-gloss-name{line-height:1.3;margin:16px 0 4px}
.bhf-gloss-card .bhf-gloss-desc{font-size:17px;line-height:1.5;margin:8px 0 0}
.bhf-gloss-badge{display:block;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;color:#000;line-height:1.4;margin-top:5px} /* the page's inline-block badge sat 5px under the name once its line box is counted */
.bhf-gloss-term.is-hidden{display:none}
.bhf-gloss-tabs{display:flex;justify-content:center;gap:clamp(18px,4vw,52px);flex-wrap:wrap;margin:0 0 30px}
.bhf-gloss-tabs button,.bhf-gloss-tabs button:hover,.bhf-gloss-tabs button:focus,.bhf-gloss-tabs button:active{background:none !important;border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;box-shadow:none !important;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:18px;font-weight:400;line-height:1.5;color:#171717 !important;padding:0 0 8px !important;margin:0}
.bhf-gloss-tabs button.is-on{border-bottom-color:#171717 !important;font-weight:600}
.bhf-gloss-tabs button:focus-visible{outline:2px solid #171717;outline-offset:3px}

/* §9 ─── Step Nav (bhf_stepnav) + Numbered Checklist (bhf_checklist) — Door Hardware guide ─────────── */
.bhf-steps{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;padding:34px 0 30px;border-bottom:1px solid #E4E0D6}
.bhf-steps a,.bhf-steps a:hover,.bhf-steps a:focus{display:block;text-align:center;text-decoration:none;color:#171717;line-height:1.4;padding-bottom:8px;border-bottom:2px solid transparent;font-family:'Montserrat',sans-serif}
.bhf-steps a span,.bhf-steps a b{display:block;font-size:14px;font-weight:600;letter-spacing:.04em}
.bhf-steps a:hover,.bhf-steps a.is-on{border-bottom-color:#171717}
.bhf-steps a:focus-visible{outline:2px solid #171717;outline-offset:2px}
.bhf-checklist{list-style:none;max-width:820px;margin:0 auto;padding:0;text-align:left}
.bhf-check{display:grid;grid-template-columns:82px 1fr;gap:18px;padding:28px 0;margin:0;border-bottom:1px solid #E4E0D6}
.bhf-check:last-child{border-bottom:0}
.bhf-check-num{font-family:'Montserrat',sans-serif;font-size:38px;line-height:1;color:#000}
.bhf-check-title{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.2;color:#171717;margin:0 0 6px}
.bhf-check-text{font-family:'Montserrat',sans-serif;font-size:16px;line-height:1.4;color:#000;margin:0}
.bhf-check-link,.bhf-check-link:hover,.bhf-check-link:focus{display:inline-block;margin-top:12px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#000;text-decoration:none}
.bhf-check-link:focus-visible{outline:2px solid #171717;outline-offset:2px}

/* §8c — Glossary Tiles: Cabinet page styles (gloss / placement / rule), 2- and 5-col, ruled tab bar (values from /cabinet-hardware/ at 1440) */
.bhf-gloss-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bhf-gloss-c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:980px){.bhf-gloss-c5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.bhf-gloss-c5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bhf-gloss-c2{grid-template-columns:1fr}}
/* gloss: borderless white tile, cover image, name only (14/600), description hidden (shown in the pop-up); gap 38/24 */
.bhf-gloss-gloss{gap:38px 24px}
.bhf-gloss-gloss .bhf-gloss-fig{background:#fff;border:0;margin-bottom:10px !important}
.bhf-gloss-gloss .bhf-gloss-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.35;color:#171717;margin:0}
.bhf-gloss-gloss .bhf-gloss-desc{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:400;line-height:1.5;color:#5a5a52;margin:5px 0 0}
/* placement: bordered tile, small caps caption, description; gap 44/30 */
.bhf-gloss-placement{gap:44px 30px}
.bhf-gloss-placement .bhf-gloss-fig{background:#fff;border:1px solid #e3e1d9;margin-bottom:16px !important}
.bhf-gloss-placement .bhf-gloss-name{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:#171717;margin:0 0 8px}
.bhf-gloss-placement .bhf-gloss-desc{font-family:'Montserrat',sans-serif;font-size:14.72px;font-weight:400;line-height:1.5;color:#333;margin:0}
/* rule: bordered tile, centred small caps name, no description; gap 48 */
.bhf-gloss-rule{gap:48px;text-align:center}
@media(max-width:560px){.bhf-gloss-rule{gap:24px}}
.bhf-gloss-rule .bhf-gloss-fig{background:#fff;border:1px solid #e3e1d9;margin-bottom:0}
.bhf-gloss-rule .bhf-gloss-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:none;line-height:1.4;color:#171717;margin:14px 0 0}
/* ruled tab bar: hairline under the full row, small caps buttons, 26 gap */
.bhf-gloss-tabs.is-ruled{gap:26px;margin:0 0 44px;border-bottom:1px solid #e3e1d9;padding-bottom:0}
.bhf-gloss-tabs.is-ruled button,.bhf-gloss-tabs.is-ruled button:hover,.bhf-gloss-tabs.is-ruled button:focus,.bhf-gloss-tabs.is-ruled button:active{font-size:11.52px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#8a8477 !important;padding:0 2px 14px !important;margin-bottom:-1px}
.bhf-gloss-tabs.is-ruled button.is-on{color:#171717 !important;border-bottom-color:#171717 !important}

/* §8d — Master Hardware Glossary (4274): two-level category tab row (full-bleed ruled, values from /hardware-glossary/ .gloss-filters), catwrap show/hide */
.bhf-gloss-catwrap.is-hidden{display:none}
.bhf-gloss-cats{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,4vw,54px);width:100vw;margin-left:calc(50% - 50vw);margin-top:46px;margin-bottom:0;padding:22px 24px;border-top:1px solid #e5e1d7;border-bottom:1px solid #e5e1d7;box-sizing:border-box}
.bhf-gloss-cats button,.bhf-gloss-cats button:hover,.bhf-gloss-cats button:focus,.bhf-gloss-cats button:active{border:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important;padding:6px 0 !important;font-family:'Montserrat',sans-serif !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:#171717 !important;cursor:pointer;border-bottom:2px solid transparent !important;transition:opacity .15s;margin:0}
.bhf-gloss-cats button:hover{opacity:.6}
.bhf-gloss-cats button.is-on{border-bottom:2px solid #171717 !important;opacity:1}
.bhf-gloss-cats button:focus-visible{outline:2px solid #171717;outline-offset:3px}
/* the sub-tab bar sits 52px under the category row (live .gloss-subfilters margin-top:52px) */
.bhf-gloss-2l .bhf-gloss-tabs{margin-top:52px}

/* §8e — Bath Hardware (4228): square tile, caps name, visible description; 4-up, equal-height rows.
   Values from the live native tiles (277445e/5a70075 at 1440): card 20px 10px, tile→caption 10px + card 25px 10px on tablet; caption pad-top 15 (10 on mobile,
   0 side padding on mobile), name→desc 10px; one column under Elementor's mobile breakpoint (767) like the live row containers. */
.bhf-gloss-bath{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.bhf-gloss-bath .bhf-gloss-term{display:flex;flex-direction:column;gap:10px;padding:20px 10px;text-align:left}
.bhf-gloss-bath .bhf-gloss-fig{aspect-ratio:1/1;background:transparent;border:0;border-radius:3px;overflow:hidden;margin:0}
.bhf-gloss-bath .bhf-gloss-fig img{object-fit:cover}
.bhf-gloss-bath .bhf-gloss-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;color:#171717;margin:15px 0 0;padding:0 5px;text-align:left}
.bhf-gloss-bath .bhf-gloss-desc{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:400;line-height:1.4;color:#000;margin:0;padding:0 5px;text-align:left}
@media(max-width:1024px) and (min-width:768px){.bhf-gloss-bath .bhf-gloss-term{padding:25px 10px}} /* kit tablet container padding on the live cards */
@media(max-width:767px){.bhf-gloss-bath{grid-template-columns:1fr}.bhf-gloss-bath .bhf-gloss-name{margin-top:10px;padding:0}.bhf-gloss-bath .bhf-gloss-desc{padding:0}}

/* §10 ─── Finish Gallery widget (bhf_finish_gallery) — /finish-gallery/ "Finishes by Brand" (5117) ─────────
   Port of the page's fg-css + fg-lb-css. The head type (eyebrow 14/700/.12em, h2 clamp(38px,3.1vw,50px)/1.14/-.015em,
   lead clamp(21px,1.6vw,25px)/1.4 #6a6a62) and the LEFT-aligned captions came from snippet 24129's .bh-doc rules,
   the underlined link from 25732's a.bh-dl — all authored here so the widget stands on its own. */
.bhf-fg{--ink:#171717;--line:#e4e0d6;--muted:#6a6a62;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--ink)}
.bhf-fg .bhf-fg-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,4vw,52px)}
.bhf-fg .bhf-fg-head{text-align:center;max-width:72ch;margin:0 auto 76px}
.bhf-fg .bhf-fg-eyebrow{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#171717;margin:0 0 20px;padding:0}
.bhf-fg .bhf-fg-h2{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(38px,3.1vw,50px);line-height:1.14;letter-spacing:-.015em;color:#171717;margin:0 0 24px;padding:0;text-align:center}
.bhf-fg .bhf-fg-sub{font-family:'Montserrat',sans-serif;font-weight:400;font-size:clamp(21px,1.6vw,25px);line-height:1.4;color:var(--muted);margin:0 auto 44px;padding:0}
.bhf-fg .bhf-fg-dlwrap{margin:0;text-align:center}
.bhf-fg a.bhf-fg-dl{display:inline-block;font-family:'Montserrat',system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:#171717;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.bhf-fg a.bhf-fg-dl:hover{opacity:.6}
.bhf-fg a.bhf-fg-dl[hidden]{display:none}
.bhf-fg .bhf-fg-tabs{display:flex;flex-wrap:wrap;gap:22px 30px;justify-content:center;border-bottom:1px solid var(--line);margin:8px 0 56px;padding:0}
.bhf-fg .bhf-fg-tabs button{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 0 14px;margin:0;cursor:pointer;font-family:inherit;line-height:1.5;box-shadow:none}
.bhf-fg .bhf-fg-tabs button.is-on,.bhf-fg .bhf-fg-tabs button:hover{color:var(--ink);background:none}
.bhf-fg .bhf-fg-tabs button.is-on{border-bottom-color:var(--ink)}
.bhf-fg .bhf-fg-branddl{margin:48px 0 56px}
.bhf-fg .bhf-fg-pane[hidden]{display:none}
.bhf-fg .bhf-fg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:38px 24px;align-items:start}
.bhf-fg .bhf-fg-grouphead{grid-column:1/-1;font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;line-height:1.5;color:#171717;margin:18px 0 2px;padding:0 0 10px;border-bottom:1px solid var(--line);text-align:left}
.bhf-fg .bhf-fg-grid>.bhf-fg-grouphead:first-child{margin-top:0}
.bhf-fg .bhf-fg-card{text-align:left;cursor:default}
.bhf-fg.has-pop .bhf-fg-card{cursor:pointer}
.bhf-fg .bhf-fg-card:focus-visible{outline:2px solid #171717;outline-offset:3px}
.bhf-fg .bhf-fg-tile{background:#fff;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bhf-fg .bhf-fg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.bhf-fg .bhf-fg-card span{display:block;font-size:13px;font-weight:600;color:#171717;margin-top:12px;line-height:1.35;text-align:left}
@media(max-width:1000px){.bhf-fg .bhf-fg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.bhf-fg .bhf-fg-head{margin:0 auto 52px}.bhf-fg .bhf-fg-sub{margin:0 auto 32px}}
@media(max-width:600px){.bhf-fg .bhf-fg-grid{grid-template-columns:repeat(2,1fr)}}
/* lightbox (#fgLB port) */
.bhf-fg-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(20,18,14,.82);padding:24px;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.5}
.bhf-fg-lb.is-on{display:flex}
.bhf-fg-lb .bhf-fg-box{position:relative;background:#fff;max-width:940px;width:100%;max-height:88vh;display:flex;overflow:hidden;border-radius:4px;box-shadow:0 24px 64px rgba(0,0,0,.45)}
.bhf-fg-lb .bhf-fg-img{flex:0 0 54%;background:#f4f1ea;display:flex;align-items:center;justify-content:center}
.bhf-fg-lb .bhf-fg-img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.bhf-fg-lb .bhf-fg-panel{flex:1;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.bhf-fg-lb .bhf-fg-eye{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#6a6a62;margin-bottom:16px}
.bhf-fg-lb .bhf-fg-name{font-family:"Noto Serif",Georgia,serif;font-size:1.7rem;line-height:1.22;color:#171717;font-weight:400}
.bhf-fg-lb .bhf-fg-x{position:absolute;top:12px;right:16px;background:none!important;border:0!important;box-shadow:none!important;font-size:28px;line-height:1;padding:8px 16px;color:#171717!important;cursor:pointer;z-index:2}
.bhf-fg-lb .bhf-fg-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55)!important;color:#fff!important;border:0!important;box-shadow:none!important;width:42px;height:42px;padding:8px 16px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.bhf-fg-lb .bhf-fg-nav:hover{background:rgba(0,0,0,.75)!important}
.bhf-fg-lb .bhf-fg-prev{left:12px}
.bhf-fg-lb .bhf-fg-next{right:12px}
@media(max-width:640px){.bhf-fg-lb .bhf-fg-box{flex-direction:column;max-height:92vh;overflow:auto}.bhf-fg-lb .bhf-fg-img{flex:none;width:100%}.bhf-fg-lb .bhf-fg-panel{padding:28px 26px}}

/* §11 ─── Brand Directory widget (bhf_brand_directory) — /our-brands/ logo grid (4339 bhbhtml) ─────────
   Verbatim port of the page's .bd2 rules (tab strip full-bleed via 100vw, 5/4/3-column grid, grayscale logos). */
.bhf-bd{--line:#e4e0d6;font-family:'Montserrat',sans-serif;font-size:16px;line-height:1.5;color:#171717;box-sizing:border-box}
.bhf-bd *{box-sizing:border-box}
.bhf-bd .bhf-bd-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.bhf-bd .bhf-bd-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,4vw,54px);width:100vw;margin-left:calc(50% - 50vw);margin-top:0;margin-bottom:56px;padding:22px 24px;border-top:1px solid #e5e1d7;border-bottom:1px solid #e5e1d7;box-sizing:border-box}
.bhf-bd .bhf-bd-tabs button{border:0;background:none;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#171717;cursor:pointer;padding:6px 0;margin:0;border-bottom:2px solid transparent;border-radius:3px;box-shadow:none;transition:opacity .15s}
.bhf-bd .bhf-bd-tabs button.is-on{border-bottom-color:#171717}
.bhf-bd .bhf-bd-tabs button:hover,.bhf-bd .bhf-bd-tabs button:focus,.bhf-bd .bhf-bd-tabs button:active{color:#171717!important;background:transparent!important;opacity:.6}
.bhf-bd .bhf-bd-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 18px;align-items:center;justify-items:center}
.bhf-bd .bhf-bd-cell{display:flex;align-items:center;justify-content:center;height:clamp(104px,9vw,128px);width:100%;text-decoration:none}
.bhf-bd .bhf-bd-cell[hidden]{display:none}
/* Every directory logo gets the SAME box — the 420x357 master canvas the brand artwork is drawn on — and is contained
   inside it, so a tile renders identically whether its file is padded onto that canvas or cropped tight to the ink.
   Without the aspect-ratio the box came from the file: a tight-cropped logo was sized by width and came out ~210x68,
   60px wider than its neighbours at half their height (Berenson, 2026-09-21/22). Client asked for the fix to live here
   rather than in the artwork. No-op for the 84 tiles already on the shared canvas. */
.bhf-bd .bhf-bd-cell img{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:420/357;object-fit:contain;filter:grayscale(1);opacity:.92;transition:opacity .25s ease,filter .25s ease}
.bhf-bd .bhf-bd-cell:hover img{filter:grayscale(0);opacity:1}
.bhf-bd .bhf-bd-word{font-family:'Noto Serif',serif;font-size:19px;letter-spacing:.01em;color:#171717;text-align:center}
.bhf-bd .bhf-bd-empty{grid-column:1/-1;text-align:center;color:#9a9a90;padding:34px 0;margin:0;font-size:14px;font-family:'Montserrat',sans-serif}
.bhf-bd .bhf-bd-empty[hidden]{display:none}
@media(max-width:900px){.bhf-bd .bhf-bd-grid{grid-template-columns:repeat(4,1fr);gap:8px 16px}.bhf-bd .bhf-bd-cell{height:104px}}
@media(max-width:560px){.bhf-bd .bhf-bd-grid{grid-template-columns:repeat(3,1fr);gap:6px 12px}.bhf-bd .bhf-bd-cell{height:92px}}

/* §12 ─── Baked from snippet 18785 "typography system" (Phase 4, 2026-09-19) ─────────────────────────────
   The snippet's <style id="bhf-typefix-css"> verbatim (its .elementor-element-dd1c1b9 rule targeted Home's old hero and
   has no published consumer). Its JS rewrites of heading widgets were authored on the pages themselves
   (4339, 5051, 5117, 5244 + blog templates 96287/96288); see cleanup/phase4/. */
.elementor-button,.elementor-button .elementor-button-text,.elementor-button span,
.elementor-button-wrapper .elementor-button{ font-weight:700!important; letter-spacing:.08em!important; }
.ftr .tl{ font-weight:700!important; }

/* §13 ─── Timeline widget (bhf_timeline) — Our Story 5051, port of the page's .ost block (HTML widget osttlw) ────────── */
.bhf-tl .ost{position:relative;max-width:1160px;margin:0 auto -100px;padding:8px clamp(16px,3vw,24px) 0;font-family:'Montserrat',sans-serif}
.bhf-tl .ost *{box-sizing:border-box}
.bhf-tl .ost::before{content:"";position:absolute;left:50%;top:6px;bottom:40px;width:1px;background:#ffffff;transform:translateX(-.5px)}
.bhf-tl .ost-item{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(56px,7vw,104px);align-items:start;padding:52px 0 68px}
.bhf-tl .ost-marker{position:absolute;left:50%;top:-2px;transform:translateX(-50%);text-align:center;z-index:2}
.bhf-tl .ost-year{display:inline-block;background:#fff;font-family:'Noto Serif',serif;font-size:clamp(24px,2.3vw,34px);color:#171717;padding:2px 20px;line-height:1.2;letter-spacing:.01em}
.bhf-tl .ost-year-sm{font-size:clamp(14px,1.3vw,17px);font-style:italic;color:#6a6a62}
.bhf-tl .ost-marker::after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#171717;margin:16px auto 0;box-shadow:0 0 0 5px #fff}
.bhf-tl .ost-text{padding-top:4px}
.bhf-tl .ost-loc{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#171717;margin:0 0 12px}
.bhf-tl .ost-item h3{font-family:'Noto Serif',serif;font-weight:400;font-size:clamp(23px,2.3vw,31px);color:#171717;margin:0 0 16px;line-height:1.16}
.bhf-tl .ost-body{font-size:15.5px;line-height:1.68;color:#43433d;margin:0 0 14px}
.bhf-tl .ost-quote{font-family:'Noto Serif',serif;font-style:italic;font-size:17.5px;line-height:1.5;color:#4a4a44;border-left:2px solid #d8d3c7;padding-left:20px;margin:20px 0 0}
.bhf-tl .ost-quote cite{display:flex;align-items:center;gap:11px;font-family:'Montserrat',sans-serif;font-style:normal;font-size:13px;letter-spacing:.04em;color:#6a6a62;margin-top:14px}
.bhf-tl .ost-quote cite .ost-face{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:#efece6}
.bhf-tl .ost-quote cite .ost-face2{margin-left:-14px;box-shadow:0 0 0 2px #fff}
.bhf-tl .ost-media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* items 1, 3, 5 have the text on the right (the old HTML widget's <style> was the first child, so its nth-child(even) hit them) */
.bhf-tl .ost-item:nth-child(odd) .ost-text{order:2}
.bhf-tl .ost-item:nth-child(odd) .ost-media{order:1}
@media(max-width:820px){
 .bhf-tl .ost::before{left:20px}
 .bhf-tl .ost-item{grid-template-columns:1fr;column-gap:0;row-gap:22px;padding:0 0 52px 52px}
 .bhf-tl .ost-marker{left:20px;top:-2px;transform:translateX(-50%)}
 .bhf-tl .ost-year{padding:0 10px;font-size:22px}
 .bhf-tl .ost-item:nth-child(odd) .ost-text{order:0}
 .bhf-tl .ost-item:nth-child(odd) .ost-media{order:0}
 .bhf-tl .ost-media{order:1!important}
}

/* §14 ─── Photo Rail widget (bhf_photo_rail) — Our Story 5051 showroom rail, port of the page's .bhsr block (bhsrhtml) ── */
.bhf-rail .bhsr-head{max-width:900px;margin:0 auto 26px;padding:0 clamp(16px,3vw,28px);text-align:center}
.bhf-rail .bhsr-eyebrow{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a8477;margin:0 0 12px}
.bhf-rail .bhsr-title{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.01em;color:#38393b;margin:0 0 14px;line-height:1.15}
.bhf-rail .bhsr-lead{font-family:'Montserrat',sans-serif;font-size:15px;line-height:1.7;color:#5a5a52;max-width:54ch;margin:0 auto}
.bhf-rail .bhsr-cta{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#171717;text-decoration:none;border-bottom:1px solid #171717;padding-bottom:4px;transition:color .15s,border-color .15s}
.bhf-rail .bhsr-cta:hover{color:#505745;border-color:#505745}
.bhf-rail .bhsr-row{display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto;padding:0 clamp(12px,2vw,28px)}
.bhf-rail .bhsr-railwrap{flex:1 1 auto;min-width:0}
.bhf-rail .bhsr-rail{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:none;cursor:grab}
.bhf-rail .bhsr-rail::-webkit-scrollbar{display:none}
.bhf-rail .bhsr-item{flex:0 0 clamp(280px,46%,520px);aspect-ratio:1/1;overflow:hidden;position:relative;background:#f2efe9;box-shadow:0 3px 16px rgba(0,0,0,.09)}
.bhf-rail .bhsr-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.bhf-rail .bhsr-nav{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#fff!important;border:1px solid #E3DFD6!important;box-shadow:0 2px 12px rgba(0,0,0,.15)!important;color:#171717!important;font-size:22px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;-webkit-appearance:none;appearance:none;outline:none}
.bhf-rail .bhsr-nav:hover{box-shadow:0 4px 18px rgba(0,0,0,.22)!important;background:#fff!important;color:#171717!important}
.bhf-rail .bhsr-nav:focus,.bhf-rail .bhsr-nav:active{outline:none!important;background:#fff!important;color:#171717!important;border-color:#E3DFD6!important;box-shadow:0 2px 12px rgba(0,0,0,.15)!important}
.bhf-rail .bhsr-nav:focus-visible{outline:2px solid #171717!important;outline-offset:2px}
@media(min-width:701px){.bhf-rail .bhsr-nav{display:flex}}
.bhsr-lb{position:fixed;inset:0;z-index:100000;background:rgba(23,23,23,.93);display:none;align-items:center;justify-content:center;padding:32px}
.bhsr-lb.on{display:flex}
.bhsr-lb>img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 12px 50px rgba(0,0,0,.5);background:#111}
.bhsr-lb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer;opacity:.85;padding:6px}
.bhsr-lb-close:hover{opacity:1}
.bhsr-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bhsr-lb-nav:hover{background:rgba(255,255,255,.22)}
.bhsr-lb-prev{left:18px}
.bhsr-lb-next{right:18px}
@media(max-width:600px){.bhsr-lb-nav{width:44px;height:44px;font-size:22px}}

/* §15 ─── ".tp" page kit — Trade Program 4553 / Contact Us 5418 (Phase 4, 2026-09-19). Add the class in Advanced → CSS Classes.
   .tp (page wrap) · .tp-sec (section rhythm) · .tp-head / .tp-close (centred 720/680) · .tp-split [.rev] > .tp-split-img + .tp-copy
   · .tp-lead-head · .tp-grid > .tp-cell · .tp-apply > .tp-apply-intro + .tp-apply-form · .tp-link (Button) · .tp-img (Image)
   · .tp-lead / .tp-val / .tp-attr (text widgets) · .tp-form (Pro Form, with bhf-btn-solid) · .tp-divider (Divider). */
.e-con.tp{max-width:1160px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,4vw,44px)!important;padding-right:clamp(20px,4vw,44px)!important;font-family:'Montserrat',sans-serif;color:#171717}
.e-con.tp-sec{padding-top:clamp(64px,9vw,116px)!important;padding-bottom:clamp(64px,9vw,116px)!important}
.e-con.tp-head{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.e-con.tp-close{max-width:680px;margin-left:auto;margin-right:auto;text-align:center}
.elementor.elementor .e-con>.elementor-widget.tp-lead{max-width:min(34ch,100%)}   /* Elementor caps widgets at max-width:100% with (0,4,0); the source CSS was max-width:34ch on a block p, which never exceeds its container - min() keeps that on 390px phones (Phase 6, 1.13.2) */
.e-con.tp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px);align-items:center}
.e-con.tp-copy{max-width:38ch}
.e-con.tp-split.rev>.tp-copy{order:1}.e-con.tp-split.rev>.tp-split-img{order:2}
.elementor-widget.tp-img{width:100%}.elementor-widget.tp-img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.e-con.tp-lead-head{max-width:44ch;margin-bottom:clamp(40px,5vw,60px)!important}
.e-con.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.e-con.tp-cell{border-top:1px solid #171717;padding-top:22px!important}
.e-con.tp-cell span.elementor-heading-title{display:block}
.e-con.tp-apply{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(40px,5vw,72px);align-items:start}
.elementor.elementor .e-con>.elementor-widget.tp-form{max-width:520px}
.elementor-widget-divider.tp-divider .elementor-divider{padding:0}
/* text links: the design-system Button (13px caps, 1px rule, arrow) with the .tp tracking and 1.5px rule */
.tp-link .elementor-button{letter-spacing:.1em!important;border-bottom-width:1.5px!important;padding-bottom:3px!important;line-height:1.5!important}
.tp-link .elementor-button .elementor-button-text{letter-spacing:.1em!important;line-height:1.5!important}
.tp-link .elementor-button:hover{color:#171717!important;border-bottom-color:#171717!important}   /* the page's own script forced ink on hover */
.e-con.tp-close-actions .elementor-button-wrapper{display:flex;justify-content:center}   /* no line box round the inline-block link (live: the <a> is the flex item) */
.tp-val a{color:#171717;text-decoration:none;border-bottom:1px solid #171717;padding-bottom:1px}
.tp-val a:hover,.tp-val a:focus{color:#171717;border-bottom-color:#171717}
/* Pro Form skin (.tp-form + bhf-btn-solid): 22px rows, caps labels, 46px square fields, ink 48px button */
.tp-form .elementor-form-fields-wrapper{row-gap:22px;margin-bottom:0!important}
.tp-form .elementor-field-group{padding:0!important;margin:0!important}
.tp-form .elementor-field-label{font-family:'Montserrat',sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#171717!important;line-height:1!important}
.tp-form .elementor-field-group .elementor-field{font-family:'Montserrat',sans-serif!important;font-size:16px!important;line-height:1.5!important;color:#171717!important;background:#fff!important;border:1px solid #c7c2b4!important;padding:0 14px!important;height:46px!important;min-height:46px!important;border-radius:0!important;outline:none!important;box-shadow:none!important}
/* the select sits in a wrapper that also carries .elementor-field: skin the <select>, not the wrapper */
.tp-form .elementor-field-group .elementor-select-wrapper{padding:0!important;border:0!important;height:auto!important;min-height:0!important;background:transparent!important}
.tp-form .elementor-field-group .elementor-select-wrapper select{font-family:'Montserrat',sans-serif!important;font-size:16px!important;line-height:1.5!important;color:#171717!important;background:#fff!important;border:1px solid #c7c2b4!important;padding:0 14px!important;height:46px!important;min-height:46px!important;border-radius:0!important;outline:none!important;box-shadow:none!important;width:100%!important}
.tp-form .elementor-field-group .elementor-select-wrapper select:focus{border-color:#171717!important}
.tp-form .elementor-field-group textarea.elementor-field{height:110px!important;padding:12px 14px!important;resize:vertical}
.tp-form .elementor-field-group .elementor-field:focus{border-color:#171717!important;box-shadow:none!important}
.tp-form .elementor-field-group.elementor-field-type-submit,.tp-form .e-form__buttons{justify-content:flex-start}
.tp-form .e-form__buttons,.tp-form .elementor-field-type-submit{display:flex!important;justify-content:flex-start!important}
.tp-form .elementor-field-type-submit .elementor-button,.tp-form .e-form__buttons .elementor-button,.tp-form button.elementor-button{display:inline-flex!important;align-items:center!important;width:auto!important;flex:0 0 auto!important;height:48px!important;min-height:48px!important;padding:0 34px!important;letter-spacing:.1em!important;font-size:13px!important;line-height:1.5!important}
.tp-form .elementor-button .elementor-button-text{letter-spacing:.1em!important}
.tp-form .elementor-message{font-family:'Montserrat',sans-serif;font-size:15px;margin-top:12px}
@media(max-width:820px){
 .e-con.tp-split,.e-con.tp-split.rev{grid-template-columns:1fr;gap:24px}
 .e-con.tp-split>.tp-copy,.e-con.tp-split>.tp-split-img,.e-con.tp-split.rev>.tp-copy,.e-con.tp-split.rev>.tp-split-img{order:0}
 .e-con.tp-split>.tp-split-img{order:-1}
 .e-con.tp-grid{grid-template-columns:1fr;gap:0}
 .e-con.tp-cell{padding:26px 0!important;border-top:1px solid #e2ddd0}
 .e-con.tp-cell:first-child{border-top:1px solid #171717}
 .e-con.tp-apply{grid-template-columns:1fr;gap:32px}
 .elementor.elementor .e-con>.elementor-widget.tp-form{max-width:none}
}

/* §16 note (2026-09-20): every bare `.sp` below is written `.sp:where(.e-con)` — the header mega-menu panels use the same class name. */
/* §16 note (2026-09-20): every bare `.sp` below is written `.sp:where(.e-con)` — the header mega-menu panels use the same class name. */
/* §16 ─── Featured brand + designer spotlight pages (Phase 5, 2026-09-19): the pages' own stylesheets, verbatim ─────────────
   sp2-css (shared type/layout), brand-css (logo box, cards, rails), g2vcss (The Collection viewer), .sp-am = Armac Martin's am-css
   deltas. Root container: CSS class "sp" (+ "sp-am"), CSS ID "sp". Sections: class "sp-sec" (+ "sp-open", "sp-quote-sec", "sp-center"). */

.sp:where(.e-con){--ink:#171717;--mut:#4a4a44;--line:#e2ddd0;font-family:"Montserrat",sans-serif;color:var(--ink);box-sizing:border-box;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.sp:where(.e-con) *{box-sizing:border-box}
.sp:where(.e-con) .eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.sp:where(.e-con) h1{font-family:"Noto Serif",Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,66px);line-height:1.02;margin:0 0 14px;letter-spacing:-.015em}
.sp:where(.e-con) h2{font-family:"Noto Serif",Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.14;margin:0 0 18px}
.sp:where(.e-con) h3{font-family:"Noto Serif",Georgia,serif;font-weight:400;font-size:clamp(19px,1.8vw,24px);margin:0 0 6px}
.sp:where(.e-con) p{font-size:clamp(16px,1.35vw,18px);line-height:1.62;color:var(--mut);margin:0 0 18px}
.sp:where(.e-con) .link{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.sp:where(.e-con) .link:focus{outline:2px solid #171717;outline-offset:3px}
.sp-sec{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--line)}.sp-open{border-top:0;padding-top:clamp(36px,4vw,60px)}.sp-open .eyebrow{margin:0 0 14px}.sp-open h1{margin:0 0 14px}.sp-open .sp-role{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 22px}
.sp-sq{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#ffffff}
/* CONTAINED editorial hero (landscape, inside container, text over photo w/ scrim) */
.sp-hero{position:relative;margin-top:clamp(8px,2vw,20px);overflow:hidden;aspect-ratio:16/9;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center}
.sp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 78% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.22) 78%),linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.48));z-index:1}
.sp-hero-in{position:relative;z-index:2;color:#fff;padding:clamp(24px,4vw,40px);max-width:760px;margin:0 auto;text-align:center;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.sp-hero-in .eyebrow{color:#fff}
.sp-hero-in h1{color:#fff}
.sp-hero-in .sp-hero-role{color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 10px}
.sp-hero-loc{color:rgba(255,255,255,.9);font-size:14px;margin:0 0 14px}
.sp-hero-in .sp-hero-sub{color:#fff;font-size:clamp(16px,1.5vw,19px);max-width:40ch;margin:12px auto 0}
.sp-hero-in .sp-hero-link{color:#fff;border-bottom-color:rgba(255,255,255,.9);margin-top:26px;text-shadow:none}
.sp-hero .sp-credit{position:absolute;right:14px;bottom:12px;z-index:2;color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin:0}
/* PROFILE */
.sp-profile{display:grid;grid-template-columns:340px 1fr;gap:clamp(36px,5vw,64px);align-items:start}
.sp-profile .sp-name{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px}
.sp-profile .sp-role,.sp-profile .sp-studio{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0}
.sp-profile h2{margin:14px 0 16px}
.sp-links{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:26px}
/* PROJECT 2-ROW CAROUSEL */
.sp-car{position:relative}
.sp-rail{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:clamp(240px,30%,320px);column-gap:24px;row-gap:30px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 8px;scrollbar-width:none}
.sp-rail::-webkit-scrollbar{display:none}
.sp-pcard{scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.sp-pcard .sp-meta{margin-top:12px}
.sp-pcard .sp-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:2px 0 8px}
.sp-arrow{position:absolute;top:-70px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15);font-size:20px;cursor:pointer;color:#171717}
.sp-arrow.prev{right:64px}.sp-arrow.next{right:6px}
.sp-arrow[disabled]{opacity:.3;cursor:default}
#sp .sp-arrow,#sp .sp-arrow:hover,#sp .sp-arrow:focus{background:#fff!important;color:#171717!important}
/* CLOSER LOOK single-row carousel */
.sp-closer-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 8px;scrollbar-width:none;cursor:grab}
.sp-closer-rail::-webkit-scrollbar{display:none}
.sp-cl{flex:0 0 clamp(300px,47%,540px);scroll-snap-align:start;position:relative;aspect-ratio:1/1;overflow:hidden;background:#ffffff;cursor:zoom-in}
.sp-cl img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}
/* Explore More scroll */
.sp-explore-scroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 16px;scrollbar-width:none}
.sp-explore-scroll::-webkit-scrollbar{display:none}
.sp-ecard{flex:0 0 clamp(190px,21vw,250px);scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.sp-ecard .sp-cat,.sp-pcard .sp-cat{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6a6a62}
.sp-ecard .sp-cat{margin:12px 0 3px}.sp-ecard h3{margin:0;font-size:clamp(16px,1.4vw,19px)}
.sp-lead{max-width:62ch}
.sp-quote{font-family:"Noto Serif",Georgia,serif;font-style:italic;font-size:clamp(26px,3.4vw,44px);line-height:1.28;color:var(--ink);max-width:none;margin:0 auto;text-align:center;text-wrap:balance}
.sp-quote-sec{text-align:center}
.sp-attr{text-align:center;padding:40px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a80}
/* lightbox */
#splb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px;cursor:zoom-out}
#splb.on{display:flex}#splb img{max-width:94vw;max-height:92vh;object-fit:contain}
.sp:where(.e-con) a,.sp:where(.e-con) a:hover,.sp:where(.e-con) a:focus{color:var(--ink)!important}
@media(max-width:840px){.sp-profile{grid-template-columns:1fr;gap:24px}.sp-cl{flex-basis:78%}.sp-hero{aspect-ratio:4/3}}


.am-logobox{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.5vw,16px)}
.am-logobox img{width:100%;height:100%;object-fit:contain;display:block}
.sp-pcard[data-amg-col]{cursor:pointer}
.am-res{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.am-rescard{display:block;border:1px solid #e2ddd0;padding:26px 24px;text-decoration:none;color:#171717;transition:background .2s}
.am-rescard:hover{background:#ffffff}
.am-rescard .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8a80;margin:0 0 8px}
.am-rescard h3{margin:0 0 6px}.am-rescard p{font-size:14px;margin:0 0 14px}
.am-rescard .go{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid #171717;padding-bottom:2px}
.am-btn{display:inline-block;font-family:"Montserrat",sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff!important;background:#171717;border:0;padding:16px 30px;cursor:pointer;text-decoration:none}
.am-btn:hover{background:#333}
.am-finrow{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 16px;scrollbar-width:none;margin-top:22px;cursor:grab}
.am-finrow::-webkit-scrollbar{display:none}
.am-fin{flex:0 0 clamp(140px,15vw,182px);scroll-snap-align:start;text-align:center}
.am-fin .sq{aspect-ratio:1/1;background:#fff;overflow:hidden;margin-bottom:12px;display:flex;align-items:center;justify-content:center;padding:8px}
.am-fin img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.am-fin-nm{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;color:#171717;line-height:1.35;margin:0}
.am-fin-cd{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;color:#9a988e;margin:3px 0 0}
@media(max-width:720px){.am-res{grid-template-columns:1fr}}
.am-colgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;margin-top:8px}
@media(max-width:720px){.am-colgrid{grid-template-columns:1fr 1fr;gap:22px 16px}}
/* small-gallery image scroll */
.am-galrow{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 16px;scrollbar-width:none;margin-top:22px;cursor:grab}
.am-galrow::-webkit-scrollbar{display:none}
.am-gcell{flex:0 0 clamp(240px,30%,340px);scroll-snap-align:start;aspect-ratio:1/1;overflow:hidden;background:#ffffff;cursor:zoom-in}
.am-gcell img{width:100%;height:100%;object-fit:cover;display:block}
#splb{position:fixed;inset:0;background:rgba(20,19,17,.92);display:none;align-items:center;justify-content:center;z-index:100001;padding:24px;cursor:zoom-out}
#splb.on{display:flex}#splb img{max-width:92vw;max-height:90vh;object-fit:contain}

.g2v { position: relative; background: rgb(255, 255, 255); max-width: 1560px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 44px) 46px; font-family: Montserrat, sans-serif; color: rgb(23, 23, 23); }
.g2v-head { text-align: center; border-bottom: 1px solid rgb(231, 227, 217); padding-bottom: 20px; margin-bottom: 28px; }
.g2v-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(23, 23, 23); margin: 0px; }
.g2v-head h2 { font-family: "Noto Serif", serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); margin: 8px 0px 0px; letter-spacing: -0.01em; }
.g2v-body { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.g2v-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.g2v-sh span { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.g2v-clr { border: 0px; background: none; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(106, 106, 98); text-decoration: underline; cursor: pointer; padding: 0px; }
.g2v-grp { border-top: 1px solid rgb(231, 227, 217); padding: 16px 0px; }
.g2v-grp.first { border-top: 0px; padding-top: 0px; }
.g2v-gh { font-size: 13px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; margin: 0px 0px 13px; color: rgb(23, 23, 23); }
.g2v-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0px; background: none; cursor: pointer; padding: 0px; margin: 0px; }
.g2v-toggle i { font-style: normal; font-size: 19px; font-weight: 400; line-height: 1; }
.g2v-cat { display: flex; flex-direction: column; gap: 12px; }
.g2v-cat button { border: 0px; background: none; text-align: left; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: rgb(74, 74, 68); cursor: pointer; padding: 0px 0px 0px 14px; position: relative; font-weight: 500; }
.g2v-cat button.on { color: rgb(23, 23, 23); font-weight: 700; }
.g2v-cat button.on::before { content: ""; position: absolute; left: 0px; top: 1px; bottom: 1px; width: 3px; background: rgb(23, 23, 23); }
.g2v-chk { display: flex; align-items: center; gap: 10px; margin: 12px 0px; font-size: 14px; color: rgb(58, 58, 54); cursor: pointer; }
.g2v-chk input { width: 15px; height: 15px; accent-color: rgb(23, 23, 23); cursor: pointer; flex: 0 0 auto; }
.g2v-collap .g2v-in { display: none; margin-top: 13px; }
.g2v-collap.open .g2v-in { display: block; }
.g2v-main { min-width: 0px; }
.g2v-stage { position: relative; background: rgb(255, 255, 255); height: min(60vh, 600px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.g2v-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.g2v-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0px; width: 46px; height: 46px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px; font-size: 22px; cursor: pointer; color: rgb(23, 23, 23); display: flex; align-items: center; justify-content: center; }
.g2v-nav.prev { left: 16px; }
.g2v-nav.next { right: 16px; }
.g2v-credits { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px 2px; border-bottom: 1px solid rgb(231, 227, 217); }
.g2v-credlist { display: flex; flex-wrap: wrap; gap: 20px 34px; }
.g2v-cred { display: flex; flex-direction: column; gap: 6px; }
.g2v-cred .k { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(23, 23, 23); }
.g2v-cred .v { font-size: 14px; color: rgb(58, 58, 54); text-underline-offset: 3px; background: none; border: 0px; padding: 0px; text-align: left; font-family: inherit; }
.g2v-actions { display: flex; gap: 28px; }
.g2v-act { border: 0px; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(23, 23, 23); line-height: 1.3; text-align: center; }
.g2v-act svg { width: 21px; height: 21px; }
.g2v-strip { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0px 2px; }
.g2v-strip img { width: 84px; height: 84px; object-fit: cover; flex: 0 0 auto; cursor: pointer; border: 2px solid transparent; }
.g2v-strip img.on { border-color: rgb(23, 23, 23); }
#g2v .g2v-nav, #g2v .g2v-nav:hover, #g2v .g2v-nav:focus, #g2v .g2v-nav:active { background: rgb(255, 255, 255) !important; color: rgb(23, 23, 23) !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px !important; }
#g2v .g2v-cred .v:hover { color: rgb(23, 23, 23) !important; }
/* modal wrapper for the brand-page popup */
.amgm { position: fixed; inset: 0; z-index: 100000; background: #fff; overflow-y: auto; display: none; }
.amgm.on { display: block; }
.amgm .g2v { margin: 0 auto; padding-top: 26px; }
.amgm-x { position: fixed; top: 16px; right: clamp(16px,3vw,34px); z-index: 100002; border: 0; background: none; font-size: 30px; line-height: 1; color: #171717; cursor: pointer; }
/* neutralize the theme's magenta button styling inside the modal (mirrors the gallery page's .g2 button reset) */
.amgm button:not(.g2v-nav), .amgm button:not(.g2v-nav):hover, .amgm button:not(.g2v-nav):focus, .amgm button:not(.g2v-nav):active { background: none transparent !important; box-shadow: none !important; color: #171717 !important; }
.amgm .g2v-toggle, .amgm .g2v-gh, .amgm .g2v-toggle span, .amgm .g2v-toggle i { color: #171717 !important; }
@media(max-width:820px){ .g2v-body{ grid-template-columns:1fr; } .amgm .g2v-side{ margin-bottom:10px; } }


.sp-am .am-fin .sq{background:#ffffff;overflow:hidden;margin-bottom:12px;display:block;padding:0}
.sp-am .am-fin img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;max-height:none}
.sp-am .am-gcell{cursor:pointer}
.sp-am .am-galrow>img{flex:0 0 clamp(240px,30%,340px);scroll-snap-align:start;aspect-ratio:1/1;object-fit:cover;display:block;background:#ffffff}

/* the pages' inline script forced every .sp:where(.e-con) link to ink (also on hover) */
.sp:where(.e-con) a,.sp:where(.e-con) a:hover,.sp:where(.e-con) a:focus,.sp:where(.e-con) a:active{color:#171717!important}
/* native widgets inside .sp:where(.e-con): text links are Heading widgets (div) with a link; square photos are Image widgets with class sp-sq */
.sp:where(.e-con) .elementor-widget.sp-textlink .elementor-heading-title{margin:0;line-height:1.5;font-size:inherit}   /* block flow: the inline-block link sits in a 24px line box (27px tall), as on the live page */
.sp:where(.e-con) .e-con.sp-links .elementor-widget.sp-textlink .elementor-heading-title{display:flex}   /* in .sp-links the links were flex items (24px) */
.sp:where(.e-con) .e-con.sp-links{margin-top:8px}   /* 26 on the live page, collapsed into the paragraph's 18 above */
.sp:where(.e-con) .sp-profile .elementor-widget-heading .elementor-heading-title{margin-top:0}   /* .sp-profile h2's 14px top collapsed into the eyebrow's 14px bottom */
/* the logo box: an Image widget filling the 1:1 .am-logobox exactly as the bare <img> did (width/height 100%, contain) */
.sp:where(.e-con) .e-con.am-logobox{align-items:stretch;justify-content:center}
.sp:where(.e-con) .e-con.am-logobox>.elementor-widget-image{width:100%;height:100%;flex:1 1 auto;min-height:0}
.sp:where(.e-con) .e-con.am-logobox>.elementor-widget-image .elementor-widget-container,.sp:where(.e-con) .e-con.am-logobox>.elementor-widget-image figure{height:100%;margin:0}
.sp:where(.e-con) .e-con.am-logobox>.elementor-widget-image img{width:100%;height:100%;object-fit:contain;display:block}
.sp:where(.e-con) .elementor-widget.sp-textlink a{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#171717;text-decoration:none;border-bottom:1.5px solid #171717;padding-bottom:3px}
.sp:where(.e-con) .elementor-widget.sp-textlink a:focus{outline:2px solid #171717;outline-offset:3px}
.sp:where(.e-con) .elementor-widget.sp-sq img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#ffffff}
.sp:where(.e-con) .elementor-widget.sp-sq{width:100%}
.sp:where(.e-con) .elementor-widget.sp-sq .elementor-widget-container,.sp:where(.e-con) .elementor-widget.sp-sq figure{display:block;margin:0}
.sp:where(.e-con) .elementor-widget-heading .elementor-heading-title{padding:0}
.sp:where(.e-con) .e-con.sp-center{text-align:center}
/* block layout collapsed these top margins into the 18px bottom margin of the heading / lead above; flex items do not collapse */
.sp:where(.e-con) .elementor-widget-bhf_sp_cards .am-colgrid{margin-top:0}
.sp:where(.e-con) .elementor-widget-bhf_sp_cards .am-res{margin-top:8px}
.sp:where(.e-con) .elementor-widget-bhf_finish_rail .am-finrow{margin-top:4px}
.sp:where(.e-con) .elementor-widget-bhf_collection .am-galrow{margin-top:4px}

/* §16b ─── Finish rail arrows (Phase 7, 2026-09-20): same look as the gallery plugin's rail arrows below it ───────────── */
.am-finwrap{position:relative}
.am-finwrap .am-arrow{position:absolute;top:calc(8px + clamp(70px,7.5vw,91px));transform:translateY(-50%);z-index:3;width:50px;height:50px;padding:0;border-radius:50%;border:1px solid #E2DDD2;background:#F3EFE7;box-shadow:0 3px 14px rgba(23,23,23,.13);font-size:22px;line-height:1;cursor:pointer;color:#171717;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .2s ease,box-shadow .2s ease}
.am-finwrap .am-arrow:hover,.am-finwrap .am-arrow:focus{background:#fff;box-shadow:0 4px 18px rgba(23,23,23,.2);color:#171717}
.am-finwrap .am-arrow:focus-visible{outline:1.5px solid #171717;outline-offset:2px}
.am-finwrap .am-arrow.prev{left:-14px}
.am-finwrap .am-arrow.next{right:-14px}
.am-finwrap .am-arrow[disabled]{opacity:.22;cursor:default;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.am-finrow:focus-visible{outline:1.5px solid #171717;outline-offset:2px}
@media(max-width:600px){.am-finwrap .am-arrow{width:40px;height:40px;font-size:18px}.am-finwrap .am-arrow.prev{left:-6px}.am-finwrap .am-arrow.next{right:-6px}}

/* drag-to-scroll rails (2026-09-21): no text selection / image ghost while dragging */
.sp-rail,.sp-closer-rail,.am-finrow,.am-galrow,.bhsr-rail{user-select:none;-webkit-user-select:none}
.sp-rail img,.sp-closer-rail img,.bhsr-rail img{-webkit-user-drag:none;user-drag:none}

/* §17 ─── Baked from snippets 74470 "rail autoscroll" (peek columns) and 100848 "Sept revisions" (Phase 5, 2026-09-19). Verbatim.
   The #12 ElementsKit block and the #11 699b030 wordmark rules target markup the bhf header replaced; kept for fidelity. */
/* Featured-brand cards: sized so a half column is always showing at the right
   edge. The peek IS the scroll affordance - a flush edge reads as "the end". */
@media (min-width:901px){
  .fbc-rail{ grid-auto-columns: calc((100% - 52px) / 2.5) !important; }
}
@media (max-width:900px) and (min-width:601px){
  .fbc-rail{ grid-auto-columns: calc((100% - 26px) / 1.5) !important; }
}
/* Bradford — Sept revisions pass. Global polish layered on top of existing
   guards (loads at priority 50, after them). Reversible: delete this snippet. */

/* #2 — Smooth scrolling between in-page sections (respects reduced-motion). */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth!important}
}
/* keep hash targets clear of the sticky header when smooth-scrolled to */
:target{scroll-margin-top:120px}

/* #4 — Horizontal galleries must never swallow a vertical page scroll.
   touch-action:pan-x lets a horizontal swipe move the rail while any
   vertical swipe/scroll always moves the page. [data-bhf-mode] is set by
   the marquee script on every auto-detected horizontal rail, so this
   covers brand, spotlight, 101 and gallery rails site-wide. */
.fbc-rail,.am-galrow,.fb-track,[data-bhf-mode]{touch-action:pan-x!important}

/* #5b — Centre the ‹ › glyph in the image-viewer nav arrows. The .g2v-nav
   circle is already centred on the stage, but without line-height:1 the
   guillemet sits low (the sibling .ng-nav viewer already sets this). */
.g2v-nav{line-height:1!important}

/* #11 — Wordmark stays fluid and is never cropped at any width. */
.elementor-element-699b030,
.elementor-element-699b030 .elementor-widget-container,
.elementor-element-699b030 img,
header .elementor-widget-image img{max-width:100%!important;height:auto!important}
.elementor-element-699b030{overflow:visible!important}

/* #12 — Put the injected search icon and the hamburger on the same line,
   vertically centred, on tablet/phone. The hamburger is float:right (its
   own line); the fix lays the nav out as a centred flex row and unfloats it.
   Scoped to the collapsed-nav breakpoint so the desktop nav is untouched
   (that ElementsKit container is display:none on desktop). */
@media (max-width:1024px){
  .ekit_menu_responsive_tablet,
  .ekit_menu_responsive_mobile{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
  }
  .ekit_menu_responsive_tablet .elementskit-menu-hamburger,
  .ekit_menu_responsive_mobile .elementskit-menu-hamburger{
    float:none!important;margin:0!important;
  }
  .ekit_menu_responsive_tablet .bhs-m,
  .ekit_menu_responsive_mobile .bhs-m{
    height:auto!important;margin:0 6px 0 0!important;
  }
}

/* §18 ─── Legal pages + Privacy Policy line beside forms (client legal pages, 2026-10-01) ─────────────────────────────
   Privacy Policy 7571 (/privacy/) and Website Terms of Use 7569 (/terms/) are .tp pages: .tp-head (H1 + "Effective …" line)
   · .tp-divider · .tp-sec.tp-legal > Text Editor .tp-legal-text holding the client's documents verbatim (h2 + p).
   .bhf-form-legal = the "See our Privacy Policy." Text Editor placed under every Elementor form that collects personal
   information (Trade Program, Newsletter page, blog newsletter bands); the footer and pop-up forms carry it in bhf.css. */
.e-con.tp-legal{max-width:720px;margin-left:auto;margin-right:auto}
.tp-legal-title .elementor-heading-title{text-wrap:balance}   /* "Website Terms / of Use" on phones, not "Website Terms of / Use" */
.e-con .tp-legal-text h2{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(21px,1.9vw,25px);line-height:1.28;letter-spacing:-.005em;color:#38393b;margin:44px 0 12px;text-transform:none}
.e-con .tp-legal-text h2:first-child{margin-top:0}
.e-con .tp-legal-text p{font-size:16px;font-weight:400;line-height:1.75;color:#5c5c54;margin:0 0 16px}
.e-con .tp-legal-text p:last-child{margin-bottom:0}
.e-con .tp-legal-text a,.e-con .tp-legal-text a:hover,.e-con .tp-legal-text a:focus{color:#171717;text-decoration:none;border-bottom:1px solid #171717;padding-bottom:1px}
.e-con .bhf-form-legal p{font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.01em;color:#726F66;margin:0}
.e-con .bhf-form-legal a,.e-con .bhf-form-legal a:hover,.e-con .bhf-form-legal a:focus{color:#171717;text-decoration:underline;text-underline-offset:2px}
@media (max-width:767px){.e-con .tp-legal-text p{font-size:15.5px;line-height:1.7}}