/* ERGIO — Post & Beam Kits */
.post-beam-page .compact-section { padding-top: 108px; padding-bottom: 108px; }
.post-beam-page .reveal { opacity: 1; transform: none; }
.js .post-beam-page .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .post-beam-page .reveal.visible { opacity: 1; transform: none; }

.post-beam-page .post-beam-hero .solution-hero-media { background-image: url("assets/images/netherlands-post-beam-hero.webp"); background-position: 57% center; filter: saturate(.76) contrast(1.1); }
.post-beam-page .post-beam-hero .solution-hero-overlay { background: linear-gradient(90deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.83) 45%,rgba(8,8,8,.28) 76%,rgba(8,8,8,.48) 100%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 54%); }
.post-beam-hero-panel { background: rgba(180,172,158,.94); color: var(--ink); border-color: rgba(255,255,255,.5); }
.post-beam-hero-panel .eyebrow { color: var(--red); }
.post-beam-hero-panel dt { color: rgba(17,17,17,.54); }
.post-beam-hero-panel dl > div { border-color: rgba(17,17,17,.18); }
.post-beam-proofbar { background: var(--taupe); }
.post-intro-images .intro-image-large img { object-position: center 48%; }
.post-intro-images .intro-image-small img { object-position: center; }

.post-kit-scope { background: var(--soft); }
.post-scope-grid { grid-template-columns: repeat(3,1fr); }

