/* Shym home page, the new look. Design system B (Warm Nordic), rules in DESIGN.md. Staging since 16 Oct 2026,
   at https://shymsaunas.com.au/?newlook=1 (home-page.php). The colours, the font and the buttons are in
   shym-shell.css. Every class starts with shym-home. The page is as wide as the screen; a part that keeps to the page
   column sits in .shym-home__wrap. */

.shym-home{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body);background:var(--white);text-align:left;overflow-x:clip}
.shym-home *,.shym-home *:before,.shym-home *:after{box-sizing:border-box}
.shym-home [hidden]{display:none !important}
.shym-home svg{display:block;flex:none}
.shym-home ul{margin:0;padding:0;list-style:none}
.shym-home li{margin:0;padding:0}
.shym-home .shym-home__wrap{width:min(1365px,calc(100% - 48px));margin:0 auto}
/* the bento runs wider than the text column: on a wide screen the text column left it looking narrow */
.shym-home .shym-home__wrap.is-wide{width:min(1800px,calc(100% - 48px))}
.shym-home img{max-width:none;border:0;border-radius:0;box-shadow:none}

.shym-home h1.shym-home__h1{margin:0;padding:0;font:700 clamp(36px,5.2vw,56px)/1.04 var(--font);letter-spacing:-.025em;text-transform:none;color:var(--white)}
.shym-home h2.shym-home__h2{margin:0;padding:0;font:700 clamp(30px,3.6vw,42px)/1.1 var(--font);letter-spacing:-.025em;text-transform:none;color:var(--ink)}
/* the small grey label over a heading, the way Revel does it and the guide cards already did */
.shym-home p.shym-home__eyebrow{margin:0 0 12px;padding:0;font:600 12.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.shym-home .shym-home__head{margin:0 0 36px}
.shym-home .shym-home__head p{max-width:640px;margin:10px 0 0;font:400 16px/1.65 var(--font);color:var(--body)}
.shym-home .shym-home__head.is-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.shym-home .shym-home__head.is-center{max-width:880px;margin-left:auto;margin-right:auto;text-align:center}
.shym-home .shym-home__head.is-center p{max-width:none}
.shym-home .shym-home__sec{padding:96px 0 0}
.shym-home .shym-home__band{margin:96px 0 0;padding:80px 0;background:var(--cream)}
/* two cream bands in a row are one cream run, with no white stripe between them (Francis, 16 Oct 2026) */
.shym-home .shym-home__band+.shym-home__band{margin-top:0;padding-top:0}

/* 1. the hero: the photo (and on a computer the video) under the site header, a plum shade from the left */
.shym-home .shym-home__hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,84vh,780px);margin-top:calc(-1 * var(--shym-main-h,76px));padding:calc(var(--shym-main-h,76px) + 48px) 0 136px;background:var(--ink);color:var(--white);overflow:hidden}
.shym-home .shym-home__hero-media{position:absolute;inset:0;z-index:-1}
.shym-home .shym-home__hero-img,.shym-home .shym-home__hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:60% 50%}
.shym-home .shym-home__hero-video{opacity:0;transition:opacity 1s}
.shym-home .shym-home__hero-video.is-playing{opacity:1}
/* The shade is strong only where the words are, so the sunny part of the clip keeps its colour (Francis,
   16 Oct 2026). The words sit in the page column, which is centred, so the dark zone has to end at the column
   and not at a fixed share of the screen: max() takes the px distance on a narrow screen and the share on a
   wide one. The first line is the plain fallback for a browser that cannot read max() in a gradient.
   Measured white-on-photo contrast over the whole loop, 1025 to 1920 px: worst 9.4 (the limit is 4.5). */
.shym-home .shym-home__hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,47,.93) 0,rgba(38,34,47,.9) 430px,rgba(38,34,47,.76) 690px,rgba(38,34,47,.34) 930px,rgba(38,34,47,.06) 1180px,rgba(38,34,47,0) 1400px),linear-gradient(180deg,rgba(38,34,47,.78) 0,rgba(38,34,47,.5) 110px,rgba(38,34,47,0) 280px),linear-gradient(0deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 26%);background:linear-gradient(90deg,rgba(38,34,47,.93) 0,rgba(38,34,47,.9) max(430px,30%),rgba(38,34,47,.76) max(690px,50%),rgba(38,34,47,.34) max(930px,68%),rgba(38,34,47,.06) max(1180px,84%),rgba(38,34,47,0) max(1400px,96%)),linear-gradient(180deg,rgba(38,34,47,.78) 0,rgba(38,34,47,.5) 110px,rgba(38,34,47,0) 280px),linear-gradient(0deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 26%)}
.shym-home .shym-home__hero-words{max-width:640px;animation:shym-home-rise .8s var(--ease) both}
.shym-home p.shym-home__label{display:inline-flex;align-items:center;gap:8px;height:32px;margin:0 0 20px;padding:0 14px 0 11px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);font:600 13px/1 var(--font);color:var(--white)}
.shym-home p.shym-home__label svg{width:16px;height:16px}
.shym-home p.shym-home__lead{max-width:540px;margin:18px 0 0;font:400 17px/1.6 var(--font);color:rgba(255,255,255,.9)}
.shym-home .shym-home__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.shym-home a.shym-home__rating{margin-top:22px}
@keyframes shym-home-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 2. the cream bar of the main categories, half on the hero */
.shym-home .shym-home__cats{position:relative;z-index:2;margin-top:-78px}
.shym-home .shym-home__cats-in{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:8px;border-radius:18px;background:var(--cream);animation:shym-home-rise .8s .15s var(--ease) both}
.shym-home a.shym-home__cat,.shym-home a.shym-home__cat:visited{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 6px 14px;border-radius:14px;color:var(--ink);text-decoration:none;text-align:center;transition:background .25s}
.shym-home a.shym-home__cat:hover{background:rgba(255,255,255,.65)}
.shym-home a.shym-home__cat:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.shym-home .shym-home__cat-pic{display:grid;place-items:center;width:72px;height:72px;overflow:hidden}
.shym-home .shym-home__cat-pic img{display:block;width:100%;height:100%;margin:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.shym-home a.shym-home__cat:hover .shym-home__cat-pic img:not([style]){transform:scale(1.06)}
.shym-home a.shym-home__cat.is-all .shym-home__cat-pic{width:52px;height:52px;margin:10px 0;border-radius:50%;background:var(--ink);color:var(--white)}
.shym-home a.shym-home__cat.is-all .shym-home__cat-pic svg{width:22px;height:22px}
.shym-home .shym-home__cat-words{display:flex;flex-direction:column;gap:2px;min-width:0}
.shym-home .shym-home__cat-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 14px/1.3 var(--font);color:var(--ink)}
.shym-home .shym-home__cat-words i{font:normal 400 13px/1.3 var(--font);color:var(--muted);white-space:nowrap}

