/* MIKE v5.6.4 (Oct 21, 2026): shout-outs in the SAME look as the home page Visualizer feature (css/mike-tweaks.css section 14):
   text + smoked button on the left, satin-silver porthole with a photo on the right, smoked speech bubble, blue foil seal.
   Used for Cool Ideas, the Shower Cutaway and Featured Artisans. Works on any page (not scoped to .page-home). */
.bt-sh-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); gap: 34px 56px; max-width: 1140px; margin: 34px auto 18px; padding: 26px 56px 6px 18px; box-sizing: border-box; }
.bt-sh-row.one { grid-template-columns: minmax(0, 600px); justify-content: center; }
.bt-sh-row a, .bt-sh-row a:hover, .bt-sh-row a:focus { text-decoration: none !important; }
.bt-sh { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 10px 0; position: relative; }
.bt-sh-side { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; flex: 1 1 auto; min-width: 0; text-align: left; }
.bt-sh-kicker { font: 700 12px/1.3 'MT Lato', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #2463b3; }
.bt-sh-title { font: 500 29px/1.08 'MT EB Garamond', Georgia, serif; color: #2b2f36; text-wrap: balance; }
.bt-sh-sub { font: 14.5px/1.45 'MT Lato', Arial, sans-serif; color: #555b64; }
.bt-sh-btn { display: inline-block; margin-top: 6px; color: #fff; font: 700 15px/1 'MT Lato', Arial, sans-serif; letter-spacing: .06em; padding: .8em 1.5em; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.08) 51%, rgba(0,0,0,.02) 100%), rgba(52,57,66,.9);
  border: 1px solid rgba(225,228,232,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.18); text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: all .25s; }
a.bt-sh:hover .bt-sh-btn, a.bt-sh:focus-visible .bt-sh-btn { background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.05) 51%, rgba(0,0,0,0) 100%), rgba(36,99,179,.92); border-color: #fff; }
a.bt-sh:focus-visible { outline: 2px solid #2463b3; outline-offset: 6px; border-radius: 8px; }
.bt-sh-port { position: relative; flex: 0 0 214px; height: 214px; }
.bt-sh-ring { position: absolute; inset: 0; border-radius: 50%; padding: 9px; background: conic-gradient(from 210deg, #f4f5f7, #aeb3ba, #ffffff, #9ea4ad, #eef0f2, #b8bdc4, #ffffff, #a3a9b1, #f4f5f7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 8px 22px rgba(20,30,50,.25), inset 0 1px 1px #fff; }
.bt-sh-win { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 3px 10px rgba(0,0,0,.45); background: #e9ecef; }
.bt-sh-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: bt-sh-zoom 9s ease-in-out infinite alternate; }
.bt-sh-label { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; font: 700 9.5px/1 'MT Lato', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding: 5px 9px; border-radius: 999px; background: rgba(30,33,40,.62); border: 1px solid rgba(255,255,255,.6); }
.bt-sh-bubble { position: absolute; left: -40px; top: -40px; width: 146px; padding: 11px 13px 12px; border-radius: 14px; color: #fff; text-align: left; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), rgba(36,40,48,.94); border: 1px solid rgba(225,228,232,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.28); animation: bt-sh-float 4s ease-in-out infinite; }
.bt-sh-bubble::after { content: ""; position: absolute; right: 22px; bottom: -9px; width: 16px; height: 16px; transform: rotate(45deg); background: rgba(36,40,48,.94); border-right: 1px solid rgba(225,228,232,.9); border-bottom: 1px solid rgba(225,228,232,.9); }
.bt-sh-bubble-line { display: block; font: italic 500 17px/1.15 'MT EB Garamond', Georgia, serif; }
.bt-sh-bubble-small { display: block; margin-top: 5px; font: 700 9.5px/1.2 'MT Lato', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8ec0f5; white-space: nowrap; }
.bt-sh-seal { position: absolute; right: -46px; bottom: 34px; width: 94px; height: 94px; z-index: 3; filter: drop-shadow(0 5px 10px rgba(15,35,75,.35)); }
.bt-sh-seal-teeth { position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 66%, transparent 67%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg); mask: radial-gradient(circle, #000 66%, transparent 67%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg);
  background: repeating-conic-gradient(from -3.75deg, #fbfbfc 0 7.5deg, #b4bac2 7.5deg 15deg); }
.bt-sh-seal-glint { position: absolute; inset: -10%; background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 290deg, rgba(255,255,255,.95) 325deg, rgba(255,255,255,0) 360deg); animation: bt-sh-spin 7s linear infinite; }
.bt-sh-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes bt-sh-spin { to { transform: rotate(360deg); } }
@keyframes bt-sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bt-sh-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (max-width: 767px) {
  .bt-sh-row { padding: 30px 18px 4px; gap: 48px; }
  .bt-sh { flex-direction: column; text-align: center; gap: 18px; }
  .bt-sh-port { order: -1; flex-basis: auto; width: 196px; height: 196px; }
  .bt-sh-side { align-items: center; text-align: center; }
  .bt-sh-title { font-size: 25px; }
  .bt-sh-bubble { left: -62px; top: -18px; width: 150px; }
  .bt-sh-bubble-small { font-size: 9px; letter-spacing: .07em; }
  .bt-sh-bubble-line { font-size: 15.5px; }
  .bt-sh-seal { right: -44px; bottom: 30px; width: 86px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) { .bt-sh-row *, .bt-sh-row *::before, .bt-sh-row *::after { animation: none !important; transition: none !important; } }
/* v5.6.4e: porthole videos + the original home Visualizer feature as one of the four */
.bt-sh-win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-sh-row .bt-viz-wrap { margin: 0 !important; max-width: none !important; padding-right: 0 !important; }
.bt-sh-row .bt-viz-wrap .bt-viz { padding: 10px 0; }

/* MIKE Oct 21, 2026: home page only. The 3 shout-outs (Artisans removed Oct 21) sit between Services and the Gallery.
   On desktop (1024px+) they go 3 across, full screen width, each stacked (porthole on top, text under) and as big as fits.
   Covers the Visualizer (bt-viz, from mike-tweaks.css) and the other 2 (bt-sh). Phone and tablet use the normal layout. Remove this block to undo. */
.bt-sh-row--home-wide { margin: 40px auto 30px; }
@media (min-width: 1024px) {
  .bt-sh-row--home-wide { max-width: none; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(28px, 3vw, 64px); padding: 78px clamp(48px, 4.5vw, 100px) 10px; }
  .bt-sh-row--home-wide > * { min-width: 0; }
  /* middle card (Cool Tiling Ideas) sits lower, like the middle Services card above it */
  .bt-sh-row--home-wide > :nth-child(2) { margin-top: 48px; }
  .bt-sh-row--home-wide > :nth-child(1) { margin-top: 20px; }
  .bt-sh-row--home-wide { padding-bottom: 0; }
  .page-home .bt-sh-row--home-wide .bt-viz-wrap { max-width: none; margin: 0; padding: 0; }
  .bt-sh-row--home-wide .bt-sh, .page-home .bt-sh-row--home-wide .bt-viz { flex-direction: column; align-items: center; text-align: center; gap: 24px; height: 100%; justify-content: flex-start; }
  .bt-sh-row--home-wide .bt-sh-port, .page-home .bt-sh-row--home-wide .bt-viz-port { order: -1; flex: 0 0 auto; width: clamp(210px, 18vw, 300px); height: clamp(210px, 18vw, 300px); }
  .bt-sh-row--home-wide .bt-sh-side, .page-home .bt-sh-row--home-wide .bt-viz-side { align-items: center; text-align: center; }
  .bt-sh-row--home-wide .bt-sh-title, .page-home .bt-sh-row--home-wide .bt-viz-title { font-size: clamp(26px, 2.1vw, 38px); }
  .bt-sh-row--home-wide .bt-sh-kicker, .page-home .bt-sh-row--home-wide .bt-viz-kicker { font-size: clamp(11px, .8vw, 14px); }
  .bt-sh-row--home-wide .bt-sh-sub, .page-home .bt-sh-row--home-wide .bt-viz-sub { font-size: clamp(14px, 1vw, 17.5px); max-width: 30em; }
  .bt-sh-row--home-wide .bt-sh-bubble, .page-home .bt-sh-row--home-wide .bt-viz-bubble { left: -24px; top: -46px; width: clamp(136px, 9.5vw, 180px); }
  .bt-sh-row--home-wide .bt-sh-seal, .page-home .bt-sh-row--home-wide .bt-viz-seal { right: -18px; bottom: 14px; width: clamp(72px, 5vw, 92px); height: clamp(72px, 5vw, 92px); }
}

/* MIKE Oct 21: bigger, easier-to-read speech bubbles (readable for every age). Remove this block to undo. */
.bt-sh-bubble, .page-home .bt-viz-bubble { width: 190px; padding: 13px 15px 14px; }
.bt-sh-bubble-line, .page-home .bt-viz-bubble-line { font-size: 22px; line-height: 1.15; }
.bt-sh-bubble-small, .page-home .bt-viz-bubble-small { font-size: 12.5px; letter-spacing: .06em; color: #b9dafc; white-space: normal; }
@media (max-width: 767px) {
  .bt-sh-bubble, .page-home .bt-viz-bubble { left: -50px; top: -26px; width: 180px; }
  .bt-sh-bubble-line, .page-home .bt-viz-bubble-line { font-size: 20px; }
  .bt-sh-bubble-small, .page-home .bt-viz-bubble-small { font-size: 12px; }
}
@media (min-width: 1024px) {
  .bt-sh-row--home-wide .bt-sh-bubble, .page-home .bt-sh-row--home-wide .bt-viz-bubble { width: clamp(190px, 12vw, 240px); top: -56px; }
  .bt-sh-row--home-wide .bt-sh-bubble-line, .page-home .bt-sh-row--home-wide .bt-viz-bubble-line { font-size: clamp(22px, 1.5vw, 28px); }
  .bt-sh-row--home-wide .bt-sh-bubble-small, .page-home .bt-sh-row--home-wide .bt-viz-bubble-small { font-size: clamp(12.5px, .8vw, 15px); }
}

/* MIKE: Oct 21, 2026: ACADEMY is the last menu item (after CONTACT) with the Academy crest beside it, site wide */
.top-menu ul li a.nav-acad{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.top-menu ul li a.nav-acad .nav-crest{width:20px;height:20px;flex:0 0 20px;display:block;transition:transform .2s ease,filter .2s ease}
.top-menu ul li a.nav-acad:hover .nav-crest,.top-menu ul li a.nav-acad:focus-visible .nav-crest,.top-menu ul li a.nav-acad[aria-current="page"] .nav-crest{transform:scale(1.12);filter:drop-shadow(0 0 3px rgba(255,255,255,.55))}