/* Fonts used inside the concept websites (SIL OFL) */
@font-face { font-family: "DM Sans"; font-weight: 400 700; font-display: swap; src: url(../fonts/dm-sans-400_700.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url(../fonts/dm-serif-display-400.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400 900; font-stretch: 75% 125%; font-display: swap; src: url(../fonts/archivo-400_900.woff2) format("woff2"); }
/* Device frames + four concept websites (fictional businesses). Sizes use cqw so each site scales with its screen. */
.browser { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 50px 80px -40px rgba(20,35,28,.5), 0 0 0 1px rgba(20,35,28,.14); }
.browser .bar { height: 30px; background: #E9EBE6; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #D5DAD3; }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #C3CAC1; }
.browser .url { margin-left: 12px; flex: 0 1 280px; height: 18px; background: #fff; border-radius: 5px; font: 11px/18px ui-monospace, Menlo, monospace; color: #56625B; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.screen { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; transition: opacity .15s ease; }
.browser .screen { aspect-ratio: 16 / 10; }
.phone { background: #14231C; border-radius: 36px; padding: 7px; box-shadow: 0 40px 60px -25px rgba(20,35,28,.6); }
.phone .screen { aspect-ratio: 9 / 19; border-radius: 29px; }
.phone .screen::before { content: ""; position: absolute; z-index: 5; top: 7px; left: 50%; width: 30%; height: 15px; transform: translateX(-50%); background: #14231C; border-radius: 10px; }
.screen[data-scroll] { cursor: ns-resize; }
.screen .site { transition: transform 4.5s cubic-bezier(.45, 0, .25, 1); }

.site { font-size: 1.2cqw; line-height: 1.4; min-height: 100%; }
.phone .site { font-size: 4.4cqw; }
.site svg { display: block; width: 100%; height: 100%; }
.site i { font-style: normal; }
.site figure { margin: 0; }
.burger { display: none; width: 1.4em; height: .9em; border-block: 2px solid currentColor; position: relative; flex: none; }
.burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.phone .burger { display: block; }
.callbar { display: none; }
.phone .callbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5em; position: absolute; z-index: 4; left: .9em; right: .9em; bottom: .9em; }
.phone .callbar span { text-align: center; padding: .9em 0; font-weight: 700; font-size: .88em; box-shadow: 0 .4em 1.4em rgba(0,0,0,.2); }

/* ---------- Oakline: photo-led hero with an estimate form, serif ---------- */
.x-oak { background: #F6F3EA; color: #1D2B22; font-family: "DM Sans", sans-serif; }
.x-oak h4, .x-oak h5, .x-oak .o-logo, .x-oak .o-form b, .x-oak .o-foot b { font-family: "DM Serif Display", serif; font-weight: 400; }
.o-hero { position: relative; height: 47cqw; color: #fff; display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 3em; padding: 0 3em 3em; }
.o-art { position: absolute; inset: 0; }
.o-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,30,21,.55), rgba(16,30,21,0) 28%, rgba(16,30,21,.2) 50%, rgba(16,30,21,.78)); }
.o-nav { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 2.4em; padding: 1.6em 3em; z-index: 1; }
.o-logo { font-size: 1.8em; margin-right: auto; }
.o-links { display: flex; gap: 2em; font-size: .9em; }
.o-tel { font-weight: 700; font-size: .9em; border: 1.5px solid rgba(255,255,255,.7); padding: .5em 1em; border-radius: 99px; }
.o-copy { position: relative; z-index: 1; }
.o-kick { display: block; font-size: .78em; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.o-copy h4 { font-size: 4em; line-height: .98; margin: .2em 0 .3em; letter-spacing: -.01em; }
.o-copy p { font-size: 1.05em; max-width: 26em; opacity: .92; }
.o-form { position: relative; z-index: 1; background: #F6F3EA; color: #1D2B22; padding: 1.6em; border-radius: .8em; display: grid; gap: .7em; box-shadow: 0 1em 3em rgba(0,0,0,.25); }
.o-form b { font-size: 1.5em; }
.o-form label { font-size: .75em; font-weight: 700; display: grid; gap: .3em; }
.o-form label i { height: 2.6em; background: #fff; border: 1px solid #CFCBBE; border-radius: .4em; display: flex; align-items: center; padding: 0 .8em; font-weight: 400; }
.o-btn { background: #2F5D3A; color: #fff; text-align: center; padding: .9em; border-radius: 99px; font-weight: 700; font-size: .9em; }
.o-form small { font-size: .72em; opacity: .7; text-align: center; }
.o-band { background: #2F5D3A; color: #E8EFE3; padding: .9em 3em; font-size: .85em; }
.o-rows { padding: 3em; display: grid; gap: 2.4em; }
.o-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; }
.o-row.flip .o-img { order: 2; }
.o-img { aspect-ratio: 3 / 2; border-radius: .8em; overflow: hidden; }
.o-row .o-kick { color: #3B6326; opacity: 1; }
.o-row h5 { font-size: 2.4em; line-height: 1.05; margin: .25em 0 .4em; }
.o-row p { opacity: .8; max-width: 24em; }
.o-row em { display: inline-block; margin-top: 1em; font-style: normal; font-weight: 700; border-bottom: 2px solid #2F5D3A; font-size: .9em; }
.o-gal { padding: 0 3em 3em; }
.o-gal h5 { font-size: 2.2em; margin-bottom: .6em; }
.o-gal > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1em; }
.o-gal figure > svg { aspect-ratio: 1; border-radius: .8em; overflow: hidden; }
.o-gal figcaption { font-size: .75em; margin-top: .5em; opacity: .75; }
.o-foot { background: #1D2B22; color: #D9E2D3; padding: 2.4em 3em; display: grid; gap: .3em; font-size: .8em; }
.o-foot b { font-size: 1.8em; color: #fff; }
.x-oak .callbar span { background: #fff; color: #1D2B22; border-radius: 99px; }
.x-oak .callbar span + span { background: #2F5D3A; color: #fff; }
.phone .o-hero { height: auto; grid-template-columns: 1fr; padding: 12em 1.3em 1.3em; gap: 1.2em; }
.phone .o-art { height: 26em; }
.phone .o-art::after { background: linear-gradient(180deg, rgba(16,30,21,.5), rgba(16,30,21,0) 25%, rgba(16,30,21,.82) 52%, #1D2B22 100%); }
.phone .o-nav { padding: 2.8em 1.3em 1em; }
.phone .o-links, .phone .o-tel { display: none; }
.phone .o-copy h4 { font-size: 2.6em; }
.phone .o-copy p { font-size: .95em; }
.phone .o-form { padding: 1.2em; }
.phone .o-band { padding: .9em 1.3em; }
.phone .o-rows { padding: 1.6em 1.3em; gap: 1.6em; }
.phone .o-row { grid-template-columns: 1fr; gap: .8em; }
.phone .o-row.flip .o-img { order: 0; }
.phone .o-row h5 { font-size: 1.6em; }
.phone .o-gal { padding: 0 1.3em 1.6em; }
.phone .o-gal > div { grid-template-columns: 1fr 1fr; }
.phone .o-gal figure:first-child { grid-column: 1 / -1; }
.phone .o-foot { padding: 1.6em 1.3em 6.5em; }

/* ---------- Brightway: booking-widget hero, rounded, airy ---------- */
.x-bright { background: #fff; color: #0E2A33; font-family: "DM Sans", sans-serif; }
.b-nav { display: flex; align-items: center; gap: 2.4em; padding: 1.4em 3em; }
.b-logo { display: flex; align-items: center; gap: .5em; font-size: 1.4em; font-weight: 700; margin-right: auto; }
.b-logo i { width: 1.2em; height: 1.2em; border-radius: .4em; background: #0E7C86; box-shadow: inset 0 0 0 .3em #8FD3D1; }
.b-links { display: flex; gap: 2em; font-size: .9em; opacity: .75; }
.b-pill { background: #0E7C86; color: #fff; padding: .7em 1.4em; border-radius: 99px; font-weight: 700; font-size: .9em; }
.b-hero { text-align: center; padding: 2.6em 3em 3.4em; background: radial-gradient(60% 80% at 50% 0%, #E2F4F3, #fff 70%); }
.b-badge { display: inline-block; background: #fff; border: 1px solid #CDE7E6; border-radius: 99px; padding: .4em 1em; font-size: .8em; font-weight: 700; color: #0E7C86; }
.b-hero h4 { font-size: 3.6em; line-height: 1.02; letter-spacing: -.03em; margin: .4em auto .3em; max-width: 13em; font-weight: 700; }
.b-hero p { opacity: .75; }
.b-widget { margin: 2em auto 0; max-width: 46em; background: #fff; border-radius: 1.4em; box-shadow: 0 1.2em 3em rgba(14,42,51,.12), 0 0 0 1px #E3EEEE; padding: 1.4em; display: grid; gap: 1em; text-align: left; }
.b-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #EEF6F6; border-radius: 99px; padding: .3em; font-size: .85em; font-weight: 700; text-align: center; }
.b-tabs i { padding: .6em; border-radius: 99px; }
.b-tabs .on { background: #fff; box-shadow: 0 .2em .6em rgba(14,42,51,.12); }
.b-opts { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .8em; }
.b-opts span { border: 1px solid #DCEAEA; border-radius: .8em; padding: .6em .9em; font-size: .75em; opacity: .9; }
.b-opts b { display: block; font-size: 1.4em; }
.b-dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5em; }
.b-dates i { border: 1px solid #DCEAEA; border-radius: .8em; text-align: center; padding: .5em; font-size: .75em; }
.b-dates b { display: block; font-size: 1.5em; }
.b-dates .on { background: #0E2A33; color: #fff; border-color: #0E2A33; }
.b-cta { background: #0E7C86; color: #fff; text-align: center; border-radius: 99px; padding: .9em; font-weight: 700; }
.b-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; padding: 0 3em 3em; }
.b-cards div { border-radius: 1.2em; background: #F3F9F9; padding: 1.6em; }
.b-cards svg { width: 2.2em; height: 2.2em; color: #0E7C86; margin-bottom: .8em; }
.b-cards b { display: block; font-size: 1.2em; }
.b-cards small { font-size: .85em; opacity: .75; }
.b-incl { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3em; padding: 0 3em 3em; align-items: center; }
.b-incl h5 { font-size: 2.2em; letter-spacing: -.02em; margin-bottom: .6em; }
.b-incl ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6em 1.6em; font-size: .9em; }
.b-incl li::before { content: "✓ "; color: #0E7C86; font-weight: 700; }
.b-room { aspect-ratio: 4 / 3; border-radius: 1.6em; overflow: hidden; }
.b-faq { padding: 0 3em 3em; }
.b-faq h5 { font-size: 2em; margin-bottom: .4em; }
.b-faq p { display: flex; justify-content: space-between; padding: 1em 0; border-bottom: 1px solid #E3EEEE; font-weight: 700; }
.b-faq p i { color: #0E7C86; font-size: 1.3em; }
.b-foot { background: #F3F9F9; padding: 2em 3em; display: grid; gap: .3em; font-size: .8em; }
.b-foot b { font-size: 1.4em; }
.x-bright .callbar span { background: #fff; color: #0E2A33; border-radius: .7em; }
.x-bright .callbar span + span { background: #0E7C86; color: #fff; }
.phone .b-nav { padding: 2.8em 1.3em 1em; }
.phone .b-links, .phone .b-pill { display: none; }
.phone .b-hero { padding: 1.4em 1.3em 2em; }
.phone .b-hero h4 { font-size: 2.3em; }
.phone .b-widget { padding: 1em; }
.phone .b-opts { grid-template-columns: 1fr 1fr; }
.phone .b-opts span:last-child { grid-column: 1 / -1; }
.phone .b-dates i:nth-child(n+5) { display: none; }
.phone .b-dates { grid-template-columns: repeat(4, 1fr); }
.phone .b-cards { grid-template-columns: 1fr; padding: 0 1.3em 1.6em; gap: .7em; }
.phone .b-incl { grid-template-columns: 1fr; padding: 0 1.3em 1.6em; gap: 1em; }
.phone .b-incl h5 { font-size: 1.6em; }
.phone .b-faq { padding: 0 1.3em 1.6em; }
.phone .b-foot { padding: 1.6em 1.3em 6.5em; }

/* ---------- Tenpenny: dark, condensed, list-led "job board" hero ---------- */
.x-ten { background: #121D2A; color: #F3EEE4; font-family: Archivo, sans-serif; }
.x-ten h4, .x-ten h5, .t-logo, .t-btn, .t-links, .t-board b { font-stretch: 75%; text-transform: uppercase; }
.t-nav { display: flex; align-items: center; gap: 2.4em; padding: 1.3em 3em; border-bottom: 1px solid rgba(243,238,228,.12); }
.t-logo { display: flex; align-items: center; gap: .5em; font-size: 1.5em; font-weight: 900; margin-right: auto; letter-spacing: .02em; }
.t-logo i { width: 1em; height: 1em; background: #F2A93B; }
.t-links { display: flex; gap: 2em; font-size: .9em; font-weight: 700; letter-spacing: .06em; opacity: .8; }
.t-btn { background: #F2A93B; color: #121D2A; padding: .7em 1.2em; font-weight: 800; font-size: .9em; letter-spacing: .04em; }
.t-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3em; padding: 3.2em 3em; align-items: center; }
.t-kick { color: #F2A93B; font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.t-hero h4 { font-size: 5.2em; font-weight: 900; line-height: .9; margin: .2em 0 .35em; }
.t-hero p { opacity: .78; max-width: 28em; }
.t-ctas { display: flex; gap: 1.4em; align-items: center; margin-top: 1.6em; }
.t-tel { font-weight: 800; border-bottom: 2px solid #F2A93B; }
.t-board { list-style: none; border: 1px solid rgba(243,238,228,.18); }
.t-board li { display: flex; justify-content: space-between; padding: 1em 1.2em; border-bottom: 1px solid rgba(243,238,228,.12); }
.t-board li:last-child { border: 0; }
.t-board .hd { background: #F2A93B; color: #121D2A; font-weight: 800; text-transform: uppercase; font-stretch: 75%; letter-spacing: .04em; font-size: .9em; }
.t-board b { font-weight: 800; font-size: 1.15em; letter-spacing: .02em; }
.t-board span { color: #F2A93B; font-weight: 700; }
.t-plan { position: relative; height: 26cqw; }
.t-cap { position: absolute; left: 3em; bottom: 1.2em; background: #121D2A; padding: .5em .9em; font-size: .75em; letter-spacing: .05em; text-transform: uppercase; border-left: .3em solid #F2A93B; }
.t-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(243,238,228,.12); margin: 3em; border: 1px solid rgba(243,238,228,.12); }
.t-steps div { background: #121D2A; padding: 1.6em; }
.t-steps b { color: #F2A93B; font-size: 2.6em; font-weight: 900; font-stretch: 75%; line-height: 1; }
.t-steps h5 { font-size: 1.6em; font-weight: 900; margin: .3em 0; }
.t-steps p { font-size: .9em; opacity: .75; }
.t-foot { background: #0B141E; padding: 2em 3em; display: grid; gap: .3em; font-size: .8em; opacity: .9; }
.t-foot b { font-size: 1.5em; font-stretch: 75%; text-transform: uppercase; font-weight: 900; }
.x-ten .callbar span { background: #F3EEE4; color: #121D2A; }
.x-ten .callbar span + span { background: #F2A93B; }
.phone .t-nav { padding: 2.8em 1.3em 1em; }
.phone .t-links, .phone .t-nav .t-btn { display: none; }
.phone .t-hero { grid-template-columns: 1fr; padding: 1.6em 1.3em; gap: 1.4em; }
.phone .t-hero h4 { font-size: 3.4em; }
.phone .t-ctas { display: none; }
.phone .t-plan { height: 40cqw; }
.phone .t-cap { left: 1.3em; }
.phone .t-steps { grid-template-columns: 1fr; margin: 1.6em 1.3em; }
.phone .t-foot { padding: 1.6em 1.3em 6.5em; }

/* ---------- Brushline: editorial, wide type, swatch-led ---------- */
.x-paint { background: #FBF7F1; color: #2B211C; font-family: "DM Sans", sans-serif; }
.x-paint h4, .x-paint h5, .p-logo, .p-foot b { font-family: Archivo, sans-serif; font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; }
.p-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.4em 3em; border-bottom: 1px solid #E8DED2; font-size: .9em; }
.p-l, .p-r { display: flex; gap: 2em; align-items: center; }
.p-r { justify-content: flex-end; }
.p-logo { font-size: 1.6em; text-transform: uppercase; letter-spacing: .02em; }
.p-btn { background: #B5502E; color: #fff; padding: .7em 1.2em; font-weight: 700; }
.p-hero { padding: 3em 3em 2.4em; }
.p-hero h4 { font-size: 6.4em; line-height: .92; }
.p-hero h4 em { font-style: normal; color: #B5502E; }
.p-hero p { max-width: 32em; margin-top: 1em; font-size: 1.05em; opacity: .8; }
.p-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; margin-top: 2.4em; }
.p-chips i { background: #fff; padding: .5em .5em 1em; box-shadow: 0 .4em 1.2em rgba(43,33,28,.1); }
.p-chips i::before { content: ""; display: block; aspect-ratio: 4 / 3; background: var(--c); margin-bottom: .7em; }
.p-chips b { display: block; font-size: .95em; padding: 0 .4em; }
.p-chips small { display: block; font-size: .75em; opacity: .65; padding: 0 .4em; }
.p-ba { display: grid; grid-template-columns: 1fr 1fr; height: 30cqw; }
.p-ba figure { position: relative; }
.p-ba figcaption { position: absolute; top: 1em; left: 1em; background: #FBF7F1; padding: .4em .8em; font-size: .8em; font-weight: 700; }
.p-list { padding: 3em; }
.p-list h5 { font-size: 2.6em; margin-bottom: .8em; }
.p-list > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; border-top: 2px solid #2B211C; padding-top: 1.2em; }
.p-list b { display: block; font-size: 1.4em; margin-bottom: .2em; }
.p-list p { opacity: .8; font-size: .95em; }
.p-band { background: #B5502E; color: #fff; padding: 2.4em 3em; display: flex; justify-content: space-between; align-items: center; gap: 2em; }
.p-band h5 { font-size: 2em; }
.p-band .p-btn { background: #fff; color: #B5502E; }
.p-foot { padding: 2em 3em; display: grid; gap: .3em; font-size: .8em; }
.p-foot b { font-size: 1.4em; text-transform: uppercase; }
.x-paint .callbar span { background: #fff; color: #2B211C; }
.x-paint .callbar span + span { background: #B5502E; color: #fff; }
.phone .p-nav { display: flex; justify-content: space-between; padding: 2.8em 1.3em 1em; }
.phone .p-l, .phone .p-r { display: none; }
.phone .p-hero { padding: 1.6em 1.3em; }
.phone .p-hero h4 { font-size: 3em; }
.phone .p-chips { grid-template-columns: repeat(3, 1fr); gap: .6em; }
.phone .p-chips i:nth-child(n+4) { display: none; }
.phone .p-ba { height: 60cqw; }
.phone .p-list { padding: 1.6em 1.3em; }
.phone .p-list h5 { font-size: 1.8em; }
.phone .p-list > div { grid-template-columns: 1fr; gap: 1em; }
.phone .p-band { flex-direction: column; align-items: flex-start; padding: 1.6em 1.3em; }
.phone .p-band h5 { font-size: 1.5em; }
.phone .p-foot { padding: 1.6em 1.3em 6.5em; }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen .site { transition: none; }
}

/* Photography inside the concept sites */
.site .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-gal figure > .ph { aspect-ratio: 1; border-radius: .8em; height: auto; }
.o-row .o-img .ph, .b-room .ph { height: 100%; }
.b-hero { position: relative; isolation: isolate; }
.b-photo { position: absolute; inset: 0; z-index: -1; }
.b-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.55) 100%); }
.t-plan { height: 22cqw; overflow: hidden; }
.t-plan .ph { filter: saturate(.85) brightness(.8); }
.t-cap { z-index: 2; }
.t-duo { display: grid; grid-template-columns: 1fr 1fr; height: 18cqw; }
.phone .t-duo { height: 34cqw; }
.p-ba .p-before { filter: grayscale(.85) sepia(.25) brightness(.82) contrast(.9); }
.p-photo { display: grid; grid-template-columns: 1.4fr 1fr; height: 22cqw; }
.phone .p-photo { height: 46cqw; grid-template-columns: 1fr; }
.phone .p-photo .ph:last-child { display: none; }

/* First-screen photography for Tenpenny and Brushline */
.t-hero { position: relative; isolation: isolate; }
.t-photo { position: absolute; inset: 0; z-index: -1; }
.t-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,24,38,.97) 0%, rgba(14,24,38,.9) 45%, rgba(14,24,38,.6) 100%); }
.phone .t-photo::after { background: linear-gradient(180deg, rgba(14,24,38,.86), rgba(14,24,38,.97) 60%); }
.t-trust { display: grid; grid-template-columns: repeat(4, 1fr); background: #F2A93B; color: #14233A; }
.t-trust span { padding: 1.1em 1.4em; font-size: .85em; border-right: 1px solid rgba(20,35,58,.18); }
.t-trust b { display: block; font-size: 1.15em; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.phone .t-trust { grid-template-columns: 1fr 1fr; }
.phone .t-trust span { border-bottom: 1px solid rgba(20,35,58,.18); }
.p-hero { position: relative; padding-right: 47%; min-height: 31cqw; }
.p-heroimg { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
.p-heroimg span { position: absolute; left: 1em; bottom: 1em; background: #FBF7F1; padding: .4em .8em; font-size: .75em; font-weight: 700; }
.phone .p-hero { padding-right: 1.3em; padding-top: 0; min-height: 0; }
.phone .p-heroimg { position: relative; width: auto; height: 46cqw; margin: 0 -1.3em 1.4em; }
.p-hero h4 { font-size: 4.9em; }
.phone .p-hero h4 { font-size: 3em; }
.t-photo::after { background: linear-gradient(90deg, rgba(14,24,38,.97) 0%, rgba(14,24,38,.86) 45%, rgba(14,24,38,.45) 100%); }
.b-photo::after { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 45%, rgba(255,255,255,.4) 100%); }
/* Oakline: show the finished gardens, not just the roofline */
.o-art .ph { object-position: center 78%; }
.o-art::after { background: linear-gradient(180deg, rgba(16,30,21,.5), rgba(16,30,21,0) 26%, rgba(16,30,21,.08) 50%, rgba(16,30,21,.7)); }