/* 3. the brands. Two of the logo files are white (Leil, MSpa), so every logo is drawn as a dark shape. */
.shym-home .shym-home__brands{padding:56px 0 0}
.shym-home p.shym-home__brands-h{margin:0 0 20px;font:500 14px/1.5 var(--font);color:var(--muted);text-align:center}
.shym-home .shym-home__brands ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 56px}
.shym-home .shym-home__brands img{display:block;width:auto;height:40px;max-width:150px;margin:0;object-fit:contain;filter:brightness(0);opacity:.62;transition:opacity .25s}
.shym-home .shym-home__brands li:hover img{opacity:.9}

/* 4. the saunas: a moving row of tall photo tiles over the whole width (the row of the category page) */
.shym-home .shym-home__head-tools{display:flex;align-items:center;gap:20px;flex:none}
.shym-home button.shym-home__pause,.shym-home button.shym-home__pause:focus{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--ink);outline:0;color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.shym-home button.shym-home__pause[hidden]{display:none}
.shym-home button.shym-home__pause:hover{background:var(--ink) !important;color:var(--white)}
.shym-home button.shym-home__pause:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home button.shym-home__pause svg{width:18px;height:18px}
.shym-home button.shym-home__pause svg+svg,.shym-home button.shym-home__pause[aria-pressed="true"] svg:first-child{display:none}
.shym-home button.shym-home__pause[aria-pressed="true"] svg+svg{display:block}
.shym-home .shym-home__saunas .shym-home__head{margin-bottom:0}
.shym-home .shym-home__rail{margin:28px 0 0;padding:4px 0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.shym-home .shym-home__rail::-webkit-scrollbar{display:none}
.shym-home .shym-home__track{display:flex;gap:16px;width:max-content;padding:0 max(24px,calc((100vw - 1365px) / 2))}
.shym-home .shym-home__rail.is-marquee{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.shym-home .shym-home__rail.is-marquee .shym-home__track{padding:0;will-change:transform}
.shym-home .shym-home__rail.is-dragging{cursor:grabbing}
.shym-home .shym-home__rail.is-dragging a.shym-home__tile{pointer-events:none}
.shym-home a.shym-home__tile,.shym-home a.shym-home__tile:visited{position:relative;display:block;flex:0 0 clamp(220px,21vw,320px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--cream);color:var(--white);text-decoration:none;-webkit-user-drag:none}
.shym-home a.shym-home__tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home a.shym-home__tile:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(38,34,47,0) 46%,rgba(38,34,47,.82) 100%);pointer-events:none}
.shym-home .shym-cat__tile-pic{position:absolute;inset:0;display:block;overflow:hidden}
.shym-home .shym-cat__tile-pic img{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:var(--at,50% 50%);transform:scale(var(--z,1));transform-origin:var(--at,50% 50%);transition:transform .7s var(--ease);-webkit-user-drag:none}
.shym-home .shym-cat__tile-pic.is-zoom>span{position:absolute;top:0;bottom:0;left:50%;display:block;aspect-ratio:1/1;transform:translateX(-50%);transition:transform .7s var(--ease)}
.shym-home .shym-cat__tile-pic.is-zoom img{object-fit:contain;transition:none}
.shym-home .shym-cat__tile-pic.is-shot img{padding:10% 8% 34%;object-fit:contain;mix-blend-mode:multiply}
.shym-home a.shym-home__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(calc(var(--z,1) * 1.05))}
.shym-home a.shym-home__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%) scale(1.05)}
.shym-home .shym-home__rail.is-fast a.shym-home__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(var(--z,1))}
.shym-home .shym-home__rail.is-fast a.shym-home__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%)}
.shym-home .shym-home__tile-words{position:absolute;left:20px;right:72px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px}
.shym-home .shym-home__tile-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:700 26px/1.12 var(--font);letter-spacing:-.02em;color:var(--white)}
.shym-home .shym-home__tile-words i{font:normal 400 14px/1.3 var(--font);color:rgba(255,255,255,.86)}
.shym-home .shym-home__tile-go{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.shym-home .shym-home__tile-go svg{width:18px;height:18px}
.shym-home a.shym-home__tile:hover .shym-home__tile-go{background:var(--orange);color:var(--white);transform:translateX(2px)}

/* 4b. the sauna series row: cut-out tiles. The product shots sit on white, so the picture is dropped onto the cream
      with multiply, the same trick the product cards use. The words are ink, under the picture. */
.shym-home .shym-home__cut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.shym-home a.shym-home__cut,.shym-home a.shym-home__cut:visited{position:relative;display:flex;flex-direction:column;padding:0;background:none;color:var(--ink);text-decoration:none;-webkit-user-drag:none}
.shym-home a.shym-home__cut:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home .shym-home__cut-pic{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--cream)}
.shym-home .shym-home__cut-pic img{display:block;width:100%;height:100%;margin:0;object-fit:contain;mix-blend-mode:multiply;transform:scale(var(--cut-zoom,1));transition:transform .5s var(--ease);-webkit-user-drag:none}
.shym-home a.shym-home__cut:hover .shym-home__cut-pic img{transform:scale(calc(var(--cut-zoom,1) * 1.05))}
.shym-home .shym-home__cut-words{display:flex;flex-direction:column;gap:3px;padding:16px 2px 0}
.shym-home .shym-home__cut-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 18px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
.shym-home .shym-home__cut-words i{font:normal 400 14px/1.3 var(--font);color:var(--muted)}
.shym-home .shym-home__cut-go{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--white);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s var(--ease),background .25s,color .25s}
.shym-home .shym-home__cut-go svg{width:16px;height:16px}
.shym-home a.shym-home__cut:hover .shym-home__cut-go{opacity:1;transform:none;background:var(--orange);color:var(--white)}

