/* Project-specific reference cards. Kept separate from the legacy showcase styles. */
.compact-work{padding-top:30px;max-width:1100px}
.compact-work .showcase-top{margin-bottom:20px}
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.work-card{--project:#a8d8ed;min-width:0;margin:0;overflow:hidden;background:#071722;border:1px solid #244354;border-radius:18px;box-shadow:0 10px 30px #0002}
.work-card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px}
.work-card-head>div{min-width:0}
.work-card-head h2{margin:4px 0 0;font:700 21px/1.2 var(--sans);letter-spacing:-.025em;color:#f4f7f8}
.work-card-kind{margin:0;font:500 10px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--project)}
.work-visit{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #345365;border-radius:50%;color:var(--project);font-size:23px;text-decoration:none;transition:background .2s}
.work-visit:hover{background:#183545}
.work-card a:focus-visible,.work-card video:focus-visible{outline:3px solid var(--project);outline-offset:-4px}
.work-scene{position:relative;height:272px;overflow:hidden;margin:0 12px;border-radius:10px;background:#102834}
.work-scene img{display:block;width:100%;height:100%;object-fit:cover}
.work-card-foot{padding:16px 20px 18px}
.work-card-foot p{margin:0;color:#c7d3dc;font:400 13px/1.55 var(--sans)}
.work-card-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:11px}
.work-card-links a{color:var(--project);font:600 12px/1.5 var(--sans);text-underline-offset:4px;text-decoration-thickness:1px}
.work-card-links>span{color:#96adba;font:400 11px/1.5 var(--sans)}
.work-beyou{--project:#e9b8b1}
.beauty-scene{display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:minmax(0,1fr);background:#f7e9de;color:#663f3b}
.beauty-portrait{position:relative;display:block;overflow:hidden}
.beauty-portrait img{object-position:55% 50%}
.beauty-brand{position:absolute;inset:auto 0 0;padding:30px 14px 14px;background:linear-gradient(transparent,#49302ccd);color:#fff7f0;font:500 24px/1.1 Georgia,serif}
.beauty-detail{display:flex;flex-direction:column;min-width:0;padding:12px;gap:10px}
.beauty-detail>a:not(.beauty-book){display:block;min-height:0;flex:1;overflow:hidden;border-radius:6px}
.beauty-detail img{object-position:50% 40%}
.beauty-detail strong{display:block;font:400 19px/1.15 Georgia,serif}
.beauty-treatments{display:block;font:500 11px/1.5 var(--sans);color:#79524e;margin-top:5px}
.beauty-book{display:block;color:#6f3e39;font:600 11px/1.5 var(--sans);text-underline-offset:3px}
.work-csabviz{--project:#9bd9f7}
.work-scene.plumbing-scene{display:grid;grid-template-columns:.95fr 1.05fr;height:auto;min-height:272px;background:#edf7fb;color:#183748}
.plumbing-visual{position:relative;min-width:0;display:block}
.plumbing-visual img{position:absolute;inset:0;object-position:56% center}
.plumbing-brand{position:absolute;inset:0 0 auto;background:linear-gradient(#08212de8,transparent);padding:18px 12px 42px;color:#e5f8ff;font:800 17px/1.1 var(--sans);letter-spacing:.09em}
.review-detail{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 16px;gap:10px}
.review-source{font:600 11px/1.4 var(--sans);color:#42677a}
.review-stars{color:#a56807;font-size:18px;letter-spacing:2px;line-height:1}
.review-detail blockquote{margin:0;font:400 19px/1.35 Georgia,serif;color:#1e4050}
.review-detail cite{font:600 11px/1.4 var(--sans);font-style:normal;color:#355a6c}
.review-detail a{font:500 10px/1.4 var(--sans);color:#355a6c;text-underline-offset:3px}
.work-sly{--project:#d7c695}
.sly-comparison{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:4px;background:#34443b}
.sly-comparison a{position:relative;min-width:0;display:block;overflow:hidden}
.sly-comparison img{object-position:center 54%;transition:transform .3s}
.sly-comparison a:hover img{transform:scale(1.025)}
.comparison-label{position:absolute;bottom:12px;left:12px;background:#0d211bd9;border:1px solid #adbea77a;border-radius:30px;padding:5px 12px;color:#f3f2e5;font:500 11px/1.5 var(--sans)}
.work-ceramics{--project:#bfcca5}
.ceramics-collection{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:8px;padding:8px;background:#e9e8df}
.ceramics-product{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;overflow:hidden;text-decoration:none;color:#354638;background:#f5f2e9;border-radius:5px}
.ceramics-product img{object-fit:contain;background:#e9e4da}
.ceramics-product>span{padding:9px 8px;font:500 13px/1.25 Georgia,serif;text-align:center}
.work-somgarden{--project:#c4d6a1;grid-column:1/-1}
.somgarden-content{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;gap:22px;padding:0 12px 12px}
.somgarden-scene{height:auto;min-height:240px;aspect-ratio:16/9;margin:0;background:#152c23}
.somgarden-scene video{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.garden-details{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:16px 18px 16px 0;gap:12px}
.garden-details>*{width:100%}
.garden-details h3{margin:0;font:400 clamp(26px,3vw,36px)/1.12 Georgia,serif;letter-spacing:-.025em;color:#e1eacf}
.garden-details p{margin:0;color:#bdcfbe;font:400 13px/1.65 var(--sans)}
.garden-features{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.garden-features a{border:1px solid #49634e;border-radius:30px;padding:6px 10px;font:500 11px/1.4 var(--sans);text-decoration:none;color:#d6e4cb}
.garden-features a:hover{background:#203c2c}
.garden-details small{font:400 10px/1.5 var(--sans);color:#a9bfae}
@media(max-width:760px){
 .reference-grid{grid-template-columns:1fr;gap:16px}
 .compact-work{padding-top:24px}
 .work-card-head{padding:16px}
 .work-card-head h2{font-size:20px}
 .work-card-kind{font-size:9px}
 .work-card-foot{padding:14px 16px 16px}
 .work-scene{height:268px;margin-inline:9px}
 .somgarden-content{grid-template-columns:1fr;gap:0;padding:0 9px 16px}
 .somgarden-scene{margin:0;height:auto;min-height:0}
 .garden-details{padding:18px 7px 0}
 .garden-details h3{font-size:28px}
}
@media(max-width:380px){
 .work-card-head h2{font-size:17px}
 .work-card-head{gap:8px;padding:14px}
 .work-visit{width:36px;height:36px}
 .work-scene{height:244px}
 .beauty-brand{font-size:20px;padding-inline:10px}
 .beauty-detail{padding:10px;gap:8px}
 .beauty-detail strong{font-size:17px}
 .review-detail{padding:14px 11px;gap:9px}
 .review-detail blockquote{font-size:17px}
 .review-stars{font-size:16px;letter-spacing:1px}
 .ceramics-product>span{font-size:12px;padding:8px 3px}
 .somgarden-scene{height:auto}
}
@media(prefers-reduced-motion:reduce){.work-card *{transition:none!important}}

/* Original business logos double as direct links to the reference websites. */
.work-card-head .work-brand-link{position:relative;width:132px;height:58px;padding:8px 16px 8px 8px;box-sizing:border-box;border-radius:10px;background:#f7f3ea;border-color:#ffffff26;transition:transform .2s,box-shadow .2s}
.work-card-head .work-brand-link:hover{background:#f7f3ea;transform:translateY(-2px);box-shadow:0 5px 18px #0003}
.work-brand-link .work-logo{display:block;width:100%;height:100%;object-fit:contain}
.work-brand-arrow{position:absolute;right:5px;top:3px;color:#567080;font:500 12px/1.2 var(--sans)}
.work-sly .work-brand-link,.work-sly .work-brand-link:hover{background:#112c25}
.work-somgarden .work-brand-link,.work-somgarden .work-brand-link:hover{background:#203d2c}
.work-sly .work-brand-arrow,.work-somgarden .work-brand-arrow{color:var(--project)}
.work-somgarden .work-logo{width:38px;margin:auto}
@media(max-width:480px){.work-card-head{gap:10px}.work-card-head .work-brand-link{width:106px;height:54px;flex:0 0 106px;padding:7px 13px 7px 6px}.work-card-head h2{font-size:18px}.work-card-kind{letter-spacing:.05em}}
@media(max-width:380px){.work-card-head .work-brand-link{width:94px;flex-basis:94px;height:50px}.work-card-head h2{font-size:17px}.work-card-head{padding:14px 12px}}

.work-csabviz .work-brand-link,.work-csabviz .work-brand-link:hover{background:#123849}.work-csabviz .work-brand-arrow{color:#bfe7f7}