/* ===== block 1 id="kiln-global-cta" ===== */

/* Kiln - CTA button corner radius: single source of truth, 12px across all CTA families */
a.btn, button.btn, a.btn.book-btn,
a.wp-block-button__link, a.wp-element-button, button.wp-element-button, input.wp-element-button,
a.vc_general.vc_btn3, button.vc_general.vc_btn3,
a.te-apply-btn, button.kiln-tour-btn,
input.hs-button, button.hs-button,
input.gform_button, button.gform_button {
  border-radius: 12px !important;
}

/* Kiln - HubSpot yes/no checkbox inside the dark popup forms */
.boxzilla ul.inputs-list { list-style: none; margin: 0; padding: 0; }
.boxzilla .hs-fieldtype-booleancheckbox { margin-bottom: 18px; }
:is(.boxzilla, #kiln-boxzilla-anchor) label.hs-form-booleancheckbox-display {
  display: flex !important; align-items: flex-start; gap: 10px;
  color: #fbf6f0 !important; font-size: 14px; line-height: 1.45; cursor: pointer;
}
:is(.boxzilla, #kiln-boxzilla-anchor) label.hs-form-booleancheckbox-display span {
  color: #fbf6f0 !important; margin: 0 !important; font-weight: 400;
}
:is(.boxzilla, #kiln-boxzilla-anchor) label.hs-form-booleancheckbox-display input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  position: relative; flex: 0 0 18px;
  width: 18px !important; min-width: 18px; height: 18px !important;
  margin: 1px 0 0 !important; padding: 0 !important;
  border: 1px solid rgba(254,246,242,.55) !important;
  border-radius: 3px !important; background: transparent !important;
}
:is(.boxzilla, #kiln-boxzilla-anchor) label.hs-form-booleancheckbox-display input[type="checkbox"]:checked {
  background: #fbf6f0 !important; border-color: #fbf6f0 !important;
}
:is(.boxzilla, #kiln-boxzilla-anchor) label.hs-form-booleancheckbox-display input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #141f18; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Boxzilla "Book a Tour" popups - remove the plugin white padding frame
   and keep both panels flush to the bottom edge */
#boxzilla-5390{background-color:#1B2920 !important;padding-bottom:0 !important}
#boxzilla-5466{padding-bottom:0 !important}
#boxzilla-5390 .boxzilla-content>.vc_row{overflow:hidden}
#boxzilla-5390 .boxzilla-content>.vc_row>.wpb_column{padding-bottom:9999px !important;margin-bottom:-9999px !important}

/* location popup close button - centre the glyph in its circle */
#boxzilla-5066 .boxzilla-close-icon{display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;line-height:1 !important}

/* Floating CTA - bottom left on desktop, centered on mobile */
html body .community-fab,
html body .community-fab a{right:auto !important;left:20px !important}
@media (max-width:767px){
  html body .community-fab,
  html body .community-fab a{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:max-content !important;max-width:calc(100vw - 40px) !important;white-space:nowrap !important}
}

/* Book a Tour popup - scheduling note beneath the calendar */
.kbt-note{margin:24px auto 2px;padding:12px 20px 4px;max-width:520px;text-align:center;font-family:"Kontrapunkt Miki",Helvetica,Arial,sans-serif;border-top:1px solid rgba(254,246,242,.16)}
.kbt-note__lead{margin:0 0 8px !important;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#D0B3A4}
.kbt-note__body{margin:0 !important;font-size:14px;line-height:1.65;color:rgba(254,246,242,.82)}
.kbt-note__link{color:#FEF6F2 !important;text-decoration:underline !important;text-underline-offset:3px !important;text-decoration-thickness:1px !important;text-decoration-color:rgba(208,179,164,.7) !important;white-space:nowrap}
.kbt-note__link:hover,.kbt-note__link:focus{color:#D0B3A4 !important;text-decoration-color:#D0B3A4 !important}
.kbt-note__link::after,.kbt-note__link::before{content:none !important;display:none !important}
@media (max-width:600px){.kbt-note{padding:18px 14px 4px;margin-top:18px}.kbt-note__body{font-size:13px}}

/* Book a Tour popup - reclaim HubSpot's reserved whitespace under the scheduler */
.boxzilla .meetings-iframe-container{margin-bottom:0 !important}
/* scheduler height is trimmed by the kiln-hs-fit script below (CSS cap would block the
   time-slot step from scrolling, because the iframe computes overflow:clip) */

/* Popups - fit the *visible* viewport on mobile (dvh accounts for the browser toolbar) */
#boxzilla-5390,#boxzilla-5466{min-height:100vh !important;min-height:100dvh !important}
#boxzilla-5390 .boxzilla-content,#boxzilla-5466 .boxzilla-content{min-height:100vh;min-height:100dvh}
#boxzilla-5390 .boxzilla-content>.vc_row,#boxzilla-5466 .boxzilla-content>.vc_row{min-height:100vh;min-height:100dvh}
@media (max-width:767px){
  html body .boxzilla{top:0 !important;margin-top:0 !important;margin-bottom:0 !important;max-height:100vh !important;max-height:100dvh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
  #boxzilla-5390,#boxzilla-5466{padding-top:0 !important;min-height:100vh !important;min-height:100dvh !important}
  #boxzilla-5390 .boxzilla-content,#boxzilla-5466 .boxzilla-content,
  #boxzilla-5390 .boxzilla-content>.vc_row,#boxzilla-5466 .boxzilla-content>.vc_row{min-height:100vh;min-height:100dvh}
}

/* ===== block 2 id="kiln-knb-solo" ===== */

/* Kiln - floating bar (.knb): when the frame holds a single button, let it fill the
   frame width on mobile instead of sitting small inside a full-width frame. Scoped by
   :only-child so two-button frames and the Need Something Today? frames are untouched. */
@media (max-width:767px){
  .knb__frame > .knb__btn:only-child{flex:1 1 auto !important}
  /* equal button heights: the toggle uses tighter padding for label wrap, so stretch it to match */
  .knb__frame{align-items:stretch !important}
}

/* ===== block 3 id="kiln-hero-abovefold" ===== */
:where(body.page-child.parent-pageid-10,body.home) .te-hero-vid{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden}:where(body.page-child.parent-pageid-10,body.home) .te-hero-vid video{width:100%;height:100%;object-fit:cover;display:block}:where(body.page-child.parent-pageid-10,body.home) .te-hero-overlay{position:absolute;inset:0;background:rgba(15,22,17,.45);z-index:1}:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero{overflow:hidden}:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero__container{position:relative;z-index:2}:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero__content{position:relative;z-index:2}:where(body.page-child.parent-pageid-10,body.home) .te-seo-eyebrow{font-family:"Kontrapunkt Miki",Helvetica,sans-serif;font-size:14px;font-weight:400;letter-spacing:.5px;color:rgba(237,228,212,.9);margin:0 auto 20px;text-align:center;max-width:640px;line-height:1.5}:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero__headline{font-family:"Martel",Georgia,serif!important;font-size:86px!important;font-weight:400!important;line-height:1.05!important;color:#fef6f2!important;margin:0 0 20px!important;text-align:center!important}:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero__subheadline{font-family:"Kontrapunkt Miki",Helvetica,sans-serif!important;font-size:19px!important;font-weight:400!important;color:#ede4d4!important;margin:0 0 28px!important;text-align:center!important}@media(max-width:900px){:where(body.page-child.parent-pageid-10,body.home) .kiln-vc-image-hero__headline{font-size:47px!important}}/* NOTE ON :is() vs :where(). The six marketing pages are also served an unscoped
   style block, id="khf-hero", injected by the theme/plugin layer - not HFCM, not the
   page content - which sets .kiln-vc-image-hero__headline{font-size:48px!important}
   with no body-class gate at all. :where() contributes ZERO specificity, so a
   :where(...) .headline rule ties khf-hero at (0,1,0) and loses on source order.
   body:is(...) .headline is (0,2,1) and wins. Do not "tidy" this back to :where().
   One hero system. These ten slugs previously rendered 48px/300 (the six marketing
   pages) or nothing at all (more, next-four-2026, office, office-a), against 86px on
   home and the location pages. They now carry the same typography as home.
   office-a is listed separately on purpose: /communities/rancho-bernardo/office-a/
   carries body.office-a, NOT body.office, so body.office alone misses it.
   body.communities is deliberately NOT used - it would sweep in all 33 location
   pages, which are to stay untouched. */
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero{overflow:hidden}
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero__container{position:relative;z-index:2}
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero__content{position:relative;z-index:2}
/* unchanged: still only the original six hide the scroll arrow */
:where(body.solutions,body.membership,body.meetings-events,body.enterprise,body.vision,body.careers) .kiln-vc-image-hero__anchor{display:none!important}
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero__headline{font-family:"Martel",Georgia,serif!important;font-size:86px!important;font-weight:400!important;line-height:1.05!important;color:#fef6f2!important;margin:0 0 20px!important;text-align:center!important}
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero__subheadline{font-family:"Kontrapunkt Miki",Helvetica,sans-serif!important;font-size:19px!important;font-weight:400!important;color:#ede4d4!important;margin:0 0 28px!important;text-align:center!important}
@media(max-width:900px){body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero__headline{font-size:47px!important}}
/* The theme only sets object-fit:cover above 1920px, so below that an unlisted hero
   falls back to contain. Harmless today (the video element matches the source aspect)
   but it would letterbox the moment a non-16:9 video is swapped in. */
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero > video{object-fit:cover}
/* Overlay. Home and the location pages get a .te-hero-overlay DIV injected by
   te-hero-js; these pages do not load that script, so the overlay is a pseudo-element
   instead. The two sets are disjoint - applying both anywhere would stack to ~70%
   and visibly darken the page. */
body:is(.solutions,.membership,.meetings-events,.enterprise,.vision,.careers,.more,.next-four-2026,.office,.office-a) .kiln-vc-image-hero::after{content:"";position:absolute;inset:0;background:rgba(15,22,17,.45);z-index:1;pointer-events:none}
/* Headline sits in the lower third, matching /meetings-events/. That page lands
   there because a subheadline and two buttons sit under its headline; solutions and
   more have neither, so bottom-aligning them alone would park the headline on the
   very bottom edge (~84%) instead of ~71%. This lifts it back up. Desktop only -
   below 901px the hero is short enough that the default 32px already reads right. */
@media (min-width:901px){
  /* Every hero is now 726px (standardised 3 Oct 2026), so these paddings were
     re-tuned: at the old 660px they put the headline at 71% down, but on the
     taller hero the same padding read ~73%. These values restore ~70%, matching
     /meetings-events/. */
  /* These three share a shape: 793px hero, two-line headline at 86px. */
  body:is(.solutions,.membership,.careers) .kiln-vc-image-hero__content{ padding-bottom:127px; }
  body.more .kiln-vc-image-hero__content{ padding-bottom:122px; }
  /* enterprise headline is a single line (90px tall, against 181px for the
     two-line ones), so it needs more clearance beneath to sit at the same height. */
  body.enterprise .kiln-vc-image-hero__content{ padding-bottom:170px; }
}
/* ===== block 4 id="kiln-hero-mobile" ===== */
@media (max-width:767px){body.page-child.parent-pageid-10 .kiln-vc-image-hero__headline,body.home .kiln-vc-image-hero__headline{font-size:42px !important}body.solutions .kiln-vc-image-hero__headline,body.membership .kiln-vc-image-hero__headline,body.meetings-events .kiln-vc-image-hero__headline,body.enterprise .kiln-vc-image-hero__headline,body.vision .kiln-vc-image-hero__headline,body.careers .kiln-vc-image-hero__headline,body.more .kiln-vc-image-hero__headline,body.next-four-2026 .kiln-vc-image-hero__headline,body.office .kiln-vc-image-hero__headline,body.office-a .kiln-vc-image-hero__headline{font-size:42px !important}}
/* ===== block 5 id="kiln-me-hero-eyebrow" ===== */

/* Meetings & Events hero eyebrow.
   The homepage equivalent (.te-seo-eyebrow) is created at runtime by te-hero-js,
   so it is absent from the served HTML. Here the text is the theme's own
   `subheadline` shortcode param, which renders server-side as
   <p class="kiln-vc-image-hero__subheadline"> AFTER the headline.
   .kiln-vc-image-hero__content is already display:flex/column, so order:-1
   lifts it above the H1 with no positioning hacks. Values below mirror
   .te-seo-eyebrow exactly. */
body.meetings-events .kiln-vc-image-hero .kiln-vc-image-hero__content .kiln-vc-image-hero__subheadline{order:-1;font-family:"Kontrapunkt Miki",Helvetica,sans-serif !important;font-size:14px !important;font-weight:400 !important;letter-spacing:.5px !important;color:rgba(237,228,212,.9) !important;margin:0 auto 20px !important;text-align:center !important;max-width:640px !important;line-height:1.5 !important}
/* Headline: lift from the group-B 48px/300 to the homepage 86px/400.
   The homepage headline is short ("A world within / your workplace.") so a flat
   86px keeps it on 2 lines. This copy ("Gathering spaces to inspire, /
   connect, and collaborate.") has a widest line measuring 13.91px per 1px of
   font size, so 86px needs ~1196px. That fits from about a 1560px viewport up,
   where the clamp delivers the full homepage 86px; below that it eases down so
   the headline still breaks on the %br% and nowhere else. Divisor 14.5 is the
   measured ratio plus slack. Re-measure if the headline copy changes. */
body.meetings-events .kiln-vc-image-hero .kiln-vc-image-hero__content .kiln-vc-image-hero__headline{font-family:"Martel",Georgia,serif !important;font-size:clamp(40px, calc((100vw - 312px) / 14.5), 86px) !important;font-weight:400 !important;line-height:1.05 !important;color:#fef6f2 !important;margin:0 0 20px !important;text-align:center !important}
@media(max-width:900px){body.meetings-events .kiln-vc-image-hero .kiln-vc-image-hero__content .kiln-vc-image-hero__headline{font-size:47px !important}}
/* Hero CTA row, mirrors .te-btn-wrap / .te-apply-btn on the homepage. */
body.meetings-events .kiln-hero-btns{text-align:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
body.meetings-events a.kiln-hero-btn{display:inline-block;border-radius:12px !important;background:#1b2920 !important;color:#fbf6f0 !important;padding:15px 30px !important;font-size:15px !important;font-weight:400 !important;font-family:"Kontrapunkt Miki",Helvetica,sans-serif !important;text-decoration:none !important;margin:0 0 40px !important;line-height:1.2 !important}
body.meetings-events a.kiln-hero-btn:after{content:" \2192"}
body.meetings-events a.kiln-hero-btn:hover,body.meetings-events a.kiln-hero-btn:focus-visible{background:#40634c !important}

/* ===== block 6 id="kiln-home-intro" ===== */

/* Homepage + Meetings & Events intro tweaks. */
/* TYPE: theme pins .has-enormous-font-size.has-reduced-font-size-on-mobile to
   1.38125rem !important at every width (22.1px). Mobile/tablet keep the reduced
   1.3674375rem (21.88px); from 1000px up it returns to 1.82325rem (29.17px),
   the pre-reduction desktop size. line-height is 1.3em so it tracks the text. */
body.home #introduction h2.vc_custom_heading,
body.meetings-events #introduction h2.vc_custom_heading{font-size:1.3674375rem !important}
@media only screen and (min-width:1000px){
 body.home #introduction h2.vc_custom_heading,
 body.meetings-events #introduction h2.vc_custom_heading{font-size:1.82325rem !important}
}
/* SPACING: theme .has-8-percent-padding-at-edges gives 50px under 1000px and 8%
   at 1000px+ (110.16px at a 1377px container). Both cut 25% => 37.5px and 6%. */
body.home #introduction.vc_section,
body.meetings-events #introduction.vc_section{padding-top:37.5px !important;padding-bottom:37.5px !important}
@media only screen and (min-width:1000px){
 body.home #introduction.vc_section,
 body.meetings-events #introduction.vc_section{padding-top:6% !important;padding-bottom:6% !important}
}
/* HERO VIDEO: <video> defaults to object-fit:contain and the theme only sets
   cover at >=1920px. On desktop/tablet the video box is 1920x1080 so contain and
   cover are identical, but on mobile the box is 768x475 while the frame is 16:9,
   leaving ~22px bars top and bottom. cover removes them at every width. */
body.home .kiln-vc-image-hero > video{object-fit:cover}
/* BALANCE: an empty, zero-height [vc_raw_html] block sits after the hero in the
   same WPBakery column and carries the builder default margin-bottom:35px. It is
   invisible but pushed the intro section 35px down, so the space above the intro
   text read 121px against 87px below. Zeroing it makes the two match (86 / 87,
   the 1px being the section's bottom divider). */
body.home .kiln-vc-image-hero ~ .wpb_raw_code{margin-bottom:0}
/* Same builder default at the foot of the page: two zero-height raw blocks (the
   floating bar host and its neighbour) each add 35px, pushing the closing forest
   green section 70px further from News. :has() is progressive - without it the
   only cost is the old spacing. */
body.home .knb-row .wpb_raw_code,
body.home .vc_section:has(+ .knb-row) .wpb_raw_code{margin-bottom:0}

/* ===== block 7 id="kiln-home-news" ===== */

/* Homepage News carousel. Every card sized itself to its own content, so slick
   set the track to the tallest (839px) and each card's Read more landed at a
   different height. Clamping title and excerpt to two lines makes the cards
   identical; the 16:9 crop and tighter rhythm do the rest. 1099px -> 668px.
   Scoped to the homepage: /happenings/ uses the same .post-card markup. */
body.home .kiln-vc-featured-posts .post-card__thumbnail{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;margin-bottom:20px}
body.home .kiln-vc-featured-posts .post-card__thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
body.home .kiln-vc-featured-posts .entry-categories{margin-bottom:10px}
body.home .kiln-vc-featured-posts .post-card__title{font-size:26px;line-height:1.25;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.home .kiln-vc-featured-posts .post-card__excerpt{margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.home .vc_section:has(.kiln-vc-featured-posts){padding-bottom:64px}
body.home .vc_section:has(.kiln-vc-featured-posts) > .vc_row:first-of-type{margin-bottom:32px !important}

/* ===== block 8 id="kiln-nav-center" ===== */

/* Desktop dropdowns were left-aligned to their parent and then pulled a further 128px
   left: the theme's closed-state translateX(-10rem) is never reset when .sfhover opens
   the panel, offset only by a 32px margin-left. Anchor each panel to its parent <li>
   and centre it on the label instead, which self-corrects for any label/panel width. */
@media only screen and (min-width:1000px){
#masthead .masthead__main-menu ul.menu > li.menu-item-has-children{position:relative}
#masthead .masthead__main-menu ul.menu > li.menu-item-has-children > ul.sub-menu{position:absolute;margin-left:0}
#masthead .masthead__main-menu ul.menu > li.menu-item-has-children.sfhover > ul.sub-menu,
#masthead .masthead__main-menu ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
#masthead .masthead__main-menu ul.menu > li.menu-item-has-children[aria-expanded="true"] > ul.sub-menu{left:50%;transform:translateX(-50%)}
}

/* ===== block 9 id="kiln-nav-flyout" ===== */

#masthead .masthead__main-menu ul.menu li ul.sub-menu li.menu-item-has-children > a::after{display:inline-block !important}
#masthead .masthead__main-menu ul.menu li ul.sub-menu li ul{margin-left:136px;border-right-width:0;border-left:1.5rem solid transparent}
@media only screen and (min-width:1000px){
#masthead .masthead__main-menu ul.menu > li > ul.sub-menu{width:max-content;min-width:184px;max-width:300px}
#masthead .masthead__main-menu ul.menu > li:has(> ul.sub-menu > li.menu-item-has-children) > ul.sub-menu{width:184px}
#masthead .masthead__main-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between}
#masthead .masthead__main-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children > a::after{margin-left:0 !important}
}

/* ===== block 10 id="kiln-nav-color" ===== */

/* Nav ink set to the forest green used by the Book a Tour button (#1B2920).
   Scoped to #masthead and skipped on inverse (dark) headers, which redefine
   the same custom properties for light-on-dark nav text.
   Previous values: --kiln-nav-link-color #2a3845, --kiln-nav-link-hover-color #516b84 */
body:not([class*="-page-inverse"]) #masthead{--kiln-nav-link-color:#1B2920;--kiln-nav-link-hover-color:#40634C}

/* ===== block 11 id="kiln-nav-height" ===== */

@media only screen and (min-width:1000px){
#masthead .masthead__main-menu a.btn.book-btn{padding-top:10px !important;padding-bottom:10px !important;min-height:44px}
#masthead .masthead__main-menu ul.menu > li:not(.cta) > a{position:relative;top:-6px}
#masthead .masthead__main-menu ul.menu > li > ul.sub-menu{border-top-width:18px}
}

/* ===== block 12 id="kiln-logo-hit" ===== */

#masthead .masthead__branding.has-logo > a{display:inline-block;height:100%;vertical-align:top;box-sizing:content-box;padding:4px 10px;margin:-4px 0 -4px -10px}
#masthead .masthead__branding.has-logo > a{position:relative;z-index:2}
#masthead .masthead__branding.has-logo > a img{pointer-events:none}

/* ===== block 13 id="kiln-nav-btn-font" ===== */

#masthead .masthead__main-menu a.btn.book-btn{font-family:"Kontrapunkt Miki",Helvetica,sans-serif}

/* ===== block 14 id="kiln-oc-menu" ===== */

@media only screen and (max-width:999px){
html:has(.off-canvas.is-active),body:has(.off-canvas.is-active){overflow:hidden}
.off-canvas{overscroll-behavior:contain}
}
.off-canvas__menu ul.menu > li.logo{height:54px;min-height:54px}
.off-canvas__menu ul.menu li.menu-item-has-children > a::after{content:"" !important;display:inline-block !important;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;border-top:0;border-left:0;transform:rotate(45deg);margin-left:.6em;vertical-align:3px;transition:transform .2s ease}
.off-canvas__menu ul.menu li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > a::after{transform:rotate(225deg);vertical-align:1px}
.off-canvas__menu ul.menu > li.menu-item-fab{margin-top:16px}
.off-canvas__menu ul.menu > li.menu-item-fab > a,
.off-canvas__menu ul.menu > li.menu-item-fab > a:hover,
.off-canvas__menu ul.menu > li.menu-item-fab > a:focus{display:block;text-align:center;background:#FBF6F0;color:#1B2920 !important;-webkit-text-fill-color:#1B2920;border:1px solid #FBF6F0;border-radius:12px;padding:15px 30px;font-family:"Kontrapunkt Miki",Helvetica,sans-serif;font-size:15px;line-height:1.4}

/* ===== block 15 id="kiln-bz-tour" ===== */

#boxzilla-5390 .three-col-list ul > li{break-inside:avoid}
#boxzilla-5390 .three-col-list ul > li:has(a){break-before:avoid-column}
@media only screen and (max-width:999px){
 #boxzilla-5390 .vc_row{margin-left:0 !important;margin-right:0 !important}
 #boxzilla-5390 .wpb_column.vc_column_container{padding-left:0 !important;padding-right:0 !important}
 #boxzilla-5390 .vc_column-inner{padding-left:0 !important;padding-right:0 !important}
 #boxzilla-5390 .vc_column-inner > .wpb_wrapper{padding:40px 24px 36px !important}
 #boxzilla-5390{overflow:hidden !important}
#boxzilla-5390{padding-left:0 !important;padding-right:0 !important}
#boxzilla-5390 > .boxzilla-content{overscroll-behavior:contain}
 #boxzilla-5390 > .boxzilla-content{max-height:inherit;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
 #boxzilla-5390 .boxzilla-close-icon{color:#1B2920 !important;-webkit-text-fill-color:#1B2920 !important;opacity:1;background:#FBF6F0;border-radius:50%;width:36px;height:36px;padding:0;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;border:1px solid rgba(27,41,32,.15);top:10px;right:18px;z-index:20;box-shadow:0 1px 4px rgba(0,0,0,.18)}
 #boxzilla-5390 .three-col-list ul{column-count:2;column-gap:18px}
 #boxzilla-5390 .three-col-list ul > li{break-inside:avoid;margin-top:1.5px;margin-bottom:1.5px}
 #boxzilla-5390 .three-col-list ul > li:not(:has(a)){break-after:avoid-column}
 #boxzilla-5390 .vc_column-inner > .wpb_wrapper > h2{margin-bottom:12px !important}
 #boxzilla-5390 .vc_column-inner > .wpb_wrapper > p{margin-bottom:16px !important}
#boxzilla-5390 .wpb_column.vc_column_container:first-child{background-color:#FBF6F0 !important}
#boxzilla-5390 .wpb_column:first-child h2,
#boxzilla-5390 .wpb_column:first-child p,
#boxzilla-5390 .three-col-list,
#boxzilla-5390 .three-col-list h5,
#boxzilla-5390 .three-col-list li,
#boxzilla-5390 .three-col-list a{color:#1B2920 !important;-webkit-text-fill-color:#1B2920 !important}
#boxzilla-5390 .wpb_column.vc_column_container:last-child{background-color:transparent !important}
#boxzilla-5390 .wpb_column:last-child .vc_column-inner > .wpb_wrapper{padding:0 !important}
#boxzilla-5390 .kbz-host{background:#1B2920;padding:40px 24px 44px}
#boxzilla-5390 .kbz-need{background:#A0A7A1;padding:40px 24px 44px}
#boxzilla-5390 .kbz-host h2,#boxzilla-5390 .kbz-host p{color:#FBF6F0 !important;-webkit-text-fill-color:#FBF6F0 !important}
#boxzilla-5390 .kbz-need h2,#boxzilla-5390 .kbz-need p{color:#1F1F1F !important;-webkit-text-fill-color:#1F1F1F !important}
#boxzilla-5390 .kbz-host a.wp-block-button__link{background-color:#FBF6F0 !important;color:#1B2920 !important;-webkit-text-fill-color:#1B2920 !important}
#boxzilla-5390 .kbz-need a.wp-block-button__link{background-color:#1B2920 !important;color:#FBF6F0 !important;-webkit-text-fill-color:#FBF6F0 !important}
#boxzilla-5390 .wpb_column:last-child .wpb_wrapper > div[style*="border-bottom"]{display:none}
}

/* ===== block 16 id="kiln-rawcode-gap" ===== */

/* Assembly page: WPBakery raw-code blocks are zero-height (style/script only) but carry the
   builder default margin-bottom:35px. Three of them sit between the FAQ and the footer. */
body.page-id-4493 .wpb_raw_code{margin-bottom:0}
/* Assembly page: section 2 carries a stale WPBakery margin-bottom:50px cached in post meta;
   the css= attribute was cleared but the cached rule still renders. Neutralise it here. */
body.page-id-4493 .vc_custom_1702922619807{margin-bottom:0 !important}

/* ===== block 17 id="kiln-hero-mobile-video-fill" ===== */

/* The hero covers its container with the classic
   min-width:100%/min-height:100%/translate(-50%,-50%) trick, and a
   <video> defaults to object-fit:contain. That works for the desktop file
   because its element box ends up 16:9, so contain has nothing to letterbox.
   The mobile <video> does not get a 16:9 box (Additional CSS sets
   ".kiln-vc-image-hero>video{height:unset!important}"), so at 390x475 the
   element is 768x475, the 16:9 frame paints 768x432 inside it and you get a
   22px bar above and below. Give the mobile video the container box exactly
   and let object-fit:cover crop it instead. */
.kiln-vc-image-hero > video.kiln-vc-image-hero__mobile-video{
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  min-width:0 !important;min-height:100% !important;max-width:none !important;
  transform:none !important;
  object-fit:cover !important;object-position:50% 50% !important;
}

/* ===== block 18 id="kiln-footer-one-line" ===== */

/* Footer link row. The ten links total ~797px of text; at the old 32px
   column gap the row needed ~1085px and only ~1027px was available, so the
   last item wrapped and the footer carried a second line. A 20px gap brings
   the requirement to ~977px, which fits. Below roughly a 1645px viewport
   there is still not room for one line and it wraps again — the widest item
   by far is "Opt-out preferences + Cookie Policy" at 217px. */
#footer .footer__nav .menu{
  column-gap:20px !important;
  row-gap:6px !important;
}

/* kiln-me-faq-tighten */
body.page-id-3145 .kiln-vc-faq .kiln-vc-faq-item:last-child{ margin-bottom:0 !important; }
body.page-id-3145 .knb-row,
body.page-id-3145 .knb-row > .vc_column_container,
body.page-id-3145 .knb-row .vc_column-inner{ height:0 !important; min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
body.page-id-3145 .kiln-vc-faq-item__entry a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s, text-decoration-thickness .15s; }
body.page-id-3145 .kiln-vc-faq-item__entry a:hover,
body.page-id-3145 .kiln-vc-faq-item__entry a:focus-visible{ color:#1B2920; text-decoration-thickness:2px; }

/* kiln-me-finder-pad — the finder now carries the "Gather two people" header and the
   photo gallery follows it, so key off the section's own class rather than "whatever
   comes after the gallery", which is now the FAQ. */
body.page-id-3145 .kms-sec{ padding-bottom:40px !important; }
/* The header sits at the top of this section, so a full 8% above it plus the header's own
   bottom margin read top-heavy. Ease the top down to 7% and let the extra air fall below
   the header instead, where it separates the copy from the map. */
body.page-id-3145 .kms-sec{ padding-top:44px !important; }
@media (min-width:1000px){
  body.page-id-3145 .kms-sec{ padding-top:7% !important; }
}

/* kiln-me-explainers - the three explainer sections between the intro divider and the
   photo gallery. Type is lifted from the community pages' kmr component so the two
   read as one family rather than two different design systems. */
body.page-id-3145 .kme__head{ text-align:center; margin:0 0 60px; }
body.page-id-3145 .kme__title{ font-family:Martel,Georgia,serif; font-weight:300; font-size:33.6px; line-height:1.2; color:#1B2920; margin:0 0 10px; }
body.page-id-3145 .kme__sub{ font-family:"Kontrapunkt Miki",Helvetica,Arial,sans-serif; font-size:20.8px; line-height:1.3; color:#1B2920; margin:0 auto; max-width:52ch; }
@media (min-width:1000px){
  body.page-id-3145 .kme__title{ font-size:42px; }
  body.page-id-3145 .kme__sub{ font-size:26px; }
  /* Must live here, after the base .kme__head rule: that rule uses the `margin` shorthand,
     so an equally specific margin-bottom placed earlier in the snippet gets reset by it. */
  body.page-id-3145 .kme__head{ margin-bottom:68px; }
}
/* All three photos sit in an identical half-width column and fill it, so they come out
   the same size as each other and flush against the dividing rule rather than leaving a
   strip of dead space beside it. */
body.page-id-3145 .kme-sec .wpb_single_image img{ height:auto; }
/* Everything Included is its own section, laid out like the amenities block on the
   community pages: heading and lead copy at 5/12, categorised lists at 7/12. */
body.page-id-3145 .kmi-list .wpb_text_column{ margin-bottom:12px !important; }
body.page-id-3145 .kmi-list .kiln-vc-icon-list{ margin-bottom:34px !important; }
body.page-id-3145 .kmi-list .kmi-note{ margin-bottom:0 !important; }
/* Every Find your space link on the page targets #find-your-space, which is now the
   SECTION rather than the finder widget inside it - so the "Gather two people" header
   arrives with it. The section already carries its own 8% top padding, and the root
   carries scroll-padding-top:32px, so no extra scroll-margin is wanted: adding one on
   top would push the heading a long way down the screen on arrival. */
body.page-id-3145 #find-your-space{ scroll-margin-top:0; }
/* Each full-bleed band sits flush against the bottom of its section. Everything
   included now sits between the two bands and keeps its natural 8% top and bottom, so
   it reads as a breath of cream between two photographs. */
body.page-id-3145 .kme-sec{ padding-bottom:0 !important; }
body.page-id-3145 .kme2-sec{ padding-top:0 !important; padding-bottom:0 !important; }
/* Everything included is the cream breather between the two photo bands. The section's
   own has-8-percent-padding-at-edges was a shade heavy sandwiched between two full-bleed
   images, so take it down a quarter: 8% -> 6% desktop, 50px -> 37px below 1000px. */
body.page-id-3145 .kmi-sec{ padding-top:37px !important; padding-bottom:37px !important; }
@media (min-width:1000px){
  body.page-id-3145 .kmi-sec{ padding-top:6% !important; padding-bottom:6% !important; }
}


/* The intro sits directly above the first full-bleed band now that the divider between
   them is gone, so its bottom padding was doubling up with the band section's own 8% top
   and reading heavy. Drop it to zero and let the band section supply the whole gap.
   Scoped to page 3145: the shared kiln-home-intro rule above sets 6% top AND bottom for
   both the homepage and this page, and the homepage still wants its bottom padding. Same
   specificity as that rule, so this only wins by sitting later in the snippet. */
body.page-id-3145 #introduction.vc_section{ padding-bottom:0 !important; }

/* --- Nav dropdown background fallback (2026-09-24) -------------------------
   The desktop dropdown panel background is painted by
   .masthead__main-menu ul.sub-menu::after (z-index 11). If that pseudo-element
   fails to render, the dark serif menu text lands straight on the hero video
   and is unreadable. Painting the same colour on the ul itself is invisible
   when ::after works (the extra 18px it covers sits inside the cream header
   bar) and keeps the menu legible when it does not. Scoped to the desktop nav
   on purpose: the mobile off-canvas menu has no ::after and sits on dark green. */
/* padding-box: the sub-menus use a transparent border as a hover bridge
   (24px left on flyouts, 18px top on the first level); without this the cream
   paints under it and shows as a strip beside the Utah/Washington flyouts. */
.masthead__main-menu ul.sub-menu{ background-color: #FBF6F0; background-clip: padding-box; }

/* ===== block 19 ===== */

/* ---------------------------------------------------------------------------
   HubSpot inline "form submitted" message.
   HubSpot ships no CSS for .submitted-message, so it inherited the body colour
   (#1B2920) and default left alignment. That reads on the cream sections, but on
   the waitlist popup and Daybreak's dark band it was #1B2920 on #141F18 - a
   contrast ratio of 1.1:1, invisible unless you knew to look for it. Centre it,
   give it a heading, and let the script below flag dark containers so the text
   flips to cream.
--------------------------------------------------------------------------- */
.submitted-message{ text-align:center; color:#1B2920; padding:6px 0 2px; }
.submitted-message p{ margin:0 0 8px; }
.submitted-message p:last-child{ margin-bottom:0; }
.submitted-message.is-on-dark{ color:#FEF6F2; }
.kiln-formdone__title{ font-family:Martel, Georgia, serif; font-size:28px; line-height:1.25; font-weight:400; }
.kiln-formdone__sub{ font-size:16px; line-height:1.5; opacity:.8; }
@media (max-width:600px){ .kiln-formdone__title{ font-size:24px; } }

/* ===== block 20 ===== */

/* ===== Overlay header - pilot on Kiln Preston Hollow ======================
   The hero grows by the height of the masthead and slides up underneath it, so
   the hero's content stays exactly where it was and the extra height shows more
   of the video. The masthead itself carries no background~ logo, links and the
   Book a Tour pill go cream over a short scrim, with a hairline rule along the
   bottom of the content width. Hovering the header, tabbing into it, or
   scrolling fades that away~ hover brings up the same frosted glass used by the
   floating bar at the bottom of the page, and scrolling brings up the ordinary
   solid cream bar.
   To put another page on this, add its body class (page-id-NNNN) to each
   selector group below - and only for pages whose first module is a dark media
   hero, or cream marks will land on a cream band.
   ===================================================================== */
/* ---- the only two rules gated on a hero actually being there. Everything
   else below is the header itself and runs on every page. Page template is
   NOT a reliable signal - page-canvas, page-no-padding and the default
   template all appear both with and without a hero - so this asks the DOM.
   Across the 69 pages in the sitemap the hero is either the first section or
   absent, never buried, so presence alone is enough. ---- */
/* The negative margin above only shows if nothing clips it. .site-content__area
   carries overflow-x:hidden to keep full-bleed rows from causing a sideways
   scrollbar - and a hidden on one axis forces the other into a scroll box, so
   it clipped the hero's top 72px as well. The pilot never hit this: Preston
   Hollow loads a component whose stylesheet happens to carry
   .kaw-on .site-content__area{overflow:clip visible!important}, which undid it
   by accident. Location pages have that class; /, /more/, /membership/,
   /solutions/, /enterprise/, /careers/ and /meetings-events/ do not, and all of
   them were clipping. overflow-x:clip keeps the sideways protection without
   making a scroll container, which is exactly what clip is for. */
/* The bar is fixed, so an in-page anchor lands behind it. The root only carries
   WordPress's 32px admin-bar allowance - which is zero for a logged-out
   visitor - so the target has to be pushed down by the bar's own height. */
html:has(body:not(.kiln-no-overlay-header)){ scroll-padding-top:var(--kiln-hdr-h, 72px); }
html:has(body.admin-bar:not(.kiln-no-overlay-header)){
  scroll-padding-top:calc(var(--kiln-hdr-h, 72px) + var(--wp-admin--admin-bar--height, 32px));
}
/* #find-your-space was already tuned to arrive with no extra offset (the section
   brings its own 8% top padding). Cancel the new root padding for that one
   target so its landing position is exactly what it was. */
body.page-id-3145 #find-your-space{ scroll-margin-top:calc(-1 * var(--kiln-hdr-h, 72px)); }
body:not(.kiln-no-overlay-header):has(.site-content__main :is(.kiln-vc-image-hero, .kd2-hero)) .site-content__area{
  overflow:clip visible !important;
  /* The default page template pads this area 48px at the top. The negative
     margin above only clears the masthead, so on a default-template hero page
     that padding showed as a band above the image (Ambassador Program). Canvas
     pages already compute 0 here, so this only bites where it is needed. */
  padding-top: 0 !important;
}
body:not(.kiln-no-overlay-header):has(.site-content__main :is(.kiln-vc-image-hero, .kd2-hero)) .site-content__main{ margin-top:calc(-1 * var(--kiln-hdr-h, 72px)); }
/* content-box plus the padding is what makes the hero taller rather than just
   moving it~ its content is bottom-aligned, so it does not shift. */
body:not(.kiln-no-overlay-header):has(.site-content__main .kiln-vc-image-hero) .kiln-vc-image-hero__container{ box-sizing:content-box; padding-top:var(--kiln-hdr-h, 72px); }
/* Daybreak does the same job with its own hero. .kd2-hero is border-box, so the header
   clearance is added to the 48px of padding it already has rather than on top of the box. */
body:not(.kiln-no-overlay-header):has(.site-content__main .kd2-hero) .kd2-hero{ padding-top:calc(48px + var(--kiln-hdr-h, 72px)); }
/* Daybreak hero on phones. Its stack carries more than the other heroes - eyebrow, founding
   badge, headline, subcopy, button and a four-cell countdown - and at 375x667 it measured 760px
   against a 667px viewport, so min-height stopped binding and the hero ran 93px past the fold
   while Gilbert and the rest stopped exactly on it. Anthony flagged it against Gilbert.

   The height is recovered from dead space rather than from type size: a zero-height raw block
   at the top of the stack that still carried a 35px bottom margin, the trailing margin under
   the countdown, the generous 35px text gaps, and the hero's own padding. ~115px in total.

   justify-content:center matters as much as the trim. Without it the recovered space pools at
   the bottom - on a 390x844 phone the gap under the countdown went from 126px to 254px, which
   reads emptier, not shorter. Centring puts the stack back in the frame at every height.
   Measured after: 375x667 and 390x844 both land exactly on the fold.

   320x568 still overflows (content is 659px, taller than that viewport whatever the padding).
   Gilbert overflows by 21px there too, so it is the device, not this page. */
@media (max-width:767px){
  body:not(.kiln-no-overlay-header):has(.site-content__main .kd2-hero) .kd2-hero{
    padding-top:calc(20px + var(--kiln-hdr-h, 72px));
    padding-bottom:26px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .kd2-hero .wpb_wrapper > .wpb_raw_code:first-child{ margin-bottom:0 }
  .kd2-hero .wpb_wrapper > *:last-child{ margin-bottom:0 }
  .kd2-hero .wpb_wrapper > .wpb_text_column{ margin-bottom:20px }
}

body:not(.kiln-no-overlay-header) #masthead.masthead{
  z-index:101;
  background-color:transparent;
  transition:background-color .28s ease, backdrop-filter .28s ease,
              -webkit-backdrop-filter .28s ease,
              transform .32s cubic-bezier(.4,0,.2,1), opacity .24s ease;
  will-change:transform;
  --kiln-nav-link-color:#FBF6F0;
  --kiln-nav-link-hover-color:#FBF6F0;
}
body:not(.kiln-no-overlay-header) #masthead.masthead::before{
  content:''; position:absolute; left:0; right:0; top:0; height:170px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,22,17,.50), rgba(14,22,17,0));
  transition:opacity .28s ease;
}
/* Hairline along the bottom edge, inset to the content width rather than bleeding
   to the window edges. */
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__top .flexgrid__row{ position:relative; }
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__top .flexgrid__row::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(255,255,255,.6); pointer-events:none; transition:opacity .28s ease;
}
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__branding img{ filter:brightness(0) invert(1); transition:filter .28s ease; }
body:not(.kiln-no-overlay-header) #masthead.masthead .j-toggle-off-canvas svg path{ stroke:#FBF6F0; transition:stroke .28s ease; }
/* Over the hero the pill is filled with the same glass as the bar, with forest
   green type~ raising the bar swaps it to the solid forest pill. */
body:not(.kiln-no-overlay-header) #masthead.masthead .book-btn{
  background-color:rgba(251,246,240,.84);
  border-color:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  transition:background-color .28s ease, border-color .28s ease, color .28s ease,
             backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
}
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.menu li a.btn.book-btn{ color:#1B2920 !important; }   /* the theme colours this button with a rule that outranks a page-scoped one */

/* Marks return to forest green whenever the bar is up, however it was raised. */
body:not(.kiln-no-overlay-header) #masthead.masthead:hover,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible),
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid{
  --kiln-nav-link-color:#1B2920;
  --kiln-nav-link-hover-color:#40634C;
}
body:not(.kiln-no-overlay-header) #masthead.masthead:hover::before,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible)::before,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid::before{ opacity:0; }
body:not(.kiln-no-overlay-header) #masthead.masthead:hover .masthead__top .flexgrid__row::after,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .masthead__top .flexgrid__row::after,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .masthead__top .flexgrid__row::after{ opacity:0; }
body:not(.kiln-no-overlay-header) #masthead.masthead:hover .masthead__branding img,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .masthead__branding img,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .masthead__branding img{ filter:none; }
body:not(.kiln-no-overlay-header) #masthead.masthead:hover .j-toggle-off-canvas svg path,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .j-toggle-off-canvas svg path,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .j-toggle-off-canvas svg path{ stroke:#1B2920; }
body:not(.kiln-no-overlay-header) #masthead.masthead:hover .book-btn,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .book-btn,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .book-btn{
  background-color:#1B2920; border-color:#1B2920;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body:not(.kiln-no-overlay-header) #masthead.masthead:hover .masthead__main-menu ul.menu li a.btn.book-btn,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .masthead__main-menu ul.menu li a.btn.book-btn,
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .masthead__main-menu ul.menu li a.btn.book-btn{ color:#FFFFFF !important; }

/* Hover and keyboard focus raise the frosted glass - same recipe as .knb__frame,
   the floating bar at the bottom of the page. */
/* The glass sits on a pseudo layer rather than on the masthead itself. An element
   that carries backdrop-filter becomes a backdrop root, and everything inside it
   then has nothing left to sample - which is exactly what stopped the dropdown
   panels frosting and left them looking like flat cream next to a frosted bar. */
body:not(.kiln-no-overlay-header) #masthead.masthead::after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .28s ease;
  background-color:rgba(251,246,240,.84);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
}
body:not(.kiln-no-overlay-header) #masthead.masthead:hover::after,
body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible)::after{ opacity:1; }
/* Scrolled stays the ordinary cream bar, so it reads the same as every other
   page once the hero is gone. Declared after the glass so it wins on a hover
   that happens while scrolled. */
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid::after{ opacity:1; }

/* Scrolling down hides the bar, scrolling back up brings it in with its glass
   already up. It is fixed only once scrolled, and the theme's own slide-in
   animation is switched off so the two do not fight. The .sticky-wrapper keeps
   reserving the bar's height in flow, so nothing jumps when it goes fixed. */
body:not(.kiln-no-overlay-header) #masthead.masthead{ animation:none !important; }
/* The sticky wrapper collapses to 0 the moment the bar is taken out of flow,
   which dropped the page 71px, moved the scroll position, and re-fired this
   handler - the bar flickered at the threshold. Holding the wrapper open keeps
   the page still whichever state the bar is in. */
body:not(.kiln-no-overlay-header) .sticky-wrapper{ min-height:var(--kiln-hdr-h, 72px); }
body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid{
  position:fixed; top:0; left:0; right:0; z-index:101;
}
/* logged-in only: the admin bar is fixed over the top 32px, and the theme
   already shifts its own .stuck bar down by that much. Match it, or half the
   wordmark sits behind the bar while an editor is reviewing the page. */
body.admin-bar[class] #masthead.masthead.is-solid{ top:var(--wp-admin--admin-bar--height, 32px); }
body:not(.kiln-no-overlay-header) #masthead.masthead.is-hidden{
  transform:translateY(-100%); opacity:0; pointer-events:none;
}
/* The theme runs its own sticky and pins the bar at the top after roughly one
   scroll click - that, not this page's handler, is why the glass arrived the
   moment you started scrolling. Here the bar is meant to travel with the hero
   and leave the screen with it, so the theme's stick is released and the fixed
   state is owned entirely by .is-solid. (.masthead.stuck{position:fixed} is
   min-width:1000px only, so this is a desktop problem by construction.) */
body:not(.kiln-no-overlay-header) #masthead.masthead.stuck:not(.is-solid){ position:relative; top:auto; }
/* one frame with transitions off, so parking the bar above the viewport before
   it slides back in is not itself animated */
body:not(.kiln-no-overlay-header) #masthead.masthead.kiln-noanim{ transition:none !important; }

/* The dropdowns are the same material as the bar they hang from. Scoped to this
   page, so the site-wide cream fail-safe on .sub-menu is untouched everywhere
   else - that rule is what keeps the panels from going transparent over a hero,
   and it stays exactly as it is. */
/* The theme paints a panel's background on ul.sub-menu::after, not on the ul, so
   the glass has to go there too - setting it on the ul alone does nothing. */
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu{ background-color:transparent; }
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu::after{
  background-color:rgba(251,246,240,.84);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
}
/* A first-level panel's 18px top border - the hover bridge - sits inside the bar's
   own footprint, and its background already starts exactly at the bar's bottom
   edge. Pulling the glass up over that band stacks two translucent layers and
   leaves a lighter notch, so it is left alone. */
/* The panels keep the same glass in every state. */

/* Hovering a nav item quiets the other nav items, so the open menu reads as the
   thing in focus. The logo and the Book a Tour pill are deliberately left alone.
   The trigger is ~has(), not ~hover on the list~ the list is a flex row with a 32px
   gap and 13px of padding above it, and plain ~hover matched that empty space too,
   so sweeping between two items dimmed everything at once with nothing lit. That
   is what felt broken. The lit rule carries the same ~has() plus ~hover so it
   always outranks the dim rule rather than depending on source order. */
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu > ul > li > a:not(.book-btn){
  transition:opacity .2s ease,
             color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
             border-color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu > ul:has(> li:hover > a:not(.book-btn)) > li > a:not(.book-btn){ opacity:.45; }
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu > ul:has(> li:hover > a:not(.book-btn)) > li:hover > a{ opacity:1; }

/* Same treatment inside a panel - hovering one state quiets its siblings, and it
   nests~ opening Texas keeps Texas lit while the other states stay down. */
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu > li > a{
  transition:opacity .2s ease,
             color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
             border-color 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu:has(> li:hover) > li > a{ opacity:.45; }
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu:has(> li:hover) > li:hover > a{ opacity:1; }

/* The off-canvas menu on phones opens with the Kiln mark at the top - it is the
   menu's first item, an <li class~'logo'> pointing at Home, which the theme draws
   as the logo at phone widths. The header already carries the logo right above it,
   so the row comes out. Tapping the header logo still goes home. */
body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu > li.logo{ display:none; }

/* ---- Mobile menu ---------------------------------------------------------
   The theme's off-canvas is a dark green drawer that slides in from the left at
   75% width and runs the full height of the screen, which puts it over the
   header - that is why the Kiln mark appeared to sit inside it. Here it becomes
   a panel that drops straight out of the bar~ full width, only as tall as its
   own options, and the same cream glass as the desktop dropdowns.
   top~auto is doing the work~ absolutely positioned with no offset, the panel
   keeps its static position, which is immediately below the header inside
   .masthead-wrapper. No measuring, and it stays correct at any header height.
   -------------------------------------------------------------------- */
@media (max-width:999px){
  /* The site-wide drawer freezes the page with overflow:hidden on html and
     body (style#kiln-oc-menu). That collapses the document's scroll range to
     nothing, so the browser clamps scrollTop to 0 and the visitor loses their
     place - measured 2800 -> 32 the instant the lock goes on, on this very
     page. Nobody saw it while the drawer covered the whole screen; with a
     short drop-down the page behind it is in full view and the jump reads as
     being thrown back to the top. The panel is fixed to the bar and the bar
     is held still while the menu is open, so nothing here needs the page
     frozen. Higher specificity than the rule it releases, so load order does
     not matter. */
  html:has(body:not(.kiln-no-overlay-header) .off-canvas.is-active),
  body:not(.kiln-no-overlay-header):has(.off-canvas.is-active){ overflow:visible; }
  body:not(.kiln-no-overlay-header) .off-canvas{
    position:fixed; top:var(--kiln-oc-top, 72px); left:0; right:0; bottom:auto;
    width:auto; height:auto; max-height:none;
    /* the theme caps the drawer at 375px because it was a side panel. A full
       edge-to-edge drop-down has to shed that cap or it stops short on any
       phone wider than 375px. */
    max-width:none;
    /* the theme parks the drawer off-screen with a transform and slides it in~
       that rule outranks a page-scoped one, so this has to be forced. */
    transform:none !important;
    padding:14px 20px 22px;
    background-color:rgba(251,246,240,.84);
    -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
    backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
    box-shadow:0 18px 40px rgba(12,22,16,.18);
    z-index:99; overflow:hidden;
  }
  /* Kept in the DOM rather than display-toggled, so the open can animate~ it wipes
     down from the bar's edge instead of appearing all at once. transform is spoken
     for by the theme, so the animation rides on clip-path. */
  body:not(.kiln-no-overlay-header) .off-canvas{
    display:block !important;
    visibility:hidden; pointer-events:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .30s cubic-bezier(.4,0,.2,1), visibility 0s linear .30s;
  }
  /* The theme opens and closes the drawer with a 400ms slideInLeft /
     slideOutLeft keyframe and waits for animationend before it drops
     .is-active. transform is pinned above so none of that is visible - the
     panel just sat still for 400ms and then blinked out before the wipe could
     run. Collapsing the duration keeps animationend firing (the theme needs
     it) while handing the motion back to the clip-path transition. */
  body:not(.kiln-no-overlay-header) .off-canvas.is-active,
  body:not(.kiln-no-overlay-header) .off-canvas.is-animating-out{ animation-duration:10ms; }
  body:not(.kiln-no-overlay-header) .off-canvas.is-active{
    visibility:visible; pointer-events:auto;
    clip-path:inset(0 0 0 0);
    transition:clip-path .30s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  body:not(.kiln-no-overlay-header) .off-canvas__sections{ height:auto; min-height:0; overflow:visible; }
  /* Rows sit to the right, under the toggle that opened them. The CTA stays centred. */
  body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu li{ text-align:right; }
  body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu > li.menu-item-fab{ text-align:center; }
  /* The current page's row carries a tan underline that reads as a stray pink line
     against the cream glass. */
  body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu li > a{ border-bottom-color:transparent; }
  body:not(.kiln-no-overlay-header) .off-canvas .off-canvas__sections .off-canvas__middle{ margin-top:0; }
  /* The theme paints this menu's labels with -webkit-text-fill-color, which beats
     plain colour - set both or the type stays dark green on dark green. */
  body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu a{ color:#1B2920; -webkit-text-fill-color:#1B2920; }
  body:not(.kiln-no-overlay-header) .off-canvas #mobile-menu > li.menu-item-fab > a{
    background-color:#1B2920 !important; border-color:#1B2920;
    color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
  }
  /* With the panel open the bar raises its own glass, so the two read as one sheet. */
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead{ --kiln-nav-link-color:#1B2920; }
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead::after{ opacity:1; }
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead::before{ opacity:0; }
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead .masthead__branding img{ filter:none; }
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead .j-toggle-off-canvas svg path{ stroke:#1B2920; }
  body:not(.kiln-no-overlay-header) .masthead-wrapper:has(.off-canvas.is-active) #masthead.masthead .masthead__top .flexgrid__row::after{ opacity:0; }
}

/* The panels carry a dark 1px rule above each row and a drop shadow. Both read as
   hard dark edges against glass, so they come off on this page. */
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu li{ border-top-color:transparent; }
body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.sub-menu::after{ box-shadow:none; }
@media (prefers-reduced-motion:reduce){
  body:not(.kiln-no-overlay-header) #masthead.masthead,
  body:not(.kiln-no-overlay-header) #masthead.masthead::before,
  body:not(.kiln-no-overlay-header) #masthead.masthead::after,
  body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__top .flexgrid__row::after,
  body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__branding img,
  body:not(.kiln-no-overlay-header) #masthead.masthead .book-btn,
  body:not(.kiln-no-overlay-header) #masthead.masthead .j-toggle-off-canvas svg path{ transition:none; }
}

/* ===== block 21 id="kiln-hero-cta-glass" ===== */

/* Kiln - hero CTA, liquid glass. Mirrors the floating bottom bar (.knb__tour) but at a
   lower alpha and a wider blur: the bar sits on a light page, the hero sits on dark
   video, so the identical values read as a solid button there. Excludes
   .te-apply-btn--alt (Plano cream Inquire), which keeps its own cream treatment. */
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn:not(.te-apply-btn--alt),
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn{
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(27,41,32,.6) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),inset 0 -1px 0 rgba(255,255,255,.12),0 6px 20px rgba(12,22,16,.3) !important;
  transition:background .28s, box-shadow .28s}
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn:not(.te-apply-btn--alt):hover,
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn:not(.te-apply-btn--alt):focus-visible,
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn:hover,
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn:focus-visible{
  background:rgba(27,41,32,.74) !important}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn:not(.te-apply-btn--alt),
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn{background:#1b2920 !important}}
@media (prefers-reduced-transparency:reduce){
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn:not(.te-apply-btn--alt),
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn{background:#1b2920 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}}

/* ===== block 22 id="kiln-me-inquire-cream" ===== */

/* Kiln - Meetings & Events: the Inquire CTA reads as the cream secondary, matching the
   Plano hero and its floating bar. Covers both the hero button and the fixed bottom
   frame. The bar button carries no modifier class of its own, so it is matched on its
   href (the Inquire popup) - if that popup id ever changes, update this selector. */
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn--alt,
.knb a.knb__btn[href="#boxzilla-8026"]{
  background:rgba(254,246,242,.72) !important;
  color:#1b2920 !important;
  border:1px solid rgba(255,255,255,.52) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.24),0 5px 16px rgba(12,22,16,.2) !important}
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn--alt:hover,
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn--alt:focus-visible,
.knb a.knb__btn[href="#boxzilla-8026"]:hover,
.knb a.knb__btn[href="#boxzilla-8026"]:focus-visible{
  background:rgba(254,246,242,.85) !important}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn--alt,
.knb a.knb__btn[href="#boxzilla-8026"]{background:#fef6f2 !important}}
@media (prefers-reduced-transparency:reduce){
.kiln-vc-image-hero .kiln-hero-btns a.kiln-hero-btn--alt,
.knb a.knb__btn[href="#boxzilla-8026"]{background:#fef6f2 !important}}

/* ===== block 23 id="kiln-nav-weight" ===== */

/* Kiln - desktop nav links at Martel 400, matching the mobile menu which was already 400.
   The theme sets 700 via a shared rule (.has-alt-strong-font-style, .footer__nav ul li a,
   .masthead__main-menu ul.menu li a, ...) with no !important. This is scoped to the masthead
   main menu only, so the footer nav and blog menu keep 700. Hover / current-item states are
   styled by colour, not weight, so nothing else is affected.
   Martel 400 is already self-hosted and already downloaded on every page - no new request. */
.masthead .masthead__main-menu ul.menu li a{font-weight:400 !important}

/* ===== block 24 id="kiln-nav-cta-glass" ===== */

/* Kiln - nav "Book a Tour" in transparent (over-hero) mode: forest-green frosted glass
   instead of cream, so it reads as the same button as every other CTA on the site. It
   fades to solid forest green on hover / focus / once the header is solid - the blur is
   kept on that state rather than set to none, because backdrop-filter cannot interpolate
   to "none" and the fade would snap. A small arrow fades in on hover, positioned inside
   the existing 30px right padding so the button never changes width (the nav row is
   justify-content:flex-end, so any growth would shift the whole menu left). */
html body:not(.kiln-no-overlay-header) #masthead.masthead .book-btn{
  position:relative;
  background-color:rgba(27,41,32,.55);
  border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.08)}
html body:not(.kiln-no-overlay-header) #masthead.masthead .masthead__main-menu ul.menu li a.btn.book-btn{color:#fbf6f0 !important}
html body:not(.kiln-no-overlay-header) #masthead.masthead:hover .book-btn,
html body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .book-btn,
html body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .book-btn{
  background-color:rgb(27,41,32);
  border-color:rgb(27,41,32);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.08);
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.08)}
html body:not(.kiln-no-overlay-header) #masthead.masthead:hover .masthead__main-menu ul.menu li a.btn.book-btn,
html body:not(.kiln-no-overlay-header) #masthead.masthead:has(:focus-visible) .masthead__main-menu ul.menu li a.btn.book-btn,
html body:not(.kiln-no-overlay-header) #masthead.masthead.is-solid .masthead__main-menu ul.menu li a.btn.book-btn{color:#fbf6f0 !important}
#masthead .masthead__main-menu ul.menu li a.btn.book-btn::after{
  content:"\2192";
  display:block !important;
  position:absolute;right:14px;top:50%;
  transform:translate(-5px,-50%);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1)}
#masthead .masthead__main-menu ul.menu li a.btn.book-btn:hover::after,
#masthead .masthead__main-menu ul.menu li a.btn.book-btn:focus-visible::after{opacity:1;transform:translate(0,-50%)}

/* Widen a touch to the right on hover so the arrow is not cramped. padding-right grows and
   margin-right shrinks by the same 12px, so the button's MARGIN box never changes - the nav
   row is justify-content:flex-end, so any real growth would shove the whole menu left. The
   extra 12px lands exactly on the header grid column's padding edge, so nothing overflows. */
#masthead .masthead__main-menu ul.menu li a.btn.book-btn{
  transition:background-color .28s, border-color .28s, color .28s,
             backdrop-filter .28s, -webkit-backdrop-filter .28s,
             padding-right .28s cubic-bezier(.4,0,.2,1),
             margin-right .28s cubic-bezier(.4,0,.2,1)}
#masthead .masthead__main-menu ul.menu li a.btn.book-btn:hover,
#masthead .masthead__main-menu ul.menu li a.btn.book-btn:focus-visible{padding-right:42px !important;margin-right:-12px}

/* ===== block 25 id="kiln-nav-compact" ===== */

/* Kiln - trim the top nav: the logo and the Book a Tour button are each 10% shorter, which
   takes the bar from 72px to 67.2px.
   - The LOGO is what sets the bar height: .masthead__branding is 48px and the row adds 12px
     of padding top and bottom. 48 -> 43.2px. The img inside is height:100%;width:auto, so it
     scales on its own (92px -> 82.8px wide) and no image file changes.
   - The BUTTON's height comes from line-height (23.7px) + vertical padding + 1px borders,
     NOT from its min-height, so the padding is what has to come down: 10px -> 7.7px gives
     45.7px -> 41.1px. min-height also has to drop from 44px, or it would clamp the new
     height back up.
   --kiln-hdr-h is measured by the overlay-header script, so it follows automatically. */
#masthead .masthead__branding{height:43.2px !important}
#masthead .masthead__main-menu ul.menu li a.btn.book-btn{
  min-height:40px !important;
  padding-top:7.7px !important;
  padding-bottom:7.7px !important}

/* ===== block 26 id="kiln-hero-cta-alt" ===== */

/* Kiln - the cream secondary for hero CTA rows. The site-wide green glass rule excludes
   .te-apply-btn--alt with :not(), so this is what gives that class its own look: the same
   translucent cream as the floating bottom bar, with the heroes' wider blur. Lives here
   rather than on one page so any hero can use a secondary button. Plano carries an
   identical page-level copy from before this existed - harmless, same values. */
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn--alt{
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(254,246,242,.72) !important;
  color:#1b2920 !important;
  border:1px solid rgba(255,255,255,.52) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.24),0 5px 16px rgba(12,22,16,.2) !important;
  transition:background .28s, box-shadow .28s}
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn--alt:hover,
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn--alt:focus-visible{background:rgba(254,246,242,.85) !important}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn--alt{background:#fef6f2 !important}}
@media (prefers-reduced-transparency:reduce){
.kiln-vc-image-hero .te-btn-wrap a.te-apply-btn--alt{background:#fef6f2 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}}

/* ===== block 27 id="kiln-reduced-motion" ===== */

/* The theme sets html{scroll-behavior:smooth} with no guard, so in-page anchors (the
   homepage hero Find Your Location button, among others) animate even for visitors who
   have asked their OS for reduced motion. Honour that preference and jump instead. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto !important}}

/* ===== block 28 id="kiln-hero-needs" ===== */

.kiln-vc-image-hero .te-btn-wrap.khn-wrap,
.kiln-vc-image-hero .kiln-hero-btns.khn-wrap{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.kiln-vc-image-hero .khn-wrap > a{margin:0 !important}
.khn{position:relative;display:inline-flex}
.khn__btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:"Kontrapunkt Miki",-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;font-weight:400;line-height:normal;
  padding:15px 30px;border-radius:12px;color:#1b2920;
  background:rgba(254,246,242,.72);border:1px solid rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.24),0 5px 16px rgba(12,22,16,.2);
  transition:background .24s ease,box-shadow .24s ease}
.khn__btn:hover,.khn__btn[aria-expanded="true"]{background:rgba(254,246,242,.88)}
.khn__chev{width:10px;height:10px;border:solid #1b2920;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .24s ease}
.khn__btn[aria-expanded="true"] .khn__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.khn__menu{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:290px;padding:8px;border-radius:18px;z-index:60;
  background:rgba(254,246,242,.94);border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.8) brightness(1.06);backdrop-filter:blur(26px) saturate(1.8) brightness(1.06);
  box-shadow:0 18px 50px rgba(12,22,16,.34),inset 0 1px 0 rgba(255,255,255,.72);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .24s cubic-bezier(.4,0,.2,1),visibility .2s}
.khn.is-open .khn__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.khn__menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-radius:12px;color:#14211a;font-size:15px;font-weight:400;
  text-decoration:none;white-space:nowrap;transition:background .18s ease}
.khn__menu a:hover{background:rgba(27,41,32,.08)}
/* the theme appends a decorative arrow to links via ::after; the cloned items already carry
   their own <i> arrow, so without this every row shows two. */
.khn__menu a::after,.khn__menu a::before{content:none !important}
.khn__menu a i{font-style:normal;opacity:.55}
@media (max-width:767px){
  /* The hero button is the only .khn on the site - the floating bar uses #knb* ids - so
     this block is hero-only. It used to set width:100% here, carried over from the
     floating bar where full width is correct. In the hero that rendered a full-bleed
     block beside a shrink-to-fit Book a Tour. Intrinsic width matches the sibling
     button; the flex row wraps it onto its own centred line when it does not fit. */
  .khn,.khn__btn{width:auto;justify-content:center}
  .khn__menu{min-width:100%;width:max-content;max-width:calc(100vw - 24px)}

  /* Stack the two hero CTAs and match their widths. width:max-content sizes the column
     to its widest child - the Need Something Today button - and align-items:stretch
     pulls Book a Tour out to meet it. No pixel width is hard-coded, so if either label
     changes the pair stays matched. Scoped to .khn-wrap, so hero rows without this
     button (plano, woodinville, anaheim ...) keep sitting side by side as they do now.
     flex:1 1 auto on the inner button covers the case where Book a Tour is the wider of
     the two: .khn then stretches, and its button grows to fill it rather than sitting
     narrow inside a wide box. Growing is used rather than width:100% because the button
     is content-box - a 100% width would add its 60px of padding on top and overflow. */
  .kiln-vc-image-hero .te-btn-wrap.khn-wrap{
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
  }
  .kiln-vc-image-hero .te-btn-wrap.khn-wrap > a.te-apply-btn{text-align:center}
  .kiln-vc-image-hero .te-btn-wrap.khn-wrap .khn__btn{flex:1 1 auto}
}
  /* Height parity with the hero's Book a Tour: .te-apply-btn inherits the theme line-height,
     the khn button did not, leaving it ~9px shorter than the button beside it. */
  .kiln-vc-image-hero .te-btn-wrap.khn-wrap .khn__btn{line-height:inherit}
@media (prefers-reduced-motion:reduce){
  .khn__menu,.khn__chev,.khn__btn{transition:none !important}
}

/* ===== block 29 id="kiln-hero-fullscreen" ===== */

/* FULL-SCREEN HERO - sitewide. This block is the ONLY place hero height is set.

   What it supersedes: the plugin stylesheet (public.css) sets
   .kiln-vc-image-hero__container min-height from --kiln-mobile-height, then
   --kiln-tablet-height at 768px, then --kiln-desktop-height at 1000px. Those three
   selectors are one class deep; the rules below are three, so they win at every
   breakpoint on specificity alone - no !important, and no dependence on load order.
   The shortcode min_height_desktop/tablet/mobile attributes stay in the markup as the
   fallback if this block is ever removed. Nothing else on the site sets a height on
   the hero container (audited 6 Oct 2026 across all 110 pages).

   --kiln-hero-pad mirrors the overlay-header padding rule further up this snippet
   exactly. That rule makes the container content-box with padding-top:var(--kiln-hdr-h,72px),
   so rendered height = min-height + that padding, which is why it is subtracted here.
   Where the padding rule does not apply - no overlay header, or a hero outside
   .site-content__main - the pad stays 0px and nothing is subtracted, so the hero is
   exactly one viewport either way. Keep the two selectors in sync.

   svh is the SMALL viewport: the viewport with mobile browser chrome showing. Nothing
   hides under a phone address bar, and unlike dvh the hero does not resize while that
   bar collapses mid-scroll, so there is no stutter. Plain vh is the fallback for
   browsers without svh; both are clamped identically so behaviour does not change
   between them.

   Floor 520px so landscape phones do not clip the hero CTAs. There is deliberately no
   ceiling. A cap shipped first and left a slice of the next section showing on any
   viewport taller than 967px - a full-screen laptop at 1512x1050 showed 83px of it.
   Anthony asked for exactly the visitor's full height, so the hero tracks the viewport
   at every size. If a ceiling is ever wanted back, make these max() into clamp().

   page-id-2840 (/home-no-videos/) is excluded - Anthony asked for that page to stay
   out of the hero rollouts. It keeps its own 990/600/500 shortcode heights. */
body:not(.page-id-2840) .kiln-vc-image-hero .kiln-vc-image-hero__container{
  --kiln-hero-pad:0px;
  min-height:max(520px, calc(100vh - var(--kiln-hero-pad) - var(--wp-admin--admin-bar--height, 0px)));
}
body:not(.kiln-no-overlay-header):not(.page-id-2840):has(.site-content__main .kiln-vc-image-hero) .kiln-vc-image-hero__container{
  --kiln-hero-pad:var(--kiln-hdr-h, 72px);
}
@supports (height:100svh){
  body:not(.page-id-2840) .kiln-vc-image-hero .kiln-vc-image-hero__container{
    min-height:max(520px, calc(100svh - var(--kiln-hero-pad) - var(--wp-admin--admin-bar--height, 0px)));
  }
}

/* DAYBREAK (page 6201) builds its own hero instead of using [kiln_vc_image_hero] - a bespoke
   .kd2-hero block - so the rules above cannot reach it and it was the one location page the
   6 Oct full-screen rollout missed. Audited 7 Oct: it is the only community landing page on
   the site without the shortcode hero.

   Its geometry is different in two ways, so the maths is simpler, not the same:
     - .kd2-hero is border-box, so its padding (48px top / 42px bottom) is already inside any
       height we set. Nothing to add back.
     - it sits BELOW the fixed header rather than underneath it. That page zeroes
       .site-content__area padding-top itself, so the hero starts at exactly the header
       height. One subtraction and it ends at the fold.
   Hence --kiln-hero-pad is deliberately NOT used here - that variable describes the shortcode
   hero's content-box padding, which .kd2-hero does not have.

   Selector is body-scoped so it outranks the page's own in-body .kd2-hero rules, which set no
   min-height today. Floor 520px and the absent ceiling both match the rule above. */
body .kd2-hero{min-height:max(520px, calc(100vh - var(--wp-admin--admin-bar--height, 0px)))}
@supports (height:100svh){
  body .kd2-hero{min-height:max(520px, calc(100svh - var(--wp-admin--admin-bar--height, 0px)))}
}

/* ===== block 30 id="kiln-float-stack" ===== */

/* Kiln - mobile floating stack order (17 Oct 2026)
   Each page carries its own inline <style id="knb-styles"> with
   @media(max-width:767px){.knb{bottom:78px}} - 48 copies site-wide.
   This brings the glass CTA bar down so the accessiBe launcher and the
   Uniti chat bubble sit ABOVE it. !important is required because the
   per-page block is inline in the body and would otherwise win. */
@media (max-width: 767px){
  .knb{bottom:14px !important}
  .kaff-knb{bottom:14px !important}
}