/* 4b2. The sauna shapes as a wide bento: four real photos in four different sized boxes. The tile itself is the same
       `shym-home__tile` the category page row uses (photo, dark foot, name, arrow), only its size comes from the grid
       instead of the row. */
.shym-home .shym-home__bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,clamp(210px,20.8vw,300px));gap:16px}
.shym-home .shym-home__bento a.shym-home__tile,.shym-home .shym-home__bento a.shym-home__tile:visited{flex:none;width:auto;height:100%;aspect-ratio:auto}
.shym-home .shym-home__bento>a:nth-child(1){grid-column:1/6;grid-row:1/3}
.shym-home .shym-home__bento>a:nth-child(2){grid-column:6/10;grid-row:1/3}
.shym-home .shym-home__bento>a:nth-child(3){grid-column:10/13;grid-row:1}
.shym-home .shym-home__bento>a:nth-child(4){grid-column:10/13;grid-row:2}
/* the four photos were taken on different phones in different light, so each one carries its own small
   correction towards the middle of the set (see _patch_tone.py). The contrast is shared: it is what makes a
   phone photo sit beside a studio one. */
.shym-home .shym-home__bento .shym-cat__tile-pic img{filter:var(--tone,none) contrast(1.03)}
.shym-home .shym-home__bento>a:nth-child(1) .shym-home__tile-words b{font-size:30px}
.shym-home .shym-home__bento a.shym-home__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(calc(var(--z,1) * 1.05))}
.shym-home .shym-home__bento a.shym-home__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%) scale(1.05)}

/* 4c. The row sits in a cream band. It breaks a long run of white (the logos down to the reviews was 2,900 px of
      it) with the colour the reviews and mission bands already use, and the band hugs its own content: a dark
      block with wide empty margins read as pasted on (Francis, 16 Oct 2026: "it feels forced"). */
.shym-home .shym-home__people.is-soft{position:relative;margin-top:48px;padding:64px 0 0;background:none}
.shym-home .shym-home__people.is-soft:before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% - 120px);background:var(--cream)}
.shym-home .shym-home__people.is-soft>.shym-home__wrap,.shym-home .shym-home__people.is-soft>.shym-home__rail{position:relative}
.shym-home .shym-home__people.is-soft+.shym-home__sec{padding-top:72px}

/* 4d. the wide bands: a picture on one side, a short block of words on the other, the sides swapping band to band. */
.shym-home .shym-home__wide{padding:88px 0 0}
.shym-home .shym-home__wide.is-soft{margin:40px 0 0;padding:72px 0 80px;background:var(--cream)}
.shym-home .shym-home__wide.is-soft+.shym-home__sec{padding-top:80px}
.shym-home .shym-home__wide-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:center}
.shym-home .shym-home__wide-pic{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--cream)}
.shym-home .shym-home__wide.is-soft .shym-home__wide-pic{background:var(--white)}
.shym-home .shym-home__wide.is-flip .shym-home__wide-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.shym-home .shym-home__wide.is-flip .shym-home__wide-pic{order:2}
.shym-home .shym-home__wide.is-flip .shym-home__wide-words{order:1}
.shym-home .shym-home__wide-words p{max-width:460px;margin:16px 0 0;font:400 16px/1.65 var(--font);color:var(--body)}
.shym-home .shym-home__wide-words .shym-look-btn{margin-top:28px}
.shym-home .shym-home__wide-pic:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(calc(var(--z,1) * 1.03))}

