/* Shared Home and About values pavilion. */
.values-pavilion{padding-block:80px;overflow-x:clip}
.values-pavilion .board-heading{margin-bottom:30px}
.pavilion-principle{text-align:center;margin:24px auto 35px}
.pavilion-principle>span{font:500 10px "Work Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8b7054}
.pavilion-principle>p{font:400 clamp(24px,2.6vw,34px)/1.4 "Playfair Display",Georgia,serif;color:#3f594b;margin:14px 0}
.pavilion-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:28px;align-items:center}
.pavilion-art{position:relative;min-width:0;isolation:isolate}
.pavilion-art img{width:100%;height:auto;display:block;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);}
.pavilion-inscription{position:absolute;left:28%;top:48%;width:9%;height:15%;display:flex;align-items:center;justify-content:center;text-align:center;font:600 clamp(11px,1.2vw,17px)/1.22 "Cormorant Garamond",Georgia,serif;color:#3c3426;text-shadow:0 1px 0 #fff5d5c9,0 -1px 0 #4d36184d;overflow-wrap:normal}
.pavilion-reading{padding:20px 0;min-width:0}
.pavilion-value h3{font-size:clamp(24px,2.5vw,31px);line-height:1.25;margin:22px 0 18px;color:#3f594b}
.pavilion-value>p{font-size:17px;line-height:1.7;color:#504c43;margin:0}
.pavilion-value .in-practice{margin-top:23px}
.pavilion-value .in-practice p{font-size:19px;line-height:1.5}
.pavilion-value[hidden],.pavilion-controls[hidden],.pavilion-choices[hidden]{display:none}
.pavilion-controls{display:flex;align-items:center;gap:18px}
.pavilion-controls button{width:44px;height:44px;border:1px solid #bca77980;border-radius:50%;background:#faf5e780;color:#5c5039;font-size:22px;cursor:pointer}
.pavilion-count{font-size:12px;color:#71634b;letter-spacing:.12em;min-width:42px;text-align:center}
.pavilion-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:28px auto 0;max-width:1000px}
.pavilion-choice{border:1px solid #a690674d;border-radius:4px 7px 3px 5px;padding:11px 16px;min-height:44px;color:#5a5344;background:#f0ebdf75;cursor:pointer;font-size:14px;transition:background .15s,color .15s}
.pavilion-choice[aria-pressed="true"]{background:#e1e8db;color:#304c3a;border-color:#7f9676;box-shadow:inset 0 -2px 0 #7f9676}
.pavilion-choice:hover,.pavilion-controls button:hover{background:#e9e1cf}
.values-pavilion button:focus-visible{outline:3px solid #825924;outline-offset:4px}

@media(max-width:1099px){.values-pavilion{padding-block:55px}.pavilion-layout{grid-template-columns:1fr;gap:0}.pavilion-art{width:min(100%,720px);margin:auto}.pavilion-inscription{font-size:clamp(10px,2.1vw,16px)}.pavilion-reading{max-width:580px;margin:0 auto;padding:20px 8px 0}.pavilion-value{text-align:center}.pavilion-controls{justify-content:center}.pavilion-value h3{margin-top:17px}.pavilion-choices{margin-top:24px;gap:8px}.pavilion-choice{font-size:13px;padding:10px 12px}.pavilion-principle>p{font-size:25px}.pavilion-principle{margin-bottom:20px}.pavilion-value>p{font-size:16px}.pavilion-value .in-practice p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.pavilion-choice{transition:none}}

.values-pavilion .pavilion-value h3{color:#3f594b!important}
.pavilion-inscription{border:0;background:transparent;padding:0;cursor:pointer;min-height:44px;overflow-wrap:anywhere}
.values-pavilion:not(.is-interactive) .pavilion-inscription{display:none}

/* Wide screens: a feathered ivory veil keeps live text readable inside the pavilion. */
@media(min-width:1100px){
 .is-interactive .pavilion-layout{position:relative;display:block}
 .is-interactive .pavilion-art{width:100%}
 .is-interactive .pavilion-reading{position:absolute;left:38%;top:43%;width:27%;padding:10px 8px;isolation:isolate;text-align:center}
 .is-interactive .pavilion-reading .pavilion-veil{content:"";position:absolute;inset:-18px -24px;z-index:-1;background:#faf6eaf2;backdrop-filter:blur(7px);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;pointer-events:none}
 .is-interactive .pavilion-controls{justify-content:center;gap:14px}
 .is-interactive .pavilion-controls button{width:36px;height:36px;font-size:20px}
 .is-interactive .pavilion-value h3{font-size:24px;line-height:1.2;margin:12px 0}
 #values-and-approach.is-interactive .pavilion-value>p{font-size:15px;line-height:1.5;color:#504c43}
 .is-interactive .pavilion-value .in-practice{margin-top:16px}
 #values-and-approach.is-interactive .pavilion-value .in-practice p{font-size:17px;line-height:1.4;margin-top:7px;color:#435a4b}
}


.pavilion-art{touch-action:pan-y}
.pavilion-inscriptions{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pavilion-stone-label{pointer-events:auto;cursor:pointer;outline:none}
.pavilion-stone-label text{font:600 24px "Cormorant Garamond",Georgia,serif;fill:#493b28;filter:drop-shadow(0 1px .3px #fff2d9);pointer-events:none}
.stone-hit{fill:transparent;stroke:transparent;stroke-width:2}

.pavilion-stone-label:focus-visible .stone-hit{stroke:#654819;stroke-width:4}
.values-pavilion:not(.is-interactive) .pavilion-inscriptions{display:none}
@media(min-width:1100px){.is-interactive .pavilion-reading{left:38%;top:43%;width:26%}}

/* Navigation belongs to the illustration; the count is always below it. */
.pavilion-layout{display:block}
.pavilion-controls{position:absolute;inset:0;pointer-events:none;display:block;z-index:3}
.pavilion-controls button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;width:44px!important;height:44px!important;background:#fcf8eeed}
.pavilion-controls [data-step="-1"]{left:0}.pavilion-controls [data-step="1"]{right:0}
.pavilion-count{display:block;margin:12px auto 0;line-height:24px;min-height:24px}
.pavilion-count[hidden]{display:none}
.stone-motion{transform-box:fill-box;transform-origin:center}
.pavilion-reading{overflow:visible}
@media(max-width:1099px){.pavilion-controls button{width:36px!important;height:44px!important}.pavilion-art{width:100%;max-width:720px}.pavilion-count{margin-top:6px}.pavilion-reading{padding-top:8px}}
@media(min-width:1100px){.is-interactive .pavilion-reading{top:43%;width:26%}.pavilion-controls button{width:48px!important;height:48px!important}}

/* Final heading hierarchy, separate nature layers and a calmer reading area. */
.values-pavilion .board-heading{max-width:none;margin-bottom:26px}
.values-pavilion .board-heading .pavilion-motto{font:400 clamp(22px,2.3vw,30px)/1.5 "Playfair Display",Georgia,serif;color:#3f594b;max-width:850px;margin-top:20px}
.pavilion-art{background:none}
.pavilion-art .pavilion-building{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,#000 88%,transparent 100%);mask-composite:intersect}
.pavilion-art .pavilion-botany{position:absolute;bottom:-1%;width:22%;height:27%;object-fit:cover;object-position:bottom;opacity:.36;pointer-events:none;z-index:1;mix-blend-mode:multiply;mask-image:linear-gradient(transparent 25%,#000 75%,transparent)}
.pavilion-botany-left{left:-2%;transform:scaleX(-1)}.pavilion-botany-right{right:-2%}
.pavilion-art .pavilion-osprey{position:absolute;width:6%;height:auto;right:4%;top:7%;opacity:.78;transform:rotate(-9deg);pointer-events:none;mask-image:none;z-index:1}
.pavilion-inscriptions{z-index:2}.pavilion-reading{z-index:2}
@media(min-width:1100px){.is-interactive .pavilion-reading{left:37.4%;top:43%;width:27%;padding:8px 6px}.is-interactive .pavilion-value h3{margin:0 0 14px;font-size:24px}#values-and-approach.is-interactive .pavilion-value>p{font-size:15px;line-height:1.5}.is-interactive .pavilion-value .in-practice{margin-top:16px}#values-and-approach.is-interactive .pavilion-value .in-practice p{font-size:16px;line-height:1.4}}
@media(max-width:1099px){.pavilion-art .pavilion-botany{width:19%;opacity:.29}.pavilion-art .pavilion-osprey{width:9%;right:2%;top:3%}}

.values-pavilion .pavilion-title{text-align:center;font:500 clamp(25px,3vw,38px)/1.3 "Cormorant Garamond",Georgia,serif!important;color:#5e624e;margin:36px 0 16px}
.is-interactive .pavilion-art{width:calc(100% - 112px);margin-inline:auto;max-width:none}
.pavilion-controls [data-step="-1"]{left:-56px}.pavilion-controls [data-step="1"]{right:-56px}
.pavilion-art .pavilion-botany{opacity:.48}
@media(max-width:1099px){.is-interactive .pavilion-art{width:calc(100% - 80px);max-width:720px}.pavilion-controls [data-step="-1"]{left:-40px}.pavilion-controls [data-step="1"]{right:-40px}}
@media(max-width:620px){.is-interactive .pavilion-art{width:calc(100% - 64px)}.pavilion-controls [data-step="-1"]{left:-32px}.pavilion-controls [data-step="1"]{right:-32px}.values-pavilion .pavilion-controls button{width:32px!important}.pavilion-art .pavilion-botany{opacity:.38}}

/* Keep the longest value above the steps when the artwork has side rails. */
@media(min-width:1100px){.is-interactive .pavilion-reading{top:40%}}
@media(min-width:1100px) and (max-width:1250px){
 .is-interactive .pavilion-value h3{font-size:22px;margin-bottom:10px}
 #values-and-approach.is-interactive .pavilion-value>p{font-size:14px;line-height:1.4}
 .is-interactive .pavilion-value .in-practice{margin-top:10px}
 #values-and-approach.is-interactive .pavilion-value .in-practice p{font-size:14px;line-height:1.35;margin-top:5px}
}

.pavilion-art .pavilion-osprey{width:10%;transform:rotate(-9deg)}
@media(max-width:1099px){.pavilion-art .pavilion-osprey{width:13%}}

/* Plan3: the wider front faces frame a narrower central opening. */
@media(min-width:1100px){
 .is-interactive .pavilion-reading{left:41%;top:39%;width:18%;padding:0}
 .is-interactive .pavilion-reading .pavilion-veil{inset:-12px -12px}
 .is-interactive .pavilion-value h3{font-size:21px;line-height:1.15;margin-bottom:10px}
 #values-and-approach.is-interactive .pavilion-value>p{font-size:14px;line-height:1.4}
 .is-interactive .pavilion-value .in-practice{margin-top:10px}
 #values-and-approach.is-interactive .pavilion-value .in-practice p{font-size:14px;line-height:1.35;margin-top:5px}
}

@media(min-width:1360px){
 .values-pavilion>.shell{width:min(calc(100% - 40px),1440px)}
}
@media(min-width:1100px) and (max-width:1359px){
 .is-interactive .pavilion-reading{position:static;width:auto;max-width:580px;margin:0 auto;padding:16px 8px 0;text-align:center}
 .is-interactive .pavilion-reading .pavilion-veil{display:none}
 .is-interactive .pavilion-value h3{font-size:26px;margin:17px 0 18px}
 #values-and-approach.is-interactive .pavilion-value>p{font-size:16px;line-height:1.7}
 .is-interactive .pavilion-value .in-practice{margin-top:23px}
 #values-and-approach.is-interactive .pavilion-value .in-practice p{font-size:18px;line-height:1.5}
}
@media(min-width:1360px){
 .values-pavilion>.shell>.eyebrow,.values-pavilion>.shell>.board-heading{width:min(100%,1160px);margin-inline:auto}
}


/* Real alpha cutout: preserve the full platform edge. */
.pavilion-art .pavilion-building{mask-image:none}

/* Full-width botanical ground, independent of the transparent building. */
.pavilion-art::before{content:"";position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:100vw;height:clamp(240px,34vw,660px);z-index:-1;pointer-events:none;background:url('/media/contact-panorama-v1.webp') center bottom / max(100vw,1000px) auto no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 86%,transparent)}
@media(max-width:700px){.pavilion-art::before{height:240px;bottom:-24px;background-size:850px auto;mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 84%,transparent)}}
/* Foreground plants stay at a bounded scale, independent of text length. */
.pavilion-art::before{z-index:1;mix-blend-mode:multiply}
@media(max-width:1359px){
 .pavilion-layout{position:relative;isolation:isolate}
 .pavilion-art{isolation:auto}
 .pavilion-art::before{height:280px;bottom:-18px;background-size:max(100vw,900px) auto}

 .pavilion-count{position:relative;z-index:2}
 .is-interactive .pavilion-reading{position:relative;inset:auto;isolation:isolate;padding:16px 18px 28px}
 .is-interactive .pavilion-reading .pavilion-veil{display:none}
}


/* Swipe and keyboard navigation covers artwork and reading together. */
.pavilion-layout{touch-action:pan-y}
.pavilion-layout:focus-visible{outline:2px solid #825924;outline-offset:8px}
@media(max-width:1359px){.pavilion-count{margin-top:12px}}

/* Trial: the artwork and inscriptions turn together, scenery stays still. */
.pavilion-stage{position:relative;transform-origin:50% 58%;backface-visibility:hidden}
.pavilion-stage-ghost{position:absolute;inset:0;pointer-events:none}
.pavilion-stage-ghost *{pointer-events:none!important}

/* Minimal reading wash, with broad feathering rather than a visible panel. */
@media(min-width:1360px){
 .is-interactive .pavilion-reading .pavilion-veil{inset:-32px -36px;background:linear-gradient(to bottom,rgba(250,246,234,.68),rgba(250,246,234,.48) 42%,rgba(250,246,234,.16) 85%,transparent);backdrop-filter:blur(12px);mask-image:radial-gradient(ellipse at center,#000 12%,#0008 48%,transparent 74%);mask-composite:add}
}


/* Keep backdrop sampling outside any fading ancestor. */
.pavilion-reading .pavilion-veil{display:none}
@media(min-width:1360px){.is-interactive .pavilion-reading .pavilion-veil{display:block;background:linear-gradient(to bottom,rgba(250,246,234,.8),rgba(250,246,234,.62) 42%,rgba(250,246,234,.3) 85%,transparent)}}
/* One botanical band, after the external reading and its counter. */
@media(max-width:1359px){
 .pavilion-art::before{display:none}
 .pavilion-layout::after{content:"";display:block;position:relative;width:100vw;height:140px;left:50%;transform:translateX(-50%);margin-top:-72px;pointer-events:none;background:url('/media/contact-panorama-v1.webp') center bottom / max(100vw,900px) auto no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 86%,transparent);mix-blend-mode:multiply}
}


/* External reading, shared navigation gap, botanical ground, then counter. */
@media(max-width:1359px){
 .values-pavilion .pavilion-layout{display:flex;flex-direction:column;gap:0}
 .pavilion-layout .pavilion-reading{order:-1;margin-bottom:32px;padding-top:0;padding-bottom:16px}
 .pavilion-layout .pavilion-art{order:0}
 .pavilion-layout .pavilion-controls button{top:-24px}
 .values-pavilion .pavilion-title{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .pavilion-layout::after{order:1;margin-top:-96px;flex-shrink:0}
 .pavilion-layout .pavilion-count{order:2;margin-top:0}
}

/* Compact external composition; retain the wide inscription layout and readable type. */
@media(max-width:1359px){
 .values-pavilion.is-interactive .pavilion-art{max-width:580px}
 #values-and-approach.is-interactive .pavilion-value>p{line-height:1.65}
 .is-interactive .pavilion-value .in-practice{margin-top:18px}
 #values-and-approach.is-interactive .pavilion-value .in-practice p{line-height:1.5}
}
@media(max-width:620px){
 .values-pavilion .board-heading .pavilion-motto{font-size:20px;line-height:1.5;margin-block:16px}
 .values-pavilion .board-heading{margin-bottom:20px}
 .is-interactive .pavilion-reading{padding-inline:12px}
}