/* Homepage project gallery. Shared portfolio pages keep their existing layout. */
.portfolio-showcase {
  --showcase-ink: #eaf0dc;
  --showcase-muted: #a8b7a9;
  --showcase-line: #d8e5ce30;
  background: #152b23;
  color: var(--showcase-ink);
  padding: 36px 0 0;
}
.showcase-topline,.showcase-bottomline {
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:.65rem;letter-spacing:.04em;
}
.showcase-topline {border-bottom:1px solid var(--showcase-line);padding-bottom:28px;margin-bottom:64px}
.showcase-topline p {display:flex;align-items:center;gap:14px;margin:0;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.showcase-topline>span {color:var(--showcase-muted)}
.showcase-spark {font-size:1.65rem;line-height:1;color:var(--accent)}
.showcase-layout {display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.65fr);gap:7%}
.showcase-sidebar {position:sticky;top:124px;align-self:start;padding-bottom:32px}
.showcase-intro h2 {font-size:clamp(3.3rem,5.5vw,5.4rem);font-weight:500;letter-spacing:-.075em;line-height:1.02;margin-bottom:26px}
.showcase-intro h2 em {color:var(--accent);font-style:normal}
.showcase-intro>p {font-size:.84rem;line-height:1.8;color:var(--showcase-muted)}
.showcase-index {margin-top:48px}
.showcase-index-heading {display:flex;justify-content:space-between;margin-bottom:14px;color:var(--showcase-muted);font-size:.55rem;text-transform:uppercase;letter-spacing:.12em}
.showcase-index a {position:relative;display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;border-top:1px solid var(--showcase-line);padding:15px 0;color:var(--showcase-muted);font-size:.7rem;line-height:1.5;transition:color .25s,padding .25s}
.showcase-index a:last-child {border-bottom:1px solid var(--showcase-line)}
.showcase-index a:hover,.showcase-index a[aria-current="location"] {color:var(--accent);padding-left:8px;text-decoration:none}
.showcase-index-number {font-size:.57rem;font-variant-numeric:tabular-nums;opacity:.65}
.showcase-all {display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--showcase-ink);font-size:.75rem;font-weight:650;margin-top:28px;padding:8px 0}
.showcase-project {--stage:#dce6cb;--stage-text:#344634;scroll-margin-top:20px;margin-bottom:76px;min-width:0}
.showcase-project--realty {--stage:#e1cdbd;--stage-text:#624836}
.showcase-project--map {--stage:#cededc;--stage-text:#3f5e5c}
.showcase-project--clip {--stage:#d5d0e1;--stage-text:#544a67}
.showcase-project--calculator {--stage:#e5dfbd;--stage-text:#605a34}
.showcase-project-topline {display:flex;justify-content:space-between;gap:16px;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--showcase-muted);padding-bottom:14px}
.showcase-project-topline>span:first-child {color:var(--showcase-ink)}
.showcase-stage {position:relative;isolation:isolate;overflow:hidden;background:var(--stage);color:var(--stage-text);padding:52px 34px 20px;border-radius:3px}
.showcase-watermark {position:absolute;z-index:-1;top:-40px;left:8px;font-size:clamp(8rem,19vw,18rem);font-weight:800;line-height:1;letter-spacing:-.1em;opacity:.08;pointer-events:none}
.showcase-screen {position:relative;background:#f7f7f0;border:1px solid #172a2420;border-radius:5px;overflow:hidden;box-shadow:0 22px 40px -20px #13271d70,0 3px 5px #13271d15;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.showcase-browser {display:grid;grid-template-columns:1fr 3fr 1fr;align-items:center;gap:8px;height:29px;padding:0 11px;color:#67716a;background:#f5f5ef;font-size:.46rem;letter-spacing:.025em;text-align:center;border-bottom:1px solid #172a2415}
.showcase-browser-dots {display:flex;gap:4px}
.showcase-browser-dots i {width:4px;height:4px;background:#bfc7b9;border-radius:50%}
.showcase-stage .project-demo {border-radius:0}
.showcase-stage .project-demo video {display:block;width:100%;height:auto;aspect-ratio:1440/820;object-fit:contain;background:#f7f7f0}
.showcase-project--calculator .project-demo video {aspect-ratio:1440/810}
.showcase-stage-footer {position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:25px;font-size:.48rem;text-transform:uppercase;letter-spacing:.1em}
.showcase-play-hint {text-transform:none;letter-spacing:0}
.showcase-play-hint[hidden] {display:none}
.showcase-play-hint>span {margin-left:6px}
.showcase-project-link {display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--showcase-ink);padding-top:24px}
.showcase-project-link:hover {text-decoration:none}
.showcase-category {font-size:.53rem;text-transform:uppercase;letter-spacing:.1em;color:var(--showcase-muted);margin-bottom:9px}
.showcase-project-link h3 {font-size:clamp(1.35rem,2.1vw,1.9rem);font-weight:500;letter-spacing:-.045em;line-height:1.2;margin-bottom:9px}
.showcase-description {color:var(--showcase-muted);font-size:.72rem;line-height:1.6}
.showcase-visit {display:flex;align-items:center;gap:12px;flex-shrink:0}
.showcase-visit-label {font-size:.59rem}
.showcase-project-link:focus-visible {outline-color:var(--accent);border-radius:2px}
.portfolio-showcase .drone-play-status {color:var(--ink);padding-inline:12px}
.showcase-bottomline {border-top:1px solid var(--showcase-line);padding:26px 0 30px;color:var(--showcase-muted)}
.showcase-bottomline a {color:var(--accent)}
.showcase-bottomline a>span {margin-left:16px;font-size:1rem}
.portfolio-showcase+.gbp-home-section {padding-top:100px}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .showcase-stage:hover .showcase-screen {transform:translateY(-5px);box-shadow:0 30px 45px -20px #13271d80,0 3px 5px #13271d15}
  .showcase-project.is-seen .showcase-screen {animation:showcase-arrive .8s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes showcase-arrive {from{transform:translateY(20px);opacity:.7}to{transform:translateY(0);opacity:1}}
@media(min-width:1600px) {.showcase-layout{grid-template-columns:360px minmax(0,1fr);gap:90px}}
@media(min-width:961px) and (max-height:820px) {
  .showcase-sidebar{top:108px}
  .showcase-intro h2{font-size:3.6rem;margin-bottom:18px}
  .showcase-index{margin-top:28px}
  .showcase-index a{padding-block:11px}
  .showcase-all{margin-top:18px}
}
@media(max-width:1100px) and (min-width:961px) {
  .showcase-layout{gap:5%;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr)}
  .showcase-stage{padding:40px 23px 18px}
  .showcase-visit-label{display:inline}
}
@media(max-width:960px) {
  .showcase-topline{margin-bottom:44px}
  .showcase-layout{grid-template-columns:1fr;gap:38px}
  .showcase-sidebar{position:static;padding:0}
  .showcase-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
  .showcase-intro h2{font-size:clamp(3.5rem,8vw,5rem);margin:0}
  .showcase-intro>p{font-size:.8rem;max-width:260px;margin:0 0 4px}
  .showcase-index{display:none}
  .showcase-all{width:fit-content;gap:35px;margin-top:24px}
  .showcase-project{margin-bottom:56px}
  .showcase-project:last-child{margin-bottom:48px}
  .showcase-project-link h3{font-size:1.8rem}
  .showcase-stage{padding:48px 38px 20px}
  .portfolio-showcase+.gbp-home-section{padding-top:75px}
}
@media(max-width:600px) {
  .portfolio-showcase{padding-top:26px}
  .showcase-topline{padding-bottom:21px;margin-bottom:35px}
  .showcase-topline>span{display:none}
  .showcase-topline p{font-size:.57rem}
  .showcase-intro{display:block}
  .showcase-intro h2{font-size:clamp(3.5rem,15vw,5rem);margin-bottom:22px}
  .showcase-intro>p{font-size:.77rem}
  .showcase-layout{gap:30px}
  .showcase-project-topline{font-size:.47rem;letter-spacing:.06em;padding-bottom:11px}
  .showcase-project-topline>span:last-child{display:none}
  .showcase-stage{padding:32px 16px 16px}
  .showcase-watermark{font-size:9rem;top:-23px;left:3px}
  .showcase-browser{height:23px;padding-inline:8px;font-size:.4rem}
  .showcase-stage-footer{font-size:.4rem;letter-spacing:.05em;margin-top:20px}
  .showcase-play-hint{max-width:110px;text-align:right}
  .showcase-project-link{padding-top:19px;gap:14px;align-items:flex-start}
  .showcase-project-link h3{font-size:1.4rem;max-width:250px}
  .showcase-category{font-size:.48rem;letter-spacing:.06em}
  .showcase-description{font-size:.67rem;max-width:260px}
  .showcase-visit{padding-top:20px}
  .showcase-visit-label{display:inline}
  .showcase-project{margin-bottom:42px}
  .showcase-bottomline{display:block;font-size:.59rem;padding-block:24px}
  .showcase-bottomline>span{display:block;margin-bottom:14px}
  .portfolio-showcase+.gbp-home-section{padding-top:60px}
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-showcase *{animation:none!important;transition:none!important}
  html:has(.portfolio-showcase){scroll-behavior:auto}
}