/* 5. the best sellers: a switch over the cards */
.shym-home .shym-home__switch-row{display:flex;justify-content:center;margin:0 0 32px}
.shym-home .shym-home__switch{position:relative;display:inline-flex;gap:4px;padding:6px;border-radius:999px;background:var(--cream)}
.shym-home .shym-home__plate{position:absolute;top:6px;left:0;height:calc(100% - 12px);width:var(--w,0);border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateX(var(--x,0));opacity:0}
.shym-home .shym-home__switch.has-plate .shym-home__plate{opacity:1}
.shym-home .shym-home__switch.is-ready .shym-home__plate{transition:transform .45s var(--ease),width .45s var(--ease)}
.shym-home button.shym-home__tab,.shym-home button.shym-home__tab:hover,.shym-home button.shym-home__tab:focus{position:relative;z-index:1;height:44px;margin:0;padding:0 22px;border:0;border-radius:999px;background:transparent;box-shadow:none;font:500 15px/1 var(--font);letter-spacing:normal;text-transform:none;color:var(--body);white-space:nowrap;cursor:pointer;transition:color .25s}
.shym-home button.shym-home__tab:hover{color:var(--ink)}
.shym-home button.shym-home__tab.is-on{font-weight:600;color:var(--ink)}
.shym-home .shym-home__switch:not(.has-plate) button.shym-home__tab.is-on{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-home button.shym-home__tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-home .shym-home__set{animation:shym-home-fade .35s var(--ease) both}
.shym-home .shym-home__more{display:flex;justify-content:center;margin-top:32px}
@keyframes shym-home-fade{from{opacity:0}to{opacity:1}}

/* 5b. real people, real saunas: 4 tall tiles, each a silent clip that plays while it is on screen */
/* the clips sit in the moving row, so each one is a fixed width like a photo tile */
.shym-home .shym-home__clip-rail .shym-home__track{align-items:stretch}
.shym-home a.shym-home__clip{flex:0 0 clamp(240px,23vw,340px)}
.shym-home a.shym-home__clip,.shym-home a.shym-home__clip:visited{position:relative;display:block;aspect-ratio:2/3;-webkit-user-drag:none;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--white);text-decoration:none}
.shym-home a.shym-home__clip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home .shym-home__clip-media{position:absolute;inset:0;display:block}
.shym-home .shym-home__clip-pic,.shym-home .shym-home__clip-video{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;transition:transform .7s var(--ease)}
/* the clip fades in over a quarter second once it plays (it was half a second, which added to the still look) */
.shym-home .shym-home__clip-video{opacity:0;transition:opacity .25s,transform .7s var(--ease)}
.shym-home .shym-home__clip-video.is-playing{opacity:1}
.shym-home a.shym-home__clip:hover .shym-home__clip-pic,.shym-home a.shym-home__clip:hover .shym-home__clip-video{transform:scale(1.04)}
.shym-home a.shym-home__clip:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(38,34,47,0) 52%,rgba(38,34,47,.8) 100%);pointer-events:none}
.shym-home .shym-home__clip-words{position:absolute;left:20px;right:72px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px}
.shym-home .shym-home__clip-words b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--white)}
.shym-home .shym-home__clip-words i{font:normal 400 14px/1.3 var(--font);color:rgba(255,255,255,.86)}
.shym-home a.shym-home__clip:hover .shym-home__tile-go{background:var(--orange);color:var(--white);transform:translateX(2px)}
.shym-home .shym-home__people .shym-home__head{margin-bottom:28px}
.shym-home .shym-home__people .shym-home__head.is-center p{margin-left:auto;margin-right:auto}
/* a customer video tile: a play button in place of the arrow, white like the arrows, orange on hover. No tag: the
   customer videos look like the other clips (Francis, 18 Oct 2026). A tap opens the video with its sound (the pop-up,
   .shym-voice, at the end of this file) */
.shym-home .shym-home__tile-go.is-play svg{width:16px;height:16px;margin-left:2px}
/* the row on a sauna category page (staging): on white, no cream band behind it (Francis, 18 Oct 2026) */
.shym-home.shym-home--cat .shym-home__people.is-soft{margin-top:0;padding:72px 0 80px}
.shym-home.shym-home--cat .shym-home__people.is-soft:before{display:none}
/* The site's Additional CSS says "p, div { font-family: Inter !important }". Every paragraph and box of the page keeps
   Albert Sans (DESIGN.md): found 18 Oct 2026 on the live category pages (the video row), then on the home page itself,
   where 23 paragraphs were in Inter (eyebrows, the lines under the headings, the mission text, the tour). */
.shym-home p,.shym-home div{font-family:var(--font) !important}

/* 6. the mission, a cream band */
.shym-home .shym-home__mission-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.shym-home .shym-home__mission-pic{aspect-ratio:.95;border-radius:28px;overflow:hidden;background:var(--white)}
.shym-home .shym-home__mission-pic img{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:60% 50%}
.shym-home .shym-home__mission-pic.is-clip{position:relative;aspect-ratio:4/5;background:var(--ink)}
/* with a tall clip: the clip at the left, the words, the 3 numbers and the button at the right */
.shym-home .shym-home__mission-in.has-clip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.shym-home .shym-home__mission-in.has-clip .shym-home__mission-words{order:1}
.shym-home .shym-home__mission-in.has-clip .shym-home__mission-pic{order:2}
.shym-home .shym-home__mission-in.has-clip .shym-home__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 0}
.shym-home .shym-home__mission-in.has-clip .shym-home__stats li{padding:20px}
.shym-home .shym-home__mission-in.has-clip .shym-home__stats b{font-size:clamp(26px,2.8vw,30px)}
.shym-home .shym-home__mission-pic.is-clip .shym-home__clip-pic,.shym-home .shym-home__mission-pic.is-clip .shym-home__clip-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shym-home button.shym-home__pause.is-on-photo,.shym-home button.shym-home__pause.is-on-photo:focus{position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(38,34,47,.35) !important;box-shadow:inset 0 0 0 1.5px var(--white);color:var(--white)}
.shym-home button.shym-home__pause.is-on-photo:hover{background:var(--white) !important;color:var(--ink)}
.shym-home button.shym-home__pause.is-on-photo[hidden]{display:none}
.shym-home .shym-home__mission-words p{margin:16px 0 0;font:400 16px/1.65 var(--font);color:var(--body)}
.shym-home .shym-home__mission-words h2+p{margin-top:20px}
.shym-home .shym-home__mission-words a.shym-look-btn{margin-top:28px}
.shym-home .shym-home__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.shym-home .shym-home__stats li{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:18px;background:var(--white)}
.shym-home .shym-home__stats b{font:700 clamp(30px,3.6vw,40px)/1.1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.shym-home .shym-home__stats span{font:400 14px/1.5 var(--font);color:var(--body)}

/* 7. the projects: one large photo and 4 small ones */
.shym-home .shym-home__project-grid{display:grid;width:min(1800px,calc(100% - 48px));margin:0 auto;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:252px;gap:16px}
.shym-home .shym-home__project-grid.is-3{grid-template-columns:2fr 1fr}
.shym-home a.shym-home__project,.shym-home a.shym-home__project:visited{position:relative;display:block;min-width:0;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--cream);color:var(--white);text-decoration:none}
.shym-home a.shym-home__project:first-child{grid-row:span 2}
.shym-home a.shym-home__project:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home .shym-home__project-pic{position:absolute;inset:0;display:block;overflow:hidden}
.shym-home .shym-home__project-pic img{display:block;width:100%;height:100%;margin:0;object-fit:cover;filter:var(--tone,none) contrast(1.03);transition:transform .7s var(--ease)}
.shym-home a.shym-home__project:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(38,34,47,0) 46%,rgba(38,34,47,.82) 100%);pointer-events:none}
.shym-home a.shym-home__project:hover .shym-home__project-pic img{transform:scale(1.04)}
.shym-home .shym-home__project-name{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:3px}
.shym-home .shym-home__project-name b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--white)}
.shym-home .shym-home__project-name i{font:normal 400 14px/1.3 var(--font);color:rgba(255,255,255,.86)}
.shym-home a.shym-home__project:first-child .shym-home__project-name b{font-size:23px;letter-spacing:-.02em}
.shym-home a.shym-home__project:first-child .shym-home__project-name{left:24px;right:24px;bottom:22px}

