/* Full-screen homepage (owner, Oct 26 2026: "more like the RH page, no white space, the whole screen, images not
   cropped"). Photos run edge to edge and are never cropped: each tile takes its photo's own shape (flex-grow and
   aspect-ratio = width / height), so the photos of a row share one height and the row is exactly the screen wide.
   Words sit on the photo's lower edge. Fonts are the site's own: Figtree and Cormorant Garamond 500. */
/* (owner, Oct 27 2026) the thin 3px lines between the photos stay, except at the bottom: the last photo ("Talk to an
   expert") and the footer's three tiles touch (see .trio and .fh > .fh-row:last-child) */
.fh { --fh-g: 3px; --fh-ink: #1E2B20; background: var(--fh-ink); color: #fff; }
.fh-pad { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.fh-caps { font: 500 11px/1.4 'Figtree', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.fh-serif { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.fh-lk { display: inline-block; font: 600 11px/1 'Figtree', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.fh a.fh-lk:hover, .fh a.fh-lk:focus-visible { opacity: .75; }
.fh button { font-family: inherit; }
.fh :focus-visible { outline: 2px solid #D6EBC8; outline-offset: -4px; }

/* the photo rows */
.fh-row { display: flex; gap: var(--fh-g); margin-bottom: var(--fh-g); }
.fh > .fh-row:last-child { margin-bottom: 0; }
.fh-t { position: relative; flex: var(--ar) 1 0; aspect-ratio: var(--ar); min-width: 0; overflow: hidden; background: #2A362C; display: block; color: #fff; }
.fh-t > img, .fh-t > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
a.fh-t:hover > img, a.fh-t:hover > video { transform: scale(1.03); }
.fh-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, 0) 58%, rgba(14, 20, 16, .62) 100%); pointer-events: none; }
.fh-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 22px 20px; display: grid; gap: 5px; }
.fh-cap .fh-serif { font-size: clamp(19px, 1.7vw, 27px); line-height: 1.1; }
.fh-cap .fh-caps { opacity: .92; }
.fh-price { position: absolute; z-index: 1; right: 22px; bottom: 22px; font: 500 14px 'Figtree', system-ui, sans-serif; }
.fh-fav .fh-cap { padding-right: 120px; }
.fh-fav .fh-cap .fh-serif { font-size: clamp(17px, 1.35vw, 21px); }
/* (owner, Oct 27 2026, option C) project stories: the kind and place as a small frosted tag at the top, only the
   title at the bottom on a short fade, so neither covers much of the photo */
.fh-stories .fh-t::after { background: linear-gradient(180deg, rgba(14, 20, 16, 0) 68%, rgba(14, 20, 16, .8) 100%); }
.fh-stories .fh-cap { top: 0; padding: 14px 18px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.fh-stories .fh-cap .fh-caps { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: rgba(20, 28, 22, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 10px; letter-spacing: .2em; opacity: 1; }
.fh-stories .fh-cap .fh-serif { font-size: clamp(17px, 1.3vw, 21px); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
/* a favourite holds its wishlist button beside the link (a button can't sit inside a link) */
.fh-fill { position: absolute; inset: 0; }
.fh-fill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.fh-fill:hover > img { transform: scale(1.03); }
.fh-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(14, 20, 16, .5); border: 1px solid rgba(255, 255, 255, .7); display: grid; place-items: center; transition: background .25s; }
.fh-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
a.fh-t:hover .fh-play { background: rgba(14, 20, 16, .75); }

/* Videos (owner, Oct 27): clearly the videos part. Each tile plays a short silent stretch of its video by itself once on
   screen (script in home_full.twig): the YouTube player sits under the cover photo, drawn twice as large and shrunk to fit
   so YouTube's own buttons stay small, and the cover fades away only once the clip is really playing. */
.fh-band--videos h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.fh-band-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #D6EBC8; color: #1E2B20; flex: none; }
.fh-band-ic svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.fh-band-sub { font-size: .7em; letter-spacing: .06em; opacity: .75; }
.fh-vid .fh-vid-yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000; }
.fh-vid .fh-vid-yt > * { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; }
/* a tile that is not 16:9 (Garden Smart, 3:2): the player covers it, so the video's own side bars fall outside */
.fh-vid:not([style*="1.7778"]) .fh-vid-yt > * { width: calc(200% * 1.7778 / var(--ar)); left: calc(50% - 100% * 1.7778 / var(--ar) / 2); }
.fh-bare::after { display: none; }
.fh-vid > img { z-index: 0; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.fh-vid.is-playing > img { opacity: 0; }
.fh-vid::after { z-index: 0; background: linear-gradient(180deg, rgba(14, 20, 16, .28) 0%, rgba(14, 20, 16, 0) 22%, rgba(14, 20, 16, 0) 42%, rgba(14, 20, 16, .78) 100%); }
.fh-vid-tag { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(14, 20, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 11px/1 'Figtree', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.fh-vid-tag svg { width: 11px; height: 11px; fill: #D6EBC8; }
.fh-vid .fh-play { z-index: 2; transition: opacity .6s ease, background .25s; }
.fh-vid.is-playing .fh-play { opacity: 0; }
.fh-vid:hover .fh-play, .fh-vid:focus-visible .fh-play { opacity: 1; }
.fh-vid .fh-cap { z-index: 2; }
.fh-vid-more { margin-top: 2px; font: 600 11px/1 'Figtree', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .85; display: inline-flex; align-items: center; gap: 8px; }
.fh-vid-more::before { content: ""; width: 18px; height: 1px; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .fh-vid > img { transition: none; } }

/* chapter photos: one photo the full width, the words centred on it */
.fh-big .fh-cap { text-align: center; justify-items: center; gap: 12px; padding-bottom: 6vh; }
.fh-big::after { background: linear-gradient(180deg, rgba(14, 20, 16, .38) 0%, rgba(14, 20, 16, 0) 22%, rgba(14, 20, 16, 0) 50%, rgba(14, 20, 16, .68) 100%); }
.fh-big .fh-serif { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.04; max-width: 18em; }
.fh-big p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.55; opacity: .92; }
.fh-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 4px; }
.fh-credit { position: absolute; z-index: 1; right: 22px; bottom: 20px; opacity: .85; }
.fh-houzz { position: absolute; z-index: 1; left: 22px; bottom: 20px; opacity: .85; }
.fh-credit:hover, .fh-houzz:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.fh-hero .fh-cap { padding-bottom: 8vh; }
/* (owner, Oct 27 2026) the photo is taller than most screens, so its words sit on the bottom of the screen, not of the
   photo: the heading, the line and both links read on first open */
@media (min-width: 901px) {
  .fh-hero .fh-cap { bottom: max(0px, calc(100% - 100vh)); bottom: max(0px, calc(100% - 100svh)); }
}
.fh-hero h1 em { font-style: italic; }
/* (owner, Oct 27 2026) the opening words a little bigger, with a little more room between them */
.fh-hero .fh-cap { gap: 18px; }
.fh-hero h1.fh-serif { font-size: clamp(34px, 4.1vw, 62px); }
.fh-hero .fh-cap p { font-size: 18px; max-width: 60ch; }
.fh-hero .fh-links { gap: 14px 40px; margin-top: 8px; }
.fh-hero .fh-links .fh-lk { font-size: 12px; }

/* thin bands between rows: section names, facts, questions, contact */
.fh-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 16px; margin: 0 0 var(--fh-g); }
.fh-band h2 { margin: 0; font: 500 clamp(20px, 2vw, 28px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.fh-band .fh-lks { display: flex; flex-wrap: wrap; gap: 8px 26px; }
/* "Talk to an expert" (owner, Oct 27: idea A, photo 2): a chapter photo with the words in its middle, a soft dark glow
   only behind them; the three ways on one line divided by thin rules, one light Schedule a call button */
.fh-talk::after { background: radial-gradient(ellipse 70% 62% at 50% 52%, rgba(10, 16, 12, .7) 0%, rgba(10, 16, 12, .38) 55%, rgba(10, 16, 12, .1) 100%); }
.fh-talk .fh-cap { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45); }
.fh-talk .fh-btn { text-shadow: none; }
.fh-talk .fh-cap { top: 0; display: grid; align-content: center; justify-items: center; gap: 18px; padding-block: 40px; text-align: center; }
.fh-big.fh-talk .fh-serif { font-size: clamp(32px, 4vw, 60px); line-height: 1.06; max-width: 15em; text-wrap: balance; }
.fh-talk p { margin: -4px 0 0; font-size: 17px; }
.fh-ways { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.fh-ways a { display: grid; justify-items: center; gap: 6px; padding: 4px clamp(18px, 2.6vw, 40px); }
.fh-ways a + a { border-left: 1px solid rgba(255, 255, 255, .32); }
.fh-ways b { font: 500 clamp(22px, 2vw, 28px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .03em; }
.fh-ways .fh-caps { opacity: .85; }
.fh-ways a:hover b, .fh-ways a:focus-visible b { color: #D6EBC8; }
.fh-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; margin-top: 8px; padding: 0 28px; border-radius: 2px; background: var(--paper, #F3F3ED); color: var(--fh-ink); font: 700 12px/1 'Figtree', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; transition: background .2s; }
.fh-btn:hover, .fh-btn:focus-visible { background: #D6EBC8; }
.fh-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Projects by state (owner, Oct 27: idea E, layout 3 "the photo opens up") - block 'cmap_open'. The glass button on the
   Project stories photo blurs and dims it and raises the map in its middle; lighter squares = more projects; the readout
   follows the state pointed at; a brown dot = a state with a story, whose tile below lights up while the others dim. */
.fh-mapbtn { position: absolute; z-index: 4; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(14, 20, 16, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 600 12px/1 'Figtree', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s, opacity .3s; }
.fh-mapbtn:hover { background: rgba(14, 20, 16, .6); transform: translateY(-1px); }
.fh-mapbtn-ic { display: grid; grid-template-columns: repeat(4, 5px); grid-auto-rows: 5px; gap: 1.5px; }
.fh-mapbtn-ic i { border-radius: 1px; background: #86A877; } .fh-mapbtn-ic i:nth-child(3n) { background: #E4F0D9; } .fh-mapbtn-ic i:nth-child(4n+1) { background: #4A5544; }
.fh-mapbtn-n { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .35); color: #D6EBC8; letter-spacing: .06em; }
.fh-map-open .fh-mapbtn { opacity: 0; pointer-events: none; }
.fh-t > img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.fh-map-open > img { transform: scale(1.06); filter: blur(10px) brightness(.42); }
.fh-map-open .fh-cap, .fh-map-open .fh-credit { opacity: 0; pointer-events: none; transition: opacity .3s; }
.fh-mappane { position: absolute; inset: 0; z-index: 5; display: grid; justify-items: center; align-content: center; gap: 16px; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.fh-mappane.is-open { opacity: 1; visibility: visible; }
.fh-mapclose { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .3); color: #fff; font: 400 26px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
.fh-mapclose:hover { background: rgba(0, 0, 0, .55); }
.fh-cmap { --s: clamp(26px, 2.8vw, 40px); display: grid; grid-template-columns: repeat(11, var(--s)); grid-auto-rows: var(--s); gap: 4px; }
.fh-st { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: rgba(255, 255, 255, .95); font: 700 calc(var(--s) * .31)/1 'Figtree', system-ui, sans-serif; cursor: pointer;
  opacity: 0; transform: scale(.6); transition: opacity .35s, transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .15s; transition-delay: var(--d, 0ms); }
.is-open .fh-st { opacity: 1; transform: none; }
.is-open .fh-st:hover, .is-open .fh-st:focus-visible, .is-open .fh-st.is-sel { transform: scale(1.18); z-index: 3; outline: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 0 0 2px #fff; transition-delay: 0ms; }
.fh-l0 { background: #4A5544; } .fh-l1 { background: #6B8560; } .fh-l2 { background: #86A877; } .fh-l3 { background: #B5D0A3; color: #1E2B20; } .fh-l4 { background: #E4F0D9; color: #1E2B20; }
.fh-st.has-story::after { content: ""; position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #C77D4E; border: 2px solid #fff; }
.fh-mapread { display: grid; justify-items: center; gap: 4px; text-align: center; }
.fh-mapread .fh-caps { color: #D6EBC8; }
.fh-mapread b { font: 500 clamp(44px, 4.6vw, 70px)/1 'Cormorant Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
.fh-mapread [data-r="what"] { color: #C3CCBF; font-size: 15px; }
.fh-mapread .fh-lk { margin-top: 6px; }
.fh-mapread [hidden] { display: none; }
.fh-cmap-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; color: #C3CCBF; font: 500 12.5px/1.3 'Figtree', system-ui, sans-serif; }
.fh-cmap-key i { display: inline-block; width: 64px; height: 7px; margin: 0 7px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, #4A5544, #6B8560, #86A877, #B5D0A3, #E4F0D9); }
.fh-cmap-dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; background: #C77D4E; border: 1.5px solid #fff; }
.fh-stories .fh-t { transition: opacity .3s; }
.fh-stories.fh-focus .fh-t:not(.is-story) { opacity: .35; }
.fh-stories .fh-t.is-story { outline: 3px solid #C77D4E; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .fh-st, .fh-mappane, .fh-t > img { transition: none; } }
/* The footer's three tiles (site_trio_v2.twig: reviews, the Presidential Bench, questions), on the homepage only, in the
   same style as the rows above; their words and links stay the footer's own. */
body.fh-page .frv2 .trio { display: flex; gap: 0; margin: 0; padding: 0; background: #1E2B20; }
body.fh-page .frv2 .tcard { flex: var(--ar, 1.5) 1 0; aspect-ratio: var(--ar, 1.5); min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 5px; padding: 0 22px 20px; }
body.fh-page .frv2 .tcard img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
body.fh-page .frv2 .tcard:hover img { transform: scale(1.03); }
body.fh-page .frv2 .tcard::after { display: block; background: linear-gradient(180deg, rgba(14, 20, 16, 0) 50%, rgba(14, 20, 16, .66) 100%); }
body.fh-page .frv2 .tcard small { display: block; font: 500 11px/1.4 'Figtree', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; opacity: .92; }
body.fh-page .frv2 .tcard h3 { margin: 0; max-width: none; font: 500 clamp(19px, 1.7vw, 27px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
body.fh-page .frv2 .tcard .textlink { margin-top: 4px; font: 600 11px/1 'Figtree', system-ui, sans-serif; letter-spacing: .22em; padding-bottom: 5px; }

/* The header (owner, Oct 27: header idea 6, "fading words"): it stays see-through after scrolling, with only the soft
   shade at the top so the menu reads; the page's words fade as they reach it (script in home_full.twig) and the
   photos stay sharp. It stays see-through with a menu open too (owner, Oct 27); the menus have their own white panels. */
body.fh-page .frv2 .site-header.hdr-clear.is-scrolled,
body.fh-page .frv2 .site-header.hdr-clear:focus-within,
body.fh-page .frv2 .site-header.hdr-clear.menu-open { background: linear-gradient(180deg, rgba(8, 14, 10, .62) 0%, rgba(8, 14, 10, .28) 70%, rgba(8, 14, 10, 0) 100%); box-shadow: none; }
body.fh-page .frv2 .site-header.hdr-clear.is-scrolled .hbar a,
body.fh-page .frv2 .site-header.hdr-clear.is-scrolled .hbar button { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
/* the glow is for words on the photo only, never inside the white menus */
body.fh-page .frv2 .site-header.hdr-clear .hbar .dd-panel a,
body.fh-page .frv2 .site-header.hdr-clear .hbar .dd-panel button { text-shadow: none; }

@media (prefers-reduced-motion: reduce) { body.fh-page .frv2 .tcard img { transition: none; } body.fh-page .frv2 .tcard:hover img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fh-t > img, .fh-t > video, .fh-fill > img { transition: none; } a.fh-t:hover > img, a.fh-t:hover > video, .fh-fill:hover > img { transform: none; } }
@media (max-width: 900px) {
  .fh-pad { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .fh-row { flex-wrap: wrap; }
  .fh-row .fh-t { flex: 1 1 100%; }
  .fh-row.fh-pair .fh-t { flex: 1 1 calc(50% - var(--fh-g)); }
  /* (Oct 27) favourites now have photos of different shapes: two to a line, each line's width shared by shape so both
     share one height, and never stretched taller than their shape (which would crop them) */
  .fh-row.fh-pair:not(.fh-stories) { align-items: flex-start; }
  .fh-row.fh-pair .fh-fav { flex: var(--ar) 1 0; min-width: 34%; }
  .fh-row.fh-pair.fh-stories .fh-t { flex: 1 1 100%; }
  .fh-row.fh-pair.fh-stories .fh-cap { padding: 12px 16px 16px; }
  .fh-row.fh-pair.fh-stories .fh-cap .fh-serif { font-size: 21px; }
  .fh-row.fh-pair .fh-cap { padding: 0 12px 12px; }
  .fh-row.fh-pair .fh-cap .fh-serif { font-size: 17px; }
  .fh-row.fh-pair .fh-price { position: static; display: block; margin-top: 2px; font-size: 13px; }
  .fh-fav .fh-cap { padding-right: 12px; }
  .fh-credit, .fh-houzz { display: none; }
  /* phones and tablets: the map opens as a full-screen sheet over the page */
  .fh-mappane { position: fixed; z-index: 70; padding: 70px 16px 30px; overflow-y: auto; background: rgba(14, 20, 16, .95); }
  .fh-mapclose { position: fixed; top: 18px; bottom: auto; }
  .fh-cmap { --s: min(30px, calc((100vw - 72px) / 11)); gap: 3px; }
  .fh-mapbtn { top: 12px; right: 12px; height: 38px; font-size: 11px; }
  body.fh-page .frv2 .trio { flex-wrap: wrap; }
  body.fh-page .frv2 .tcard { flex: 1 1 100%; }
}
/* phones: a chapter photo keeps its whole shape and its words go underneath it, so nothing is cropped or covered */
@media (max-width: 700px) {
  .fh-big { display: flex; flex-direction: column; aspect-ratio: auto; }
  .fh-big > img { position: static; height: auto; aspect-ratio: var(--ar); }
  .fh-big::after { display: none; }
  .fh-big .fh-cap { position: static; padding: 22px 16px 26px; background: var(--fh-ink); }
  .fh-hero { padding-top: 76px; }
  .fh-talk .fh-cap { gap: 14px; }
  .fh-ways a { padding: 6px 14px; }
  .fh-ways a + a { border-left: 0; }
  /* the photo's words sit under it on phones, so opening the map leaves them as they are */
  .fh-map-open .fh-cap { opacity: 1; pointer-events: auto; }
  .fh-map-open > img { transform: none; filter: none; }
  .fh-mapbtn { position: static; align-self: stretch; justify-content: center; height: 52px; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; background: var(--fh-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fh-map-open .fh-mapbtn { opacity: 1; }
}