/* Phone homepage, shorter (owner, Nov 8 2026: "add that layout its beautiful", previews/phone-home-ideas.html). Loaded only up
   to 700px, after home-phone.css. Keeps the opening photo, the Furniture photo and Customer favorites; the facts, the "What are
   you looking for?" grid, one review, projects & videos in one row, the forest in two lines and a compact contact card (the
   .p3 blocks in home_full.twig) take the place of the long chapters, which phones skip (.p3-old). Desktop never loads this. */
.fh .p3 { display: block; }
.fh .p3-old, .fh .fh-hero .fh-cap > p, .fh .fh-hero .fh-houzz, .fh .fp-furn .fh-cap > p, body.fh-page .frv2 .trio, body.fh-page [data-for-trio] { display: none !important; }

/* the opening photo: the title, then two full buttons one under the other */
.fh .fh-hero h1.fh-serif { top: calc(var(--H) - 150px - 2.14 * var(--hl)); }
.fh .fh-hero .fh-links { top: calc(var(--H) - 140px); flex-direction: column; gap: 8px; padding-inline: 20px; }
.fh .fh-hero .fh-links .fh-lk { flex: none; width: 100%; justify-content: center; min-height: 48px; padding: 0 12px; font-size: 12px; letter-spacing: .16em; }
.fh .fh-hero .fh-links .fh-lk + .fh-lk { background: transparent; border: 1px solid #fff; color: #fff; }
.fh .fh-hero { --bt: 60%; --ba: .92; }
.fh .fp-desk { display: none; }
.fh .fh-hero .fh-cap { padding-bottom: 0; }
.fh .fp-a { padding-bottom: 0; background: #F3F3ED; }

/* four facts in two columns */
.p3-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 22px 18px; background: #F3F3ED; text-align: center; }
.p3-facts div { font: 600 9.5px/1.35 'Figtree', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5C695E; }
.p3-facts div:nth-child(odd) { border-right: 1px solid #DCE0D5; }
.p3-facts b { display: block; margin-bottom: 4px; font: 500 30px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; text-transform: none; color: #1E2B20; }

/* what are you looking for: photo tiles, two across */
.p3-find { background: #fff; padding-top: 22px; }
.p3 h2 { margin: 0 18px 12px; font: 500 29px/1.08 'Cormorant Garamond', Georgia, serif; color: #1E2B20; text-wrap: balance; }
.p3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.p3-grid a { position: relative; display: block; aspect-ratio: 3 / 2.3; overflow: hidden; color: #fff; background: #E4E6DE; }
.p3-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p3-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, 0) 48%, rgba(14, 20, 16, .74)); }
.p3-grid span { position: absolute; z-index: 1; left: 11px; bottom: 9px; font: 500 21px/1 'Cormorant Garamond', Georgia, serif; }
.p3-grid small { display: block; margin-top: 4px; font: 600 9.5px 'Figtree', system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; opacity: .92; }

/* one review */
.p3-review { padding: 30px 26px 28px; background: #F3F3ED; text-align: center; color: #1E2B20; }
.p3-review .p3-stars { color: #53754B; letter-spacing: .24em; font-size: 15px; }
.p3-review blockquote { margin: 10px 0 12px; font: 500 23px/1.22 'Cormorant Garamond', Georgia, serif; text-wrap: balance; }
.p3-review p { margin: 0; font-size: 13px; color: #5C695E; }
.p3-review a { color: #53754B; font-weight: 600; text-decoration: underline; }

/* projects & videos: one swipe row */
.p3-stories { padding: 24px 0 26px; background: #F3F3ED; }
.p3-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px; scroll-padding: 0 18px; scrollbar-width: none; }
.p3-row::-webkit-scrollbar { display: none; }
.p3-row a { position: relative; flex: 0 0 80%; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; color: #fff; scroll-snap-align: start; background: #333; }
.p3-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p3-row a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, 0) 45%, rgba(14, 20, 16, .76)); }
.p3-row span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; font: 500 20px/1.08 'Cormorant Garamond', Georgia, serif; }
.p3-row em { display: block; margin-bottom: 4px; font: 600 9.5px 'Figtree', system-ui, sans-serif; font-style: normal; letter-spacing: .15em; text-transform: uppercase; }
.p3-links { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font: 600 11px 'Figtree', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.p3-links a { color: #53754B; text-decoration: underline; }

/* the forest and the contact card, on the dark green */
.p3-dark { padding: 28px 20px; background: #1F2B22; color: #E8ECE4; text-align: center; }
.p3-dark + .p3-dark { border-top: 1px solid #2E3A30; }
.p3-dark .p3-caps { font: 600 10px 'Figtree', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #A9C79A; }
.p3-dark h2 { margin: 8px 0 10px; color: #fff; }
.p3-dark p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #C9D2C7; }
.p3-dark p a { color: #fff; text-decoration: underline; }
.p3-ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.p3-ways a { display: grid; justify-items: center; gap: 6px; padding: 12px 2px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; color: #A9C79A; font: 600 9.5px 'Figtree', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.p3-ways svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p3-btn { display: flex; justify-content: center; align-items: center; min-height: 50px; background: #53754B; color: #fff; font: 600 12px 'Figtree', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }