.showcase-page{--showcase-ink:#1b2924;--showcase-muted:#6b756c;--showcase-paper:#f3f1eb;background:var(--showcase-paper);color:var(--showcase-ink)}
.showcase-header{position:sticky;top:0;z-index:20;background:rgba(243,241,235,.93);border-bottom:1px solid #d9d8d0;backdrop-filter:blur(14px)}
.showcase-header-inner{width:min(1320px,calc(100% - 64px));height:78px;margin:auto;display:flex;align-items:center;gap:48px}
.showcase-brand{display:inline-flex;align-items:center;gap:7px;color:#1c3028;font-weight:850;font-size:13px;letter-spacing:1px;white-space:nowrap}
.showcase-brand b{font-size:9px;letter-spacing:.5px;color:#b75f3e;padding:5px 6px;border:1px solid #c9c9be}
.showcase-header nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:11px;font-weight:700;color:#59655e}
.showcase-header nav a:hover,.showcase-contact:hover{color:#b75f3e}
.showcase-contact{display:inline-flex;align-items:center;gap:16px;padding:12px 15px;border:1px solid #c9ccc2;border-radius:2px;font-size:10px;font-weight:700;transition:color .2s,border-color .2s}
.showcase-contact span{font-size:14px;color:#b75f3e}
.showcase-intro{min-height:455px;padding:86px max(32px,calc((100% - 1320px)/2)) 58px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-bottom:1px solid #d8d8cf;background:radial-gradient(ellipse at 88% 30%,#e3e0d4 0,rgba(243,241,235,0) 35%),#f3f1eb}
.showcase-intro-copy{max-width:780px}
.showcase-kicker{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:1.45px;font-weight:800;color:#6a756d;margin:0 0 20px}
.showcase-kicker>span{width:24px;height:1px;background:#b75f3e}
.showcase-intro h1{font-size:clamp(50px,7.3vw,93px);line-height:.98;letter-spacing:-6px;font-weight:650;margin:0;color:#1c3028}
.showcase-intro h1 em,.showcase-next h2 em,.live-example-title h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-4px}
.showcase-intro h1 em{color:#b75f3e}
.showcase-lede{max-width:520px;font-size:14px;line-height:1.85;color:#667168;margin:24px 0 0}
.showcase-scroll{display:flex;align-items:center;gap:14px;padding-bottom:4px;font-size:8px;letter-spacing:1px;font-weight:800;color:#53655a;white-space:nowrap}
.showcase-scroll b{font-size:18px;font-weight:400;color:#b75f3e}
.live-examples{width:min(1320px,calc(100% - 64px));margin:0 auto}
.live-example{padding:92px 0 78px;border-bottom:1px solid #d8d8cf;scroll-margin-top:92px}
.live-example-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:29px}
.live-example-title{max-width:680px}
.live-example-index{font-size:9px;line-height:1.5;letter-spacing:1.3px;font-weight:800;color:#b75f3e;margin:0 0 14px}
.live-example-title h2{font-size:clamp(39px,5.1vw,64px);line-height:1.06;letter-spacing:-3px;font-weight:650;margin:0;color:#1c3028}
.live-example-title h2 em{letter-spacing:-2px}
.live-example-detail{max-width:355px;padding-bottom:4px}
.live-example-detail p{font-size:12px;line-height:1.85;color:#667168;margin:0 0 15px}
.live-example-detail a,.showcase-next>a{display:inline-flex;align-items:center;gap:14px;font-size:10px;font-weight:800;border-bottom:1px solid #9ba398;padding:0 0 7px;transition:color .2s,border-color .2s}
.live-example-detail a span,.showcase-next>a span{font-size:15px;color:#b75f3e}
.live-example-detail a:hover,.showcase-next>a:hover{color:#b75f3e;border-color:#b75f3e}
.live-preview{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;min-height:380px;background:#d8d5ca;border:1px solid #d3d2c9;box-shadow:0 18px 48px #24332a0c}
.live-preview iframe{display:block;width:100%;height:100%;min-height:inherit;border:0;pointer-events:none}
.concept-disclaimer{font-size:9px;color:#80867e;margin:12px 0 0}
.live-example-food .live-example-index{color:#9c4938}
.live-example-food .live-example-title h2 em{color:#9c4938}
.live-example-food .live-preview{background:#292520}
.showcase-next{min-height:325px;padding:70px max(32px,calc((100% - 1320px)/2));display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:45px}
.showcase-next .showcase-kicker{margin-bottom:15px}
.showcase-next h2{font-size:clamp(33px,4vw,50px);line-height:1.08;letter-spacing:-2.5px;font-weight:650;margin:0;color:#1c3028}
.showcase-next h2 em{color:#b75f3e;letter-spacing:-2px}
.showcase-next>p{max-width:410px;font-size:12px;line-height:1.9;color:#667168;margin:0}
.showcase-next>a{white-space:nowrap}
.showcase-footer{min-height:82px;padding:18px max(32px,calc((100% - 1320px)/2));display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px 30px;background:#e9e7df;border-top:1px solid #d8d8cf}
.showcase-footer nav{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:20px;flex-wrap:wrap;font-size:9px;color:#626e65}
.showcase-footer nav a:hover{color:#b75f3e}
.showcase-footer .cookie-settings{font-size:9px}
@media(max-width:820px){
  .showcase-header-inner{width:calc(100% - 36px);height:68px;gap:20px}
  .showcase-header nav{gap:18px}
  .showcase-contact{font-size:0;padding:10px 12px}
  .showcase-contact span{font-size:16px}
  .showcase-intro{min-height:405px;padding:70px 28px 42px}
  .showcase-intro h1{font-size:clamp(48px,9vw,74px);letter-spacing:-4px}
  .showcase-intro h1 em{letter-spacing:-3px}
  .live-examples{width:calc(100% - 48px)}
  .live-example{padding:70px 0 62px}
  .live-example-heading{gap:25px}
  .live-example-title h2{font-size:clamp(37px,6vw,52px)}
  .live-preview{min-height:340px;aspect-ratio:4/3}
  .showcase-next{grid-template-columns:1fr 1fr;padding:58px 28px;gap:27px}
  .showcase-next>a{grid-column:2;justify-self:start}
  .showcase-footer{padding:18px 24px}
}
@media(max-width:700px){
  .live-example-heading{display:block;margin-bottom:22px}
  .live-example-detail{max-width:540px;margin-top:17px}
}
@media(max-width:580px){
  .showcase-header-inner{width:calc(100% - 30px);height:62px;gap:9px}
  .showcase-brand{font-size:10px;gap:5px}
  .showcase-brand b{font-size:8px;padding:4px 5px}
  .showcase-header nav{gap:12px;font-size:9px}
  .showcase-contact{padding:8px 9px}
  .showcase-intro{display:block;min-height:0;padding:65px 22px 35px}
  .showcase-intro h1{font-size:clamp(44px,12vw,62px);letter-spacing:-3px}
  .showcase-intro h1 em{letter-spacing:-2px}
  .showcase-lede{font-size:12px;margin-top:18px}
  .showcase-scroll{margin-top:34px}
  .live-examples{width:calc(100% - 36px)}
  .live-example{padding:55px 0 46px;scroll-margin-top:73px}
  .live-example-heading{display:block;margin-bottom:20px}
  .live-example-index{font-size:8px;margin-bottom:10px}
  .live-example-title h2{font-size:clamp(35px,10vw,47px);letter-spacing:-2px}
  .live-example-title h2 em{letter-spacing:-1px}
  .live-example-detail{margin-top:17px}
  .live-example-detail p{font-size:11px}
  .live-preview{aspect-ratio:3/4;min-height:410px}
  .showcase-next{display:block;padding:55px 22px}
  .showcase-next>p{margin:20px 0}
  .showcase-next>a{margin-top:2px}
  .showcase-footer{grid-template-columns:minmax(0,1fr);gap:17px;align-items:start;padding:22px}
  .showcase-footer nav{grid-column:1;grid-row:auto;justify-self:start}
  .showcase-footer nav{gap:12px 17px}
}
@media(prefers-reduced-motion:reduce){
  .showcase-page{scroll-behavior:auto}
  .live-example-detail a,.showcase-contact{transition:none}
}

/* Deliberate footer placement and clear tablet reading order. */
.concept-disclaimer{line-height:1.7}
.showcase-footer-meta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding-top:13px;border-top:1px solid #d8d8cf}
.showcase-footer-meta p{font-size:10px;color:#707a71;margin:0}
.showcase-footer-meta .cookie-settings{font-size:9px}
@media(max-width:820px){
  .live-example-heading{display:block;margin-bottom:22px}
  .live-example-detail{max-width:540px;margin-top:17px}
}
@media(max-width:580px){
  .showcase-footer-meta{grid-column:1;align-items:flex-start;flex-direction:column;gap:10px}
}
@media(max-width:380px){
  .showcase-intro h1{font-size:clamp(36px,11.5vw,40px);letter-spacing:-2.5px}
  .showcase-intro h1 em{letter-spacing:-1.8px}
}