/* CONNECTION LAB */
.connection-lab { background: var(--ink); }
.connection-panels .frame-panel { min-height: 670px; }
.connection-render { position: relative; min-height: 670px; margin: 0; overflow: hidden; background: #f6f3ed; color: var(--ink); display: grid; place-items: center; }
.connection-render img { width: 100%; height: 670px; padding: 30px 34px 60px; object-fit: contain; object-position: center; display: block; mix-blend-mode: multiply; }
.connection-render figcaption { position: absolute; left: 32px; right: 32px; bottom: 25px; padding-top: 13px; border-top: 1px solid rgba(17,17,17,.2); font-size: 8px; font-weight: 700; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; }
.connection-render-text { padding: 54px; place-items: start; align-content: space-between; background: var(--cream); }
.connection-render-text > span { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.connection-render-text > strong { max-width: 560px; font-size: clamp(34px,4vw,64px); line-height: .98; letter-spacing: -.045em; }
.connection-render-text > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(17,17,17,.22); border-left: 1px solid rgba(17,17,17,.22); }
.connection-render-text i { padding: 17px; border-right: 1px solid rgba(17,17,17,.22); border-bottom: 1px solid rgba(17,17,17,.22); font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.connection-visual { position: relative; min-height: 670px; overflow: hidden; background: var(--cream); color: var(--ink); }
.connection-visual > span { position: absolute; left: 38px; bottom: 32px; max-width: 310px; font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.pb-column,.joint-column,.base-column { position: absolute; background: #cba36a; box-shadow: 16px 18px 0 rgba(17,17,17,.12); }
.pb-column { left: 43%; top: 15%; width: 104px; height: 68%; }
.pb-beam { position: absolute; left: 11%; top: 28%; width: 78%; height: 92px; background: #d7b77f; box-shadow: 16px 18px 0 rgba(17,17,17,.12); }
.steel-plate { position: absolute; z-index: 3; left: calc(43% + 39px); top: 24%; width: 27px; height: 180px; background: #242424; }
.connection-visual i.bolt,.connection-visual i.anchor { position: absolute; z-index: 4; display: block; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
.connection-visual i.bolt { width: 15px; height: 15px; left: calc(43% + 45px); }
.b1 { top: 29%; }.b2 { top: 36%; }.b3 { top: 43%; }
.visible-bracket { position: absolute; z-index: 3; left: 37%; top: 22%; width: 170px; height: 175px; border: 25px solid #242424; border-top-width: 48px; background: transparent; }
.visible-visual .bolt { width: 14px; height: 14px; }
.vb1 { left: 39%!important; top: 27%; }.vb2 { left: 48%!important; top: 27%; }.vb3 { left: 39%!important; top: 43%; }.vb4 { left: 48%!important; top: 43%; }
.joint-column { left: 42%; top: 24%; width: 116px; height: 61%; }
.joint-beam { position: absolute; top: 29%; height: 86px; background: #d8b77c; box-shadow: 14px 16px 0 rgba(17,17,17,.1); }
.joint-beam.left { left: 8%; width: 38%; clip-path: polygon(0 0,100% 0,100% 34%,84% 34%,84% 100%,0 100%); }
.joint-beam.right { right: 8%; width: 43%; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 63%,17% 63%,17% 34%,0 34%); }
.joint-key { position: absolute; z-index: 4; left: 46%; top: 32%; width: 58px; height: 130px; background: var(--red); transform: rotate(4deg); }
.foundation { position: absolute; left: 9%; right: 9%; bottom: 14%; height: 135px; background: #b3ada3; box-shadow: inset 0 20px 0 rgba(255,255,255,.22); }
.base-column { z-index: 2; left: 43%; top: 12%; width: 112px; height: 64%; }
.base-shoe { position: absolute; z-index: 3; left: calc(43% - 20px); bottom: 25%; width: 152px; height: 125px; border: 25px solid #242424; border-top: 0; }
.connection-visual i.anchor { width: 18px; height: 18px; bottom: 22%; background: #242424; box-shadow: 0 0 0 4px var(--red); }
.a1 { left: 39%; }.a2 { left: 57%; }
.post-config-strip { grid-template-columns: 2fr repeat(5,.72fr) 1.55fr; }

/* CAPACITY */
.beam-capacity { background: var(--cream); }
.beam-capacity-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: center; }
.beam-spec-visual { position: relative; min-height: 700px; padding: 95px 52px 50px; background: var(--ink); color: white; overflow: hidden; }
.beam-spec-visual::before { content: "glulam"; position: absolute; top: 25px; left: 30px; color: rgba(255,255,255,.12); font-size: clamp(60px,8vw,130px); font-weight: 700; letter-spacing: -.06em; }
.beam-length-line { position: relative; height: 70px; margin: 40px 0 65px; border-top: 1px solid rgba(255,255,255,.42); }
.beam-length-line::before,.beam-length-line::after { content: ""; position: absolute; top: -7px; width: 1px; height: 14px; background: white; }
.beam-length-line::before { left: 0; }.beam-length-line::after { right: 0; }
.beam-length-line span { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); color: var(--cream); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.beam-block { position: relative; margin-bottom: 28px; padding: 35px 35px 42px; background: #d8b57a; color: var(--ink); box-shadow: 20px 22px 0 rgba(189,48,51,.8); }
.beam-block.raw { width: 86%; margin-left: auto; background: var(--taupe); box-shadow: -18px 19px 0 rgba(255,255,255,.1); }
.beam-block b,.beam-block small { display: block; }
.beam-block b { font-size: clamp(27px,3vw,48px); font-weight: 500; letter-spacing: -.04em; }
.beam-block small { margin-top: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.beam-block.machined i { position: absolute; display: block; background: var(--ink); }
.beam-block.machined i:nth-of-type(1) { width: 18%; height: 22px; right: 8%; top: 14px; }
.beam-block.machined i:nth-of-type(2) { width: 16px; height: 70px; right: 22%; bottom: 0; }
.beam-block.machined i:nth-of-type(3) { width: 22px; height: 22px; right: 42%; top: 25px; border-radius: 50%; }
.beam-quality { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 65px; background: rgba(255,255,255,.2); }
.beam-quality span { padding: 20px 12px; background: #171717; color: rgba(255,255,255,.7); font-size: 9px; font-weight: 700; text-align: center; text-transform: uppercase; }
.beam-capacity-copy h2 { font-size: clamp(46px,4.6vw,76px); }
.beam-capacity-copy .lead-copy { color: var(--ink); font-size: clamp(20px,1.55vw,26px); line-height: 1.5; }
.beam-capacity-copy > p:not(.eyebrow):not(.lead-copy) { color: #5e584f; }
.beam-option-list { margin: 35px 0; border-top: 1px solid rgba(17,17,17,.2); }
.beam-option-list article { display: grid; grid-template-columns: 45px 1fr; padding: 22px 0; border-bottom: 1px solid rgba(17,17,17,.2); }
.beam-option-list article > span { color: var(--red); font-size: 10px; font-weight: 700; }
.beam-option-list strong { font-size: 14px; }
.beam-option-list p { margin: 5px 0 0; color: #625c54; font-size: 11px; }
.beam-quote-button { background: transparent; }

/* APPLICATIONS */
.post-applications { background: var(--soft); }
.application-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 55px; background: var(--line); border: 1px solid var(--line); }
.application-card { position: relative; min-height: 500px; padding: 38px; background: white; display: flex; flex-direction: column; overflow: hidden; }
.application-card > span { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.application-card h3 { margin: auto 0 20px; max-width: 650px; font-size: clamp(32px,3vw,52px); }
.application-card p { color: #5f5951; font-size: 13px; }
.application-card ul { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.application-card li { padding: 7px 0; color: #5f5951; font-size: 11px; }
.application-card li::before { content: "—"; margin-right: 9px; color: var(--red); }
.application-image { grid-row: span 2; min-height: 1000px; padding: 0; color: white; }
.application-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.application-image:hover img { transform: scale(1.045); }
.application-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.03) 72%); }
.application-image > div { position: absolute; z-index: 2; left: 38px; right: 38px; bottom: 38px; }
.application-image h3 { margin: 30px 0 14px; }
.application-image p { color: rgba(255,255,255,.75); }
.cream-application { background: var(--cream); }
.dark-application { background: var(--ink); color: white; }
.dark-application > span { color: var(--cream); }
.dark-application p,.dark-application li { color: rgba(255,255,255,.68); }
.dark-application ul { border-color: rgba(255,255,255,.18); }
.red-application { grid-column: 1 / -1; min-height: 420px; background: var(--red); color: white; }
.red-application > span { color: var(--cream); }
.red-application p,.red-application li { color: rgba(255,255,255,.78); }
.red-application ul { border-color: rgba(255,255,255,.24); }
.red-application li::before,.dark-application li::before { color: var(--cream); }

/* PROJECTS */
.post-projects { background: var(--ink); color: white; }
.post-project-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; margin-top: 60px; }
.post-project-card { position: relative; min-height: 650px; overflow: hidden; }
.post-project-card:not(.featured) { min-height: 650px; }
.post-project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease); }
.post-project-card:hover img { transform: scale(1.045); }
.post-project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.92),transparent 68%); }
.post-project-card > div { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; }
.post-project-card span { color: var(--cream); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.post-project-card h3 { margin: 15px 0 10px; font-size: clamp(38px,4vw,70px); }
.post-project-card p { max-width: 650px; color: rgba(255,255,255,.73); font-size: 12px; }
.post-project-card i { display: inline-block; margin-top: 18px; color: white; font-size: 11px; font-style: normal; font-weight: 700; }
.post-beam-contact { background: var(--red); }

@media (max-width: 1180px) {
  .post-scope-grid { grid-template-columns: repeat(2,1fr); }
  .beam-capacity-grid { gap: 55px; }
  .post-project-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .connection-panels .frame-panel { grid-template-columns: 1fr; }
  .connection-visual { min-height: 560px; }
  .beam-capacity-grid { grid-template-columns: 1fr; }
  .beam-spec-visual { min-height: 650px; }
  .application-grid { grid-template-columns: 1fr; }
  .red-application { grid-column: auto; }
  .application-image { grid-row: auto; min-height: 680px; }
  .post-project-grid { grid-template-columns: 1fr; }
  .post-project-card,.post-project-card:not(.featured) { min-height: 620px; }
}
@media (max-width: 720px) {
  .post-beam-page .compact-section { padding-top: 78px; padding-bottom: 78px; }
  .post-scope-grid { grid-template-columns: 1fr; }
  .connection-tabs { grid-template-columns: 1fr 1fr; }
  .connection-tabs .frame-tab:nth-child(2) { border-right: 0; }
  .connection-tabs .frame-tab:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.2); }
  .connection-visual { min-height: 480px; }
  .pb-column { left: 42%; width: 78px; }
  .pb-beam { left: 7%; width: 86%; height: 70px; }
  .steel-plate { left: calc(42% + 27px); }
  .visible-bracket { left: 31%; width: 150px; }
  .joint-column { left: 40%; width: 90px; }
  .base-column { left: 40%; width: 90px; }
  .base-shoe { left: calc(40% - 18px); width: 126px; }
  .post-config-strip { grid-template-columns: 1fr 1fr; }
  .post-config-strip > span,.post-config-strip button { grid-column: 1/-1; }
  .beam-spec-visual { min-height: 590px; padding: 75px 25px 35px; }
  .beam-block { padding: 28px 22px 36px; }
  .beam-quality { grid-template-columns: 1fr; }
  .application-card { min-height: 440px; padding: 28px; }
  .application-image { min-height: 620px; padding: 0; }
  .post-project-card,.post-project-card:not(.featured) { min-height: 530px; }
}

/* V33.6 — completed project imagery */
.post-project-grid{grid-template-columns:1.15fr .85fr .85fr}
@media(max-width:1180px){.post-project-grid{grid-template-columns:1fr 1fr}.post-project-card:last-child{grid-column:1/-1;min-height:560px}}
@media(max-width:720px){.post-project-grid{grid-template-columns:1fr}.post-project-card:last-child{grid-column:auto}}

/* V33.7 — Structural expression intro re-layout */
.post-structural-intro{overflow:hidden}
.post-intro-heading-grid{display:grid;grid-template-columns:1.04fr .82fr;gap:8vw;align-items:start}
.post-intro-heading-grid .development-intro-title h2{max-width:800px}
.post-intro-copy{padding-top:0}
.post-intro-copy .lead-copy{margin-top:0}
.post-intro-board{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(320px,.66fr);gap:24px;margin-top:58px;align-items:stretch}
.post-intro-main-image,.post-intro-detail-image{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.post-intro-main-image{min-height:610px}
.post-intro-main-image img,.post-intro-detail-image img{width:100%;height:100%;object-fit:cover;display:block}
.post-intro-main-image img{object-position:center 48%}
.post-intro-detail-image{height:270px}
.post-intro-detail-image img{object-position:center}
.post-intro-main-image figcaption,.post-intro-detail-image figcaption{position:absolute;left:14px;bottom:14px;margin:0;padding:8px 10px;background:rgba(17,17,17,.84);color:#fff;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.post-intro-side{display:grid;grid-template-rows:auto 1fr;min-width:0}
.post-intro-fit-list{margin-top:0;border-top:0}
.post-intro-fit-list>div{grid-template-columns:38px 1fr;padding:22px 0}
.post-intro-fit-list>div:first-child{border-top:1px solid var(--line)}
.post-intro-fit-list strong{font-size:14px;line-height:1.25}
.post-intro-fit-list p{font-size:11px;line-height:1.6}
@media(max-width:1000px){
  .post-intro-heading-grid{grid-template-columns:1fr;gap:30px}
  .post-intro-copy{max-width:820px}
  .post-intro-board{grid-template-columns:1.1fr .9fr;margin-top:45px}
  .post-intro-main-image{min-height:570px}
  .post-intro-detail-image{height:230px}
}
@media(max-width:760px){
  .post-intro-heading-grid{gap:22px}
  .post-intro-board{grid-template-columns:1fr;gap:18px;margin-top:36px}
  .post-intro-main-image{min-height:380px}
  .post-intro-side{display:block}
  .post-intro-detail-image{height:260px}
  .post-intro-fit-list{margin-top:8px}
  .post-intro-fit-list>div{padding:20px 0}
}

@media(max-width:1100px){.connection-render,.connection-render img{min-height:560px;height:560px}.connection-render-text{min-height:560px;height:auto}}
@media(max-width:760px){.connection-render,.connection-render img{min-height:480px;height:480px}.connection-render img{padding:24px 20px 58px}.connection-render figcaption{left:20px;right:20px;bottom:20px}.connection-render-text{min-height:480px;height:auto;padding:30px 23px}.connection-render-text>strong{font-size:clamp(34px,10vw,50px)}}