/* 8. the reviews, a cream band */
.shym-home .shym-home__reviews-in{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px 56px;align-items:start}
/* 8d. the Google rating badge: a white card with Google's own G, the score, the stars and the count. The whole card
      is the link to our Google listing. The G is Google's mark, unaltered; the word beside it is our own font. */
.shym-home a.shym-home__gbadge,.shym-home a.shym-home__gbadge:visited{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 16px;width:fit-content;max-width:100%;margin:22px 0 4px;padding:16px 18px;border-radius:18px;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.shym-home a.shym-home__gbadge:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.shym-home a.shym-home__gbadge:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home .shym-home__gbadge-g{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px}
.shym-home .shym-home__gbadge-g svg{display:block;width:30px;height:30px}
.shym-home .shym-home__gbadge-top{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px}
.shym-home .shym-home__gbadge-top b{font:700 36px/1 var(--font);letter-spacing:-.025em;color:var(--ink)}
.shym-home .shym-home__gbadge-top .shym-look-stars svg{width:18px;height:18px}
.shym-home .shym-home__gbadge-sub{grid-column:2;grid-row:2;font:600 14px/1.4 var(--font);color:var(--ink)}
.shym-home .shym-home__gbadge-sub i{font:normal 400 14px/1.4 var(--font);color:var(--muted)}
.shym-home .shym-home__gbadge-go{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.shym-home .shym-home__gbadge-go svg{width:16px;height:16px}
.shym-home a.shym-home__gbadge:hover .shym-home__gbadge-go{background:var(--orange);color:var(--white);transform:translateX(2px)}
.shym-home .shym-home__review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shym-home figure.shym-home__review{display:flex;flex-direction:column;margin:0;padding:26px;border-radius:18px;background:var(--white)}
.shym-home figure.shym-home__review blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;margin:14px 0 0;padding:0;border:0;font:400 16px/1.65 var(--font);font-style:normal;color:var(--body);quotes:none}
.shym-home figure.shym-home__review blockquote:before,.shym-home figure.shym-home__review blockquote:after{content:none}
.shym-home figure.shym-home__review figcaption{margin-top:auto;padding-top:16px;font:600 14px/1.4 var(--font);color:var(--ink)}

/* 8b. a customer video card, first in the row of reviews. It plays with sound only on a tap. */
.shym-home figure.shym-home__vreview{padding:10px 10px 18px}
.shym-home .shym-home__vreview-media{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--ink)}
.shym-home .shym-home__vreview-pic,.shym-home .shym-home__vreview-video{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:50% 30%}
.shym-home .shym-home__vreview-video{opacity:0;transition:opacity .5s}
.shym-home .shym-home__vreview-media.is-playing .shym-home__vreview-video{opacity:1}
.shym-home .shym-home__vreview-media.is-playing .shym-home__vreview-pic{opacity:0}
/* with the sound on it is the whole video, which is taller than the card, so it is shown whole on plum */
.shym-home .shym-home__vreview-media.is-live{background:var(--ink)}
.shym-home .shym-home__vreview-media.is-live .shym-home__vreview-video{object-fit:contain}
.shym-home .shym-home__vreview-media.is-live .shym-home__vreview-tag{display:none}
.shym-home .shym-home__vreview-tag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--white);font:600 12.5px/1 var(--font);color:var(--ink)}
/* the sound button: small, at the bottom right of the card, always on show */
.shym-home button.shym-home__vreview-sound,.shym-home button.shym-home__vreview-sound:hover,.shym-home button.shym-home__vreview-sound:focus{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(38,34,47,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);color:var(--white);cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.shym-home button.shym-home__vreview-sound:hover{background:var(--white) !important;color:var(--ink);transform:scale(1.06)}
.shym-home button.shym-home__vreview-sound:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.shym-home button.shym-home__vreview-sound svg{width:22px;height:22px}
.shym-home button.shym-home__vreview-sound svg.is-on{display:none}
.shym-home button.shym-home__vreview-sound[aria-pressed="true"] svg.is-on{display:block}
.shym-home button.shym-home__vreview-sound[aria-pressed="true"] svg.is-off{display:none}
.shym-home button.shym-home__vreview-sound[aria-pressed="true"]{background:var(--orange) !important;box-shadow:none}
.shym-home figure.shym-home__vreview figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding:16px 6px 0;font:600 14px/1.4 var(--font);color:var(--ink)}
.shym-home figure.shym-home__vreview figcaption .shym-look-link{font-size:14px}

