/* A compact invitation, followed by a fuller, illustrated introduction. */
.know-how { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:8%; padding:48px 7% 52px; margin:0 18px; background:#163c32; color:#f4f6f3; position:relative; overflow:hidden; }
.know-how::after { content:""; position:absolute; width:430px; height:430px; right:-140px; top:-230px; border:1px solid #d9e6b21c; border-radius:50%; box-shadow:0 0 0 35px #d9e6b207,0 0 0 75px #d9e6b207; pointer-events:none; }
.know-how .eyebrow { color:#d9e6b2; font-size:.6875rem; margin-bottom:18px; }
.know-how h2 { font-size:clamp(2rem,3.2vw,3.5rem); line-height:1.08; }
.know-how h2 em { color:#d9e6b2; }
.know-how-invite { position:relative; z-index:1; max-width:390px; }
.know-how-invite > p { color:#d6dfd2; font-size:.9375rem; line-height:1.7; }
.know-how-link { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:22px; padding-top:18px; border-top:1px solid #d9e6b244; font-size:.875rem; }
.know-how-link .round-arrow { width:38px; height:38px; font-size:1.25rem; flex-shrink:0; transition:background .5s,transform .5s; }
.know-how-link:hover .round-arrow { background:#d9e6b2; color:#163c32; transform:translateY(3px); }
.intro { grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); align-items:center; gap:6%; padding:72px 7%; margin-top:18px; background:#e9eee3; position:relative; overflow:hidden; }
.intro::before { content:""; position:absolute; width:720px; height:720px; right:-430px; bottom:-560px; border:1px solid #163c321a; border-radius:50%; box-shadow:0 0 0 30px #163c3205,0 0 0 60px #163c3205,0 0 0 90px #163c3205; pointer-events:none; }
.intro-visual { margin:0; align-self:stretch; min-height:580px; position:relative; overflow:hidden; background:#a5b297; border-radius:180px 180px 3px 3px; }
.intro-visual > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:50% 53%; }
.intro-visual::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#0f281bdd); pointer-events:none; }
.intro-photo-tag { position:absolute; bottom:70px; left:28px; right:28px; z-index:1; display:flex; gap:18px; align-items:center; color:#fff; font-family:var(--serif); font-size:clamp(1.3rem,2vw,2rem); line-height:1.2; letter-spacing:-.025em; }
.intro-photo-tag em { color:#d9e6b2; }
.intro-leaf { display:block; width:34px; height:50px; border:1px solid #d9e6b2; border-radius:100% 0 100% 0; transform:rotate(8deg); flex-shrink:0; }
.intro-visual figcaption { position:absolute; left:28px; right:28px; bottom:24px; z-index:1; font-size:.6875rem; color:#d8e1d2; line-height:1.5; }
.intro-main { position:relative; }
.intro-main > .eyebrow { display:flex; align-items:center; gap:12px; font-size:.6875rem; margin-bottom:24px; }
.intro-main > .eyebrow .small-line { flex-shrink:0; margin:0; }
.intro-main h2 { font-size:clamp(2.35rem,4vw,4.4rem); line-height:1.05; }
.intro-lead { margin-top:24px; font-size:.96875rem; color:#55634f; line-height:1.85; max-width:600px; }
.intro-audiences { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
.intro-audience { border-top:1px solid #b4c2a7; padding-top:17px; }
.audience-number { font-size:.75rem; color:#768967; }
.intro-audience h3 { font-family:var(--serif); letter-spacing:-.035em; font-size:1.6rem; line-height:1.2; margin:12px 0; font-weight:400; color:#163c32; }
.intro-audience p { font-size:.875rem; line-height:1.75; color:#55634f; }
.audience-label { display:block; font-size:.59rem; letter-spacing:.1em; margin-top:18px; color:#4a603c; }
.intro-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin-top:28px; padding-top:22px; border-top:1px solid #b4c2a7; }
.intro-bottom > p { color:#627457; font-size:.8125rem; line-height:1.65; }
.intro-bottom .text-link { margin:0; font-size:.875rem; gap:24px; min-height:44px; }

/* One brief upward reveal when these sections first enter the viewport. */
[data-section-lift] { position:relative; overflow:hidden; }
.section-lift { position:absolute; inset:0 0 auto; height:min(80svh,720px); display:flex; z-index:4; pointer-events:none; overflow:hidden; visibility:hidden; }
.section-lift > span { flex:1; margin-right:-1px; background:#234936; transform:translateY(-102%); }
.section-lift > span:nth-child(2n) { background:#35583c; }
.section-lift > span:nth-child(3) { background:#5a7049; }
[data-section-lift="services"] .section-lift > span { background:#a8ba8f; }
[data-section-lift="services"] .section-lift > span:nth-child(2n) { background:#c1d0a6; }
[data-section-lift="services"] .section-lift > span:nth-child(3) { background:#d9e6b2; }
.lift-pending > .section-lift, .lift-arriving > .section-lift { visibility:visible; }
.lift-pending > .section-lift > span { transform:translateY(0); }
.lift-arriving > .section-lift > span { animation:gardenLift calc(500ms - var(--strip) * 20ms) cubic-bezier(.66,0,.22,1) both; animation-delay:calc(var(--strip) * 20ms); }
@keyframes gardenLift { from { transform:translateY(0); } to { transform:translateY(-102%); } }
@media(max-width:1150px) { .intro { gap:5%; } .intro-visual { min-height:610px; } .intro-audiences { gap:18px; } .intro-audience h3 { font-size:1.4rem; } }
@media(max-width:950px) { .know-how { gap:6%; padding:40px 6%; grid-template-columns:1.15fr 1fr; } .intro { padding:60px 6%; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:5%; } .intro-main h2 { font-size:2.8rem; } .intro-visual { min-height:620px; border-radius:140px 140px 3px 3px; } .intro-photo-tag { left:20px; right:20px; font-size:1.3rem; } .intro-leaf { display:none; } .intro-visual figcaption { left:20px; right:20px; } .intro-audiences { grid-template-columns:1fr; gap:18px; } .intro-audience { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding-top:12px; } .audience-number { display:none; } .intro-audience h3 { margin:0 0 4px; } .intro-audience p { grid-column:1/-1; } .audience-label { grid-column:2; grid-row:1; margin-top:5px; font-size:.52rem; letter-spacing:.05em; } }
@media(max-width:650px) { .know-how { grid-template-columns:1fr; gap:24px; padding:34px 7%; margin:0 8px; } .know-how h2 { font-size:2.4rem; } .know-how-invite { max-width:none; } .know-how-invite > p { font-size:.875rem; } .know-how-link { margin-top:18px; padding-top:14px; } .intro { grid-template-columns:1fr; padding:36px 7% 44px; gap:32px; margin-top:8px; } .intro-visual { min-height:0; height:340px; border-radius:140px 140px 3px 3px; } .intro-visual > img { object-position:50% 56%; } .intro-photo-tag { bottom:60px; font-size:1.6rem; } .intro-leaf { display:block; width:26px; height:38px; } .intro-main h2 { font-size:clamp(2.25rem,9.5vw,3.5rem); } .intro-main > .eyebrow { margin-bottom:20px; } .intro-lead { margin-top:22px; } .intro-audiences { margin-top:26px; gap:22px; } .intro-audience { display:block; padding-top:16px; } .intro-audience h3 { font-size:1.65rem; margin-bottom:10px; } .audience-label { margin-top:12px; font-size:.6rem; letter-spacing:.1em; } .intro-bottom { margin-top:24px; } .section-lift { height:75svh; } }
@media(prefers-reduced-motion:reduce) { .section-lift { display:none !important; } .know-how-link:hover .round-arrow { transform:none; } }