/* 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}

/* Bokrodi's own timber and roofing photos link to the matching project pages. */
.work-bokrodi{--project:#dfb985;grid-column:1/-1;background:#101e1b;border-color:#435346}
.work-bokrodi .work-logo{width:46px;margin:auto}
.work-bokrodi .work-brand-link,.work-bokrodi .work-brand-link:hover{background:#faf9f2}
.carpentry-gallery{display:grid;grid-template-columns:1.3fr 1fr;gap:6px;background:#263a2c}
.carpentry-gallery a{position:relative;display:block;min-width:0;overflow:hidden}
.carpentry-gallery .comparison-label{border-color:#dfb98580;background:#10231de6}
@media(max-width:760px){
 .carpentry-gallery{height:auto;grid-template-columns:1fr;gap:8px}
 .carpentry-gallery a{aspect-ratio:16/9}
}

/* Google profile and review invitation, directly after the portfolio cards. */
.ws-google-reviews{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:24px;padding:34px 38px;border:1px solid #345670;border-radius:22px;background:linear-gradient(115deg,#10283b,#091a29 62%,#102b40);box-shadow:0 16px 46px #0002;scroll-margin-top:110px}
.ws-google-profile,.ws-google-invite{min-width:0}
.ws-google-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ws-google-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:13px;background:#fff}
.ws-google-icon img{display:block;width:32px;height:32px;object-fit:contain}
.ws-google-brand p{margin:0;color:#a9c4d8;font:500 11px/1.5 var(--sans)}
.ws-google-brand strong{display:block;color:#f4f8fc;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ws-google-reviews h2{margin:0 0 12px;color:#f4f8fc;font:650 clamp(24px,2.6vw,32px)/1.2 var(--sans);letter-spacing:-.04em}
.ws-google-copy{max-width:43ch;margin:0;color:#bdcfdd;font:400 13px/1.7 var(--sans)}
.ws-google-profile-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:14px;color:#b5e2ff;text-underline-offset:5px;font:600 12px/1.5 var(--sans)}
.ws-google-profile-link:hover{color:#fff}
.ws-google-invite{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-left:1px solid #345670;padding-left:42px}
.ws-google-eyebrow{margin:0 0 12px;color:#d8bc83;font:600 10px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.ws-google-invite h3{margin:0 0 12px;color:#f4f8fc;font:600 clamp(20px,2.1vw,26px)/1.3 var(--sans);letter-spacing:-.03em}
.ws-google-review-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;max-width:100%;box-sizing:border-box;margin-top:22px;padding:12px 18px;border:1px solid #fff;border-radius:12px;background:#fff;color:#172c3d;text-decoration:none;font:700 12px/1.5 var(--sans);transition:box-shadow .2s,transform .2s}
.ws-google-review-button img{display:block;flex:0 0 24px;width:24px;height:24px;object-fit:contain}
.ws-google-review-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #369ade30}
.ws-google-reviews a:focus-visible{outline:3px solid #8bd7ff;outline-offset:5px}
.ws-google-note{margin:12px 0 0;color:#9fb9cc;font:400 10px/1.6 var(--sans)}
@media(max-width:760px){
 .ws-google-reviews{grid-template-columns:1fr;gap:24px;padding:26px 22px;margin-top:18px}
 .ws-google-invite{border-left:0;border-top:1px solid #345670;padding:24px 0 0}
 .ws-google-brand{margin-bottom:20px}
 .ws-google-copy{max-width:none}
 .ws-google-review-button{width:100%}
}
@media(max-width:380px){.ws-google-reviews{padding:22px 18px}.ws-google-review-button{gap:9px;padding:12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.ws-google-review-button{transition:none}.ws-google-review-button:hover{transform:none}}

/* Public Google reviews, manually verified on 31 October 2026. */
.ws-google-rating{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:18px 0}
.ws-google-rating strong{color:#f4f8fc;font:700 28px/1.2 var(--sans)}
.ws-google-rating strong span{font-size:14px;font-weight:400;color:#bdcfdd}
.ws-review-stars{margin:0;color:#f6c96b;font:600 18px/1.4 var(--sans);letter-spacing:2px}
.ws-google-count{flex-basis:100%;color:#bdcfdd;font:500 12px/1.5 var(--sans)}
.ws-review-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ws-review-card{display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid #345670;border-radius:16px;background:#0b1c2d}
.ws-review-header{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.ws-review-header>div{min-width:0}
.ws-review-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#24445e;color:#e8f4ff;font:700 13px/1 var(--sans)}
.ws-review-header h3{margin:0 0 4px;color:#f4f8fc;font:650 14px/1.4 var(--sans);overflow-wrap:anywhere}
.ws-review-header time{color:#9fb9cc;font:400 11px/1.5 var(--sans)}
.ws-review-google{flex:0 0 24px;width:24px;height:24px;margin-left:auto;padding:5px;box-sizing:content-box;background:#fff;border-radius:8px;object-fit:contain}
.ws-review-card blockquote{margin:16px 0 20px;color:#d8e4ee;font:400 13px/1.8 var(--sans);overflow-wrap:anywhere}
.ws-review-card blockquote p{margin:0}
.ws-review-translation{margin:0 0 12px;color:#9fb9cc;font:400 11px/1.6 var(--sans)}
.ws-review-source{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;color:#b5e2ff;font:600 11px/1.5 var(--sans);text-underline-offset:4px}
.ws-review-source:hover{color:#fff}
.ws-review-snapshot{grid-column:1/-1;margin:-22px 0 0;color:#9fb9cc;font:400 10px/1.6 var(--sans)}
@media(max-width:760px){.ws-review-list{grid-template-columns:1fr;gap:16px}.ws-review-card{padding:22px}.ws-review-snapshot{margin:-8px 0 0}}
@media(max-width:380px){.ws-review-card{padding:18px}.ws-review-header{gap:9px}.ws-review-avatar{flex-basis:36px;width:36px;height:36px}.ws-review-header h3{font-size:13px}.ws-review-google{flex-basis:20px;width:20px;height:20px}}

.ws-facebook-contact .contact-value { display: flex; align-items: center; gap: 14px; }
.ws-facebook-contact img { flex: 0 0 28px; width: 28px; height: 28px; }
.ws-facebook { margin-top: 16px; padding: clamp(22px, 4vw, 38px); border: 1px solid #365d90; border-radius: 22px; background: linear-gradient(115deg, #102d50, #0b1d30 75%); color: #f4f8fc; scroll-margin-top: 110px; }
.ws-facebook-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ws-facebook-intro > div { min-width: 0; }
.ws-facebook-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; font: 700 17px/1.4 var(--sans); }
.ws-facebook-brand img { display: block; flex: 0 0 40px; width: 40px; height: 40px; }
.ws-facebook h2 { margin: 0 0 10px; font: 650 clamp(23px, 2.5vw, 30px)/1.2 var(--sans); letter-spacing: -.035em; }
.ws-facebook-intro p { max-width: 59ch; margin: 0; color: #c1d4e8; font: 400 14px/1.7 var(--sans); }
.ws-facebook-actions { flex: 0 0 auto; max-width: 100%; }
.ws-facebook-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; max-width: 100%; padding: 12px 18px; box-sizing: border-box; background: #fff; color: #153b68; border-radius: 10px; font: 700 13px/1.5 var(--sans); text-decoration: none; }
.ws-facebook-button:hover { background: #e3efff; }
.ws-facebook :is(a):focus-visible { outline: 3px solid #8bd7ff; outline-offset: 5px; }
.ws-facebook-intro .ws-facebook-note { margin-top: 12px; max-width: 31ch; font-size: 11px; }
.ws-facebook-feedback { margin-top: 26px; padding-top: 22px; border-top: 1px solid #365d90; }
.ws-facebook-feedback > h3 { margin: 0 0 18px; font: 600 16px/1.5 var(--sans); }
.ws-facebook-review-icon { flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; }
@media (max-width: 760px) {
 .ws-facebook-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
 .ws-facebook-actions, .ws-facebook-button { width: 100%; }
 .ws-facebook-intro .ws-facebook-note { max-width: none; }
}

.ws-cylex {
  margin-top: 16px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #355e63;
  border-radius: 22px;
  background: linear-gradient(115deg, #112d33, #0b1e29 75%);
  color: #f4f8fc;
  scroll-margin-top: 110px;
}
.ws-cylex-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ws-cylex h2 { margin: 0 0 8px; font: 650 clamp(23px, 2.5vw, 30px)/1.2 var(--sans); letter-spacing: -.035em; }
.ws-cylex p { max-width: 61ch; margin: 0; color: #c3d8da; font: 400 14px/1.65 var(--sans); }
.ws-cylex-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0;
  min-height: 46px; padding: 10px 16px; border-radius: 10px; box-sizing: border-box;
  background: #d3f4ed; color: #12342f; font: 700 13px/1.5 var(--sans); text-decoration: none;
}
.ws-cylex-link:hover { background: #effffb; }
.ws-cylex details { margin-top: 16px; border-top: 1px solid #35565b; }
.ws-cylex summary { width: fit-content; padding: 14px 0 5px; min-height: 44px; box-sizing: border-box; color: #bce6de; font: 600 13px/1.6 var(--sans); cursor: pointer; }
.ws-cylex summary:hover { color: #fff; }
.ws-cylex :is(a, summary):focus-visible { outline: 3px solid #9beada; outline-offset: 4px; }
.ws-cylex iframe { display: block; width: 100%; height: 90px; margin-top: 9px; border: 0; border-radius: 8px; background: #fff; }
@media (max-width: 650px) {
  .ws-cylex-intro { flex-direction: column; align-items: flex-start; gap: 16px; }
}