/* 8c. the big customer video panel: the video at the left, the heading, the rating and the cards at the right */
.shym-home .shym-home__reviews-in.has-feature{grid-template-columns:minmax(0,5fr) minmax(0,8fr);grid-template-areas:"video words" "video cards";grid-template-rows:auto 1fr;gap:28px 56px;align-items:start}
.shym-home .shym-home__reviews-in.has-feature .shym-home__reviews-words{grid-area:words}
.shym-home .shym-home__reviews-in.has-feature .shym-home__review-grid{grid-area:cards}
.shym-home .shym-home__reviews-in.has-feature figure.shym-home__vfeature{grid-area:video}
.shym-home .shym-home__reviews-in.has-feature a.shym-home__gbadge{margin:18px 0 2px}
.shym-home figure.shym-home__vfeature{display:flex;flex-direction:column;margin:0;padding:12px 12px 20px;border-radius:18px;background:var(--white)}
.shym-home figure.shym-home__vfeature .shym-home__vreview-media{aspect-ratio:4/5}
.shym-home figure.shym-home__vfeature .shym-home__vreview-tag{top:14px;left:14px}
.shym-home figure.shym-home__vfeature button.shym-home__vreview-play,.shym-home figure.shym-home__vfeature button.shym-home__vreview-play:hover,.shym-home figure.shym-home__vfeature button.shym-home__vreview-play:focus{width:80px;height:80px;margin:-40px 0 0 -40px}
.shym-home figure.shym-home__vfeature button.shym-home__vreview-play svg{width:32px;height:32px}
.shym-home figure.shym-home__vfeature figcaption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:16px 6px 0;font:600 15px/1.4 var(--font);color:var(--ink)}

/* the project photos run from one side of the screen to the other, the way the people row does
   (Francis, 16 Oct 2026). Only the heading stays in the text column. */
.shym-home .shym-home__projects .shym-home__project-grid{gap:14px}
.shym-home .shym-home__projects .shym-home__head{margin-bottom:28px}

/* 9. the guides */
.shym-home .shym-home__guides{padding-bottom:96px}
.shym-home .shym-home__guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.shym-home a.shym-home__guide,.shym-home a.shym-home__guide:visited{display:flex;flex-direction:column;padding:10px 10px 22px;border-radius:18px;background:var(--cream);color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.shym-home a.shym-home__guide:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.shym-home a.shym-home__guide:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-home .shym-home__guide-pic{display:block;aspect-ratio:1.6;border-radius:14px;overflow:hidden;background:var(--white)}
.shym-home .shym-home__guide-pic img{display:block;width:100%;height:100%;margin:0;object-fit:cover}
.shym-home .shym-home__guide-words{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 8px 0}
.shym-home .shym-home__guide-words i{font:normal 400 13px/1.3 var(--font);color:var(--muted)}
.shym-home .shym-home__guide-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
.shym-home .shym-home__guide-words .shym-look-link{margin-top:6px}
.shym-home a.shym-home__guide:hover .shym-look-link svg{transform:translateX(3px)}

/* ---------- laptops ---------- */
@media (max-width:1200px){
  .shym-home .shym-home__cats-in{grid-template-columns:repeat(9,minmax(96px,1fr));overflow-x:auto;scrollbar-width:none}
  .shym-home .shym-home__reviews-in{grid-template-columns:1fr}
  .shym-home .shym-home__reviews-in.has-feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .shym-home .shym-home__reviews-in.has-feature .shym-home__review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shym-home .shym-home__reviews-in.has-feature .shym-home__review-grid figure:nth-child(3){display:none}
}

/* ---------- tablets ---------- */
@media (max-width:1024px){
  .shym-home .shym-home__wrap{width:calc(100% - 32px)}
  .shym-home .shym-home__sec{padding-top:72px}
  .shym-home .shym-home__band{margin-top:72px;padding:64px 0}
  .shym-home .shym-home__hero{min-height:620px;padding-bottom:128px}
  .shym-home .shym-home__hero-media:after{background:linear-gradient(90deg,rgba(38,34,47,.92) 0%,rgba(38,34,47,.76) 50%,rgba(38,34,47,.46) 100%),linear-gradient(180deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 160px),linear-gradient(0deg,rgba(38,34,47,.45) 0%,rgba(38,34,47,0) 26%)}
  .shym-home .shym-home__cats-in{display:flex;gap:2px;margin-right:-16px;padding:8px 16px 8px 8px;border-radius:18px 0 0 18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shym-home .shym-home__cats-in::-webkit-scrollbar{display:none}
  .shym-home a.shym-home__cat{flex:0 0 104px;scroll-snap-align:start}
  .shym-home .shym-home__brands ul{gap:20px 36px}
  .shym-home .shym-home__brands img{height:34px;max-width:120px}
  .shym-home .shym-home__cut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shym-home .shym-home__mission-in{grid-template-columns:1fr;gap:32px}
  .shym-home .shym-home__mission-pic{aspect-ratio:1.5}
  .shym-home .shym-home__mission-in.has-clip{grid-template-columns:1fr}
  .shym-home .shym-home__mission-in.has-clip .shym-home__mission-words{order:2}
  .shym-home .shym-home__mission-in.has-clip .shym-home__mission-pic{order:1}
  .shym-home .shym-home__mission-pic.is-clip{width:min(100%,480px);aspect-ratio:4/5}
  .shym-home .shym-home__project-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .shym-home .shym-home__project-grid.is-3{grid-template-columns:1fr 1fr}
  .shym-home a.shym-home__project:first-child{grid-column:1/-1;grid-row:span 2}
  .shym-home .shym-home__guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shym-home .shym-home__cut-grid{gap:24px 20px}
  .shym-home .shym-home__wide-in{grid-template-columns:1fr;gap:28px}
  .shym-home .shym-home__wide.is-flip .shym-home__wide-in{grid-template-columns:1fr}
  .shym-home .shym-home__wide.is-flip .shym-home__wide-pic{order:0}
  .shym-home .shym-home__wide.is-flip .shym-home__wide-words{order:0}
  .shym-home .shym-home__wide-words p{max-width:620px}
    .shym-home .shym-home__bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,clamp(230px,29vw,320px))}
  .shym-home .shym-home__bento>a:nth-child(1),.shym-home .shym-home__bento>a:nth-child(2),.shym-home .shym-home__bento>a:nth-child(3),.shym-home .shym-home__bento>a:nth-child(4){grid-column:auto;grid-row:auto}
  .shym-home .shym-home__bento>a:nth-child(1) .shym-home__tile-words b{font-size:26px}
  .shym-home .shym-home__reviews-in.has-feature{grid-template-columns:1fr;grid-template-areas:"words" "video" "cards";grid-template-rows:auto}
  .shym-home .shym-home__reviews-in.has-feature figure.shym-home__vfeature{width:min(100%,480px)}
  .shym-home .shym-home__reviews-in.has-feature .shym-home__review-grid figure:nth-child(3){display:flex}
  .shym-home .shym-home__guide-grid a:nth-child(3){display:none}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  .shym-home .shym-home__sec{padding-top:56px}
  .shym-home .shym-home__band{margin-top:56px;padding:48px 0}
  .shym-home .shym-home__head{margin-bottom:20px}
  .shym-home .shym-home__head.is-row{flex-direction:column;align-items:flex-start}
  .shym-home .shym-home__hero{align-items:flex-end;min-height:0;padding:calc(var(--shym-main-h,64px) + 112px) 0 112px}
  .shym-home .shym-home__hero-img,.shym-home .shym-home__hero-video{object-position:50% 50%}
  .shym-home .shym-home__hero-media:after{background:linear-gradient(180deg,rgba(38,34,47,.62) 0%,rgba(38,34,47,.42) 14%,rgba(38,34,47,.8) 34%,rgba(38,34,47,.9) 70%,rgba(38,34,47,.94) 100%)}
  .shym-home p.shym-home__lead{font-size:16px}
  .shym-home .shym-home__btns{flex-direction:column}
  .shym-home .shym-home__btns a.shym-look-btn{width:100%}
  .shym-home .shym-home__cats{margin-top:-64px}
  .shym-home a.shym-home__cat{flex:0 0 calc((100vw - 40px) / 3.6);padding:10px 4px 12px}
  .shym-home .shym-home__cat-pic{width:56px;height:56px}
  .shym-home a.shym-home__cat.is-all .shym-home__cat-pic{width:44px;height:44px;margin:6px 0}
  .shym-home .shym-home__cat-words b{font-size:13px}
  .shym-home .shym-home__cat-words i{display:none}
  .shym-home .shym-home__brands{padding-top:40px}
  .shym-home .shym-home__brands ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 16px;justify-items:center}
  .shym-home .shym-home__brands img{height:30px;max-width:96px}
  .shym-home .shym-home__rail{margin-top:20px}
  .shym-home .shym-home__track{gap:10px;padding:0 16px}
  .shym-home a.shym-home__tile,.shym-home a.shym-home__tile:visited{flex-basis:62vw}
  .shym-home a.shym-home__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(var(--z,1))}
  .shym-home a.shym-home__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%)}
  .shym-home .shym-home__head-tools{width:100%;justify-content:space-between}
  .shym-home .shym-home__tile-words{left:16px;right:64px;bottom:16px}
  .shym-home .shym-home__tile-words b{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
  .shym-home .shym-home__tile-words i{font-size:13px}
  .shym-home .shym-home__tile-go{right:12px;bottom:12px;width:40px;height:40px}
  .shym-home .shym-home__switch-row{margin-bottom:20px}
  .shym-home .shym-home__switch{display:flex;width:100%}
  /* each tab as wide as its own name, the room left over shared out (Francis, 19 Oct 2026: "Cold plunge" ran out of its
     pill when all four were the same width); the plate already follows the tab's own width */
  .shym-home button.shym-home__tab,.shym-home button.shym-home__tab:hover,.shym-home button.shym-home__tab:focus{flex:1 1 auto;min-width:auto;padding:0 8px;font-size:14px}
  .shym-home a.shym-home__clip{flex-basis:66vw}
  .shym-home .shym-home__cut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .shym-home .shym-home__cut-go{opacity:1;transform:none;right:12px;bottom:12px;width:32px;height:32px}
  .shym-home .shym-home__cut-words{padding:12px 44px 0 6px}
  .shym-home .shym-home__people .shym-home__head{margin-bottom:20px}
  .shym-home .shym-home__people.is-soft{margin-top:32px;padding:44px 0 0}
  .shym-home .shym-home__people.is-soft:before{height:calc(100% - 76px)}
  .shym-home .shym-home__people.is-soft+.shym-home__sec{padding-top:56px}
  .shym-home.shym-home--cat .shym-home__people.is-soft{margin-top:0;padding:48px 0 56px}
  .shym-home .shym-home__cut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .shym-home .shym-home__bento{grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  .shym-home .shym-home__wide{padding-top:56px}
  .shym-home .shym-home__wide.is-soft{margin-top:32px;padding:48px 0 52px}
  .shym-home .shym-home__wide.is-soft+.shym-home__sec{padding-top:56px}
  .shym-home .shym-home__wide-pic{aspect-ratio:4/3}
  .shym-home .shym-home__bento a.shym-home__tile,.shym-home .shym-home__bento a.shym-home__tile:visited{height:auto;aspect-ratio:4/3}
  .shym-home .shym-home__bento>a:nth-child(1){aspect-ratio:1/1}
  .shym-home .shym-home__bento>a:nth-child(1) .shym-home__tile-words b{font-size:17px}
  .shym-home .shym-home__head{margin-bottom:24px}
  .shym-home .shym-home__stats{grid-template-columns:1fr;gap:10px;margin-top:32px}
  .shym-home .shym-home__stats li{flex-direction:row;align-items:center;gap:16px;padding:20px}
  .shym-home .shym-home__mission-in.has-clip .shym-home__stats{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .shym-home .shym-home__mission-pic.is-clip{width:100%}
  .shym-home .shym-home__stats b{flex:0 0 96px}
  .shym-home .shym-home__project-grid{width:calc(100% - 32px);grid-auto-rows:150px;gap:10px}
  .shym-home .shym-home__project-name{left:12px;right:12px;bottom:11px}
  .shym-home .shym-home__project-name b{font-size:14px}
  .shym-home .shym-home__project-name i{font-size:12.5px}
  .shym-home a.shym-home__project:first-child .shym-home__project-name b{font-size:18px}
  .shym-home .shym-home__review-grid{display:flex;gap:12px;margin-right:-16px;padding-right:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-home .shym-home__review-grid::-webkit-scrollbar{display:none}
  .shym-home figure.shym-home__review{flex:0 0 82vw;scroll-snap-align:start;padding:22px}
  .shym-home figure.shym-home__vreview{padding:10px 10px 18px}
  .shym-home a.shym-home__gbadge,.shym-home a.shym-home__gbadge:visited{width:100%;padding:14px 16px;gap:2px 12px}
  .shym-home .shym-home__gbadge-top b{font-size:30px}
  .shym-home .shym-home__reviews-in.has-feature figure.shym-home__vfeature{width:100%;padding:10px 10px 16px}
  .shym-home figure.shym-home__vfeature figcaption{flex-direction:column;align-items:flex-start}
  .shym-home .shym-home__guide-grid{display:flex;gap:12px;margin-right:-16px;padding-right:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-home .shym-home__guide-grid::-webkit-scrollbar{display:none}
  .shym-home .shym-home__guide-grid a:nth-child(3){display:flex}
  .shym-home a.shym-home__guide{flex:0 0 78vw;scroll-snap-align:start}
  .shym-home .shym-home__guides{padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  .shym-home *{animation:none !important;transition:none !important}
}

/* the theme's page box around the home page has no width limit and no padding */
body.shym-look-home main#content.site-main{max-width:none;width:100%;margin:0;padding:0}

/* 7. The pop-up of a customer video (shym-home.js, part 7). It sits at the end of the page, outside .shym-home, so it
   names its own colours (the same as DESIGN.md). The video is tall (9:16): as tall as the screen allows, at most 480 px
   wide, and on a phone as wide as the screen. The dark around it is the ink colour. */
html.shym-voice-open{overflow:hidden}
dialog.shym-voice{--ink:#26222F;--white:#FFFFFF;--orange:#B5412A;--font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--ink);overflow:hidden;box-sizing:border-box}
dialog.shym-voice[open]{display:flex;align-items:center;justify-content:center}
dialog.shym-voice::backdrop{background:rgba(38,34,47,.86)}
/* the video and, under it, the link to the sauna in it: the video is as tall as the screen allows less the link's 60 px */
.shym-voice__in{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(calc((100vh - 108px) * 9 / 16),100%,480px)}
@supports (height:100dvh){.shym-voice__in{width:min(calc((100dvh - 108px) * 9 / 16),100%,480px)}}
.shym-voice__frame{position:relative;width:100%;aspect-ratio:9/16}
.shym-voice__video{display:block;width:100%;height:100%;margin:0;border-radius:18px;background:var(--ink);object-fit:contain}
/* dialog.shym-voice in front: the site kit styles every button (.elementor-kit-1059 button: square, its own colours) */
dialog.shym-voice .shym-voice__close{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
dialog.shym-voice .shym-voice__close svg{display:block;width:18px;height:18px}
dialog.shym-voice .shym-voice__close:hover,dialog.shym-voice .shym-voice__close:focus{background:var(--orange);color:var(--white)}
dialog.shym-voice .shym-voice__close:focus-visible{outline:2px solid var(--white);outline-offset:3px}
/* the link under the video: a white pill, orange on hover (the kit styles every link, so it starts with dialog.shym-voice) */
dialog.shym-voice a.shym-voice__go{display:inline-flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 20px;border-radius:999px;background:var(--white);color:var(--ink);font:600 15px/1 var(--font);text-decoration:none;transition:background .3s,color .3s}
dialog.shym-voice a.shym-voice__go[hidden]{display:none}
dialog.shym-voice a.shym-voice__go svg{display:block;width:18px;height:18px}
dialog.shym-voice a.shym-voice__go:hover,dialog.shym-voice a.shym-voice__go:focus{background:var(--orange);color:var(--white)}
dialog.shym-voice a.shym-voice__go:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (max-width:640px){
  dialog.shym-voice{padding:16px}
  .shym-voice__in{gap:12px;width:min(calc((100vh - 88px) * 9 / 16),100%)}
  @supports (height:100dvh){.shym-voice__in{width:min(calc((100dvh - 88px) * 9 / 16),100%)}}
}

/* 8c. the reviews band on a sauna category page (staging, shym_home_cat_reviews): the spacing of the category
      page's own bands, so it sits in that page's rhythm */
.shym-home.shym-home--cat .shym-home__band.shym-home__reviews{margin-top:88px;padding:76px 0}
@media (max-width:1024px){.shym-home.shym-home--cat .shym-home__band.shym-home__reviews{margin-top:72px;padding:60px 0}}
@media (max-width:640px){.shym-home.shym-home--cat .shym-home__band.shym-home__reviews{margin-top:56px;padding:44px 0}}

/* 8d. on a computer the words and the cards sit in the middle of the video's height, so the two sides share one
      middle line (Francis, 18 Oct 2026: "its a bit off with the horizontal alignment"). Empty rows above and below
      take the spare height in equal parts. On the home page too (Francis, 18 Oct 2026: "A, do the home page too"). */
@media (min-width:1025px){.shym-home .shym-home__reviews-in.has-feature{grid-template-areas:"video ." "video words" "video cards" "video .";grid-template-rows:1fr auto auto 1fr;row-gap:0}.shym-home .shym-home__reviews-in.has-feature .shym-home__review-grid{margin-top:28px}}
/* the narrowest phones: the best sellers' tabs a size smaller, so the four names still fit in one row. Last in the
   file, after the 640 px rules it narrows */
@media (max-width:360px){
  .shym-home button.shym-home__tab,.shym-home button.shym-home__tab:hover,.shym-home button.shym-home__tab:focus{padding:0 6px;font-size:13px}
}