/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /assets/css/home-editorial-v9.css */
/* Two homepage chapters: the real build, then the parts behind it. */
.page-home .home-build-story{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:48px;min-height:740px;padding:90px var(--page-gutter,5vw) 74px;background:#181a1c;color:#f5f5f0;overflow:hidden;border-top:1px solid #ffffff24}
.home-build-story .build-scene{position:absolute;inset:0 0 0 29%;z-index:-2}
.build-scene img{width:100%;height:100%;display:block;object-fit:cover;object-position:55% 55%}
.home-build-story:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#181a1c 5%,#181a1cf5 24%,#181a1ca6 47%,#181a1c12 78%),linear-gradient(0deg,#181a1cf0 0%,transparent 55%);pointer-events:none}
.home-build-story .section-label{color:#d1d3d6;font-size:11px;letter-spacing:.16em;margin-bottom:26px}.home-build-story .section-label span{margin:0 12px;color:#7e858e}
.page-home .home-build-story h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-style:normal;font-size:clamp(54px,5.8vw,88px);line-height:.98;letter-spacing:-.035em;margin:0 0 26px;color:#fafaf5}
.home-build-story .build-story-intro{font:400 16px/1.75 'DM Sans',sans-serif;color:#d3d4d5;max-width:37ch;margin:0}
.home-build-story .feature-actions{gap:26px;margin-top:30px}.home-build-story a{color:inherit}.build-watch{display:inline-flex;align-items:center;gap:12px;font:500 14px 'DM Sans',sans-serif;text-decoration:none}.build-play{width:48px;height:48px;display:grid;place-items:center;border:1px solid #dfe7ef80;border-radius:50%;background:#ffffff0a;transition:box-shadow .3s,background .3s}.build-play svg{width:20px;height:20px}.build-watch:hover .build-play,.build-watch:focus-visible .build-play{background:#ffffff20;box-shadow:0 0 24px #d5e2f74a}.home-build-story .text-link{font-size:13px;border-color:#ffffff65}.build-evidence{max-width:610px;border-top:1px solid #dce4ee55;padding-top:22px}.build-results{display:flex;gap:48px}.build-results>div{display:flex;flex-direction:column;gap:8px}.build-result-value{font:400 clamp(35px,3.6vw,52px)/1 'DM Sans',sans-serif;letter-spacing:-.055em;font-variant-numeric:lining-nums tabular-nums}.build-result-value>span{font-size:.55em;letter-spacing:-.03em}.build-result-label{font:400 12px/1.5 'DM Sans',sans-serif;color:#ced1d4}.build-evidence>p{font:400 11px/1.8 'DM Sans',sans-serif;color:#bfc3c8;max-width:57ch;margin:20px 0 0}.build-evidence>p a{display:inline-flex;gap:6px;align-items:center;text-underline-offset:4px}.build-evidence .ui-arrow{width:14px;height:14px}.build-photo-note{position:absolute;bottom:24px;right:var(--page-gutter,5vw);color:#d4d7db;font:400 10px/1.5 'DM Sans',sans-serif;letter-spacing:.02em}
.page-home .home-design-edit{padding:88px var(--page-gutter,5vw) 90px;background:#f2f2ef;border:0;overflow:visible}.home-design-edit .section-heading{align-items:flex-end;margin-bottom:44px}.home-design-edit .section-label{display:flex;align-items:center;gap:20px;margin-bottom:25px;letter-spacing:0;text-transform:none}.home-creations-word{font:500 22px/1 'DM Sans',sans-serif;letter-spacing:-.04em;color:#35383b}.home-edit-label{font:400 10px/1.5 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#666b70;border-left:1px solid #b8bcc1;padding-left:20px}.page-home .home-design-edit .section-title{font-size:clamp(44px,4.6vw,68px);line-height:1.03;letter-spacing:-.025em}.home-design-edit .selected-grid{gap:32px}.page-home .home-design-edit .selected-card{position:relative;display:flex;flex-direction:column;background:none;border:0;border-radius:0;overflow:visible;transform:none;isolation:isolate}.home-design-edit .selected-card:before{content:"";position:absolute;inset:12% -8% 22%;z-index:-1;background:radial-gradient(ellipse at 30% 32%,#c3cfde88,transparent 54%),radial-gradient(ellipse at 70% 68%,#9cabb956,transparent 57%);filter:blur(22px);opacity:0;transition:opacity .45s;pointer-events:none}.home-design-edit .selected-card:hover:before,.home-design-edit .selected-card:focus-visible:before{opacity:1}.home-design-edit .selected-card:focus-visible{outline:2px solid #626f7e;outline-offset:8px}.page-home .home-design-edit .home-model-motion{background:transparent;mix-blend-mode:multiply;aspect-ratio:1.12;width:100%;border:0;padding:0}.home-design-edit .home-model-motion img,.home-design-edit .home-model-motion canvas{object-fit:contain;filter:none}.page-home .home-design-edit .home-design-caption{position:relative;flex:1;padding:23px 0 0;border-top:1px solid #aaaeb3}.home-design-number{position:absolute;top:24px;right:0;font:400 11px 'DM Sans',sans-serif;color:#70777d;letter-spacing:.08em}.home-design-edit .model-spec{font:400 11px/1.5 'DM Sans',sans-serif;padding-right:28px;color:#656b70}.page-home .home-design-edit .selected-card h3{font:500 clamp(21px,2vw,29px)/1.2 'DM Sans',sans-serif;letter-spacing:-.035em;margin:12px 0}.home-design-detail{font:400 13px/1.65 'DM Sans',sans-serif;color:#606467;max-width:30ch;margin:0 0 20px}.home-design-edit .text-link{font-size:13px}.home-design-availability{display:block;font:400 10px 'DM Sans',sans-serif;color:#666;margin:-8px 0 14px}
@media(min-width:1000px){.home-design-edit .selected-card:nth-child(2){padding-top:45px}.home-design-edit .selected-card:nth-child(3){padding-top:90px}}
@media(max-width:760px){.page-home .home-build-story{min-height:0;padding:58px 24px 48px;gap:30px}.home-build-story .build-scene{inset:0;opacity:.55}.home-build-story:after{background:linear-gradient(90deg,#181a1ced,#181a1c66),linear-gradient(0deg,#181a1cf5 0%,#181a1c11 100%)}.home-build-story .section-label{font-size:9px;letter-spacing:.12em}.home-build-story .section-label span{margin:0 6px}.page-home .home-build-story h2{font-size:58px}.home-build-story .build-story-intro{font-size:14px;max-width:31ch}.home-build-story .feature-actions{gap:20px}.build-results{gap:32px}.build-result-label{font-size:10px}.build-evidence>p{font-size:10px}.build-photo-note{position:static;font-size:9px;color:#aeb4bc}.page-home .home-design-edit{padding:56px 24px}.home-design-edit .section-heading{display:block;margin-bottom:20px}.home-design-edit .section-heading>a{margin-top:22px}.home-design-edit .section-label{gap:14px;margin-bottom:24px}.home-edit-label{padding-left:14px;font-size:9px}.home-creations-word{font-size:20px}.home-design-edit .selected-grid{grid-template-columns:1fr;gap:36px}.page-home .home-design-edit .selected-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:center;border-top:1px solid #bfc2c5;padding-top:18px}.page-home .home-design-edit .home-design-caption{border:0;padding:0}.home-design-number{position:static;display:block;margin-bottom:12px}.page-home .home-design-edit .selected-card h3{font-size:22px}.home-design-edit .model-spec{font-size:10px;padding:0}.home-design-detail{font-size:12px;margin-bottom:14px}.page-home .home-design-edit .home-model-motion{aspect-ratio:1;align-self:center}.home-design-edit .selected-card:before{inset:10% -3%}.home-design-edit .selected-card .text-link{font-size:12px}}
@media(max-width: 0px){.home-design-edit .selected-card:before,.build-play{transition:none}}
/* Carry the editorial rhythm through the existing homepage features. */
.page-home .customer-notes.review-showcase{padding-block:84px;background:radial-gradient(ellipse at 10% 0%,#464a4d,transparent 62%),linear-gradient(135deg,#292b2d,#202123)}
.page-home .review-showcase>header{margin-bottom:38px;align-items:flex-end}.page-home .review-showcase h2{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.025em}.page-home .review-showcase .review-intro{max-width:48ch}.page-home .review-shop-summary{border-top:1px solid #ffffff26;padding-top:26px;margin-top:26px}.page-home .review-service{border-top:1px solid #ffffff26;padding-top:44px}
.page-home .yt-showcase{border-top:1px solid #ffffff24;padding-block:80px}.page-home .channel-intro{padding-block:38px 32px}.page-home .channel-intro>p{max-width:35ch}.page-home .channel-footer{margin-top:38px}
.page-home .reach-mini{border-top:1px solid #ffffff20;padding-block:80px}.page-home .reach-mini h2{font-size:clamp(38px,4vw,58px);line-height:1.08;letter-spacing:-.025em}
.page-home .studio-story{background:#f2f2ef;padding-block:88px;gap:clamp(32px,6vw,90px)}.page-home .studio-story .section-title{font-size:clamp(42px,4.6vw,66px);line-height:1.05;letter-spacing:-.025em;max-width:12ch}.page-home .studio-story p:not(.section-label){font-size:15px;max-width:42ch}.page-home .studio-carousel-stage{border-radius:5px}.home-studio-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}.home-studio-links a{font-size:13px}.page-home footer{border-top:1px solid #ffffff20}.page-home footer .footer-top>div>p{max-width:28ch;font-size:15px;line-height:1.7}
@media(max-width:760px){.page-home .customer-notes.review-showcase,.page-home .yt-showcase,.page-home .reach-mini,.page-home .studio-story{padding-block:56px}.page-home .review-showcase>header{align-items:flex-start;margin-bottom:28px}.page-home .review-shop-summary{padding-top:20px}.page-home .review-service{padding-top:30px}.page-home .channel-intro{padding-block:28px}.page-home .studio-story .section-title{max-width:12ch}.home-studio-links{gap:22px}.home-build-story .build-evidence>p{font-size:11px}.home-build-story .build-photo-note{font-size:10px}.home-design-edit .selected-card>.home-design-caption{border-left:0}}
@media(max-width:760px){.page-home footer .footer-top>div:first-child{flex:0 0 auto}.page-home footer .footer-top{gap:34px}.page-home .home-design-edit .home-design-caption{min-width:0}}
.build-results>button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;padding:0 0 12px;color:#b6bcc3;text-align:left;cursor:pointer;transition:color .2s,border-color .2s}.build-results>button[aria-pressed="true"]{color:#fff;border-bottom-color:#e1e8f2}.build-results>button:hover{color:#fff;border-bottom-color:#8895a4}.build-results>button:focus-visible{outline:2px solid #e1e8f2;outline-offset:7px}.build-results>button .build-result-label{color:inherit}.build-scene img{object-position:55% 55%}
@media(max-width: 0px){.build-results>button{transition:none}}
/* The installation results are tactile selectors, not passive statistics. */
.build-scene{overflow:hidden}.build-scene .build-photo-overlay{position:absolute;inset:0;opacity:0;pointer-events:none}
.build-results{gap:12px}.build-results>button{position:relative;min-width:180px;padding:18px 42px 17px 18px;border:1px solid #d9e3ef45;border-radius:9px;background:linear-gradient(145deg,#e3edf614,#e3edf604);box-shadow:inset 0 1px #ffffff0c;color:#c9ced4;transition:background .25s,border-color .25s,box-shadow .25s}.build-results>button:after{content:"";position:absolute;right:16px;top:20px;width:7px;height:7px;border:1px solid #dce7f2aa;border-radius:50%;background:transparent;transition:background .25s,box-shadow .25s}.build-results>button[aria-pressed="true"]{border-color:#e0e8f1aa;background:linear-gradient(135deg,#dbe7f329,#dbe7f30b);box-shadow:inset 0 1px #ffffff24,0 0 22px #cddbec12}.build-results>button[aria-pressed="true"]:after{background:#eef5ff;box-shadow:0 0 10px #e0ebffaa}.build-results>button:hover,.build-results>button[data-pending]{border-color:#f2f6fc;background:#dfebf321;box-shadow:0 0 24px #cfdeef24}.build-results>button:active{background:#dfebf335}
/* A silver studio surface for creations: broad light, graphite type, open models. */
.page-home .home-design-edit{position:relative;isolation:isolate;background:radial-gradient(ellipse at 12% 24%,#fff 0%,#ffffff00 47%),radial-gradient(ellipse at 86% 60%,#b9c4d17d 0%,#b9c4d100 46%),linear-gradient(125deg,#e1e5e8 0%,#f4f5f4 38%,#d7dce2 72%,#eef0f1 100%);border-top:1px solid #fff;border-bottom:1px solid #aeb8c2;overflow:hidden}
.home-design-edit .section-heading{align-items:flex-end;position:relative;border-bottom:1px solid #919da749;padding-bottom:32px;margin-bottom:38px}.home-design-edit .section-label{margin-bottom:26px}.home-design-edit .home-creations-word{font-size:29px;letter-spacing:-.06em}.home-design-edit .home-edit-label{color:#535c65}.page-home .home-design-edit .section-title{font-size:clamp(48px,5.7vw,82px);max-width:11ch;line-height:.98}.home-design-intro{font:400 14px/1.7 'DM Sans',sans-serif;max-width:34ch;margin:19px 0 0;color:#555e65}.home-design-edit .section-heading>.text-link{margin-bottom:4px}.home-design-edit .selected-grid{gap:40px;align-items:start}.page-home .home-design-edit .home-design-caption{flex:none;border-top-color:#81909d80;padding-top:20px}.home-design-edit .selected-card:before{opacity:.6;inset:4% -12% 28%;background:radial-gradient(ellipse at 18% 35%,#ffffffeb,transparent 51%),radial-gradient(ellipse at 76% 57%,#92a9c180,transparent 49%),radial-gradient(ellipse at 47% 75%,#eaf3ffcc,transparent 44%);filter:blur(28px)}.home-design-edit .selected-card:hover:before,.home-design-edit .selected-card:focus-visible:before{opacity:1}.page-home .home-design-edit .home-model-motion{mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
@media(max-width:760px){.build-results{gap:10px}.build-results>button{min-width:0;flex:1;padding:16px 25px 16px 12px}.build-results>button:after{right:11px;top:18px;width:6px;height:6px}.build-result-value{font-size:34px}.build-result-label{font-size:10px}.home-design-edit .section-heading{padding-bottom:27px;margin-bottom:12px}.home-design-edit .home-creations-word{font-size:25px}.home-design-edit .home-edit-label{font-size:8px}.page-home .home-design-edit .section-title{font-size:54px}.home-design-intro{font-size:13px}.home-design-edit .selected-grid{gap:24px}.page-home .home-design-edit .selected-card{padding-block:20px 4px}.home-design-edit .selected-card:before{inset:5% -10% 10%}.home-design-edit .selected-card:first-child{border-top:0}}
@media(max-width: 0px){.build-results>button,.build-results>button:after{transition:none}}

/* More uninterrupted film above the hero copy; keep actions inside the hero. */
.page-home .hero-content{padding-bottom:clamp(32px,3vw,44px)}
@media(max-width:760px){.page-home .hero-content{padding-bottom:56px}}
/* Bring the collection into view sooner, with an editorial title/intro row. */
.page-home .home-design-edit{padding-top:56px}
.home-design-edit .section-heading{display:block;padding-bottom:24px;margin-bottom:22px}
.home-design-edit .section-heading>div{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);column-gap:48px;align-items:end}
.home-design-edit .section-label{grid-column:1/-1;margin-bottom:22px}
.page-home .home-design-edit .section-title{max-width:none;font-size:clamp(44px,4.7vw,68px)}
.home-design-edit .section-title br{display:none}
.home-design-edit .section-title br:after{content:" "}
.home-design-intro{margin:0;max-width:34ch}
.home-design-edit .section-heading>.text-link{display:inline-flex;margin:20px 0 0}
@media(max-width:760px){.page-home .home-design-edit{padding-top:40px}.home-design-edit .section-heading>div{display:block}.page-home .home-design-edit .section-title{font-size:48px}.home-design-intro{margin-top:16px}.home-design-edit .section-heading{padding-bottom:20px;margin-bottom:8px}}

/* The workshop closes the homepage with a quieter, photographic signature. */
.page-home .studio-story{position:relative;isolation:isolate;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-block:72px;background:radial-gradient(ellipse at 18% 12%,#626b733d,transparent 58%),linear-gradient(125deg,#292d30,#181b1e 75%);color:#e7e9e9;border-top:1px solid #b8c7d232;border-bottom:1px solid #b8c7d232}
.page-home .studio-story>.studio-carousel{margin:0;position:relative;min-width:0}
.page-home .studio-story .studio-carousel-stage{border-radius:3px;box-shadow:0 0 0 1px #dce8f02e,0 20px 65px #0005}
.page-home .studio-story .studio-carousel-footer{display:flex;align-items:center;gap:12px;margin-top:17px;color:#bcc5cc;font:400 11px/1.6 'DM Sans',sans-serif;letter-spacing:.025em}
.page-home .studio-story .studio-carousel-footer:before{content:"";width:24px;height:1px;background:#b7c8d6;flex:none}
.page-home .studio-story>div{position:relative;padding-block:25px}
.page-home .studio-story .section-label{color:#c2cbd2;font-size:10px;letter-spacing:.2em;margin:0 0 26px;display:flex;align-items:center;gap:16px}
.page-home .studio-story .section-label:before{content:"";width:32px;height:1px;background:linear-gradient(90deg,#f3f7fa,#718493);box-shadow:0 0 12px #dbeeff66}
.page-home .studio-story .section-title{color:#f2f3f1;font-size:clamp(46px,5.2vw,76px);max-width:12ch;line-height:.98;letter-spacing:-.035em;margin-bottom:28px}
.page-home .studio-story p:not(.section-label){color:#bdc4c9;font-size:14px;line-height:1.8;max-width:40ch}
.page-home .studio-story .home-studio-links{margin-top:30px;padding-top:24px;border-top:1px solid #ccd9e32e;gap:20px}
.page-home .studio-story .text-link{color:#f0f3f4;border-color:#a7b5c18c;font-size:12px;text-underline-offset:5px;transition:color .2s,border-color .2s}
.page-home .studio-story .text-link:hover{color:#fff;border-color:#fff}.page-home .studio-story .text-link:focus-visible{outline:2px solid #dceaff;outline-offset:6px}
@media(max-width:760px){.page-home .studio-story{grid-template-columns:1fr;padding:44px 24px;gap:28px}.page-home .studio-story>div{grid-row:1;padding:0}.page-home .studio-story .section-title{font-size:52px;max-width:14ch;margin-bottom:20px}.page-home .studio-story .section-label{margin-bottom:20px}.page-home .studio-story .home-studio-links{margin-top:22px;padding-top:18px;gap:18px}.page-home .studio-story p:not(.section-label){font-size:13px;max-width:44ch}.page-home .studio-story .studio-carousel-controls{position:static;transform:none;max-width:none;justify-content:center;margin-top:12px}.page-home .studio-story .studio-carousel-stage{overflow:visible;box-shadow:none}.page-home .studio-story .studio-carousel-track{border-radius:3px;overflow-y:hidden}.page-home .studio-story .studio-carousel-footer{margin-top:13px}}
@media(max-width: 0px){.page-home .studio-story .text-link{transition:none}}

/* Cooling results are quiet tabs, not decorative panels. */
.home-build-story .build-results{gap:28px;border-bottom:1px solid #ffffff38;width:fit-content;max-width:100%}
.home-build-story .build-results>button{position:relative;min-width:0;padding:8px 0 18px;border:0;border-radius:0;background:none;box-shadow:none;color:#b5bbc1;transition:color .2s}
.home-build-story .build-results>button:after{content:"";inset:auto 0 -1px;width:auto;height:2px;border:0;border-radius:0;background:#f2f3f4;box-shadow:none;opacity:0;transition:opacity .2s}
.home-build-story .build-results>button[aria-pressed="true"]{color:#fff;background:none;border:0;box-shadow:none}
.home-build-story .build-results>button[aria-pressed="true"]:after{background:#f2f3f4;box-shadow:none;opacity:1}
.home-build-story .build-results>button:hover,.home-build-story .build-results>button[data-pending],.home-build-story .build-results>button:active{color:#fff;background:none;border:0;box-shadow:none}
.home-build-story .build-results>button:hover:after{opacity:.45}.home-build-story .build-results>button[aria-pressed="true"]:hover:after{opacity:1}
.home-build-story .build-results>button:focus-visible{outline:2px solid #d5dce3;outline-offset:6px}
@media(max-width:760px){.home-build-story .build-results{width:100%;gap:24px}.home-build-story .build-results>button{flex:1;padding:8px 0 16px}.home-build-story .build-result-label{font-size:10px}}
@media(max-width: 0px){.home-build-story .build-results>button,.home-build-story .build-results>button:after{transition:none}}
/* /assets/css/home-creation-cards-v1.css */
/* A quieter collection surface; interaction belongs to the selected design. */
@property --silver-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes collection-silver {
  to { --silver-angle: 360deg; }
}

.page-creations .product-group,
.page-creations .creations-grid {
  overflow: visible;
}

.home-creation-card {
  position: relative;
  border: none !important;
  border-radius: 14px !important;
  background: #fafaf8 !important;
  box-shadow: none;
  overflow: visible !important;
  transform: none !important;
  perspective: none !important;
  transition: box-shadow .35s ease, background-color .35s ease, border-color .35s ease;
}

.home-creation-card .model-image-open {
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

.home-creation-card .model-poster,
.home-creation-card .model-poster img {
  transform: none !important;
}

.home-creation-card .creation-body {
  border: 0 !important;
  border-radius: 0 0 14px 14px !important;
  padding: 22px 24px 26px !important;
}

.home-creation-card .creation-title {
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -.025em;
  line-height: 1.25;
}

.home-creation-card .creation-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #535350;
  max-width: 42ch;
}

.creation-fit-note {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: #696965;
}

.home-creation-card .model-spec {
  font-size: 10px;
  letter-spacing: .06em;
  color: #74746f;
}

/* Luminous spinning halo / shadow aura: perfectly concentric (inset -16px, radius 14+16=30px) */
.home-creation-card::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 30px !important;
  pointer-events: none;
  background: conic-gradient(
    from var(--silver-angle, 0deg),
    rgba(120, 140, 165, 0.25) 0deg,
    rgba(165, 190, 220, 0.65) 55deg,
    rgba(225, 242, 255, 1) 115deg,
    #ffffff 145deg,
    rgba(225, 242, 255, 1) 175deg,
    rgba(160, 185, 215, 0.65) 235deg,
    rgba(110, 130, 155, 0.25) 295deg,
    rgba(120, 140, 165, 0.25) 360deg
  );
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
}

/* Metallic moving silver outline ribbon: mathematically concentric (inset -2px, padding 2px, radius 14+2=16px) */
.home-creation-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px !important;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--silver-angle, 0deg),
    rgba(140, 152, 168, 0.25) 0deg,
    rgba(175, 190, 208, 0.6) 60deg,
    rgba(225, 238, 255, 0.95) 115deg,
    #ffffff 145deg,
    rgba(240, 248, 255, 1) 165deg,
    rgba(180, 195, 215, 0.8) 205deg,
    rgba(125, 138, 155, 0.35) 260deg,
    rgba(140, 152, 168, 0.25) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .3s ease;
}

/* Hover and focus activation */
.home-creation-card:hover,
.home-creation-card:focus-within {
  z-index: 3 !important;
  background: #ffffff !important;
  box-shadow:
    0 20px 44px -8px rgba(18, 28, 42, 0.22),
    0 6px 18px -3px rgba(18, 28, 42, 0.10),
    0 0 32px 2px rgba(175, 202, 238, 0.65),
    0 0 12px 1px rgba(255, 255, 255, 0.9) !important;
  transform: none !important;
}

.home-creation-card:hover::before,
.home-creation-card:focus-within::before {
  opacity: 1 !important;
  animation: collection-silver 3.6s linear infinite !important;
}

.home-creation-card:hover::after,
.home-creation-card:focus-within::after {
  opacity: 1 !important;
  animation: collection-silver 3.6s linear infinite !important;
}


.home-design-edit .selected-grid{gap:clamp(36px,4.5vw,72px);align-items:start;isolation:isolate}
.page-home .home-design-edit{overflow:visible}
.home-creation-card{display:flex;flex-direction:column;min-width:0;isolation:isolate;text-decoration:none;color:inherit}
.home-creation-card .home-model-motion{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#fff;mix-blend-mode:normal;mask:none;-webkit-mask:none}
.home-creation-card .home-model-motion img,.home-creation-card .home-model-motion canvas{display:block;width:100%;height:100%;object-fit:contain}
.home-creation-card .home-model-motion canvas{position:absolute;inset:0;opacity:0}.home-creation-card .home-model-motion.is-ready canvas{opacity:1}
.home-creation-card .creation-body{position:relative;background:linear-gradient(135deg,#fafafa,#eeeeef)}
.home-creation-card .home-design-number{right:24px;top:24px}
.home-creation-card h3{font:500 clamp(21px,2vw,29px)/1.2 'DM Sans',sans-serif;letter-spacing:-.035em;margin:12px 0}
.home-creation-card .home-design-detail{font-size:13px;line-height:1.65;margin-bottom:20px}
.home-creation-card:focus-visible{outline:3px solid #555;outline-offset:4px}
@media(max-width:760px){.home-design-edit .selected-grid{gap:32px}.home-creation-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}.home-creation-card .creation-body{padding:20px 16px!important;min-width:0;background:none}.home-creation-card .home-design-number{position:static}.home-creation-card h3{font-size:21px}.home-creation-card .home-design-detail{font-size:12px}.home-creation-card .model-image-open{border-radius:14px 0 0 14px!important}}
@media(max-width: 0px){.home-creation-card,.home-creation-card:before,.home-creation-card:after{animation:none!important;transition:none!important}}
.page-home .home-design-edit .home-creation-card .home-model-motion{background:#fff;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;aspect-ratio:1;border-radius:14px 14px 0 0}

/* Keep Etsy availability beside the design link without adding a card row. */
.home-creation-card .home-design-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px}
.home-design-actions .text-link{flex-shrink:0}
.home-design-actions .home-design-availability{flex:1 0 9em;margin:0;min-width:0;line-height:1.4}
/* /assets/css/home-creations-wordmark-v7.css */
/* Creations silver glyph sweep, backed by one static graphite field. */
.page-home .home-design-edit .home-creations-word{display:inline-block;flex-shrink:0}
.page-home .home-design-edit .home-creations-word .creations-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;line-height:inherit}
.page-home .home-design-edit .creations-hero-mark{position:relative;isolation:isolate;width:fit-content;overflow:visible}
.page-home .home-design-edit .creations-wordmark{position:relative}

/* Higher specificity bracket glow to maintain prominence alongside brand consistency */
.page-home .home-design-edit .creations-hero-mark .creations-bracket,
.page-home .home-design-edit .creations-hero-mark .creations-bracket{
  text-shadow:0 0 8px rgba(255,255,255,0.75),0 0 18px rgba(229,237,255,0.6),0 0 32px rgba(220,232,255,0.4);
}

/* Moving silver highlight follows the glyphs */
.page-home .home-design-edit .creations-letter-light{position:absolute;inset:0;display:inline-flex;align-items:baseline;pointer-events:none;
 padding:24px;margin:-24px;
 -webkit-mask-image:linear-gradient(110deg,transparent 28%,#000 43%,#000 57%,transparent 72%);
 mask-image:linear-gradient(110deg,transparent 28%,#000 43%,#000 57%,transparent 72%);
 -webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 animation:creations-glyph-sweep 8s ease-in-out infinite alternate}
.page-home .home-design-edit .creations-letter-light .creations-bracket,
.page-home .home-design-edit .creations-letter-light .creations-bracket{color:#fff;text-shadow:0 0 4px #fff,0 0 14px rgba(237,244,255,0.9),0 0 28px rgba(220,232,255,0.7)}
@keyframes creations-glyph-sweep{
 0%,8%{-webkit-mask-position:100% 50%;mask-position:100% 50%;opacity:.65}
 45%,55%{opacity:1}
 92%,100%{-webkit-mask-position:0% 50%;mask-position:0% 50%;opacity:.65}
}
@media(max-width: 0px){.page-home .home-design-edit .creations-letter-light{animation:none;-webkit-mask-position:50% 50%;mask-position:50% 50%;opacity:.35}}

/* Staggered second sweep pass */
.page-home .home-design-edit .creations-letter-light-follow{animation-delay:-4s}
@media(max-width: 0px){.page-home .home-design-edit .creations-letter-light-follow{display:none}}


/* One stationary gradient: no overlapping blur surfaces or animated cloud layers. */
.page-home .home-design-edit{border-top:0}
.page-home .home-design-edit::before{
 content:"";display:block;opacity:1;position:absolute;inset:0 0 auto;height:200px;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 650px 190px at 120px 0,#181a1c 0%,#181a1c 48%,rgba(24,26,28,.94) 57%,rgba(24,26,28,.65) 69%,rgba(24,26,28,.25) 83%,rgba(24,26,28,0) 100%)!important;
}
.page-home .home-design-edit .home-creations-word{color:#f3f3ed}
.page-home .home-design-edit .home-creations-word .creations-bracket{text-shadow:0 0 3px rgba(255,255,255,.65),0 0 9px rgba(229,237,255,.38)}
.page-home .home-design-edit .home-creations-word .creations-letter-light .creations-bracket{text-shadow:0 0 2px #fff,0 0 7px rgba(237,244,255,.65),0 0 14px rgba(220,232,255,.35)}
.page-home .home-design-edit .home-edit-label{position:relative;color:#f0f1f2;font-weight:500;border-left-color:#d7dde377;text-shadow:none}
.page-home .home-design-edit .section-label{margin-bottom:64px}
@media(max-width:760px){
 .page-home .home-design-edit::before{height:155px;background:radial-gradient(ellipse 480px 150px at 70px 0,#181a1c 0%,#181a1c 48%,rgba(24,26,28,.94) 57%,rgba(24,26,28,.65) 69%,rgba(24,26,28,.25) 83%,rgba(24,26,28,0) 100%)!important}
 .page-home .home-design-edit .section-label{margin-bottom:60px}
 .page-home .home-design-edit .home-edit-label{font-size:9px;letter-spacing:.1em}
}
/* /assets/css/bankasi-refresh-v1.css */
/* Editorial refresh. Scoped additions leave the Creations motion and card effects intact. */
.workbench-editorial{display:block!important;background:none!important;border:0!important}
.workbench-chapter{margin:0 0 clamp(48px,7vw,100px)}
.chapter-heading{font:400 clamp(28px,3vw,40px)/1.15 'Cormorant Garamond',serif;border-top:1px solid #c9ccc6;padding-top:22px;margin:0 0 28px;color:#30332f}
.chapter-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workbench-editorial .workbench-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.workbench-editorial .workbench-card:hover{background:transparent}
.workbench-editorial .workbench-card-image,.workbench-editorial .workbench-feature-image{border:0;border-radius:3px;overflow:hidden;background:#edeeea}
.workbench-editorial .workbench-card-body{padding:24px 0!important}
.workbench-editorial .card-title{font:400 clamp(27px,3vw,38px)/1.15 'Cormorant Garamond',serif;color:#30332f;margin:14px 0}
.workbench-editorial .card-excerpt{max-width:52ch;line-height:1.75}
.workbench-editorial .card-footer{padding-top:16px;margin-top:24px}
.workbench-editorial .chapter-featured .chapter-stories{display:block}
.workbench-editorial .chapter-featured .workbench-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.workbench-editorial .chapter-featured .card-title{font-size:clamp(36px,4.5vw,60px)}
.workbench-editorial .chapter-featured img{width:100%;height:100%;max-height:520px;object-fit:cover;aspect-ratio:5/4}
.workbench-editorial .chapter-guides .workbench-card{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.workbench-editorial .chapter-guides .workbench-card-body{padding:0!important}
.workbench-editorial .chapter-guides img{width:100%;height:150px;object-fit:cover;padding:0}
.workbench-editorial .chapter-guides .card-title{font-size:30px}
.workbench-editorial .chapter-studio img{height:auto;aspect-ratio:3/2;object-fit:cover}
.chapter-archive .chapter-stories{display:block}
.workbench-editorial .archive-card{display:grid;grid-template-columns:1fr;min-height:0;border-bottom:1px solid #d6d8d2}
.workbench-editorial .archive-card .workbench-card-image,.workbench-editorial .archive-card .card-excerpt,.workbench-editorial .archive-card .card-footer{display:none}
.workbench-editorial .archive-card .workbench-card-body{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding:22px 0!important}
.workbench-editorial .archive-card .card-meta{flex-direction:column;align-items:flex-start;gap:6px}
.workbench-editorial .archive-card .card-title{font-size:27px;margin:0}
.workbench-editorial.is-filtered .chapter-heading{display:none}
.workbench-editorial.is-filtered .workbench-chapter{margin:0}
.workbench-editorial.is-filtered .chapter-stories{display:block}
.workbench-editorial.is-filtered .workbench-card{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:24px 0!important;border-bottom:1px solid #d4d6d0}
.workbench-editorial.is-filtered .workbench-card-body{display:block;padding:0!important}
.workbench-editorial.is-filtered .workbench-card img{width:100%;height:120px;aspect-ratio:auto;object-fit:cover}
.workbench-editorial.is-filtered .workbench-card .card-title{font-size:30px}
.workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
.workbench-editorial [hidden]{display:none!important}
/* Reading layouts: wide material, narrow prose. */
.article-refresh .post-body{max-width:1120px!important;margin-inline:auto}
.article-refresh .post-body>p,.article-refresh .post-body>h2,.article-refresh .post-body>ul,.article-refresh .post-body>ol,.article-refresh .post-body>.article-toc,.article-refresh .post-body>.archive-context,.article-refresh .post-body>.test-notebook{max-width:712px;margin-left:auto;margin-right:auto}
.article-refresh .post-body>figure{max-width:900px;margin:44px auto}
.article-refresh .post-body>figure img{width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:3px}
.article-refresh .post-body figcaption{font-size:13px;line-height:1.65;color:#62675f;max-width: 70ch;margin-top:12px}
.article-refresh .post-body>.fan-comparison{max-width:100%;margin:32px 0 48px}
.article-refresh .archive-context{padding:18px 0;border-block:1px solid #cfd2ca;font:400 14px/1.7 'DM Sans',sans-serif;color:#62665e;margin-bottom:32px}
.article-refresh .test-notebook{padding:24px;border-left:2px solid #8b9388;background:#edeFE9}
.article-refresh .post-body .test-notebook p{font-size:15px;line-height:1.75}
.article-refresh .post-body .test-notebook h3{font:500 15px/1.5 'DM Sans',sans-serif;margin:22px 0 8px}
.article-refresh .post-body>h2{margin-top:56px}
/* Static instructional figures. */
.fit-illustration{margin:24px 0 28px;padding:20px 24px;background:#eeefea;border:1px solid #d8dbd3;border-radius:3px;break-inside:avoid}
.fit-illustration img{width:100%;max-width:540px;height:auto;display:block;margin:auto}
.fit-illustration figcaption{font:400 12px/1.7 'DM Sans',sans-serif;color:#62675e;margin:10px 0 0}
.help-answer .fit-illustration{max-width:620px}
.help-answer .fit-illustration img{max-height:250px}
/* Concise model reading hierarchy. */
#modelPreview #modelDescription{font-size:15px;line-height:1.7;margin:0 0 12px}
#modelPreview .model-essential{font-size:13px;font-weight:500;margin:0 0 18px;color:#3b4038}
#modelPreview .model-note-details{border-top:1px solid #d6d8d1;padding:14px 0;margin:0}
#modelPreview .model-note-details>summary{display:list-item;cursor:pointer;font:500 13px/1.6 'DM Sans',sans-serif}
#modelPreview .model-note-details p{font-size:13px;line-height:1.7;color:#5b6057;margin:12px 0}
#modelPreview .product-guidance{border-top:0;margin-top:0;padding-top:0}
#modelPreview .product-fit{margin-top:0}
#modelPreview .model-design-credit{margin-bottom:14px}
.page-creations .creation-card .model-spec{min-height:2.8em;display:flex;align-items:flex-end}
/* Comparison is only present within the existing fan comparison. */
.fan-visual-comparison{margin:24px 0 32px}
.fan-compare-intro{font-size:13px!important;color:#62675f}
.fan-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fan-compare-side{min-width:0;border-top:1px solid #c9cdc4;padding-top:20px}
.fan-compare-side h3{font:500 16px/1.4 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-options{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 20px}
.fan-compare-options button{font:400 12px/1.5 'DM Sans',sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:#64695f;padding:6px 0;cursor:pointer}
.fan-compare-options button[aria-pressed=true]{color:#20261c;border-color:#20261c;font-weight:500}
.fan-compare-options button:focus-visible{outline:2px solid #545c50;outline-offset:4px}
/* Phones: one sideways row of size tabs with full-height tap targets, as in the [creations] comparison (audit 2026-10-13). */
@media (max-width:760px){.fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fan-compare-options::-webkit-scrollbar{display:none}.fan-compare-options button{flex:none;min-height:44px;min-width:24px;white-space:nowrap}.fan-compare-options button:focus-visible{outline-offset:-2px}}
.fan-compare-side img{display:block;width:100%;height:240px;object-fit:contain;background:#f7f8f4;border-radius:3px}
.fan-compare-side dl{display:grid;grid-template-columns:100px 1fr;font:13px/1.6 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-side dt,.fan-compare-side dd{border-top:1px solid #d7dad1;padding:9px 0;margin:0}
.fan-compare-side dt{color:#62685c}
.fan-compare-side a{font-size:13px;text-underline-offset:4px}
/* Founder-led About. */
.page-about .founder{border-block:1px solid #d4d7cf}
.about-closing{padding:48px var(--page-gutter,5vw) 64px;border-top:1px solid #cfd3c9}
.about-closing h2{font:400 42px/1.1 'Cormorant Garamond',serif;margin:12px 0 24px}
.editorial-links{display:flex;flex-wrap:wrap;gap:18px 30px;font:400 14px/1.5 'DM Sans',sans-serif}
.editorial-links a{color:inherit;text-underline-offset:5px}
/* Contact form leads in DOM and visual order. */
.page-contact .page-hero{padding-top:128px!important;padding-bottom:38px!important;min-height:0}
.page-contact .page-hero h1{font-size:clamp(42px,5vw,64px);margin-bottom:16px}
.page-contact .contact-section{padding-top:48px!important}
.page-contact .contact-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:clamp(32px,7vw,100px);align-items:start}
.inquiry-design-reference{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid #cbd0c5;font:14px/1.65 'DM Sans',sans-serif}
.inquiry-design-reference p{margin:6px 0}.inquiry-design-reference a{color:inherit;text-underline-offset:4px;font-size:13px}
/* A statement rather than a title page. */
.page-mission .mission-hero{padding-top:140px;padding-bottom:36px;min-height:0}
.page-mission .mission-hero h1{max-width:20ch;font-size:clamp(58px,7vw,100px)}
.page-mission .statement-section{padding-top:0!important;padding-bottom:64px!important}
.page-mission .statement-body{max-width:760px}
.page-mission .pillars-section{padding-top:32px!important;padding-bottom:64px!important}
.page-mission .pillar{background:none;border:0;border-top:1px solid #555850;border-radius:0;box-shadow:none;padding:26px 0}
.page-mission .pillar::before,.page-mission .pillar::after{display:none}
.page-mission .pillars-grid{background:none;gap:40px}
.page-mission .cta-section{padding-top:40px;padding-bottom:48px}
/* Short recovery and readable privacy. */
.recovery-simple{max-width:1000px;margin:auto;padding:160px 32px 90px;min-height:65vh;color:#343830}
.recovery-simple h1{font:400 clamp(48px,7vw,80px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.recovery-simple>p{max-width: 50ch;font:16px/1.7 'DM Sans',sans-serif}
.recovery-simple nav{display:flex;flex-wrap:wrap;gap:20px 40px;margin:36px 0;border-block:1px solid #d0d4c9;padding:24px 0}
.recovery-simple a{color:inherit;text-underline-offset:5px}
.recovery-simple .recovery-contact{font-size:14px}
.page-privacy{background:#f4f4f0;color:#343830;font-family:'DM Sans',sans-serif}
.privacy-reading{max-width:776px;margin:auto;padding:56px 32px 80px}
.privacy-wordmark{color:inherit;text-decoration:none;font-size:16px;letter-spacing:.18em}
.privacy-wordmark sup{font-size:8px}
.privacy-reading h1{font:400 clamp(40px,6vw,60px)/1.05 'Cormorant Garamond',serif;margin:48px 0 24px}
.privacy-reading h2{font:400 30px/1.2 'Cormorant Garamond',serif;margin:0 0 18px}
.privacy-reading p{font-size:16px;line-height:1.85;margin:0 0 22px}
.privacy-reading .panel{border:0;border-top:1px solid #cdd2c5;border-radius:0;background:none;box-shadow:none;padding:32px 0 10px;margin-top:32px}
.privacy-reading a{color:inherit;text-underline-offset:4px}
.privacy-reading .muted{font-size:13px;color:#62675e}
.metric-context{display:block;font:400 11px/1.5 'DM Sans',sans-serif;margin-top:5px;color:inherit;opacity:.8}
.service-period-inline{font:400 12px/1.7 'DM Sans',sans-serif;color:#c5c8c1;max-width:36ch}
.page-home .service-feature{margin-top:40px;padding-top:40px}
@media(max-width:760px){
 .chapter-stories{grid-template-columns:1fr;gap:32px}
 .workbench-editorial .chapter-featured .workbench-card{grid-template-columns:1fr;gap:0}
 .workbench-editorial .chapter-featured img{max-height:320px;aspect-ratio:3/2}
 .workbench-editorial .chapter-guides .workbench-card{grid-template-columns:90px 1fr;gap:18px}
 .workbench-editorial .chapter-guides img{height:110px}
 .workbench-editorial .chapter-guides .card-title{font-size:27px}
 .workbench-editorial .archive-card .workbench-card-body{grid-template-columns:1fr;gap:8px}
 .workbench-editorial .archive-card .card-meta{flex-direction:row}
 .workbench-editorial.is-filtered .workbench-card{grid-template-columns:80px 1fr;gap:16px}
 .workbench-editorial.is-filtered .workbench-card img{height:90px}
 .workbench-editorial.is-filtered .workbench-card .card-title{font-size:26px}
 .workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
 .fan-compare-pair{gap:16px}.fan-compare-side img{height:150px}.fan-compare-side dl{display:block}.fan-compare-side dd{border-top:0;padding-top:0}.fan-compare-side dt{padding-bottom:2px}.fan-compare-options{gap:2px 10px}.fan-compare-side h3{font-size:14px}
 .article-refresh .post-body>figure{margin-block:30px}
 .fit-illustration{padding:14px 8px}.article-refresh .test-notebook{padding:18px}
 .page-contact .contact-grid{grid-template-columns:1fr}.page-contact .page-hero{padding-top:114px!important}
 .page-mission .mission-hero{padding-top:120px}.page-mission .pillars-grid{grid-template-columns:1fr;gap:16px}
 .recovery-simple{padding:130px 24px 64px}.recovery-simple nav{gap:20px 26px}
 .privacy-reading{padding:36px 24px 60px}
}
@media print{.fit-illustration{background:none;max-width:420px;padding:10pt;margin:12pt 0}.fit-illustration img{max-height:150pt}.fan-compare-options{display:none}.article-refresh .post-body{max-width:100%!important}}
.article-refresh .tour-chapter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;border-top:1px solid #cdd0c8;padding:36px 0;margin:40px 0}
.article-refresh .tour-chapter h2{margin-top:0}.article-refresh .tour-chapter figure{margin:0}.article-refresh .tour-chapter img{width:100%;height:auto;border-radius:3px}
.article-refresh .tour-text{display:block;max-width:712px;margin-inline:auto}
@media(max-width:760px){.article-refresh .tour-chapter{grid-template-columns:1fr;gap:20px}}
/* Keep expanded preview copy inside its allocated grid row, so overflow can scroll. */
#modelPreview .model-details{align-self:stretch;overscroll-behavior-y:contain}
@media(min-width:761px){#modelPreview .model-details{height:100%;max-height:100%;box-sizing:border-box}}
/* /assets/css/hero-reel-v3.css */
/* One continuous scrim: no scene-timed brightness jumps over the edit. */
.page-home .hero-overlay{background:linear-gradient(90deg,#000a 0%,#0007 38%,#0001 68%),linear-gradient(0deg,#0009 0%,transparent 55%)}
@media(max-width:760px){.page-home .hero-overlay{background:linear-gradient(0deg,#000d 0%,#000a 48%,#0002 76%,#0002 100%)}}
/* /assets/css/home-forum-v1.css */
/* Homepage forum invitation — scoped to page-home, between the community reach and workshop sections. */
.page-home .home-forum{position:relative;isolation:isolate;overflow:hidden;padding:84px 72px;background:radial-gradient(ellipse at 82% 18%,#6d7c8a33,transparent 55%),radial-gradient(ellipse at 8% 100%,#4a525a26,transparent 50%),linear-gradient(160deg,#1c1e20,#131415 70%);color:#e7e9e9;border-top:1px solid #b8c7d224}
.page-home .home-forum-inner{max-width:1296px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,7vw,120px);align-items:center}
.page-home .home-forum-label{display:flex;align-items:center;gap:16px;margin:0 0 26px;color:#c2cbd2;font:400 10px/1.4 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.page-home .home-forum-label:before{content:"";width:32px;height:1px;background:linear-gradient(90deg,#f3f7fa,#718493);box-shadow:0 0 12px #dbeeff66;flex:none}
.page-home .home-forum h2{margin:0 0 24px;color:#f2f3f1;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,4.8vw,70px);line-height:.98;letter-spacing:-.03em}
.page-home .home-forum-copy>p:not(.home-forum-label){margin:0;max-width:42ch;color:#bdc4c9;font-size:14px;line-height:1.8}
.page-home .home-forum-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.page-home .home-forum-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border:1px solid #a7b5c1a6;border-radius:var(--radius,8px);background:#ffffff0d;color:#f4f6f7;font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s}
.page-home .home-forum-cta svg{width:16px;height:16px;flex:none;transition:transform .2s}
.page-home .home-forum-cta:hover{background:#ffffff1a;border-color:#fff;box-shadow:0 0 22px #dbeeff26}
.page-home .home-forum-cta:hover svg{transform:translateX(3px)}
.page-home .home-forum-cta:focus-visible{outline:2px solid #dceaff;outline-offset:4px}
.page-home .home-forum-host{color:#8e99a2;font:400 11px/1.4 'DM Sans',sans-serif;letter-spacing:.04em}
.page-home .home-forum-topics-label{margin:0 0 14px;color:#8e99a2;font:400 10px/1.4 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.page-home .home-forum-prompts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
.page-home .home-forum-prompts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0;border-top:1px solid #ccd9e32e}
.page-home .home-forum-prompts li:nth-last-child(-n+2){border-bottom:1px solid #ccd9e32e}
.page-home .home-forum-prompts svg{width:20px;height:20px;margin-top:1px;color:#c9d6e0;filter:drop-shadow(0 0 6px #dbeeff33)}
.page-home .home-forum-prompts h3{margin:0 0 5px;color:#f2f3f1;font:500 14px/1.35 'DM Sans',sans-serif;letter-spacing:.01em}
.page-home .home-forum-prompts p{margin:0;color:#aeb7be;font-size:12.5px;line-height:1.6}
@media(max-width: 0px){.page-home .home-forum-cta,.page-home .home-forum-cta svg{transition:none}.page-home .home-forum-cta:hover svg{transform:none}}
@media(max-width:900px){.page-home .home-forum{padding:64px 40px}.page-home .home-forum-inner{grid-template-columns:1fr;gap:40px}}
@media(max-width:760px){.page-home .home-forum{padding:48px 24px}.page-home .home-forum h2{font-size:clamp(40px,11vw,52px);margin-bottom:20px}.page-home .home-forum-actions{margin-top:26px}.page-home .home-forum-prompts{column-gap:18px}.page-home .home-forum-prompts li{grid-template-columns:18px minmax(0,1fr);gap:10px;padding:14px 0;align-items:center}.page-home .home-forum-prompts svg{width:18px;height:18px;margin-top:0}.page-home .home-forum-prompts h3{margin:0;font-size:13px}.page-home .home-forum-prompts p{display:none}}
/* /assets/css/home-redesign-v5.css */
/* Homepage redesign: layout and rhythm only; colours, type and card treatments stay as they are. */

/* Designs: a bento of the most striking pieces, all in motion. */
.page-home .home-design-edit { container-type: inline-size; }
/* One rhythm from the section's width: a row is a square poster plus a fixed caption band. */
.home-design-edit .selected-grid.is-bento {
  --gap: 20px;
  --band: 168px;
  --col: calc((100cqw - 3 * var(--gap)) / 4);
  --row: calc(var(--col) + var(--band));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--row);
  grid-auto-flow: dense;
  gap: var(--gap);
  align-items: stretch !important;
}
.home-design-edit .selected-grid.is-bento > .home-creation-card { display: flex; flex-direction: column; min-width: 0; padding-top: 0 !important; }
.home-design-edit .is-bento .home-model-motion { aspect-ratio: 1; width: 100%; border-radius: 14px 14px 0 0; overflow: hidden; mix-blend-mode: normal; }
.home-design-edit .is-bento .home-model-motion img,
.home-design-edit .is-bento .home-model-motion canvas { width: 100%; height: 100%; object-fit: cover; }
.home-design-edit .is-bento .home-design-caption { flex: 1 1 auto; border-top: 0; padding: 20px 22px 24px !important; display: flex; flex-direction: column; }
.home-design-edit .is-bento .home-design-caption h3 { margin: 8px 0 8px; }
.home-design-edit .is-bento .home-design-detail { margin: 0 0 14px; }
.home-design-edit .is-bento .home-design-caption .text-link { margin-top: auto; }
.home-design-edit .selected-grid.is-bento > .bento-xl { grid-column: span 2; grid-row: span 2; }
.home-design-edit .selected-grid.is-bento > .bento-xl h3 { font-size: clamp(28px, 2.8vw, 40px); }
.home-design-edit .selected-grid.is-bento > .bento-tall { grid-row: span 2; }
.home-design-edit .selected-grid.is-bento > .bento-tall .home-model-motion { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.home-design-edit .selected-grid.is-bento > .bento-tall .home-design-caption { flex: none; }
.home-design-edit .selected-grid.is-bento > .bento-wide { grid-column: span 2; display: grid; grid-template-columns: calc(var(--col) + 40px) minmax(0, 1fr); }
.home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion { border-radius: 14px 0 0 14px; height: 100%; aspect-ratio: auto; display: flex; align-items: center; background: #f2f2f0; }
.home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion img,
.home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion canvas {
  height: auto; aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion canvas { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion { position: relative; }
.home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption { border-radius: 0 14px 14px 0 !important; justify-content: center; }
.home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption .text-link { margin-top: 6px; }
.bento-badge {
  align-self: flex-start; margin-bottom: 10px; padding: 4px 10px;
  border: 1px solid #bfc4c9; border-radius: 999px; background: #fff;
  font: 500 11px/1.2 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3d4246;
}
@media (max-width: 1060px) {
  .home-design-edit .selected-grid.is-bento { --gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .home-design-edit .is-bento .home-model-motion img,
  .home-design-edit .is-bento .home-model-motion canvas { -webkit-mask-image: none; mask-image: none; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion canvas { position: static; transform: none; }
  .home-design-edit .selected-grid.is-bento > .bento-wide { display: flex; flex-direction: column; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion { border-radius: 14px 14px 0 0; height: auto; aspect-ratio: 16 / 11; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption { border-radius: 0 0 14px 14px !important; }
  .home-design-edit .selected-grid.is-bento > .bento-tall .home-model-motion { aspect-ratio: 2 / 4.2; flex: none; }
  .home-design-edit .selected-grid.is-bento > .bento-tall.fit-contain .home-model-motion { aspect-ratio: auto; flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .home-design-edit .is-bento .home-design-caption { padding: 14px 14px 18px !important; }
  .home-design-edit .selected-grid.is-bento > .bento-tall .home-design-detail { display: none; }
  .home-design-edit .selected-grid.is-bento > .bento-tall h3 { font-size: 18px; }
}

/* Tall cards for wide or turning products: the whole square render, centred, its backdrop fading into the card. */
.home-design-edit .selected-grid.is-bento > .bento-tall.fit-contain .home-model-motion { position: relative; display: flex; align-items: center; background: #f3f3f3; }
.home-design-edit .selected-grid.is-bento > .bento-tall.fit-contain .home-model-motion img,
.home-design-edit .selected-grid.is-bento > .bento-tall.fit-contain .home-model-motion canvas {
  height: auto; aspect-ratio: 1; object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.home-design-edit .selected-grid.is-bento > .bento-tall.fit-contain .home-model-motion canvas { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

/* Proof as one chapter: the service figures continue the reviews instead of starting a new section. */
.page-home .review-showcase + .review-service { margin-top: 0; padding-top: 8px; border-top: 0; }
.page-home .review-showcase { padding-bottom: 48px; }

/* Community as one chapter: worldwide reach, then the forum directly beneath it. */
.page-home .reach-mini + .home-forum { margin-top: 0; border-top: 0; padding-top: 56px; }
.page-home .reach-mini { padding-bottom: 40px; }

/* Hero chapter bar: three ways in, on the same frosted glass as the navigation. */
.page-home .hero-chapters {
  position: absolute; z-index: 3; left: var(--page-gutter, 5vw); right: var(--page-gutter, 5vw); bottom: 26px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #ffffff24; border-radius: 14px; overflow: hidden;
  background: rgba(22, 24, 26, .38); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
.page-home .hero-chapters a { display: flex; flex-direction: column; gap: 4px; padding: 16px 22px; color: #f4f4f1; text-decoration: none; transition: background-color .25s; }
.page-home .hero-chapters a + a { border-left: 1px solid #ffffff1f; }
.page-home .hero-chapters a:hover { background: #ffffff10; }
.page-home .hero-chapters a:focus-visible { outline: 2px solid #e6eef6; outline-offset: -4px; }
.page-home .hero-chapter-kicker { font: 500 11px/1.3 "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9c2ca; }
.page-home .hero-chapters a:first-child .hero-chapter-kicker { text-transform: none; letter-spacing: .02em; font-size: 13px; color: #fff; text-shadow: 0 0 10px #dbeeffaa; }
.page-home .hero-chapter-label { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1.3 "DM Sans", sans-serif; }
.page-home .hero-chapter-label .ui-arrow { width: 14px; height: 14px; transition: transform .2s; }
.page-home .hero-chapters a:hover .ui-arrow { transform: translateX(3px); }
.page-home .hero .hero-content { padding-bottom: 128px; }
@media (max-width: 760px) {
  .page-home .hero-chapters { left: 16px; right: 16px; bottom: 16px; }
  .page-home .hero-chapters a { padding: 12px; }
  .page-home .hero-chapter-kicker { font-size: 9px; letter-spacing: .1em; }
  .page-home .hero-chapters a:first-child .hero-chapter-kicker { font-size: 11px; }
  .page-home .hero-chapter-label { font-size: 12px; }
  .page-home .hero-chapter-label .ui-arrow { display: none; }
  .page-home .hero .hero-content { padding-bottom: 104px; }
}
@media (max-width: 0px) { .page-home .hero-chapters a, .page-home .hero-chapter-label .ui-arrow { transition: none; } }

/* Channel: a screening room. One dark panel on the light chapter holds the player and an "Up next" queue. */
.page-home .yt-section.yt-showcase { --ink: #1d1e1f; --secondary: #5c6064; background: #f2f2ef !important; color: var(--ink); border-top: 0; }
.page-home .yt-showcase .channel-masthead { border-bottom-color: #0000001a; }
.page-home .yt-showcase .channel-brand { color: #161718; }
.page-home .yt-showcase .channel-handle { color: #6b7075; border-left-color: #0000002a; }
.page-home .yt-showcase .channel-link { color: #26292b; }
.page-home .yt-showcase .channel-intro h2 { color: #1b1c1d; }
.page-home .yt-showcase .channel-intro > p, .page-home .yt-showcase .feed-status { color: #5a5f63; }
.page-home .yt-showcase .yt-grid {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 6px 28px; align-items: start;
  padding: 22px; border-radius: 28px; color: #f2f2ef;
  background: radial-gradient(120% 90% at 18% 0%, #2c2f33, #141516 68%);
  box-shadow: 0 50px 90px -46px #1a242fb3, inset 0 0 0 1px #ffffff14;
}
.page-home .yt-showcase .yt-grid::before {
  content: "Up next"; grid-column: 2; grid-row: 1; padding: 6px 10px 6px;
  font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9aa3ab;
}
.page-home .yt-showcase .yt-card {
  grid-column: 2; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; margin: 0; border: 0 !important; border-radius: 14px; color: #f2f2ef; transition: background-color .25s;
}
.page-home .yt-showcase .yt-card:nth-child(2) { padding-top: 10px; }
.page-home .yt-showcase .yt-card:hover, .page-home .yt-showcase .yt-card:focus-visible { background: #ffffff0f; }
.page-home .yt-showcase .yt-thumb { border-radius: 9px; background: #000; }
.page-home .yt-showcase .yt-info { padding: 0; }
.page-home .yt-showcase .yt-views { margin: 0 0 4px; color: #8d959c; }
.page-home .yt-showcase .yt-title {
  color: #f1f1ee; font: 500 14px/1.4 "DM Sans", sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.page-home .yt-showcase .yt-card:hover .yt-title { text-decoration: none; }
.page-home .yt-showcase .yt-play { width: 30px; height: 30px; background: #ffffffe6; }
/* The player: thumbnail fills the frame, glass play button in the middle, title over the picture. */
.page-home .yt-showcase .yt-card:first-child {
  grid-column: 1; grid-row: 1 / span 5; position: relative; display: block; padding: 0; border-radius: 18px; overflow: hidden; align-self: stretch;
}
.page-home .yt-showcase .yt-card:first-child:hover { background: none; }
.page-home .yt-showcase .yt-card:first-child .yt-thumb { height: 100%; min-height: 100%; border-radius: 18px; box-shadow: none; }
.page-home .yt-showcase .yt-card:first-child .yt-thumb-overlay {
  opacity: 1; align-items: center; justify-content: center; padding: 0;
  background: linear-gradient(0deg, #000d, #0006 34%, transparent 62%);
}
.page-home .yt-showcase .yt-card:first-child .yt-play {
  width: 82px; height: 82px; background: #ffffff2e; border: 1px solid #ffffff73;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 40px #0006; transition: transform .3s, background-color .3s;
}
.page-home .yt-showcase .yt-card:first-child .yt-play svg { fill: #fff; width: 24px; height: 24px; margin-left: 3px; }
.page-home .yt-showcase .yt-card:first-child:hover .yt-play { transform: scale(1.08); background: #fff; }
.page-home .yt-showcase .yt-card:first-child:hover .yt-play svg { fill: #151515; }
.page-home .yt-showcase .yt-card:first-child .yt-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 28px 32px; pointer-events: none; }
.page-home .yt-showcase .yt-card:first-child .yt-info::before { content: "Now showing"; color: #dfe6ec; margin-bottom: 10px; }
.page-home .yt-showcase .yt-card:first-child .yt-views { color: #c9cfd4; }
.page-home .yt-showcase .yt-card:first-child .yt-title {
  display: block; overflow: visible; color: #fff; font: 400 clamp(30px, 3vw, 46px)/1.08 "Cormorant Garamond", serif; letter-spacing: -.01em; text-shadow: 0 2px 24px #0008;
}
.page-home .yt-showcase a:focus-visible { outline: 2px solid #dfe6ec; outline-offset: 2px; }
.page-home .yt-showcase .channel-footer { border-top-color: #0000001a; }
.page-home .yt-showcase .channel-footer > p { color: #1d1e1f; }
.page-home .yt-showcase .channel-shop { color: #2b2e30; }
@media (max-width: 900px) {
  .page-home .yt-showcase .yt-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 22px; gap: 2px; }
  .page-home .yt-showcase .yt-grid::before { grid-column: 1; grid-row: 2; padding: 16px 10px 4px; }
  .page-home .yt-showcase .yt-card { grid-column: 1; grid-template-columns: 120px minmax(0, 1fr); padding: 8px; border-bottom: 0 !important; }
  .page-home .yt-showcase .yt-card:first-child { grid-row: 1; aspect-ratio: 16 / 11; padding: 0 !important; }
  .page-home .yt-showcase .yt-card:first-child .yt-thumb { aspect-ratio: auto; }
  .page-home .yt-showcase .yt-card:first-child .yt-thumb img { object-position: 50% 30%; }
  .page-home .yt-showcase .yt-card:first-child .yt-play { width: 58px; height: 58px; margin-bottom: 26%; }
  .page-home .yt-showcase .yt-card:first-child .yt-play svg { width: 18px; height: 18px; }
  .page-home .yt-showcase .yt-card:first-child .yt-info { padding: 18px 18px; }
  .page-home .yt-showcase .yt-card:first-child .yt-title { font-size: 28px; }
  .page-home .yt-showcase .yt-title { font-size: 13px; }
}
@media (max-width: 0px) { .page-home .yt-showcase .yt-card, .page-home .yt-showcase .yt-play { transition: none; } .page-home .yt-showcase .yt-card:first-child:hover .yt-play { transform: none; } }

/* Cooling story: the EliteDesk airflow loop sits exactly over the still and only shows for that view. */
.build-scene .build-photo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; opacity: 0; pointer-events: none; transition: opacity .52s ease-in-out; }
.build-scene .build-photo-video.is-active { opacity: 1; }
@media (max-width: 0px) { .build-scene .build-photo-video { display: none; } }

/* Reviews: a customer spotlight, set like an editorial pull quote, before the carousel. */
.page-home .review-spotlight {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  margin: 34px 0 44px; padding: clamp(20px, 2.4vw, 32px); border-radius: 22px; isolation: isolate;
  background: linear-gradient(140deg, #ffffff0d, #ffffff04 60%); border: 1px solid #ffffff1c;
}
.page-home .review-spotlight::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 22px; pointer-events: none;
  background: radial-gradient(60% 80% at 18% 30%, #b9d3f126, transparent 70%);
}
.page-home .review-spotlight-photo { aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -28px #000c; }
.page-home .review-spotlight-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-home .review-spotlight-kicker { margin: 0 0 18px; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #b9c2ca; }
.page-home .review-spotlight .review-stars { display: flex; gap: 6px; color: #f3c75f; margin-bottom: 22px; }
.page-home .review-spotlight .review-stars svg { width: 20px; height: 20px; }
.page-home .review-spotlight-quote { margin: 0; }
.page-home .review-spotlight-quote p {
  margin: 0; font: 400 clamp(30px, 3.3vw, 50px)/1.14 "Cormorant Garamond", serif; letter-spacing: -.02em; color: #f7f6f2;
  text-wrap: balance;
}
.page-home .review-spotlight-quote p::before { content: "\201C"; margin-right: .04em; color: #9fb0c0; }
.page-home .review-spotlight-quote p::after { content: "\201D"; margin-left: .02em; color: #9fb0c0; }
.page-home .review-spotlight figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 26px; }
.page-home .review-spotlight figcaption strong { font: 500 15px/1.3 "DM Sans", sans-serif; color: #fff; }
.page-home .review-spotlight figcaption span { font: 400 12px/1.4 "DM Sans", sans-serif; color: #aab3bb; }
/* The shop rating glows like the brand light; the other figures stay quiet beside it. */
.page-home .review-shop-summary dl > div:first-child dd { color: #fbfbf8; text-shadow: 0 0 22px #cfe0f399, 0 0 3px #ffffff80; }
@media (max-width: 760px) {
  .page-home .review-spotlight { grid-template-columns: 1fr; gap: 22px; margin: 26px 0 32px; padding: 14px 14px 24px; }
  .page-home .review-spotlight-copy { padding: 0 8px; }
  .page-home .review-spotlight-quote p { font-size: 30px; }
}

/* Community: the globe takes the stage, lit from behind, with what it shows on either side. */
.page-home .audience-strip.reach-mini { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 34px; padding-block: 90px 50px; }
.page-home .reach-mini .reach-copy { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.page-home .reach-mini .reach-description { margin-inline: auto; }
.page-home .reach-mini .reach-links { justify-content: center; }
.page-home .reach-mini .reach-place-groups { text-align: left; width: 100%; }
.page-home .reach-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); width: 100%; max-width: 1180px; }
.page-home .reach-stage .reach-explorer { max-width: 520px; position: relative; isolation: isolate; }
.page-home .reach-stage .reach-map::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #a9c8e83a, #a9c8e814 55%, transparent 72%);
  animation: reach-breathe 7s ease-in-out infinite;
}
@keyframes reach-breathe { 50% { transform: scale(1.05); opacity: .8; } }
.page-home .reach-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.page-home .reach-figure-viewers { align-items: flex-end; text-align: right; }
.page-home .reach-figure-shipping { align-items: flex-start; text-align: left; }
.page-home .reach-figure strong { font: 300 clamp(52px, 5.6vw, 84px)/1 "DM Sans", sans-serif; letter-spacing: -.05em; color: #fbfbf8; text-shadow: 0 0 24px #cfe0f366; }
.page-home .reach-figure-shipping strong { font: 400 clamp(36px, 3.6vw, 54px)/1.05 "Cormorant Garamond", serif; letter-spacing: -.02em; }
.page-home .reach-figure span { max-width: 18ch; font: 400 13px/1.55 "DM Sans", sans-serif; color: #b9bdbf; }
@media (max-width: 900px) {
  .page-home .reach-stage { grid-template-columns: 1fr 1fr; }
  .page-home .reach-stage .reach-explorer { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 340px; width: 100%; }
  .page-home .reach-figure-viewers, .page-home .reach-figure-shipping { align-items: center; text-align: center; }
  .page-home .audience-strip.reach-mini { padding-block: 60px 36px; }
}
@media (max-width: 0px) { .page-home .reach-stage .reach-map::before { animation: none; } }

/* Forum: a maximalist conversation. A wall of bubbles in the copy, and more drifting behind the whole section. */
.page-home .home-forum { position: relative; isolation: isolate; overflow: hidden; }
.page-home .home-forum-inner { position: relative; z-index: 1; }
.page-home .home-forum-prompts li, .page-home .home-forum-bubbles span { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.page-home .home-forum-bubbles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; max-width: 560px; margin: 30px 0 8px; }
.page-home .home-forum-bubbles span {
  position: relative; padding: 10px 15px; border-radius: 18px 18px 18px 6px; border: 1px solid #ccd9e330; background: #ffffff0b;
  font: 400 14px/1.3 "DM Sans", sans-serif; color: #e7ecef; box-shadow: 0 10px 24px -16px #000a;
  animation: forum-float 6s ease-in-out infinite;
}
.page-home .home-forum-bubbles span:nth-child(3n) { animation-delay: -2s; }
.page-home .home-forum-bubbles span:nth-child(3n+1) { animation-delay: -4s; }
.page-home .home-forum-bubbles span:nth-child(4n) { font-size: 16px; padding: 12px 18px; }
.page-home .home-forum-bubbles span:nth-child(5n) { font-size: 12.5px; }
.page-home .home-forum-bubbles .me { border-radius: 18px 18px 6px 18px; background: #f2f4f5; border-color: #fff; color: #17191a; }
.page-home .home-forum-bubbles .silver { background: linear-gradient(135deg, #dfe8ef33, #8e9bb01f); border-color: #dfe8ef55; color: #f6f8f9; box-shadow: 0 0 20px #a9c8e822, 0 10px 24px -16px #000a; }
.page-home .home-forum-bubbles .typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 15px; }
.page-home .home-forum-bubbles .typing i { width: 6px; height: 6px; border-radius: 50%; background: #c7d0d6; animation: forum-typing 1.3s ease-in-out infinite; }
.page-home .home-forum-bubbles .typing i:nth-child(2) { animation-delay: .18s; }
.page-home .home-forum-bubbles .typing i:nth-child(3) { animation-delay: .36s; }
.page-home .bubble-react {
  position: absolute; right: -6px; bottom: -11px; padding: 2px 7px; border-radius: 999px; border: 1px solid #ffffff2e;
  background: #2a2d30; font: 500 10.5px/1.4 "DM Sans", sans-serif; font-style: normal; color: #e7ecef;
}
@keyframes forum-float { 50% { transform: translateY(-3px); } }
@keyframes forum-typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
/* The backdrop: quieter, larger bubbles scattered behind everything, drifting slowly. */
.page-home .home-forum-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-home .home-forum-sky span {
  position: absolute; padding: 10px 16px; border-radius: 20px 20px 20px 6px; border: 1px solid #ccd9e31f; background: #ffffff06;
  font: 400 15px/1.2 "DM Sans", sans-serif; color: #ffffff38; white-space: nowrap; animation: forum-drift 14s ease-in-out infinite;
}
.page-home .home-forum-sky span:nth-child(even) { border-radius: 20px 20px 6px 20px; animation-duration: 18s; animation-direction: reverse; }
.page-home .home-forum-sky span:nth-child(1) { top: 1%; left: 74%; }
.page-home .home-forum-sky span:nth-child(2) { top: 4%; left: 38%; font-size: 19px; }
.page-home .home-forum-sky span:nth-child(3) { top: 2%; right: 9%; }
.page-home .home-forum-sky span:nth-child(4) { bottom: 9%; left: 46%; font-size: 13px; }
.page-home .home-forum-sky span:nth-child(5) { top: 46%; left: 43%; font-size: 21px; }
.page-home .home-forum-sky span:nth-child(6) { bottom: 2%; left: 1%; font-size: 18px; }
.page-home .home-forum-sky span:nth-child(7) { bottom: 4%; left: 34%; }
.page-home .home-forum-sky span:nth-child(8) { bottom: 2%; right: 4%; font-size: 13px; }
.page-home .home-forum-sky span:nth-child(9) { top: 74%; left: 45%; font-size: 17px; }
.page-home .home-forum-sky span:nth-child(10) { top: 2%; left: 61%; font-size: 13px; }
.page-home .home-forum-sky span:nth-child(11) { bottom: 2%; left: 58%; font-size: 20px; }
.page-home .home-forum-sky span:nth-child(12) { top: 17%; left: 46%; font-size: 13px; }
@keyframes forum-drift { 50% { transform: translate(10px, -12px); } }
@media (max-width: 760px) {
  .page-home .home-forum-bubbles span { font-size: 13px; padding: 9px 13px; }
  .page-home .home-forum-bubbles span:nth-child(4n) { font-size: 14px; padding: 10px 15px; }
  .page-home .home-forum-sky span { font-size: 12px !important; padding: 7px 11px; }
  .page-home .home-forum-sky span:nth-child(n+9) { display: none; }
}
@media (max-width: 0px) { .page-home .home-forum-bubbles span, .page-home .home-forum-bubbles .typing i, .page-home .home-forum-sky span { animation: none; } }

/* Hero: an announcement pill for the newest design, on the navigation's frosted glass. */
.page-home .hero-new {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px;
  border: 1px solid #ffffff2e; border-radius: 999px; background: rgba(22, 24, 26, .4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #f4f4f1; font: 400 13px/1.2 "DM Sans", sans-serif; text-decoration: none; transition: border-color .25s, background-color .25s;
}
.page-home .hero-new:hover { border-color: #ffffff66; background: rgba(40, 44, 48, .5); }
.page-home .hero-new-tag { padding: 4px 9px; border-radius: 999px; background: #f4f4f1; color: #151617; font: 500 10px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 14px #dbeeff80; }
.page-home .hero-new .ui-arrow { width: 14px; height: 14px; transition: transform .2s; }
.page-home .hero-new:hover .ui-arrow { transform: translateX(3px); }
.page-home .hero-new:focus-visible { outline: 2px solid #e6eef6; outline-offset: 3px; }
@media (max-width: 760px) { .page-home .hero-new { font-size: 12px; margin-bottom: 16px; } }

/* Care beyond the print: heading across the top, four figures in one row. */
.page-home .review-service.service-feature { display: block !important; overflow: visible; }
.page-home .review-service .review-service-heading {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kicker kicker kicker" "badge title intro" "badge period link";
  align-items: end; column-gap: clamp(24px, 4vw, 60px); row-gap: 10px; margin-bottom: 44px;
}
.page-home .review-service .service-kicker { grid-area: kicker; }
.page-home .review-service .service-earned { grid-area: badge; align-self: center; flex-direction: column; text-align: center; gap: 10px !important; }
.page-home .review-service .service-earned img { width: 88px !important; height: 88px !important; filter: drop-shadow(0 0 18px #b48cf066); }
.page-home .review-service #service-title { grid-area: title; margin: 0 !important; }
.page-home .review-service #service-title br { display: none; }
.page-home .review-service .service-intro { grid-area: intro; margin: 0 !important; max-width: 34ch; }
.page-home .review-service .service-period-inline { grid-area: period; margin: 0 !important; }
.page-home .review-service .service-shop-link { grid-area: link; justify-self: start; }
.page-home .review-service.service-feature dl { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; border-top: 0; }
.page-home .review-service.service-feature dl > div {
  position: relative; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 30px 26px 8px !important;
}
.page-home .review-service.service-feature dl > div + div { border-left: 1px solid #ffffff17 !important; }
@media (max-width: 1060px) {
  .page-home .review-service .review-service-heading { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kicker kicker" "badge title" "intro intro" "period period" "link link"; }
  .page-home .review-service.service-feature dl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 24px !important; }
  .page-home .review-service.service-feature dl > div:nth-child(3) { border-left: 0 !important; }
}
@media (max-width: 760px) {
  .page-home .review-service .service-earned img { width: 64px !important; height: 64px !important; }
  .page-home .review-service.service-feature dl > div { padding: 24px 14px 4px !important; }
}

/* Forum: categories as glass cards, each with its icon lit like the brand silver. */
.page-home .home-forum-topics-label { margin-bottom: 16px; }
.page-home .home-forum-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.page-home .home-forum-prompts li,
.page-home .home-forum-prompts li:nth-last-child(-n+2) {
  display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 14px !important;
  padding: 20px 20px 22px !important; border: 1px solid #ccd9e324 !important; border-radius: 16px;
  background: linear-gradient(150deg, #ffffff0d, #ffffff03) !important; transition: border-color .3s, box-shadow .3s;
}
.page-home .home-forum-prompts li:hover { border-color: #ccd9e366 !important; box-shadow: 0 0 24px #a9c8e81f; }  /* no lift: house rule */
.page-home .home-forum-prompts li > svg {
  display: block !important; width: 40px !important; height: 40px !important; padding: 9px; margin: 0 !important; border-radius: 12px;
  background: radial-gradient(circle at 35% 30%, #ffffff26, #ffffff08 70%); color: #e6eef4; box-shadow: inset 0 0 0 1px #ccd9e33a, 0 0 18px #a9c8e82a;
}
.page-home .home-forum-prompts h3 { margin: 0 0 6px !important; font: 500 15px/1.3 "DM Sans", sans-serif !important; letter-spacing: -.005em; color: #f4f6f7; }
.page-home .home-forum-prompts p { display: block !important; margin: 0; font-size: 12.5px; line-height: 1.55; color: #aeb7be; }
@media (max-width: 760px) {
  .page-home .home-forum-prompts li, .page-home .home-forum-prompts li:nth-last-child(-n+2) { padding: 14px !important; gap: 10px !important; }
  .page-home .home-forum-prompts li > svg { width: 34px !important; height: 34px !important; padding: 7px; }
  .page-home .home-forum-prompts h3 { font-size: 13px !important; }
  .page-home .home-forum-prompts p { display: none !important; }
}
@media (max-width: 0px) { .page-home .home-forum-prompts li { transition: none; } }

/* Workshop: idea to desk in four steps; each step lights up in turn as the section arrives. */
.page-home .studio-process { list-style: none; margin: 30px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid #dce8f02e; }
.page-home .studio-process li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 0 0; opacity: .35; transition: opacity .6s ease; }
.page-home .studio-process li::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, #f3f7fa, #a9c0d2); box-shadow: 0 0 10px #dbeeff99; transition: width .7s ease; }
.page-home .studio-process.is-revealed li { opacity: 1; }
.page-home .studio-process.is-revealed li::before { width: 100%; }
.page-home .studio-process.is-revealed li:nth-child(2), .page-home .studio-process.is-revealed li:nth-child(2)::before { transition-delay: .35s; }
.page-home .studio-process.is-revealed li:nth-child(3), .page-home .studio-process.is-revealed li:nth-child(3)::before { transition-delay: .7s; }
.page-home .studio-process.is-revealed li:nth-child(4), .page-home .studio-process.is-revealed li:nth-child(4)::before { transition-delay: 1.05s; }
.page-home .studio-step { font: 400 11px/1 "DM Sans", sans-serif; letter-spacing: .1em; color: #9fb0c0; }
.page-home .studio-process strong { font: 400 26px/1.1 "Cormorant Garamond", serif; color: #f4f4f1; margin-top: 8px; }
.page-home .studio-process small { font: 400 12px/1.5 "DM Sans", sans-serif; color: #b9c2ca; }
@media (max-width: 760px) {
  .page-home .studio-process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .page-home .studio-process li:nth-child(n+3)::before { display: none; }
}
@media (max-width: 0px) { .page-home .studio-process li, .page-home .studio-process li::before { transition: none; } }
/* Keep every figure on one baseline whether or not its label carries a badge. */
.page-home .review-service.service-feature dl > div { display: flex; flex-direction: column; }
.page-home .review-service.service-feature dt { min-height: 56px; display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  .page-home .review-service .review-service-heading { grid-template-columns: 1fr; grid-template-areas: "kicker" "badge" "title" "intro" "period" "link"; margin-bottom: 30px; }
  .page-home .review-service .service-earned { flex-direction: row; justify-self: start; text-align: left; }
  .page-home .review-service.service-feature dt { flex-direction: column; align-items: flex-start; min-height: 75px; justify-content: flex-end; gap: 8px; }
}
/* Phones: the stacked layout leaves no gaps for the drifting backdrop, and the player keeps only its title. */
@media (max-width: 760px) {
  .page-home .home-forum-sky { display: none; }
  .page-home .yt-showcase .yt-card:first-child .yt-info::before, .page-home .yt-showcase .yt-card:first-child .yt-views { display: none; }
  .page-home .yt-showcase .yt-card:first-child .yt-title { font-size: 26px; }
  .page-home .yt-showcase .yt-card:first-child .yt-play { margin-bottom: 18%; }
}

/* Forum as a feature: right after [creations], larger, lit from behind, with a primary call to action. */
.page-home .home-forum-feature { padding-block: clamp(96px, 11vw, 150px) !important; margin-top: 0; border-top: 0;
  background: radial-gradient(60% 70% at 22% 40%, #2a3440 0%, transparent 70%), radial-gradient(50% 60% at 85% 60%, #232c35 0%, transparent 70%), linear-gradient(180deg, #121416, #17191c) !important; }
.page-home .home-forum-feature h2 { font-size: clamp(56px, 5.9vw, 88px) !important; line-height: .98 !important; letter-spacing: -.02em; margin-bottom: 26px !important; }
.page-home .home-forum-feature .home-forum-label { font-size: 12px; letter-spacing: .2em; color: #c9d4dc; }
.page-home .home-forum-feature .home-forum-copy > p { font-size: 17px; line-height: 1.7; max-width: 46ch; color: #c3cad0; }
.page-home .home-forum-feature .home-forum-cta {
  background: #f4f4f1 !important; color: #151617 !important; border-color: #f4f4f1 !important; padding: 16px 26px !important;
  box-shadow: 0 0 28px #cfe0f355; transition: box-shadow .3s, background-color .3s;
}
.page-home .home-forum-feature .home-forum-cta:hover { background: #ffffff !important; box-shadow: 0 0 40px #cfe0f399; }
.page-home .home-forum-feature .home-forum-cta:focus-visible { outline: 2px solid #f4f4f1; outline-offset: 4px; }
.page-home .home-forum-feature .home-forum-prompts h3 { font-size: 16px !important; }
@media (max-width: 760px) {
  .page-home .home-forum-feature { padding-block: 72px !important; }
  .page-home .home-forum-feature h2 { font-size: 54px !important; }
  .page-home .home-forum-feature .home-forum-copy > p { font-size: 15px; }
}

/* Forum call to action: a ring of conversation around the button, every bubble's tail pointing back at it. */
.page-home .forum-cta-burst { position: relative; display: block !important; max-width: 560px; padding: 84px 0 100px; margin-top: 0; }
.page-home .forum-cta-burst .home-forum-cta { position: relative; z-index: 2; }
.page-home .forum-cta-burst .home-forum-host { position: absolute; left: 2px; top: calc(50% + 34px); z-index: 2; }
.page-home .cta-ring { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.page-home .cta-bubble {
  position: absolute; padding: 9px 14px; border-radius: 16px; white-space: nowrap;
  font: 400 13.5px/1.2 "DM Sans", sans-serif; color: #e9eef1; background: #262c31; border: 1px solid #3e4850;
  box-shadow: 0 12px 26px -16px #000c; animation: forum-float 6s ease-in-out infinite;
}
.page-home .cta-bubble::after { content: ""; position: absolute; width: 11px; height: 11px; background: inherit; border: inherit; border-top: 0; border-left: 0; }
/* Tail directions (the side facing the button). */
.page-home .cta-bubble.cb-a::after, .page-home .cta-bubble.cb-b::after, .page-home .cta-bubble.cb-c::after { bottom: -6px; transform: rotate(45deg); }
.page-home .cta-bubble.cb-f::after, .page-home .cta-bubble.cb-g::after, .page-home .cta-bubble.cb-h::after { top: -6px; transform: rotate(225deg); }
.page-home .cta-bubble.cb-d::after, .page-home .cta-bubble.cb-e::after { left: -6px; top: calc(50% - 5px); transform: rotate(135deg); }
/* Positions, sizes and styles: sporadic on purpose. */
.page-home .cb-a { top: 6px; left: -4px; font-size: 15px; border-radius: 18px 18px 18px 6px; }
.page-home .cb-a::after { left: 60px; }
.page-home .cb-b { top: -6px; left: 168px; font-size: 13px; background: #f2f4f5; border-color: #ffffff; color: #17191a; }
.page-home .cb-b::after { left: 18px; }
.page-home .cb-c { top: 30px; left: 392px; font-size: 16.5px; padding: 11px 17px; background: linear-gradient(135deg, #46525d, #303840); border-color: #6b7a86; box-shadow: 0 0 22px #a9c8e830, 0 12px 26px -16px #000c; }
.page-home .cb-c::after { left: 14px; }
.page-home .cb-d { top: calc(50% - 46px); left: 246px; font-size: 12px; padding: 7px 11px; animation-delay: -2s; }
.page-home .cb-e { top: calc(50% + 4px); left: 300px; font-size: 15px; background: #f2f4f5; border-color: #ffffff; color: #17191a; animation-delay: -4s; }
.page-home .cb-f { bottom: 10px; left: 0; font-size: 12.5px; animation-delay: -3s; }
.page-home .cb-f::after { left: 30px; }
.page-home .cb-g { bottom: 30px; left: 176px; font-size: 16px; padding: 11px 16px; background: linear-gradient(135deg, #46525d, #303840); border-color: #6b7a86; animation-delay: -1s; }
.page-home .cb-g::after { left: 16px; }
.page-home .cb-h { bottom: -2px; left: 360px; font-size: 13px; animation-delay: -5s; }
.page-home .cb-h::after { left: 14px; }
.page-home .cta-bubble.cb-b, .page-home .cta-bubble.cb-e { color: #17191a; }
@media (max-width: 760px) {
  .page-home .forum-cta-burst { padding: 78px 0 92px; }
  .page-home .cta-bubble { font-size: 12px !important; padding: 7px 11px !important; }
  .page-home .cb-c, .page-home .cb-e, .page-home .cb-h { display: none; }
  .page-home .cb-b { left: 150px; } .page-home .cb-d { left: auto; right: 0; top: calc(50% - 14px); }
  .page-home .cb-g { left: 150px; bottom: 16px; }
}
@media (max-width: 0px) { .page-home .cta-bubble { animation: none; } }

/* Eight more drifting bubbles behind the forum, in the open gaps. */
.page-home .home-forum-sky span:nth-child(13) { top: 9%; left: 26%; font-size: 14px; }
.page-home .home-forum-sky span:nth-child(14) { top: 33%; left: 45.5%; font-size: 12px; }
.page-home .home-forum-sky span:nth-child(15) { bottom: 2%; left: 16%; font-size: 16px; }
.page-home .home-forum-sky span:nth-child(16) { bottom: 13%; left: 64%; font-size: 15px; }
.page-home .home-forum-sky span:nth-child(17) { top: 7%; right: 30%; font-size: 12px; }
.page-home .home-forum-sky span:nth-child(18) { bottom: 9%; right: 10%; font-size: 18px; }
.page-home .home-forum-sky span:nth-child(19) { top: 58%; left: 45.5%; font-size: 13px; }
.page-home .home-forum-sky span:nth-child(20) { bottom: 1%; left: 43%; font-size: 14px; }

/* Forum stage layout: headline row, a full-width conversation with the button at its centre, then the categories. */
.page-home .home-forum-stage-layout .forum-v2 { display: block !important; }
.page-home .forum-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 48px; }
.page-home .forum-head h2 { margin: 0 !important; }
.page-home .forum-head > p { margin: 0 0 14px; justify-self: end; max-width: 44ch; font-size: 17px; line-height: 1.7; color: #c3cad0; }
.page-home .forum-stage { --s: 1; position: relative; height: 540px; margin: 34px 0 40px; }
.page-home .stage-bubbles { position: absolute; inset: 0; pointer-events: none; }
.page-home .stage-bubble {
  position: absolute; left: calc(50% + var(--x) * var(--s)); top: calc(50% + var(--y) * var(--s)); translate: -50% -50%;
  padding: .62em 1.05em; border-radius: 18px; white-space: nowrap; font: 400 var(--fs)/1.2 "DM Sans", sans-serif;
  color: #e9eef1; background: #262c31; border: 1px solid #3e4850; box-shadow: 0 14px 30px -18px #000d;
  animation: forum-float 6s ease-in-out infinite; animation-delay: var(--d);
}
.page-home .stage-bubble::after {
  content: ""; position: absolute; left: var(--tl); top: var(--tt); width: 15px; height: 11px; background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translate(-50%, -50%) rotate(var(--ta)) translateY(58%);
}
.page-home .stage-bubble.sb-w { background: #f2f4f5; border-color: #fff; color: #17191a; }
.page-home .stage-bubble.sb-s { background: linear-gradient(135deg, #47535e, #313941); border-color: #6b7a86; box-shadow: 0 0 22px #a9c8e82e, 0 14px 30px -18px #000d; }
.page-home .stage-bubble.sb-s::after { background: #3c4650; }
.page-home .stage-bubble.is-typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 16px; }
.page-home .stage-bubble.is-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c7d0d6; animation: forum-typing 1.3s ease-in-out infinite; }
.page-home .stage-bubble.is-typing i:nth-child(2) { animation-delay: .18s; }
.page-home .stage-bubble.is-typing i:nth-child(3) { animation-delay: .36s; }
.page-home .forum-stage-cta { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.page-home .forum-stage-cta .home-forum-cta { padding: 20px 34px !important; font-size: 13px !important; box-shadow: 0 0 0 10px #f4f4f10d, 0 0 46px #cfe0f366 !important; }
.page-home .forum-stage-cta .home-forum-host { position: static; font-size: 12px; color: #9aa4ac; }
.page-home .home-forum-stage-layout .home-forum-topics { margin: 0; }
.page-home .home-forum-stage-layout .home-forum-prompts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
.page-home .home-forum-stage-layout .home-forum-prompts li { flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 20px 22px !important; }
.page-home .home-forum-stage-layout .home-forum-prompts li > div { min-width: 0; }
@media (max-width: 1060px) {
  .page-home .forum-head { grid-template-columns: 1fr; gap: 18px; } .page-home .forum-head > p { justify-self: start; }
  .page-home .forum-stage { --s: .74; height: 430px; }
  .page-home .stage-bubble { font-size: calc(var(--fs) * .9); }
  .page-home .home-forum-stage-layout .home-forum-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .page-home .forum-stage { --s: .5; height: 330px; margin: 22px 0 26px; }
  .page-home .stage-bubble { font-size: 11.5px; padding: 7px 10px; }
  .page-home .stage-bubble.ring-outer { display: none; }
  .page-home .forum-stage-cta .home-forum-cta { padding: 16px 22px !important; font-size: 12px !important; }
  .page-home .home-forum-stage-layout .home-forum-prompts li { flex-direction: column !important; align-items: flex-start !important; padding: 14px !important; }
}
@media (max-width: 0px) { .page-home .stage-bubble, .page-home .stage-bubble.is-typing i { animation: none; } }
/* Stage layout: the drifting bubbles stay at the edges, clear of the conversation and the categories. */
.page-home .home-forum-stage-layout .home-forum-sky span:is(:nth-child(4),:nth-child(5),:nth-child(9),:nth-child(12),:nth-child(14),:nth-child(16),:nth-child(18),:nth-child(19)) { display: none; }
.page-home .home-forum-stage-layout .forum-stage { height: 560px; }
/* Responsive stage: compress the ring on tablets; on phones, six bubbles above and below the button. */
.page-home .forum-stage-cta .home-forum-cta { white-space: nowrap; }
@media (max-width: 1060px) {
  .page-home .forum-stage { height: 470px; }
  .page-home .stage-bubble { left: calc(50% + var(--x) * .66); top: calc(50% + var(--y) * .86); }
  .page-home .stage-bubble.o-side { display: none; }
}
@media (max-width: 760px) {
  .page-home .forum-stage { height: 400px; }
  .page-home .stage-bubble { left: calc(50% + var(--mx, 0px)); top: calc(50% + var(--my, 0px)); font-size: 12px; padding: 7px 11px; }
  .page-home .stage-bubble::after { left: var(--mtl, 50%); top: var(--mtt, 50%); transform: translate(-50%, -50%) rotate(var(--mta, 0deg)) translateY(58%); }
  .page-home .stage-bubble.m-hide { display: none; }
}

/* Cooling results: the EliteDesk tab leads with two measured figures in icy silver-blue; the other tabs stay quiet. */
.page-home .home-build-story .build-results { align-items: flex-end; }
.page-home .home-build-story .build-result-pair { display: flex; align-items: flex-end; gap: 30px; }
.page-home .home-build-story .build-result-stat { display: flex; flex-direction: column; gap: 10px; }
.page-home .home-build-story .build-result-value.is-icy {
  font-size: clamp(64px, 6vw, 86px); line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(180deg, #ffffff 0%, #e8f3ff 42%, #9fc8f3 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(140, 195, 255, .42));
}
.page-home .home-build-story .build-result-value.is-icy span { color: transparent; -webkit-text-fill-color: transparent; }
.page-home .home-build-story .build-result-value.is-icy.is-second { font-size: clamp(44px, 4.1vw, 58px); filter: drop-shadow(0 0 14px rgba(140, 195, 255, .32)); }
.page-home .home-build-story .build-result-stat .build-result-label { font-size: 13px; letter-spacing: .02em; color: #e6eef5; }
.page-home .home-build-story .build-result-caption { display: block; margin-top: 12px; font: 400 12px/1.4 "DM Sans", sans-serif; color: #9fb0c0; }
.page-home .home-build-story .build-results > button[aria-pressed="false"] .build-result-pair { opacity: .5; filter: saturate(.6); }
.page-home .home-build-story .build-results > button:not([data-build-photo="elitedesk"]) .build-result-label { max-width: 11ch; }
@media (max-width: 760px) {
  .page-home .home-build-story .build-results { flex-wrap: wrap; row-gap: 18px; }
  .page-home .home-build-story .build-results > button[data-build-photo="elitedesk"] { flex: 1 0 100%; }
  .page-home .home-build-story .build-result-value.is-icy { font-size: 64px; }
  .page-home .home-build-story .build-result-value.is-icy.is-second { font-size: 44px; }
}

/* Forum: endless message streams along both edges, spilling past the page and fading out (like the hero wall). */
.page-home .forum-stream {
  position: absolute; top: 0; bottom: 0; width: 250px; z-index: 0; pointer-events: none; overflow: hidden; opacity: .46;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(var(--fade-dir), transparent 0%, #000 70%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(var(--fade-dir), transparent 0%, #000 70%);
  mask-composite: intersect;
}
.page-home .forum-stream-left { left: -96px; --fade-dir: to right; }
.page-home .forum-stream-right { right: -96px; --fade-dir: to left; }
.page-home .stream-track { display: flex; flex-direction: column; gap: 22px; padding: 11px 0; animation: forum-stream 80s linear infinite; }
.page-home .forum-stream-right .stream-track { animation-duration: 95s; animation-direction: reverse; }
@keyframes forum-stream { to { transform: translateY(-50%); } }
.page-home .stream-bubble {
  position: relative; align-self: flex-start; padding: 10px 15px; border-radius: 18px; white-space: nowrap;
  font: 400 15px/1.2 "DM Sans", sans-serif; color: #cfd8de; background: #1f2428; border: 1px solid #39434b;
}
.page-home .stream-bubble::after { content: ""; position: absolute; bottom: -6px; width: 12px; height: 9px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.page-home .forum-stream-left .stream-bubble { margin-left: var(--o, 0px); }
.page-home .forum-stream-left .stream-bubble::after { right: 18px; transform: rotate(-30deg); }
.page-home .forum-stream-right .stream-bubble { align-self: flex-end; margin-right: var(--o, 0px); }
.page-home .forum-stream-right .stream-bubble::after { left: 18px; transform: rotate(30deg); }
.page-home .stream-bubble.s0 { --o: 0px; font-size: 16px; }
.page-home .stream-bubble.s1 { --o: 46px; font-size: 13px; background: #2b3238; }
.page-home .stream-bubble.s2 { --o: 18px; font-size: 18px; padding: 12px 18px; }
.page-home .stream-bubble.s3 { --o: 64px; font-size: 14px; color: #eef2f4; background: #3a434b; border-color: #56626c; }
@media (max-width: 1060px) { .page-home .forum-stream { width: 190px; opacity: .45; } .page-home .forum-stream-left { left: -110px; } .page-home .forum-stream-right { right: -110px; } }
@media (max-width: 760px) { .page-home .forum-stream { display: none; } }
@media (max-width: 0px) { .page-home .stream-track { animation: none; } }
/* Wide screens: the streams fill the side margins, bubbles spread across them. */
.page-home .forum-stream { width: clamp(250px, calc((100vw - 1296px) / 2 + 170px), 560px); }
.page-home .forum-stream-left .stream-bubble { margin-left: calc(var(--o, 0px) * var(--k, 1)); }
.page-home .forum-stream-right .stream-bubble { margin-right: calc(var(--o, 0px) * var(--k, 1)); }
@media (min-width: 1600px) { .page-home .forum-stream { --k: 2.6; } }
@media (max-width: 1060px) { .page-home .forum-stream { width: 190px; } }

/* Phones (v4): the whole conversation, like desktop. Six crisp bubbles around the button, eleven faded ones behind
   spilling past the edges, the drifting bubbles and edge streams back on; tails sit on top/bottom edges. */
@media (max-width: 760px) {
  .page-home .forum-stage { height: 640px; margin: 10px 0 18px; }
  .page-home .stage-bubble.ring-outer, .page-home .stage-bubble.o-side { display: block; }
  .page-home .stage-bubble.is-typing { display: inline-flex; }
  .page-home .stage-bubble.m-far { opacity: .5; font-size: 11.5px; }
  .page-home .stage-bubble::after { width: 13px; height: 9px; transform: translate(-50%, -50%) rotate(var(--mta, 0deg)) translateY(50%); }
  .page-home .home-forum-stage-layout .home-forum-sky span { display: block !important; font-size: 11px !important; padding: 6px 10px; }
  .page-home .home-forum-stage-layout .home-forum-sky span:is(:nth-child(4),:nth-child(5),:nth-child(9),:nth-child(12),:nth-child(14),:nth-child(16),:nth-child(19)) { display: none !important; }
  .page-home .forum-stream { display: block; width: 120px; opacity: .38; }
  .page-home .forum-stream-left { left: -62px; } .page-home .forum-stream-right { right: -62px; }
  .page-home .stream-bubble { font-size: 12px !important; padding: 7px 11px; }
}
@media (max-width: 760px) {
  .page-home .home-forum-stage-layout .forum-stage { height: 650px; }
  .page-home .forum-stream { width: 92px; opacity: .2; }
  .page-home .forum-stream-left { left: -50px; } .page-home .forum-stream-right { right: -50px; }
}

/* v5: tails are part of the bubble outline. A square with the bubble's own fill and border, rotated 45deg and
   centred on the edge that faces the button, clipped to its outer half (plus a sliver that covers the bubble's border
   line), so it can never drift off the bubble on any browser. */
.page-home .stage-bubble { --bb: #262c31; --bc: #3e4850; background: var(--bb); border-color: var(--bc); }
.page-home .stage-bubble.sb-w { --bb: #f2f4f5; --bc: #ffffff; }
.page-home .stage-bubble.sb-s { --bb: #3b4550; --bc: #6b7a86; background: linear-gradient(135deg, #47535e, #313941); }
.page-home .stage-bubble::after,
.page-home .stage-bubble.sb-s::after {
  content: ""; position: absolute; left: var(--tl); top: var(--tt); width: 11px; height: 11px; box-sizing: border-box;
  background: var(--bb); border: solid var(--bc); border-width: 0 1px 1px 0; clip-path: polygon(100% -22%, 100% 100%, -22% 100%);
  transform: translate(-50%, -50%) rotate(var(--ta));
}
@media (max-width: 760px) {
  .page-home .stage-bubble::after, .page-home .stage-bubble.sb-s::after {
    left: var(--mtl, 50%); top: var(--mtt, 100%); width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(var(--mta, 45deg));
  }
  /* bubbles that run past the screen edge fade out instead of being cut */
  .page-home .stage-bubbles { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
}

/* v5: edge streams. One mask per layer (Safari ignores mask-composite, which showed the panels' hard inner edges). */
.page-home .forum-stream { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: initial; mask-composite: initial; }
.page-home .stream-fade { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 30%, transparent 100%); }
.page-home .forum-stream-left { --fade-dir: to right; } .page-home .forum-stream-right { --fade-dir: to left; }
@media (max-width: 760px) {
  /* the bubble layer spans the full screen (centre unchanged), so edge bubbles fade out at the screen edge */
  .page-home .stage-bubbles { left: calc(50% - 50vw); right: calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}
/* /assets/css/site-refresh-v1.css */
/* 2026-10 site-wide refresh: same-origin page transitions and the site search dialog. */

/* Cross-document view transitions (Chromium/Safari 18.2+; other browsers navigate normally). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width: 0px){@view-transition{navigation:none}}

/* Site search (⌘K / Ctrl+K / "/"). */
.site-search-open{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.site-search-open:hover{border-color:currentColor}
#mainNav .site-search-open{color:#f5f5f5}
#mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff12}
.site-search-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-search-open svg{width:17px;height:17px}

/* Desktop header: logo left, links centred, search bar and CTA grouped on the right. The links sit centred in the
   space between logo and search, and exactly on the page centre once there is room (>=1400px). The bar matches
   the CTA's height and corner radius; below 1101px it is a square icon button. */
@media(min-width:769px){
 #mainNav .nav-links{margin:0 auto}
 #mainNav .site-search-open{width:40px;height:40px;margin:0 12px 0 auto;border:1px solid #ffffff2e;border-radius:8px;background:#ffffff0d;color:#f5f5f5c2;transition:border-color .2s,background-color .2s,color .2s}
 #mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff17;color:#f5f5f5}
 #mainNav .site-search-open svg{width:16px;height:16px;flex:none}
}
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:1rem}}
@media(min-width:1101px){
 #mainNav .site-search-open{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;padding:0 14px;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-align:left}
 #mainNav .site-search-open::after{content:"Search"}
}
@media(min-width:1400px){
 #mainNav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 #mainNav .site-search-open{width:220px}
}
.site-search{width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));margin:72px auto auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d;overflow:hidden}
.site-search::backdrop{background:#0c0c0c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-search form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e3e0da}
.site-search form svg{flex:none;width:18px;height:18px;color:#6b6b6b}
.site-search input{flex:1;min-width:0;border:0;background:none;color:#151515;font:400 17px 'DM Sans',sans-serif;outline:none}
.site-search input::placeholder{color:#6b6b6b}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search kbd{font:500 11px 'DM Sans',sans-serif;padding:3px 6px;border:1px solid #d7d4ce;border-radius:5px;color:#6b6b6b;background:#fff}
.site-search-results{list-style:none;margin:0;padding:8px;max-height:min(520px,calc(100vh - 170px));overflow:auto}
.site-search-results li{margin:0}
.site-search-results a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:9px;color:inherit;text-decoration:none}
.site-search-results a[aria-selected="true"],.site-search-results a:hover{background:#ecebe6}
.site-search-type{grid-row:span 2;align-self:center;min-width:76px;font:500 10px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b675f}
.site-search-title{font:500 15px/1.3 'DM Sans',sans-serif}
.site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#5f5f5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-empty{padding:22px 16px;font:400 14px 'DM Sans',sans-serif;color:#5f5f5f}
@media(max-width:760px){.site-search{margin-top:16px;max-height:calc(100vh - 32px)}.site-search-type{min-width:0;grid-row:auto}.site-search-results a{grid-template-columns:1fr}.site-search kbd{display:none}}
/* Site search v2 (site-search-v2.js, owner-approved 2026-10-06): start view, grouped results with headers,
   design thumbnails (their [creations] card image), a Cancel button on phones, and the inline variant (404 page). */
dialog.site-search-v2[open]{display:flex;flex-direction:column}
.site-search-v2 form{flex:none}
.site-search-v2 .site-search-results{flex:1 1 auto;min-height:0;max-height:none;padding:6px 8px 12px}
.site-search-v2 .site-search-group{margin:14px 12px 6px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.site-search-v2 .site-search-group:first-child{margin-top:8px}
.site-search-v2 .site-search-results a.site-search-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 10px;border-radius:11px;color:inherit;text-decoration:none}
.site-search-v2 .site-search-results a.site-search-item[aria-selected="true"],.site-search-v2 .site-search-results a.site-search-item:hover{background:#ecebe6}
.site-search-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#f6f6f5;box-shadow:inset 0 0 0 1px #15151512;color:#6b675f;overflow:hidden}
.site-search-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-search-thumb.is-video{width:80px;background:#151515}
.site-search-thumb svg{width:22px;height:22px}
.site-search-body{display:grid;gap:2px;min-width:0}
.site-search-v2 .site-search-title{font:500 15px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-v2 .site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#66625b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-tag{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid #15151533;border-radius:999px;font:500 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.site-search-v2 .site-search-results a.site-search-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 12px;font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.site-search-more svg{width:18px;height:18px;flex:none}
.site-search-v2 .site-search-results .site-search-empty a{display:inline;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-search-cancel{display:none;flex:none;padding:8px 2px 8px 8px;border:0;background:none;color:#151515;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.site-search-cancel:focus-visible{outline:2px solid #151515;outline-offset:2px;border-radius:6px}
@media(max-width:760px){
 .site-search-v2{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .site-search-v2 form{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .site-search-v2 input{font-size:16px}
 .site-search-v2 kbd{display:none}
 .site-search-cancel{display:block}
 .site-search-v2 .site-search-results{padding:4px 6px calc(16px + env(safe-area-inset-bottom))}
 .site-search-v2 .site-search-results a.site-search-item{grid-template-columns:auto minmax(0,1fr);gap:12px}
}
.site-search-inline{display:block;width:100%;max-width:640px;margin:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 18px 48px #00000014;overflow:hidden;text-align:left}
.site-search-inline .site-search-results{max-height:420px;overflow:auto}
@media(max-width:760px){.site-search-inline{border-radius:12px}.site-search-inline .site-search-results{max-height:none}}

/* Footer edges follow the nav (owner 2026-10-06: the footer reached past the nav's edge on wide screens). */
body>footer{padding-left:var(--page-gutter,clamp(24px,5vw,80px));padding-right:var(--page-gutter,clamp(24px,5vw,80px))}

/* iOS 26 Safari tints the status bar and bottom bar from the page's root background (theme-color is ignored).
   The root is therefore the header/footer charcoal, and the light page surface moves onto <main>, which with the
   footer fills the whole page, so nothing else changes visually. Mission (already dark) and privacy (no header) keep theirs. */
body[data-surface="light"]{--page-surface:#f4f4f2}
body.page-product{--page-surface:#f4f2ee}
html:has(body[data-surface="light"]){background-color:#151515!important}
body[data-surface="light"]{background-color:#151515!important}
body[data-surface="light"]>#main-content{background-color:var(--page-surface)}

/* Phone/tablet header: logo, search and menu share one centre line; the menu lines end on the page gutter
   and search sits beside the menu (desktop layout is unchanged). */
@media(max-width:768px){
 #mainNav .site-search-open{margin-left:auto;margin-right:4px}
 body:not(.page-creations) #hamburgerBtn{justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-right:-11px}
}

/* Phone menu on the main site, matching the [creations] menu (owner 2026-10-05): a frosted panel that drops under
   the header, left-aligned DM Sans rows with dividers, a "Menu / Close" text toggle, and the last two links
   (Shop on Etsy, YouTube; Old tech above them since 2026-10-10) as quieter secondary links. [creations] keeps its own rules (88 px header). */
@media (max-width: 768px) {
 body:not(.page-creations) #hamburgerBtn { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0; min-width: 64px; min-height: 44px; padding: 10px 0 10px 12px; color: #f2f2ec; font: 400 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; }
 body:not(.page-creations) #hamburgerBtn::after { content: "Menu"; }
 body:not(.page-creations) #hamburgerBtn.open::after { content: "Close"; }
 body:not(.page-creations) #hamburgerBtn span { display: none; }
 body:not(.page-creations) #hamburgerBtn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
 body:not(.page-creations) #mobileMenu {
  display: flex; flex-direction: column; position: fixed; inset: var(--nav-h, 80px) 0 auto; height: auto; max-height: calc(100dvh - var(--nav-h, 80px));
  padding: 18px 24px 26px; gap: 0; align-items: stretch; justify-content: flex-start; text-align: left;
  background: #20201ff5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff22; box-shadow: 0 18px 32px #0003;
  overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
 }
 body:not(.page-creations) #mobileMenu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
 body:not(.page-creations) #mobileMenu a {
  display: flex; align-items: center; justify-content: flex-start; min-height: 54px; padding: 12px 0; margin: 0;
  font: 400 17px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #edede7;
  border-bottom: 1px solid #ffffff14; text-decoration: none; opacity: 1; transform: none;
 }
 body:not(.page-creations) #mobileMenu a:nth-last-child(2) { margin-top: 14px; }
 body:not(.page-creations) #mobileMenu a:nth-last-child(-n+2) { font-size: 14px; color: #bdbdb7; border: 0; min-height: 44px; }
 body:not(.page-creations) #mobileMenu a:focus-visible { outline: 1px solid #edede7; outline-offset: 3px; }
}
@media (max-width: 0px) { body:not(.page-creations) #mobileMenu { transition: none; } }

/* Wayfinding (site-wayfinding-v1.js, owner-approved 2026-10-06). */
/* 1. You are here (owner 2026-10-07: no dot, the page name glows): the current section's header link and phone-menu
   row are lit white with a soft silver-white glow, the [creations] wordmark's light language kept quiet; no underline
   (Contact: the CTA is lit instead). */
#mainNav .nav-links a[aria-current="page"],
html body.page-creations #mainNav .nav-links a[href][aria-current="page"]{color:#fff!important;text-decoration:none!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}
#mainNav .nav-cta[aria-current="page"]{text-decoration:none;background:#ffffff26!important;border-color:#f2f2f0!important;color:#fff;text-shadow:0 0 7px #ffffff8c,0 0 16px #e6ecf855}
#mobileMenu a[aria-current="page"]{color:#fff!important;font-weight:500;text-shadow:0 0 1px #ffffffb3,0 0 9px #ffffff99,0 0 20px #e6ecf880,0 0 36px #dce5f540}
#mobileMenu a[aria-current="page"]::after{content:none}
/* 2. Phone menu backdrop: dims the page under the open menu; a tap on it closes the menu. */
.menu-scrim{display:none}
@media(max-width:768px){
 .menu-scrim{display:block;position:fixed;inset:0;z-index:198;background:#0c0c0c73;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
 .menu-scrim.is-shown{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
}
/* 3. Back to top: one rounded, frosted button in the right page gutter; colour-only hover, no lift. The script
   sets --to-top-lift to rise above the footer or the product pages' action bar. */
.to-top{position:fixed;z-index:190;right:max(12px,calc(env(safe-area-inset-right) + 12px),calc((var(--to-top-gutter,var(--page-gutter,clamp(24px,5vw,80px))) - 44px) / 2));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #15151524;border-radius:50%;background:#faf9f6c9;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#151515;box-shadow:0 8px 24px #00000026,0 1px 0 #ffffffb3 inset;cursor:pointer;transform:translateY(calc(-1 * var(--to-top-lift,0px)));opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s,background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.to-top.is-shown{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .2s,border-color .2s,box-shadow .2s}
.to-top:hover{background:#fff;border-color:#15151566;box-shadow:0 8px 24px #0000002e,0 0 0 3px #1515150f}
.to-top:focus-visible{outline:2px solid #151515;outline-offset:2px;box-shadow:0 0 0 5px #faf9f6}
.to-top svg{width:18px;height:18px}
@media print{.to-top,.menu-scrim{display:none}}

/* Footer (owner-approved 2026-10-06): four columns (Explore, Designs, Connect, Good to know) beside the brand on
   wide screens, a 2 x 2 grid on phones. "Privacy" sits on the copyright line (owner 2026-10-11; it was a lone
   "Analytics privacy" row under a filler line). */
body>footer .footer-nav{gap:clamp(28px,3.4vw,52px)}
body>footer .footer-privacy{display:inline-flex;align-items:center;min-height:32px;color:#cecece;font-size:13px;text-decoration:none;transition:color .2s}
body>footer .footer-privacy::before{content:"\00b7";margin:0 .7em 0 .4em;color:#8a8a8a}
body>footer .footer-privacy:hover{color:#fff}
@media(max-width:760px){
 body>footer .footer-top>div:first-child{flex:0 0 auto}
 body>footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%}
}

/* Chrome system (2026-10-09 audit): one header, menu and footer across the main site, Workbench, Help and [creations].
   1. Header labels share one centre line: nav links are 40 px flex boxes like the search bar and the CTA (they sat
      1.5-2 px low because the inline padding box hung off the text baseline). */
@media(min-width:769px){
 #mainNav .nav-links li{display:flex}
 #mainNav .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
/* 2. Phones: [creations] and product pages end "Menu" on the page gutter like the main site (it sat 11 px inside). */
@media(max-width:768px){
 html body.page-creations #hamburgerBtn{margin-right:-11px}
}
/* 3. Footer: the same column headings and brand line everywhere (Workbench headings were light, the homepage brand
      line was larger and narrower than every other page's). */
html body>footer .footer-col .footer-heading{font-weight:700}
html body>footer .footer-top>div>p.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8}
/* 4. One focus ring weight: the phone menu toggle, menu rows and the footer privacy link drew 1 px rings while every other
      header, footer and search control draws 2 px. */
html body #hamburgerBtn:focus-visible,
html body #mobileMenu a:focus-visible,
html body>footer .footer-privacy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Six header links since "Partnerships" (2026-10-10): at 769-900px the links tighten and the search button keeps its
   square, so the logo, links, search and CTA never touch. */
@media(min-width:769px) and (max-width:900px){
 #mainNav .nav-links{gap:.8rem;margin:0 10px 0 22px}
 #mainNav .nav-links a{font-size:11.5px;letter-spacing:.05em}
 #mainNav .site-search-open{flex:none;margin-left:8px}
}
/* Same reason at 1101-1279px (the search becomes a bar) and 1400-1599px (links centred on the page; the [creations]
   labels are longer): a little less space between links so they never run into the search bar. */
@media(min-width:1101px) and (max-width:1279px){#mainNav .nav-links{gap:1.25rem}#mainNav .site-search-open{width:150px}}
@media(min-width:1400px) and (max-width:1599px){#mainNav .nav-links{gap:1.5rem}body.page-creations #mainNav .nav-links{gap:1.1rem}}
/* Old tech in the desktop header (owner 2026-10-10: "without adding too much clutter"): not a seventh centred link but a
   quiet utility link (box icon + label, no frame) on the right, beside the search bar, so the six section links keep
   their spacing. Shown from 1280px where the right group has room; the phone menu lists it after Partnerships. */
#mainNav .nav-util{display:none}
@media(min-width:1280px){
 #mainNav .nav-util{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0 14px 0 auto;padding:0 2px;flex:none;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#f5f5f5a8;text-decoration:none;white-space:nowrap;transition:color .2s}
 #mainNav .nav-util svg{width:16px;height:16px;flex:none}
 #mainNav .nav-util:hover,#mainNav .nav-util[aria-current="page"]{color:#fff}
 #mainNav .nav-util[aria-current="page"]{text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866}
 #mainNav .nav-util:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
 #mainNav .nav-util+.site-search-open{margin-left:0}
}
@media(min-width:1280px) and (max-width:1399px){#mainNav .nav-util+.site-search-open{width:150px}}
/* With the extra link the right group is wider, so the links stay centred between logo and search (as below 1400px)
   until 1900px, where page-centred links clear it again (the homepage's wider gutter included). */
@media(min-width:1400px) and (max-width:1899px){#mainNav:has(.nav-util) .nav-links{position:static;transform:none;margin:0 auto}}

/* Phone footer (owner 2026-10-11): the Designs column is dropped on phones; [creations] in Explore leads there. */
@media (max-width: 760px) { body > footer .footer-col:has(a[href$="#cooling"]) { display: none; } }
/* ...so Good to know spans the row and lists its four links in two columns under Explore and Connect (owner 2026-10-11). */
@media (max-width: 760px) {
 body > footer .footer-nav > .footer-col:last-child { grid-column: 1 / -1; }
 body > footer .footer-nav > .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; }
}


/* Link buttons (owner 2026-10-11: "every one"): every standalone link and link button is a rounded button with a
   filled circle in the text colour; the arrow is cut out of the circle, so it shows the button's own colour and
   contrasts on dark and light. Arrow: up-right to another page, toward the target on the same page, right for a
   pop-up preview. Plain text links (first list) get the whole button; existing pill buttons (second list) keep their
   own fill and get the radius and the circle. Add new standalone links to one of the two lists. */
html body.page-home .text-link,html body .model-contact,html body .product-secondary>a,html body.page-home .home-build-story .feature-actions a:not(.build-watch),html body .review-design-link,html body .help-back,html body .journey-link,html body .editorial-links a,html body .founder-links a,html body .fan-compare-side>a:not(.fan-compare-image-link),html body.page-creations p>a[href$="#test-notes"]:only-child,html body .pw-all,html body .rail-all,html body .wb-rail-all,html body .product-guide-link a,html body .bento-note-link,html body .custom-note-link,html body .wwu-review-link a,html body .wwu-kit-link,html body.page-work .wwu-go,html body.page-work .wwu-direct ul a,html body.page-work .wwu-review figcaption a,html body.page-work .wwu-proof-link a,html body.page-work .wwu-case-rel,html body .product-case-more,html body .pr-all,html body .workbench-rss-link,html body .privacy-end p>a,html body .channel-link,html body .contact-setup-note a,html body .contact-detail-value a,html body .post-back,html body .post-3d-link,html body .help-toc-back,html body .help-toc-help,html body .help-toc-close,html body .help-shop{display:inline-block!important;position:relative!important;width:fit-content!important;max-width:100%;align-self:flex-start;padding:12px 54px 12px 18px!important;min-height:46px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;background-image:none!important;font-family:'DM Sans',sans-serif;font-size:14px!important;font-weight:500!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:normal!important;opacity:1!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch:hover,html body.page-home .text-link:hover,html body .model-contact:hover,html body .product-secondary>a:hover,html body.page-home .home-build-story .feature-actions a:not(.build-watch):hover,html body .review-design-link:hover,html body .help-back:hover,html body .journey-link:hover,html body .editorial-links a:hover,html body .founder-links a:hover,html body .fan-compare-side>a:not(.fan-compare-image-link):hover,html body.page-creations p>a[href$="#test-notes"]:only-child:hover,html body .pw-all:hover,html body .rail-all:hover,html body .wb-rail-all:hover,html body .product-guide-link a:hover,html body .bento-note-link:hover,html body .custom-note-link:hover,html body .wwu-review-link a:hover,html body .wwu-kit-link:hover,html body.page-work .wwu-go:hover,html body.page-work .wwu-direct ul a:hover,html body.page-work .wwu-review figcaption a:hover,html body.page-work .wwu-proof-link a:hover,html body.page-work .wwu-case-rel:hover,html body .product-case-more:hover,html body .pr-all:hover,html body .workbench-rss-link:hover,html body .privacy-end p>a:hover,html body .channel-link:hover,html body .contact-setup-note a:hover,html body .contact-detail-value a:hover,html body .post-back:hover,html body .post-3d-link:hover,html body .help-toc-back:hover,html body .help-toc-help:hover,html body .help-toc-close:hover,html body .help-shop:hover{border-color:color-mix(in srgb,currentColor 70%,transparent)!important;background-color:color-mix(in srgb,currentColor 11%,transparent)!important}
html body .home-oldtech-link,html body .model-page-cta,html body .studio-details-link,html body .home-forum-cta,html body a.ot-btn,html body a.wwu-btn,html body a.btn-primary,html body .product-buy,html body a.product-actionbar-btn,html body .review-etsy-button,html body .hero-shop-link,html body .model-shop,html body .rb-all,html body .wb-link,html body .help-contact>a,html body .post-cta>a,html body .help-end-link,html body .mto-cta a,html body .help-toc-page,html body .sv-start{position:relative!important;display:inline-flex!important;align-items:center;min-height:46px;box-sizing:border-box;padding-right:54px!important;border-radius:12px!important;text-decoration:none!important}
html body.page-home .text-link *,html body .model-contact *,html body .product-secondary>a *,html body.page-home .home-build-story .feature-actions a:not(.build-watch) *,html body .review-design-link *,html body .help-back *,html body .journey-link *,html body .editorial-links a *,html body .founder-links a *,html body .fan-compare-side>a:not(.fan-compare-image-link) *,html body.page-creations p>a[href$="#test-notes"]:only-child *,html body .pw-all *,html body .rail-all *,html body .wb-rail-all *,html body .product-guide-link a *,html body .bento-note-link *,html body .custom-note-link *,html body .wwu-review-link a *,html body .wwu-kit-link *,html body.page-work .wwu-go *,html body.page-work .wwu-direct ul a *,html body.page-work .wwu-review figcaption a *,html body.page-work .wwu-proof-link a *,html body.page-work .wwu-case-rel *,html body .product-case-more *,html body .pr-all *,html body .workbench-rss-link *,html body .privacy-end p>a *,html body .channel-link *,html body .contact-setup-note a *,html body .contact-detail-value a *,html body .post-back *,html body .post-3d-link *,html body .home-oldtech-link *,html body .model-page-cta *,html body .studio-details-link *,html body .home-forum-cta *,html body a.ot-btn *,html body a.wwu-btn *,html body a.btn-primary *,html body .product-buy *,html body a.product-actionbar-btn *,html body .review-etsy-button *,html body .hero-shop-link *,html body .model-shop *,html body .rb-all *,html body .wb-link *,html body .help-contact>a *,html body .post-cta>a *,html body .help-end-link *,html body .mto-cta a *,html body .help-toc-back *,html body .help-toc-help *,html body .help-toc-close *,html body .help-shop *,html body .help-toc-page *,html body .sv-start *{text-decoration:none!important}
html body.page-home .text-link svg,html body .model-contact svg,html body .product-secondary>a svg,html body.page-home .home-build-story .feature-actions a:not(.build-watch) svg,html body .review-design-link svg,html body .help-back svg,html body .journey-link svg,html body .editorial-links a svg,html body .founder-links a svg,html body .fan-compare-side>a:not(.fan-compare-image-link) svg,html body.page-creations p>a[href$="#test-notes"]:only-child svg,html body .pw-all svg,html body .rail-all svg,html body .wb-rail-all svg,html body .product-guide-link a svg,html body .bento-note-link svg,html body .custom-note-link svg,html body .wwu-review-link a svg,html body .wwu-kit-link svg,html body.page-work .wwu-go svg,html body.page-work .wwu-direct ul a svg,html body.page-work .wwu-review figcaption a svg,html body.page-work .wwu-proof-link a svg,html body.page-work .wwu-case-rel svg,html body .product-case-more svg,html body .pr-all svg,html body .workbench-rss-link svg,html body .privacy-end p>a svg,html body .channel-link svg,html body .contact-setup-note a svg,html body .contact-detail-value a svg,html body .post-back svg,html body .post-3d-link svg,html body .home-oldtech-link svg,html body .model-page-cta svg,html body .studio-details-link svg,html body .home-forum-cta svg,html body a.ot-btn svg,html body a.wwu-btn svg,html body a.btn-primary svg,html body .product-buy svg,html body a.product-actionbar-btn svg,html body .review-etsy-button svg,html body .hero-shop-link svg,html body .model-shop svg,html body .rb-all svg,html body .wb-link svg,html body .help-contact>a svg,html body .post-cta>a svg,html body .help-end-link svg,html body .mto-cta a svg,html body .help-toc-back svg,html body .help-toc-help svg,html body .help-toc-close svg,html body .help-shop svg,html body .help-toc-page svg,html body .sv-start svg{display:none!important}
html body.page-home .text-link::before,html body .model-contact::before,html body .product-secondary>a::before,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::before,html body .review-design-link::before,html body .help-back::before,html body .journey-link::before,html body .editorial-links a::before,html body .founder-links a::before,html body .fan-compare-side>a:not(.fan-compare-image-link)::before,html body.page-creations p>a[href$="#test-notes"]:only-child::before,html body .pw-all::before,html body .rail-all::before,html body .wb-rail-all::before,html body .product-guide-link a::before,html body .bento-note-link::before,html body .custom-note-link::before,html body .wwu-review-link a::before,html body .wwu-kit-link::before,html body.page-work .wwu-go::before,html body.page-work .wwu-direct ul a::before,html body.page-work .wwu-review figcaption a::before,html body.page-work .wwu-proof-link a::before,html body.page-work .wwu-case-rel::before,html body .product-case-more::before,html body .pr-all::before,html body .workbench-rss-link::before,html body .privacy-end p>a::before,html body .channel-link::before,html body .contact-setup-note a::before,html body .contact-detail-value a::before,html body .post-back::before,html body .post-3d-link::before,html body .home-oldtech-link::before,html body .model-page-cta::before,html body .studio-details-link::before,html body .home-forum-cta::before,html body a.ot-btn::before,html body a.wwu-btn::before,html body a.btn-primary::before,html body .product-buy::before,html body a.product-actionbar-btn::before,html body .review-etsy-button::before,html body .hero-shop-link::before,html body .model-shop::before,html body .rb-all::before,html body .wb-link::before,html body .help-contact>a::before,html body .post-cta>a::before,html body .help-end-link::before,html body .mto-cta a::before,html body .help-toc-back::before,html body .help-toc-help::before,html body .help-toc-close::before,html body .help-shop::before,html body .help-toc-page::before,html body .sv-start::before{display:none!important}
html body.page-home .home-build-story .feature-actions a.build-watch::after,html body.page-home .text-link::after,html body .model-contact::after,html body .product-secondary>a::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::after,html body .review-design-link::after,html body .help-back::after,html body .journey-link::after,html body .editorial-links a::after,html body .founder-links a::after,html body .fan-compare-side>a:not(.fan-compare-image-link)::after,html body.page-creations p>a[href$="#test-notes"]:only-child::after,html body .pw-all::after,html body .rail-all::after,html body .wb-rail-all::after,html body .product-guide-link a::after,html body .bento-note-link::after,html body .custom-note-link::after,html body .wwu-review-link a::after,html body .wwu-kit-link::after,html body.page-work .wwu-go::after,html body.page-work .wwu-direct ul a::after,html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-proof-link a::after,html body.page-work .wwu-case-rel::after,html body .product-case-more::after,html body .pr-all::after,html body .workbench-rss-link::after,html body .privacy-end p>a::after,html body .channel-link::after,html body .contact-setup-note a::after,html body .contact-detail-value a::after,html body .post-back::after,html body .post-3d-link::after,html body .home-oldtech-link::after,html body .model-page-cta::after,html body .studio-details-link::after,html body .home-forum-cta::after,html body a.ot-btn::after,html body a.wwu-btn::after,html body a.btn-primary::after,html body .product-buy::after,html body a.product-actionbar-btn::after,html body .review-etsy-button::after,html body .hero-shop-link::after,html body .model-shop::after,html body .rb-all::after,html body .wb-link::after,html body .help-contact>a::after,html body .post-cta>a::after,html body .help-end-link::after,html body .mto-cta a::after,html body .help-toc-back::after,html body .help-toc-help::after,html body .help-toc-close::after,html body .help-shop::after,html body .help-toc-page::after,html body .sv-start::after{content:""!important;display:block!important;position:absolute!important;inset:50% 7px auto auto!important;translate:0 -50%;width:32px!important;height:32px!important;margin:0!important;border:0!important;border-radius:50%;background:currentColor!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.page-home .home-build-story .feature-actions a.build-watch:focus-visible,html body.page-home .text-link:focus-visible,html body .model-contact:focus-visible,html body .product-secondary>a:focus-visible,html body.page-home .home-build-story .feature-actions a:not(.build-watch):focus-visible,html body .review-design-link:focus-visible,html body .help-back:focus-visible,html body .journey-link:focus-visible,html body .editorial-links a:focus-visible,html body .founder-links a:focus-visible,html body .fan-compare-side>a:not(.fan-compare-image-link):focus-visible,html body.page-creations p>a[href$="#test-notes"]:only-child:focus-visible,html body .pw-all:focus-visible,html body .rail-all:focus-visible,html body .wb-rail-all:focus-visible,html body .product-guide-link a:focus-visible,html body .bento-note-link:focus-visible,html body .custom-note-link:focus-visible,html body .wwu-review-link a:focus-visible,html body .wwu-kit-link:focus-visible,html body.page-work .wwu-go:focus-visible,html body.page-work .wwu-direct ul a:focus-visible,html body.page-work .wwu-review figcaption a:focus-visible,html body.page-work .wwu-proof-link a:focus-visible,html body.page-work .wwu-case-rel:focus-visible,html body .product-case-more:focus-visible,html body .pr-all:focus-visible,html body .workbench-rss-link:focus-visible,html body .privacy-end p>a:focus-visible,html body .channel-link:focus-visible,html body .contact-setup-note a:focus-visible,html body .contact-detail-value a:focus-visible,html body .post-back:focus-visible,html body .post-3d-link:focus-visible,html body .home-oldtech-link:focus-visible,html body .model-page-cta:focus-visible,html body .studio-details-link:focus-visible,html body .home-forum-cta:focus-visible,html body a.ot-btn:focus-visible,html body a.wwu-btn:focus-visible,html body a.btn-primary:focus-visible,html body .product-buy:focus-visible,html body a.product-actionbar-btn:focus-visible,html body .review-etsy-button:focus-visible,html body .hero-shop-link:focus-visible,html body .model-shop:focus-visible,html body .rb-all:focus-visible,html body .wb-link:focus-visible,html body .help-contact>a:focus-visible,html body .post-cta>a:focus-visible,html body .help-end-link:focus-visible,html body .mto-cta a:focus-visible,html body .help-toc-back:focus-visible,html body .help-toc-help:focus-visible,html body .help-toc-close:focus-visible,html body .help-shop:focus-visible,html body .help-toc-page:focus-visible,html body .sv-start:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Same page: toward the target (down unless it sits above). */
html body.page-home .text-link[href^="#"]::after,html body .model-contact[href^="#"]::after,html body .product-secondary>a[href^="#"]::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)[href^="#"]::after,html body .review-design-link[href^="#"]::after,html body .help-back[href^="#"]::after,html body .journey-link[href^="#"]::after,html body .editorial-links a[href^="#"]::after,html body .founder-links a[href^="#"]::after,html body .fan-compare-side>a:not(.fan-compare-image-link)[href^="#"]::after,html body.page-creations p>a[href$="#test-notes"]:only-child[href^="#"]::after,html body .pw-all[href^="#"]::after,html body .rail-all[href^="#"]::after,html body .wb-rail-all[href^="#"]::after,html body .product-guide-link a[href^="#"]::after,html body .bento-note-link[href^="#"]::after,html body .custom-note-link[href^="#"]::after,html body .wwu-review-link a[href^="#"]::after,html body .wwu-kit-link[href^="#"]::after,html body.page-work .wwu-go[href^="#"]::after,html body.page-work .wwu-direct ul a[href^="#"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after,html body.page-work .wwu-proof-link a[href^="#"]::after,html body.page-work .wwu-case-rel[href^="#"]::after,html body .product-case-more[href^="#"]::after,html body .pr-all[href^="#"]::after,html body .workbench-rss-link[href^="#"]::after,html body .privacy-end p>a[href^="#"]::after,html body .channel-link[href^="#"]::after,html body .contact-setup-note a[href^="#"]::after,html body .post-back[href^="#"]::after,html body .post-3d-link[href^="#"]::after,html body .home-oldtech-link[href^="#"]::after,html body .model-page-cta[href^="#"]::after,html body .studio-details-link[href^="#"]::after,html body .home-forum-cta[href^="#"]::after,html body a.ot-btn[href^="#"]::after,html body a.wwu-btn[href^="#"]::after,html body a.btn-primary[href^="#"]::after,html body .product-buy[href^="#"]::after,html body a.product-actionbar-btn[href^="#"]::after,html body .review-etsy-button[href^="#"]::after,html body .hero-shop-link[href^="#"]::after,html body .model-shop[href^="#"]::after,html body .rb-all[href^="#"]::after,html body .wb-link[href^="#"]::after,html body .help-contact>a[href^="#"]::after,html body .post-cta>a[href^="#"]::after,html body .help-end-link[href^="#"]::after,html body .mto-cta a[href^="#"]::after,html body .help-toc-help[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
html body .help-back[href="#your-product"]::after,html body .help-toc-back[href="#your-product"]::after,html body .help-toc-close::after,html body .help-end-link[href="#your-product"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* [creations] comparison "Explore this mount" opens the preview: a pop-up. */
html body.page-creations:not(.page-product) .fan-compare-side>a:not(.fan-compare-image-link)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* "Start step-by-step setup" (Help and product pages) opens the step viewer: a pop-up. */
html body .sv-start::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* Smaller versions: inside review cards and the sticky product action bar. */
html body .review-design-link{padding:8px 40px 8px 14px!important;min-height:36px;font-size:12.5px!important;border-radius:10px!important}
html body .review-design-link::after,html body a.product-actionbar-btn::after{width:24px!important;height:24px!important;right:6px!important}
html body a.product-actionbar-btn{min-height:36px;padding-right:38px!important}
html body .review-design-link strong{font-weight:600}
/* Hero chapter tiles: same filled circle; Channel and Community scroll down the page. */
.page-home .hero-chapters a:not(.hero-chapter-out) .ui-arrow{background:#f4f4f1;color:#151515;border-color:#f4f4f1!important}

/* Plain text links that sat in the pill list: give them the whole button. */
html body .rb-all,html body .hero-shop-link{padding:12px 54px 12px 18px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important}
/* The forum call to action keeps its own padding rule; make room for the circle. */
html body.page-home .forum-stage .forum-stage-cta .home-forum-cta{padding-right:62px!important}
/* [creations] preview: keep the studio's own show/hide for these two (single-column studio shows Details, hides Ask). */
html body #modelPreview.is-studio .studio-details-link{display:none!important}
html body #modelPreview .model-contact{display:none!important}
@media (min-width: 761px) and (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html body #modelPreview .model-contact{display:inline-block!important}
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .studio-details-link{display:inline-flex!important}
  html body #modelPreview .model-contact{display:none!important}
}
@media (max-width: 760px) {
  html body #modelPreview .studio-details-link,html body #modelPreview .model-shop{padding-right:40px!important;white-space:nowrap}
  html body #modelPreview .studio-details-link::after,html body #modelPreview .model-shop::after{width:26px!important;height:26px!important;right:7px!important}
}
html body .channel-link{white-space:nowrap!important;flex:none}

/* Header: [creations] keeps its lowercase brand spelling inside the uppercase nav (owner 2026-10-11). */
html body #mainNav .nav-links a[href="https://creations.bankasimedia.com/"]{text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
/* Footer column headings glow like the current-page link (owner 2026-10-11; weight stays 700). */
html body .footer-col .footer-heading{color:#fff!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}

/* BANKASI MEDIA lockup (owner 2026-10-13): 800 extra bold, MEDIA cap-top on BANKASI's cap-top line.
   MEDIA sits on the baseline and is raised by cap height x (size ratio - 1), in its own em:
   main 0.71 x (16.8/7.36 - 1) = .911em (Geist); [creations] 0.70 x (1/.58 - 1) = .507em (DM Sans).
   [creations] uses 'DM Sans Print' (same DM Sans file, 100-1000) because its 'DM Sans' face stops at 700. */
html body #mainNav .nav-logo,html body footer .nav-logo{align-items:baseline!important}
html body .nav-logo .logo-main{font-weight:800!important}
html body .nav-logo .logo-sup{font-weight:800!important;vertical-align:baseline!important;position:relative!important;top:-.911em!important;margin-top:0!important}
html body .creations-parent-name,html body .creations-parent-name sup{font-weight:800!important;font-family:'DM Sans Print','DM Sans',sans-serif!important}
html body .creations-parent-name sup{vertical-align:baseline!important;position:relative!important;top:-.507em!important}
/* [creations] wordmark (owner 2026-10-13): 500 medium in the header, hero (incl. the loading mark and typewriter layers) and footer, was 300. */
html body.page-creations .creations-bracket{font-weight:500!important}
/* The hero typewriter's hidden "[creations]_" spacer reserves the word's width; it must use the same weight, or the
   typed word and cursor outgrow it and push the hero copy beside it (owner 2026-10-14). */
html body.page-creations .creations-type-replay::before{font-weight:500!important}

/* Bold nav (owner 2026-10-17): header and phone-menu controls match the heavier type of the rest of the site. Same shapes, sizes and layout; only weight and icon strokes change. */
#mainNav .nav-links a{font-weight:600}
#mainNav .nav-cta{font-weight:700}
#mainNav .nav-util{font-weight:600}
#mainNav .nav-util svg{stroke-width:1.9}
#mainNav .site-search-open{font-weight:600}
#mainNav .site-search-open svg circle,#mainNav .site-search-open svg path{stroke-width:2.3}
#hamburgerBtn::after{font-weight:600}
#mobileMenu#mobileMenu a{font-weight:600}
#mobileMenu#mobileMenu a[aria-current="page"]{font-weight:700}
#mobileMenu#mobileMenu a:nth-last-child(-n+2){font-weight:500}
/* The heavier labels are wider: tablets keep the whole header on screen (769px was already 40px too wide). */
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:.6rem;margin:0 8px 0 16px}#mainNav .nav-links a{letter-spacing:.02em}#mainNav .site-search-open{margin-left:4px}}
@media(min-width:901px) and (max-width:960px){#mainNav .nav-links{gap:.8rem}}
@media(min-width:769px) and (max-width:819px){#mainNav .nav-links{gap:.5rem;margin-left:12px}#mainNav .nav-links a{font-size:11px;letter-spacing:.01em}}

/* [creations] lockup weights (owner 2026-10-21): on iPhone the header's [creations] and BANKASI MEDIA drew light from the
   variable DM Sans file, even with font-variation-settings. They now use 'Creations Mark' (fonts-creations-v1.css), static
   500 / 800 copies of the same DM Sans, so every browser draws the real weight. Header, hero, loading mark, typewriter
   (incl. its spacer, so the copy does not move) and footer. */
html body.page-creations .creations-bracket,html body.page-creations .creations-bracket *,html body.page-creations .creations-type-replay::before{font-family:'Creations Mark','DM Sans',sans-serif!important;font-weight:500!important;font-synthesis-weight:none}
html body.page-creations .creations-parent-name,html body.page-creations .creations-parent-name sup{font-family:'Creations Mark','DM Sans Print','DM Sans',sans-serif!important;font-weight:800!important;font-synthesis-weight:none}
/* Header [creations] at 700 (owner 2026-10-21, chosen on the phone from 500 / 600 / 700): at header size 500 read light. Hero and footer stay 500. */
html body.page-creations #mainNav .creations-bracket,html body.page-creations #mainNav .creations-bracket *{font-weight:700!important}

/* Footer scene v5 (owner-approved 2026-10-31): the footer stays black with glowing stars (space) and comes down into
   New York or Giza at a random time of day per visit (footer-scenes-v1.js, images/footer/footer-nyc-v5.svg and
   footer-giza-v1.svg from scripts/build_footer_*.py). The scene SVG's sky starts at the footer colour, so there is no seam. */
body>footer[data-scene="v5"]{position:relative;overflow:hidden}
body>footer[data-scene="v5"] .footer-top,body>footer[data-scene="v5"] .footer-bottom{position:relative;z-index:1}
body>footer[data-scene="v5"]::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:url(/images/footer/film-grain-v1.png) 0 0/180px 180px repeat;mix-blend-mode:overlay;opacity:.38}
body>footer[data-scene="v5"] .footer-stars{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--scene-h,0px));z-index:0;pointer-events:none}
body>footer[data-scene="v5"] .footer-stars circle{filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
body>footer[data-scene="v5"] .footer-stars .tw{animation:fstw 3.4s ease-in-out infinite}
@keyframes fstw{0%,100%{opacity:1}50%{opacity:.25}}
body>footer[data-scene="v5"] .footer-scene{display:block;position:relative;z-index:0;pointer-events:none;
  margin:4px calc(-1 * var(--page-gutter,clamp(24px,5vw,80px))) -24px;
  height:clamp(300px,31.25vw,620px);background:none;opacity:0;transition:opacity .8s}
body>footer[data-scene="v5"] .footer-scene.is-ready{opacity:1}
body>footer[data-scene="v5"] .footer-scene svg{display:block;width:100%;height:100%}
@media (max-width:760px){body>footer[data-scene="v5"] .footer-scene{height:auto;aspect-ratio:820/500}}
@media print{body>footer[data-scene="v5"] .footer-scene,body>footer[data-scene="v5"] .footer-stars{display:none}body>footer[data-scene="v5"]::after{content:none}}
/* /assets/css/home-refresh-v1.css */
/* 2026-10 homepage refresh (loaded last on the homepage). */

/* Cooling results: the two GPU fan-mount results read as their own group beside the EliteDesk figures. */
.page-home .home-build-story .build-result-kicker{display:block;font:500 10px/1.2 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9aa3ab}
.page-home .home-build-story .build-results>button[data-build-photo="dual40"]{position:relative;margin-left:14px}
.page-home .home-build-story .build-results>button[data-build-photo="dual40"]:before{content:"";position:absolute;left:-28px;top:10px;bottom:18px;width:1px;background:#ffffff2e}
@media(max-width:760px){
 .page-home .home-build-story .build-results>button[data-build-photo="dual40"]{margin-left:0}
 .page-home .home-build-story .build-results>button[data-build-photo="dual40"]:before{display:none}
}

/* Hero: the chapter bar is the only set of ways in (the two buttons repeated it, owner 2026-10-04). The copy shares
   the page gutter with the logo and the bar, and sits a steady gap above the bar. Phones stack the bar's three rows. */
.page-home .hero .hero-content{padding-left:var(--page-gutter,5vw);padding-bottom:112px}
@media(max-width:760px){
 .page-home .hero-chapters{grid-template-columns:1fr;left:var(--page-gutter,24px);right:var(--page-gutter,24px)}
 .page-home .hero-chapters a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px}
 .page-home .hero-chapters a+a{border-left:0;border-top:1px solid #ffffff1f}
 .page-home .hero-chapter-kicker{font-size:10px}
 .page-home .hero-chapter-label{font-size:14px}
 .page-home .hero-chapter-label .ui-arrow{display:inline-block}
 .page-home .hero .hero-content{padding-bottom:164px}
}

/* Reviews and "Care beyond the print" read as one trust chapter. */
.page-home .review-showcase+.review-service{margin-top:0;padding-top:clamp(28px,4vw,48px)}

/* Live shop stock on homepage design cards. */
.page-home .stock-badge{display:inline-flex;align-items:center;gap:6px;font:500 10px/1.2 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#4d5a50}
.page-home .stock-badge .stock-dot{width:6px;height:6px;border-radius:50%;background:#3f9a5c;box-shadow:0 0 0 3px #3f9a5c1f}
.page-home .stock-badge[data-stock="out"],.page-home .stock-badge[data-stock="gone"]{color:#6d6a66}
.page-home .stock-badge[data-stock="out"] .stock-dot,.page-home .stock-badge[data-stock="gone"] .stock-dot{background:#a3a09b;box-shadow:none}

/* Channel: the video-tested design, linked from the channel footer. */
.page-home .channel-featured{color:inherit;opacity:.82}
.page-home .channel-featured a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.page-home .channel-featured a:hover{text-decoration-thickness:2px}
@media(max-width:760px){.page-home .channel-featured{display:block;margin-top:6px}}

/* [creations] heading band: one even, full-width charcoal band that continues the dark hero, holds the glowing
   wordmark on solid ground, then fades out in a short eased step before the headline (replaces the off-centre blob). */
.page-home .home-design-edit::before{height:142px;background:linear-gradient(180deg,#0b0b0c 0,#16181a 56px,#16181a 98px,rgba(22,24,26,.82) 108px,rgba(22,24,26,.5) 119px,rgba(22,24,26,.18) 130px,rgba(22,24,26,0) 142px)!important}
@media(max-width:760px){
 .page-home .home-design-edit::before{height:118px;background:linear-gradient(180deg,#0b0b0c 0,#16181a 40px,#16181a 78px,rgba(22,24,26,.82) 88px,rgba(22,24,26,.5) 98px,rgba(22,24,26,.18) 108px,rgba(22,24,26,0) 118px)!important}
}

/* [creations] wordmark at heading scale (it was a 29px label). The band keeps its proportions around it: solid to just
   below the wordmark, a 44px eased fade, ending just above the headline (title starts ~7px below the band). */
.page-home .home-design-edit .section-label{gap:26px}
.page-home .home-design-edit .home-creations-word{font-size:58px;letter-spacing:-.055em}
.page-home .home-design-edit::before{height:172px!important;background:linear-gradient(180deg,#0b0b0c 0,#16181a 56px,#16181a 128px,rgba(22,24,26,.82) 138px,rgba(22,24,26,.5) 149px,rgba(22,24,26,.18) 160px,rgba(22,24,26,0) 172px)!important}
@media(max-width:760px){
 .page-home .home-design-edit .section-label{gap:16px}
 .page-home .home-design-edit .home-creations-word{font-size:40px}
 .page-home .home-design-edit::before{height:134px!important;background:linear-gradient(180deg,#0b0b0c 0,#16181a 40px,#16181a 94px,rgba(22,24,26,.82) 104px,rgba(22,24,26,.5) 114px,rgba(22,24,26,.18) 124px,rgba(22,24,26,0) 134px)!important}
}

/* Workshop steps on phones (2 x 2): every step has its own track, so the progress line runs through both rows. */
@media(max-width:760px){
 .page-home .studio-process{border-top:0;row-gap:26px}
 .page-home .studio-process li{border-top:1px solid #dce8f02e}
 .page-home .studio-process li:nth-child(n+3)::before{display:block}
}

/* Wide design cards (dual 40 mm, magnetic slider) below 1060 px: the animation canvas overlays the poster exactly,
   as on desktop. The older rule made it a static flex item beside the poster, pushing it out of the visible card. */
@media(max-width:1060px){
 .home-design-edit .selected-grid.is-bento>.bento-wide .home-model-motion canvas{position:absolute;top:50%;left:0;width:100%;height:auto;aspect-ratio:1;transform:translateY(-50%)}
}

/* Cooling: the five-fan EliteDesk loop cycles fan layouts; this chip names the one on screen (home-build-story-v8). */
.page-home .build-scene .build-layout-chip { position: absolute; top: clamp(84px, 9vw, 120px); right: clamp(20px, 4vw, 56px); display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 14px 9px 13px; border: 1px solid rgba(214, 226, 240, .22); border-radius: 999px; background: rgba(20, 22, 25, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #eef2f6; opacity: 0; transition: opacity .52s ease-in-out; pointer-events: none; }
.page-home .build-scene .build-layout-chip.is-active { opacity: 1; }
.page-home .build-layout-kicker { font: 500 10px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #a9b7c6; }
.page-home .build-layout-name { font: 500 14px/1 "DM Sans", sans-serif; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px), (max-width: 0px) { .page-home .build-scene .build-layout-chip { display: none; } }

/* Hero ways in as clear buttons (owner 2026-10-04: "they look like suggestions, not guidance"): three separate frosted
   tiles with a strong edge, a larger label and a round arrow; [creations] leads as the light primary. Hover brightens
   the edge and fill only (no lift). */
.page-home .hero-chapters{gap:12px;border:0;border-radius:0;overflow:visible;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.page-home .hero-chapters a{position:relative;justify-content:center;gap:6px;min-height:76px;padding:16px 76px 16px 22px;border:1px solid rgba(255,255,255,.34);border-radius:14px;background:rgba(24,26,29,.52);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 30px rgba(0,0,0,.28);transition:background-color .25s,border-color .25s,box-shadow .25s}
.page-home .hero-chapters a+a{border-left:1px solid rgba(255,255,255,.34)}
.page-home .hero-chapters a:hover{background:rgba(44,47,52,.66);border-color:rgba(255,255,255,.62);box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 3px rgba(214,228,242,.14)}
.page-home .hero-chapter-kicker{font-size:11px;letter-spacing:.14em;color:#c9d1d8}
.page-home .hero-chapter-label{font:500 17px/1.25 "DM Sans",sans-serif;letter-spacing:-.005em;color:#fff}
.page-home .hero-chapter-label .ui-arrow{position:absolute;right:20px;top:50%;width:38px;height:38px;padding:10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.5);border-radius:50%;transform:translateY(-50%);transition:transform .2s,background-color .25s,border-color .25s}
.page-home .hero-chapters a:hover .ui-arrow{transform:translate(3px,-50%);background:rgba(255,255,255,.12);border-color:#fff}
.page-home .hero-chapters a:first-child{background:#f4f3ef;border-color:#f4f3ef;color:#151515}
.page-home .hero-chapters a:first-child:hover{background:#fff;border-color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 3px rgba(214,228,242,.35)}
.page-home .hero-chapters a:first-child .hero-chapter-kicker{color:#4a4a47;text-shadow:none;font-size:13px}
.page-home .hero-chapters a:first-child .hero-chapter-label{color:#151515}
.page-home .hero-chapters a:first-child .ui-arrow{background:#151515;border-color:#151515;color:#f4f3ef}
.page-home .hero-chapters a:first-child:hover .ui-arrow{background:#000;border-color:#000}
.page-home .hero-chapters a:focus-visible{outline:2px solid #e6eef6;outline-offset:3px}
/* The [creations] tile leaves for the full collection (owner 2026-10-07): its arrow points out and nudges up-right. */
.page-home .hero-chapters a.hero-chapter-out:hover .ui-arrow{transform:translate(2px,calc(-50% - 2px))}
@media(max-width:760px){
 .page-home .hero-chapters{gap:8px}
 .page-home .hero-chapters a{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:62px;padding:12px 64px 12px 16px}
 .page-home .hero-chapters a+a{border-top:1px solid rgba(255,255,255,.34);border-left:1px solid rgba(255,255,255,.34)}
 .page-home .hero-chapter-label{font-size:16px}
 .page-home .hero-chapter-label .ui-arrow{right:14px;width:34px;height:34px;padding:9px}
 .page-home .hero .hero-content{padding-bottom:232px}
}
@media(max-width: 0px){.page-home .hero-chapters a,.page-home .hero-chapter-label .ui-arrow{transition:none}}
.page-home .hero-chapters a:first-child .hero-chapter-label{font-weight:500}

/* Cooling: the EliteDesk figures now carry one decimal (−19.0 / −13.0); scale the pair so it never runs into the GPU tabs. */
@media (min-width: 761px) {
 .page-home .home-build-story .build-result-pair{gap:22px}
 .page-home .home-build-story .build-result-value.is-icy{font-size:clamp(46px,4.3vw,64px)}
 .page-home .home-build-story .build-result-value.is-icy.is-second{font-size:clamp(34px,3.1vw,44px)}
}
/* Three EliteDesk figures (drive, CPU peak, chipset): sized so the trio stays inside its tab at every width. */
@media (min-width: 761px) {
 .page-home .home-build-story .build-result-pair{gap:16px}
 .page-home .home-build-story .build-result-value.is-icy{font-size:clamp(40px,3.5vw,54px)}
 .page-home .home-build-story .build-result-value.is-icy.is-second{font-size:clamp(26px,2.2vw,32px)}
}
@media (max-width: 760px) {
 .page-home .home-build-story .build-result-pair{flex-wrap:wrap;gap:12px 32px}
 .page-home .home-build-story .build-result-pair>.build-result-stat:first-child{flex:1 0 100%}
 .page-home .home-build-story .build-result-value.is-icy{font-size:56px}
 .page-home .home-build-story .build-result-value.is-icy.is-second{font-size:34px}
}
/* /assets/css/home-qol-v1.css */
/* Homepage quality-of-life layer (owner-approved 2026-10-06). Last homepage stylesheet; every rule is scoped to .page-home.
   1. One page edge: every section, the nav and the footer share --page-gutter (nav-aligned). From 1700 px the gutter
      widens so the chapter rail has room in it.
   2. "See all designs" after the bento.
   3. Chapter rail (>= 1700 px) with scroll-spy (home-qol-v1.js).
   4. Forum edge streams start below the forum heading (home-qol-v1.js measures it) so they never cross the copy.
   5. Phone design cards: one text inset, images clipped to the card's top corners.
   No lift on hover (house rule). */

/* 1. One page edge ------------------------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  .page-home { --page-gutter: clamp(80px, calc(12vw - 80px), 200px); }
}
@media (min-width: 1061px) {
  .page-home #mainNav { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .page-home [data-safe-section],
  .page-home .home-forum.home-forum-feature,
  .page-home .customer-notes.review-showcase,
  .page-home .audience-strip.reach-mini { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .page-home .home-forum-inner { max-width: none; }
  .page-home .hero .hero-content { max-width: calc(780px + var(--page-gutter)); }
  .page-home .build-scene .build-layout-chip { right: var(--page-gutter); }
}

/* 2. See all designs ----------------------------------------------------------------------------------------- */
.page-home .home-designs-more {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  margin-top: clamp(40px, 4.5vw, 64px); padding-top: 28px; border-top: 1px solid rgba(21, 21, 21, .12);
}
.page-home .home-designs-count { margin: 0; max-width: 62ch; font: 400 16px/1.6 'DM Sans', sans-serif; color: #5d5a54; }
.page-home .home-designs-count-num {
  display: inline-block; margin-right: 10px; font: 400 30px/1 'Cormorant Garamond', serif; color: #151515; vertical-align: -3px;
}
.page-home .home-see-all {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex: none;
  min-height: 56px; padding: 0 30px 0 34px; border: 1px solid #151515; border-radius: 999px;
  background: #151515; color: #f6f6f2; text-decoration: none;
  font: 500 13px/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(160, 180, 200, 0); transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.page-home .home-see-all .ui-arrow { width: 18px; height: 18px; transition: transform .25s; }
.page-home .home-see-all:hover { background: #2a2c2e; border-color: #2a2c2e; box-shadow: 0 0 0 6px rgba(21, 21, 21, .07), 0 14px 34px rgba(0, 0, 0, .14); }
.page-home .home-see-all:hover .ui-arrow { transform: translateX(4px); }
.page-home .home-see-all:focus-visible { outline: 2px solid #151515; outline-offset: 4px; }
@media (max-width: 760px) {
  .page-home .home-designs-more { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 32px; padding-top: 22px; }
  .page-home .home-designs-count { font-size: 15px; }
  .page-home .home-designs-count-num { display: block; margin: 0 0 6px; font-size: 28px; }
  .page-home .home-see-all { width: 100%; min-height: 54px; }
}

/* 3. Chapter rail -------------------------------------------------------------------------------------------- */
.home-rail { display: none; }
@media (min-width: 1700px) {
  .home-rail {
    --rail-text: #7a766e; --rail-strong: #151515; --rail-line: rgba(21, 21, 21, .14);
    --rail-bg: rgba(244, 244, 241, .72); --rail-edge: rgba(21, 21, 21, .06);
    display: block; position: fixed; z-index: 150; left: 14px; top: 50%; width: calc(var(--page-gutter) - 28px);
    padding: 16px 12px 14px 14px; transform: translateY(-50%); box-sizing: border-box; border-radius: 14px;
    background: var(--rail-bg); box-shadow: inset 0 0 0 1px var(--rail-edge);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s, background-color .3s, box-shadow .3s;
  }
  .home-rail.is-shown { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s, background-color .3s, box-shadow .3s; }
  .home-rail[data-tone="dark"] { --rail-text: #9aa1a7; --rail-strong: #f5f5f1; --rail-line: rgba(255, 255, 255, .16); --rail-bg: rgba(24, 27, 30, .66); --rail-edge: rgba(255, 255, 255, .07); }
  .home-rail-label { margin: 0 0 10px; font: 500 11px/1.3 'DM Sans', sans-serif; letter-spacing: .02em; white-space: nowrap; color: var(--rail-text); transition: color .3s; }
  .home-rail ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rail-line); transition: border-color .3s; }
  .home-rail a {
    display: block; margin-left: -1px; padding: 6px 0 6px 13px; border-left: 2px solid transparent;
    font: 400 13px/1.3 'DM Sans', sans-serif; color: var(--rail-text); text-decoration: none; white-space: nowrap;
    transition: color .3s, border-color .3s;
  }
  .home-rail a:hover { color: var(--rail-strong); }
  .home-rail a.is-current { color: var(--rail-strong); font-weight: 500; border-left-color: var(--rail-strong); }
  .home-rail a:focus-visible { outline: 2px solid var(--rail-strong); outline-offset: 2px; }
  .page-home main > section[id] { scroll-margin-top: 76px; }
}

/* 4. Forum edge streams start under the heading row ---------------------------------------------------------- */
@media (min-width: 761px) {
  .page-home .home-forum-feature .forum-stream { top: var(--forum-stream-top, 0px); }
}

/* 5. Phone design cards -------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .page-home .home-design-edit .home-creation-card .home-model-motion { border-radius: 14px 14px 0 0; }
  .page-home .home-design-edit .home-creation-card .home-design-caption {
    align-self: stretch; width: auto; max-width: none; margin-left: 0; margin-right: 0; padding: 16px 16px 20px; box-sizing: border-box;
  }
}

/* 6. Back-to-top button: centred in the page gutter; scroll-top-lift-v1.js raises it above the footer. */
.page-home #scrollTop { right: max(12px, calc((var(--page-gutter) - 42px) / 2)); bottom: 24px; }

/* ---- 2026-10-07 audit (owner-approved) ---------------------------------------------------------------------- */

/* 7. Designs bento from 761 to 1060 px (B19): two columns instead of one giant column. The EliteDesk card is a full-width
   row (square render beside its caption), the tall pair stays, the two wide cards become a pair of square cards. */
@media (min-width: 761px) and (max-width: 1060px) {
  .home-design-edit .selected-grid.is-bento > .bento-xl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-row: auto; }
  .home-design-edit .selected-grid.is-bento > .bento-xl .home-model-motion { aspect-ratio: 1; height: auto; border-radius: 14px 0 0 14px !important; }
  .home-design-edit .selected-grid.is-bento > .bento-xl .home-design-caption { border-radius: 0 14px 14px 0 !important; justify-content: center; }
  .home-design-edit .selected-grid.is-bento > .bento-xl .home-design-caption .text-link { margin-top: 6px; }
  .home-design-edit .selected-grid.is-bento > .bento-wide { grid-column: span 1; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion { aspect-ratio: 1; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption { justify-content: flex-start; }
  .home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption .text-link { margin-top: auto; }
}

/* 8. Wide design cards on desktop (B21): one surface. The render's own backdrop fades into the card on every side
   (container mask left/right x the image's top/bottom feather), so no #f2f2f0 panel edge shows. */
@media (min-width: 1061px) {
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide { background-image: linear-gradient(135deg, #fafafa, #eeeeef) !important; }
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide .home-design-caption { background: none; }
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide .home-model-motion {
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 91%, transparent);
  }
  /* The surface above is the card's own background, so its blurred halo (::before, z-index -1) must sit behind the
     card, not inside the card's stacking context: no isolation or hover z-index here; the grid keeps the stacking. */
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide,
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide:hover,
  .page-home .home-design-edit .selected-grid.is-bento > .bento-wide:focus-within { isolation: auto; z-index: auto !important; }
}

/* 9. Tall design cards from 1061 to 1499 px (Q10): two lines reserved for the name and the line under the heading,
   so both tall cards' renders and captions line up when one name wraps. */
@media (min-width: 1061px) and (max-width: 1499px) {
  .home-design-edit .selected-grid.is-bento > .bento-tall .model-spec { min-height: 3em; }
  .home-design-edit .selected-grid.is-bento > .bento-tall .home-design-detail { min-height: 3.3em; }
}

/* 10. EliteDesk figures (Q10): the three values sit on one line, labels start together beneath them. */
@media (min-width: 761px) {
  .page-home .home-build-story .build-result-pair { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: end; column-gap: 16px; row-gap: 10px; }
  .page-home .home-build-story .build-result-stat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; }
  .page-home .home-build-story .build-result-stat > .build-result-value { align-self: end; }
  .page-home .home-build-story .build-result-stat > .build-result-label { align-self: start; }
}

/* 11. Channel (Q10): a deeper scrim under the "Now showing" title so it reads over any thumbnail. */
.page-home .yt-showcase .yt-card:first-child .yt-thumb-overlay { background: linear-gradient(0deg, #000000eb 0%, #000000b8 26%, #00000070 46%, transparent 70%); }
.page-home .yt-showcase .yt-card:first-child .yt-info::before,
.page-home .yt-showcase .yt-card:first-child .yt-views { text-shadow: 0 1px 10px #000c; }

/* 12. Cooling on phones (W6 / B20): figure-first. The picture or loop leads the section full-bleed, with quiet underline
   tabs on its lower edge (home-build-story-v11.js), then the selected result's figures and note, then the story and
   its links. The result buttons' twins drive it here, so only the selected result shows. */
.page-home .build-scene .build-tabs { display: none; }
@media (max-width: 760px) {
  .page-home .home-build-story { padding-top: 0; gap: 26px; }
  .page-home .home-build-story::after { display: none; }
  .page-home .home-build-story .build-scene {
    position: relative; inset: auto; order: 1; opacity: 1; z-index: 0;
    width: 100vw; margin: 0 calc(50% - 50vw); aspect-ratio: 4 / 3; overflow: hidden; touch-action: pan-y;
  }
  .page-home .home-build-story .build-scene::after {
    content: ""; position: absolute; inset: auto 0 0; height: 46%; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, #181a1c 0%, #181a1cd9 30%, #181a1c00 100%);
  }
  .page-home .home-build-story .build-photo-note { order: 2; margin-top: -14px; }
  .page-home .home-build-story .build-evidence { order: 3; border-top: 0; padding-top: 0; }
  .page-home .home-build-story .build-story-content { order: 4; }
  .page-home .build-scene .build-tabs {
    position: absolute; z-index: 2; left: var(--page-gutter, 24px); right: var(--page-gutter, 24px); bottom: 0;
    display: flex; gap: 22px; border-bottom: 1px solid #ffffff38;
  }
  .page-home .build-scene .build-tabs button {
    position: relative; flex: 0 1 auto; padding: 10px 0 12px; border: 0; background: none; color: #b5bbc1;
    font: 500 13px/1.2 'DM Sans', sans-serif; letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: color .2s;
  }
  .page-home .build-scene .build-tabs button::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: #f2f3f4; opacity: 0; transition: opacity .2s; }
  .page-home .build-scene .build-tabs button[aria-pressed="true"] { color: #fff; }
  .page-home .build-scene .build-tabs button[aria-pressed="true"]::after { opacity: 1; }
  .page-home .build-scene .build-tabs button[data-pending] { color: #fff; }
  .page-home .build-scene .build-tabs button:focus-visible { outline: 2px solid #d5dce3; outline-offset: 2px; }
  /* Only the selected result shows; it is a figure here, not a control. */
  .page-home .home-build-story .build-results { width: 100%; border-bottom: 0; }
  .page-home .home-build-story .build-results > button[aria-pressed="false"] { display: none; }
  .page-home .home-build-story .build-results > button[aria-pressed="true"] { flex: 1 0 100%; padding: 0; cursor: default; }
  .page-home .home-build-story .build-results > button[aria-pressed="true"]::after { display: none; }
  .page-home .home-build-story .build-evidence > p { margin-top: 16px; }
}

/* 13. Forum categories link to their forum categories (D10): the whole card is the link (stretched); hover and focus
   keep the card's own border glow, no lift. */
.page-home .home-forum-prompts li { position: relative; }
.page-home .home-forum-prompts .home-forum-cat { color: inherit; text-decoration: none; }
.page-home .home-forum-prompts .home-forum-cat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.page-home .home-forum-prompts li:focus-within { border-color: #ccd9e366 !important; box-shadow: 0 0 24px #a9c8e81f; }
.page-home .home-forum-prompts .home-forum-cat:focus-visible { outline: none; }
.page-home .home-forum-prompts li:has(.home-forum-cat:focus-visible) { outline: 2px solid #d5dce3; outline-offset: 3px; }

/* ---- 2026-10-09 homepage pass: layout fixes ------------------------------------------------------------------- */

/* 14. Cooling from 761 to 1279 px: the render sat under the figures and the GPU results (absolute scene beside a
   column that no longer fits). Here the picture or loop leads the section full-bleed, as on phones, and the story,
   tabs and figures follow at full width, so nothing overlaps. Desktop tabs stay the controls (the phone tabs on the
   picture are for <= 760 px only). */
@media (min-width: 761px) and (max-width: 1279px) {
  .page-home .home-build-story { min-height: 0; padding-top: 0; gap: 40px; }
  .page-home .home-build-story::after { display: none; }
  .page-home .home-build-story .build-scene {
    position: relative; inset: auto; order: 1; z-index: 0; overflow: hidden;
    width: 100vw; margin: 0 calc(50% - 50vw); aspect-ratio: 16 / 9; max-height: 72vh;
  }
  .page-home .home-build-story .build-scene::after {
    content: ""; position: absolute; inset: auto 0 0; height: 38%; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, #181a1c 0%, #181a1cb3 38%, #181a1c00 100%);
  }
  .page-home .home-build-story .build-photo-note { order: 2; position: static; margin-top: -28px; align-self: flex-end; }
  .page-home .home-build-story .build-story-content { order: 3; }
  .page-home .home-build-story .build-evidence { order: 4; }
  .page-home .home-build-story .build-story-intro { max-width: 52ch; }
}

/* 15. Workshop steps from 761 to 1060 px: the two-column section leaves ~300 px for four steps, so "Assemble" ran
   into "Ship". 2 x 2 like phones, each step on its own track. */
@media (min-width: 761px) and (max-width: 1060px) {
  .page-home .studio-process { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; row-gap: 26px; }
  .page-home .studio-process li { border-top: 1px solid #dce8f02e; }
}

/* 16. Forum below 1440 px: the outer ring is 1.1k px wide, so from 1061 to 1279 its side bubbles were cut by the screen
   edge (tablets already drop them; same here) and from 1280 to 1439 the ring is drawn a little narrower. The drifting
   background bubbles that land on the heading or on each other at these widths step aside. */
@media (min-width: 1061px) and (max-width: 1279px) {
  .page-home .stage-bubble.o-side { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .page-home .stage-bubble.o-side { left: calc(50% + var(--x) * .86); }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .page-home .home-forum-stage-layout .home-forum-sky span:is(:nth-child(3), :nth-child(13)) { display: none; }
}

/* 17. Care beyond the print from 761 to 1060 px: the title sat on the badge's bottom edge; centre it on the badge. */
@media (min-width: 761px) and (max-width: 1060px) {
  .page-home .review-service .review-service-heading { align-items: center; }
  .page-home .review-service #service-title { align-self: center; }
}

/* 18. Channel footer: the serif lead, then the video-tested design as a quiet DM Sans line with an arrow (it used to
   start a wrapped line with "·"). The masthead link carries the same arrow as every other text link. */
.page-home .yt-showcase .channel-link .ui-arrow { width: 16px; height: 16px; transition: transform .2s; }
.page-home .yt-showcase .channel-link:hover .ui-arrow { transform: translateX(3px); }
.page-home .yt-showcase .channel-footer { align-items: flex-end; }
.page-home .yt-showcase .channel-footer > p { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-home .channel-featured { display: block; margin: 0; opacity: 1; font: 400 14px/1.5 'DM Sans', sans-serif; color: #5d5a54 !important; }
.page-home .channel-featured a { display: inline-flex; align-items: center; gap: 6px; color: #151515; text-decoration-color: #15151566; }
.page-home .channel-featured a .ui-arrow { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.page-home .channel-featured a:hover .ui-arrow { transform: translateX(3px); }
.page-home .yt-showcase .channel-shop { white-space: nowrap; flex: none; }
@media (max-width: 760px) {
  .page-home .yt-showcase .channel-footer { flex-direction: column; align-items: flex-start; gap: 18px; }
  .page-home .yt-showcase .channel-footer > p { font-size: 24px; }
  .page-home .channel-featured { font-size: 13px; }
}

/* 19. Reviews shop line: "BANKASI [creations] on Etsy" stays one line instead of breaking before "on". */
.page-home .review-shop-summary .review-shop-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.page-home .review-shop-summary .review-shop-name > span { display: inline; }

/* 20. EliteDesk cooling render on phones and tablets (owner 2026-10-10: "awkwardly sized and not centered"). In the
   render and its loop the model sits right of centre (about 58% across) and fills under half the frame. Phones: centred,
   lifted clear of the tabs on the lower edge and shown 1.5x; tablets: centred across. Only the EliteDesk still and
   loop move; the 2 x 40 / 1 x 60 build photos are framed as before. */
@media (max-width: 760px) {
  .page-home .home-build-story .build-scene .build-photo-video,
  .page-home .home-build-story .build-scene img[src*="home-cooling-elitedesk"] { object-position: 50% 50%; transform: scale(1.5) translate(-8.3%, -8%); transform-origin: 50% 50%; }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .page-home .home-build-story .build-scene .build-photo-video,
  .page-home .home-build-story .build-scene img[src*="home-cooling-elitedesk"] { object-position: 50% 52%; transform: translateX(-8.3%) scale(1.08); }
}
/* /assets/css/review-designs-v1.css */
/* "See this design" link under a review's attribution (review-designs-v1.js). Quiet, inherits the review's colour. */
.review-design-link{display:inline-block;align-self:flex-start;margin-top:12px;padding:2px 0;color:inherit;opacity:.78;text-decoration:none;font:400 12.5px/1.4 'DM Sans',sans-serif;letter-spacing:.01em;transition:opacity .2s}
.review-design-link strong{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s}
.review-design-link:hover{opacity:1}
.review-design-link:hover strong{text-decoration-color:currentColor}
.review-design-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px;opacity:1}
.review-design-arrow{display:inline-block;width:14px;height:14px;margin-left:5px;vertical-align:-2px}
.review-spotlight .review-design-link{margin-top:16px;font-size:13.5px}
/* Photo cards: their copy sits on the photo, so the link takes the attribution's light colour. */
.photo-review-card .review-design-link{color:#ddd;opacity:.9;margin-top:10px}
.photo-review-card .review-design-link:hover{color:#fff;opacity:1}
/* The review viewer (review-gallery-v4.js) carries the link too, under "Verified purchase on Etsy". */
.review-lightbox .review-viewer-design{display:block;width:fit-content;margin-top:10px;color:#e6e6e6;opacity:.9}
.review-lightbox .review-viewer-design:hover{color:#fff;opacity:1}
/* /assets/css/home-designs-index-v1.css */
/* Homepage designs numbering (owner 2026-10-07): the five bento designs carry [01]-[05]; the rest of the collection
   follows as a numbered index of small square tiles [06]-[19] (generated by scripts/build_products.py home_index()).
   No lift on hover: border, glow and colour only. */

/* ---- Bento index chips ---- */
.page-home .home-creation-card { position: relative; }
.page-home .bento-num {
  position: absolute; z-index: 3; top: 18px; left: 18px; pointer-events: none;
  display: inline-flex; align-items: baseline; gap: 1px; padding: 8px 15px 8px 13px; border-radius: 999px;
  font: 500 18px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #151515;
  background: rgba(250, 250, 248, .74); border: 1px solid rgba(21, 21, 21, .08);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 18px -10px rgba(21, 21, 21, .35);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.page-home .bento-xl .bento-num { top: 24px; left: 24px; padding: 10px 18px 10px 16px; font-size: 22px; }
.page-home .hdi-br { font-weight: 300; color: #9b978f; transition: color .3s; }
.page-home .home-creation-card:hover .bento-num,
.page-home .home-creation-card:focus-visible .bento-num { border-color: rgba(111, 138, 166, .45); box-shadow: 0 0 0 4px rgba(150, 172, 196, .18), 0 6px 18px -10px rgba(21, 21, 21, .35); }
.page-home .home-creation-card:hover .bento-num .hdi-br,
.page-home .home-creation-card:focus-visible .bento-num .hdi-br { color: #6f8aa6; }

/* ---- The rest of the collection ---- */
.page-home .home-designs-index {
  margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid rgba(21, 21, 21, .1);
}
.page-home .hdi-head { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 40px); }
.page-home .hdi-range {
  margin: 0; flex: none; display: inline-flex; align-items: baseline;
  font: 500 clamp(44px, 5.4vw, 80px)/.86 'DM Sans', sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #151515;
}
.page-home .hdi-range .hdi-br { font-weight: 200; color: #a29e96; }
.page-home .hdi-range .hdi-dash { margin: 0 .04em; font-weight: 300; color: #8b877f; }
.page-home .hdi-title {
  margin: 0 auto 4px 0; max-width: 18ch;
  font: 500 clamp(19px, 1.7vw, 24px)/1.25 'DM Sans', sans-serif; letter-spacing: -.01em; color: #2a2a28; text-wrap: balance;
}
.page-home .home-designs-index .home-see-all { flex: none; margin-bottom: 2px; }

.page-home .hdi-grid {
  list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px);
}
.page-home .hdi-item { min-width: 0; }
.page-home .hdi-tile { position: relative; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; outline: none; }
.page-home .hdi-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 16px;
  background: radial-gradient(120% 95% at 50% 38%, #fbfbfa 0%, #f1f0ed 70%, #ebeae6 100%);
  border: 1px solid rgba(21, 21, 21, .07);
  transition: border-color .35s, box-shadow .35s, background .35s;
}
.page-home .hdi-art img {
  width: 86%; height: 86%; object-fit: contain; filter: saturate(.96) contrast(1.04);
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  transition: filter .35s;
}
.page-home .hdi-num {
  position: absolute; z-index: 1; top: 10px; left: 11px; display: inline-flex; align-items: baseline;
  font: 500 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #3a3936;
  transition: color .3s;
}
.page-home .hdi-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 500 13px/1.35 'DM Sans', sans-serif; color: #4a4843; transition: color .3s;
}
.page-home .hdi-tile:hover .hdi-art,
.page-home .hdi-tile:focus-visible .hdi-art {
  border-color: rgba(111, 138, 166, .5);
  box-shadow: 0 0 0 4px rgba(150, 172, 196, .16), 0 18px 36px -24px rgba(30, 44, 64, .45);
}
.page-home .hdi-tile:hover .hdi-art img, .page-home .hdi-tile:focus-visible .hdi-art img { filter: saturate(1.05) contrast(1.08); }
.page-home .hdi-tile:hover .hdi-name, .page-home .hdi-tile:focus-visible .hdi-name { color: #151515; }
.page-home .hdi-tile:hover .hdi-br, .page-home .hdi-tile:focus-visible .hdi-br { color: #6f8aa6; }
.page-home .hdi-tile:focus-visible .hdi-art { outline: 2px solid #151515; outline-offset: 3px; }

/* One-off reveal: tiles settle in, one after another (opacity and blur only, no movement). */
.page-home .home-designs-index.is-armed .hdi-item { opacity: 0; filter: blur(6px); }
.page-home .home-designs-index.is-in .hdi-item {
  opacity: 1; filter: none; transition: opacity .6s ease, filter .7s ease; transition-delay: calc(var(--i) * 45ms);
}

/* Tablets and phones: one sideways row that bleeds to the screen edges. */
@media (max-width: 1060px) {
  .page-home .hdi-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(118px, 17vw, 150px);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--page-gutter, 24px) * -1); margin-right: calc(var(--page-gutter, 24px) * -1);
    padding: 4px var(--page-gutter, 24px) 8px; scroll-padding-inline: var(--page-gutter, 24px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--page-gutter, 24px), #000 calc(100% - var(--page-gutter, 24px)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--page-gutter, 24px), #000 calc(100% - var(--page-gutter, 24px)), transparent 100%);
  }
  .page-home .hdi-grid::-webkit-scrollbar { display: none; }
  .page-home .hdi-item { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .page-home .bento-num { top: 14px; left: 14px; padding: 6px 11px 6px 9px; font-size: 14px; }
  .page-home .bento-xl .bento-num { top: 14px; left: 14px; padding: 7px 12px 7px 10px; font-size: 16px; }
  .page-home .hdi-head { flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
  .page-home .hdi-title { margin: 0 0 3px; flex: 1 1 150px; }
  .page-home .home-designs-index .home-see-all { flex: 1 1 100%; justify-content: center; margin-top: 8px; }
}

/* ---- See all designs (owner 2026-10-07) ----
   The call to action is the hero's chapter tile in its dark glass form (rules copied from home-refresh-v1.css).
   Desktop: hovering a tile wraps it in that dark glass frame and its name becomes "[creations] / See all 19 designs"
   with the round up-right arrow, so the tile and the button become one (it still opens that design's preview on
   [creations]); the other tiles recede (opacity and colour only, never movement).
   Phones/tablets: the row ends with the same tile, lit once the row has been swiped 70% (JS adds .is-far); the other
   tiles never grey out (owner 2026-10-10: they faded long before the button was in view). */
.page-home .hdi-stage { position: relative; }
.page-home .hdi-cta-kicker { font: 500 13px/1 'DM Sans', sans-serif; letter-spacing: .02em; color: #c9d1d8; }
.page-home .hdi-cta-label { font: 500 17px/1.25 'DM Sans', sans-serif; letter-spacing: -.005em; color: #fff; }
.page-home .hdi-cta-card .ui-arrow, .page-home .hdi-tile-cta .ui-arrow {
  position: absolute; right: 20px; top: 50%; width: 38px; height: 38px; padding: 10px; box-sizing: border-box; color: #fff;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; transform: translateY(-50%);
  transition: transform .2s, background-color .25s, border-color .25s;
}

/* Tile + button on hover (desktop): a dark glass frame closes around the picture and, just below it, a separate
   button (wider than the tile, hero chapter-tile proportions) replaces the name. */
.page-home .hdi-item { position: relative; }
.page-home .hdi-item:hover, .page-home .hdi-item:focus-within { z-index: 3; }
.page-home .hdi-name { height: 2.7em; transition: opacity .2s ease, color .3s; }
.page-home .hdi-tile { transition: opacity .3s ease, filter .3s ease; }
.page-home .hdi-tile::before, .page-home .hdi-tile::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  background: rgba(24, 26, 29, .9); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  opacity: 0; transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
/* frame: hugs the picture (tile = picture + 10 px gap + two-line name) */
.page-home .hdi-tile::before { inset: -6px -6px calc(2.7em * 13 / 13 + 10px - 6px) -6px; font-size: 13px; border-radius: 22px; transform: scale(.97); }
/* button: wider than the tile, separate from the frame by a hairline gap */
.page-home .hdi-tile::after {
  left: -22px; right: -22px; top: calc(100% - 2.7em + 2px); bottom: -14px; font-size: 13px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(214, 228, 242, .14); transform: translateY(-4px) scale(.96);
}
.page-home .hdi-art, .page-home .hdi-name { position: relative; z-index: 1; }
.page-home .hdi-num { z-index: 2; }
.page-home .hdi-tile-cta {
  position: absolute; z-index: 2; left: -6px; right: -12px; top: calc(100% - 2.7em + 2px); bottom: -14px; font-size: 13px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-right: 36px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.page-home .hdi-tile-cta .hdi-cta-kicker { font-size: 11px; }
.page-home .hdi-tile-cta .hdi-cta-label { font-size: 15px; line-height: 1.15; white-space: nowrap; }
.page-home .hdi-tile-cta .ui-arrow { right: 0; width: 30px; height: 30px; padding: 7px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1061px) {
  .page-home .hdi-grid:hover .hdi-tile { opacity: .5; filter: saturate(.7); transition-delay: .05s; }
  .page-home .hdi-grid:hover .hdi-tile:hover, .page-home .hdi-tile:focus-visible { opacity: 1; filter: none; transition-delay: 0s; }
  .page-home .hdi-tile:hover::before, .page-home .hdi-tile:focus-visible::before { opacity: 1; transform: scale(1); }
  .page-home .hdi-tile:hover::after, .page-home .hdi-tile:focus-visible::after { opacity: 1; transform: none; transition-delay: .04s; }
  .page-home .hdi-tile:hover .hdi-art, .page-home .hdi-tile:focus-visible .hdi-art { border-color: rgba(255, 255, 255, .14); box-shadow: none; outline: none; }
  .page-home .hdi-tile:hover .hdi-num, .page-home .hdi-tile:focus-visible .hdi-num { color: #151515; }
  .page-home .hdi-tile:hover .hdi-name, .page-home .hdi-tile:focus-visible .hdi-name { opacity: 0; }
  .page-home .hdi-tile:hover .hdi-tile-cta, .page-home .hdi-tile:focus-visible .hdi-tile-cta { opacity: 1; transition-delay: .1s; }
  .page-home .hdi-tile:hover .hdi-tile-cta .ui-arrow { transform: translate(2px, calc(-50% - 2px)); background: rgba(255, 255, 255, .12); border-color: #fff; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1061px) and (max-width: 1320px) {
  .page-home .hdi-tile-cta .hdi-cta-label { font-size: 13px; }
  .page-home .hdi-tile-cta .ui-arrow { width: 26px; height: 26px; padding: 6px; }
  .page-home .hdi-tile-cta { padding-right: 32px; }
}

/* Phones/tablets: the row ends with the hero-style tile. */
.page-home .hdi-end { display: none; }
.page-home .hdi-cta-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 76px; padding: 16px 76px 16px 22px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px;
  background: rgba(24, 26, 29, .88); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28); color: #fff; text-decoration: none;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.page-home .hdi-cta-card:hover { background: rgba(44, 47, 52, .92); border-color: rgba(255, 255, 255, .62); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(214, 228, 242, .14); }
.page-home .hdi-cta-card:focus-visible { outline: 2px solid #151515; outline-offset: 3px; }
@media (max-width: 1060px) {
  .page-home .hdi-tile-cta, .page-home .hdi-tile::before, .page-home .hdi-tile::after { display: none; }
  .page-home .hdi-end { display: block; grid-column: span 2; }
  .page-home .hdi-end-tile { height: 100%; max-height: clamp(118px, 17vw, 150px); justify-content: flex-end; padding: 16px 64px 16px 18px; }
  .page-home .hdi-end-tile .hdi-cta-label { font-size: 16px; }
  .page-home .hdi-end-tile .ui-arrow { right: 14px; top: auto; bottom: 14px; width: 34px; height: 34px; padding: 9px; transform: none; }
  .page-home .hdi-end-tile:hover .ui-arrow { transform: translate(2px, -2px); }
  .page-home .hdi-stage.is-far .hdi-end-tile { border-color: rgba(255, 255, 255, .62); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(214, 228, 242, .3); }
}

/* Made-to-order designs (owner 2026-10-10): the same thin kraft-brown outline as in [creations]' "In this section". */
.page-home .hdi-tile[href*="/#custom-"] .hdi-art { border-color: #b08a5c; box-shadow: 0 0 0 1px #b08a5c; }
/* Phones/tablets (owner 2026-10-10): one way to [creations] here, the grey end tile of the row; the black
   "See all designs" button under the heading is hidden at these widths (desktop has no end tile and keeps it). */
@media (max-width: 1060px) { .page-home .home-designs-index .home-see-all { display: none; } }
/* /assets/css/home-polish-v1.css */
/* Homepage polish (2026-10-09, separate from the fixes in home-qol-v1.css so it can be dropped on its own).
   Last homepage stylesheet; every rule is scoped to .page-home. No lift on hover (house rule). */

/* 1. Community: the one warm grey (#30302f) between two cool graphite chapters read as a seam. Same graphite family
   as Reviews and the Workshop, lit softly from behind the globe. */
.page-home .audience-strip.reach-mini {
  background:
    radial-gradient(60% 55% at 50% 62%, #3a434c59 0%, transparent 70%),
    linear-gradient(180deg, #202123 0%, #23272a 55%, #25292d 100%);
  border-top-color: #ffffff14;
}

/* 2. Community place lists: the native disclosure triangle sat alone at the left edge of a centred section. A quiet
   centred pill with an SVG chevron that turns when open; the list itself centres under it. */
.page-home .reach-mini .reach-place-groups { text-align: center; }
.page-home .reach-mini .reach-place-groups details { border-top-color: #ffffff17; padding-top: 18px; }
.page-home .reach-mini .reach-place-groups summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 16px; list-style: none;
  border: 1px solid #ffffff24; border-radius: 999px; color: #d8dde1; transition: border-color .2s, color .2s, background-color .2s;
}
.page-home .reach-mini .reach-place-groups summary::-webkit-details-marker { display: none; }
.page-home .reach-mini .reach-place-groups summary::after {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor; transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-home .reach-mini .reach-place-groups details[open] > summary::after { transform: rotate(180deg); }
.page-home .reach-mini .reach-place-groups summary:hover { border-color: #ffffff52; color: #fff; background: #ffffff0a; }
.page-home .reach-mini .reach-place-groups summary:focus-visible { outline: 2px solid #d5dce3; outline-offset: 3px; }
.page-home .reach-mini .reach-place-list { justify-content: center; max-width: 760px; margin-inline: auto; }

/* No decorative lines (owner 2026-10-10): the workshop steps show as plain steps (no glowing progress line, no
   step-by-step fade, no rules between them), and eyebrow labels lose their leading dash. */
.page-home .studio-process, .page-home .studio-process li { border-top: 0; }
.page-home .studio-process li { opacity: 1; transition: none; }
.page-home .studio-process li::before, .page-home .studio-process li:nth-child(n+3)::before { display: none; }
.page-home .studio-story .section-label::before, .page-home .home-forum-label::before,
.page-home .studio-story .studio-carousel-footer::before { content: none; display: none; }
/* /assets/css/home-oldtech-v1.css */
/* Homepage: Old tech callout (owner 2026-10-10). A slim charcoal strip directly after the [creations] section, before
   the forum: copy left, link, and a row of things we accept drawn in the /old-tech line art. Last homepage stylesheet. */
.page-home .home-oldtech{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy art" "link art";align-items:center;column-gap:clamp(32px,5vw,88px);row-gap:18px;margin:0;padding:34px var(--page-gutter,48px) 38px;background:#0b0b0c;color:#f2f2f0;border-top:1px solid #ffffff14}
.page-home .home-oldtech-copy{grid-area:copy;max-width:620px}
.page-home .home-oldtech .home-oldtech-eyebrow{margin:0 0 10px;font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a9b2bd}
.page-home .home-oldtech h2{margin:0;font:500 clamp(26px,2.4vw,34px)/1.15 'Cormorant Garamond',serif;letter-spacing:-.005em;color:#f5f5f3;text-wrap:balance}
.page-home .home-oldtech h2 em{font-style:italic;color:#dfe5ec}
.page-home .home-oldtech .home-oldtech-text{margin:10px 0 0;max-width:56ch;font:400 15px/1.65 'DM Sans',sans-serif;color:#c3c3bd}
.page-home .home-oldtech-link{grid-area:link;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff0d;font:500 14px/1 'DM Sans',sans-serif;color:#f5f5f3;text-decoration:none;transition:border-color .2s,background-color .2s}
.page-home .home-oldtech-link:hover{border-color:#ffffff8c;background:#ffffff1a}
.page-home .home-oldtech-link:focus-visible{outline:2px solid #f2f2f0;outline-offset:3px}
.page-home .home-oldtech-link .ui-arrow{width:16px;height:16px}
.page-home .home-oldtech-art{grid-area:art;display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,30px);margin:0;padding:0;list-style:none}
.page-home .home-oldtech-art li{margin:0;padding:0}
.page-home .home-oldtech-art svg{display:block;height:clamp(64px,6.4vw,104px);width:auto;max-width:150px}
@media (max-width:1060px){
 .page-home .home-oldtech{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art" "link";row-gap:22px}
 .page-home .home-oldtech-art{justify-content:flex-start}
}
@media (max-width:640px){
 .page-home .home-oldtech{padding:28px var(--page-gutter,20px) 30px}
 .page-home .home-oldtech h2{font-size:26px}
 .page-home .home-oldtech .home-oldtech-text{font-size:14.5px}
 .page-home .home-oldtech-art{gap:12px;justify-content:space-between}
 .page-home .home-oldtech-art svg{height:46px;max-width:72px}
}
/* /assets/css/home-trim-v1.css */
/* Homepage trim (owner 2026-10-11): fewer words, related blocks merged. */

/* Cooling: the "EliteDesk 800 Mini · rendered preview" caption is gone.
   home-build-story-v11.js still writes into #home-build-photo-label, so the
   element stays in the markup and is hidden here. */
.page-home .home-build-story .build-photo-note{display:none}

/* Designs heading: no link beside the intro any more. */
.page-home .home-design-edit>.section-heading{justify-content:flex-start}

/* Reviews: the service figures sit under the shop figures as one quiet row. */
.page-home .review-service-mini{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;border-top:1px solid #ffffff1a;padding:16px 0 30px;margin:-14px 0 8px}
.page-home .review-service-mini .rsm-badge{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.2 'DM Sans',sans-serif;color:#d8d8d2;text-decoration:none;white-space:nowrap}
.page-home .review-service-mini .rsm-badge img{width:22px;height:22px}
.page-home .review-service-mini .rsm-badge:hover{color:#fff}
.page-home .review-service-mini dl{display:flex;gap:clamp(18px,3vw,44px);margin:0}
.page-home .review-service-mini dl>div{display:flex;align-items:baseline;gap:7px}
.page-home .review-service-mini dd{margin:0;font:500 15px/1 'DM Sans',sans-serif;color:#f4f4f0;font-variant-numeric:tabular-nums}
.page-home .review-service-mini dd span{font-size:11px;color:#a9a9a3}
.page-home .review-service-mini dt{order:2;font:11px/1.3 'DM Sans',sans-serif;color:#a9a9a3}
@media(max-width:760px){
  .page-home .review-service-mini{padding:14px 0 24px;margin-top:-10px}
  .page-home .review-service-mini dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;width:100%}
}

/* Round 2 (owner 2026-10-11) */
/* Cooling: the figures speak for themselves; the sentence under them is hidden
   (home-build-story-v11.js rewrites it per tab, so it stays in the markup). */
.page-home .home-build-story .build-evidence>p{display:none}
/* Forum on phones: only the six crisp bubbles around the button. */
@media(max-width:760px){.page-home .home-forum-feature .stage-bubble.m-far{display:none}}
/* Workshop now carries the reach line that replaced the Community section. */
.page-home .studio-story .studio-reach{color:#d8d8d2}
.page-home .studio-story .studio-reach strong{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

/* Round 3 (owner 2026-10-11) */
/* Forum on phones: the stage only as tall as its six bubbles. */
@media(max-width:760px){.page-home .home-forum-stage-layout .forum-stage{height:440px}}

/* Cooling: only the selected configuration's figures, at every width. The
   underline tabs home-build-story-v11.js builds for phones sit on the picture's
   lower edge on wider screens too. */
@media(min-width:761px){
  .page-home .build-scene .build-tabs{position:absolute;z-index:2;left:8%;right:8%;bottom:28px;display:flex;justify-content:center;gap:28px;border-bottom:1px solid #ffffff38}
  .page-home .build-scene .build-tabs button{position:relative;padding:10px 0 12px;border:0;background:none;color:#b5bbc1;font:500 13px/1.2 'DM Sans',sans-serif;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:color .2s}
  .page-home .build-scene .build-tabs button::after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:#f2f3f4;opacity:0;transition:opacity .2s}
  .page-home .build-scene .build-tabs button[aria-pressed="true"],.page-home .build-scene .build-tabs button[data-pending],.page-home .build-scene .build-tabs button:hover{color:#fff}
  .page-home .build-scene .build-tabs button[aria-pressed="true"]::after{opacity:1}
  .page-home .build-scene .build-tabs button:focus-visible{outline:2px solid #d5dce3;outline-offset:2px}
  .page-home .home-build-story .build-results>button[aria-pressed="false"]{display:none}
  .page-home .home-build-story .build-results>button[aria-pressed="true"]{flex:1 0 100%;cursor:default}
  .page-home .home-build-story .build-results>button[aria-pressed="true"]::after{display:none}
}

/* Workshop: the four steps as one quiet row, no rules or captions. */
.page-home .studio-story .studio-process{display:flex!important;flex-wrap:wrap;gap:10px 28px!important;margin:26px 0!important;border:0!important;padding:0}
.page-home .studio-story .studio-process li{flex-direction:row!important;align-items:baseline;gap:8px!important;padding:0!important;opacity:1!important;border:0!important}
.page-home .studio-story .studio-process li::before,.page-home .studio-story .studio-process li::after{display:none!important}
.page-home .studio-story .studio-process .studio-step{font:500 11px/1 'DM Sans',sans-serif;color:#8d949a;font-variant-numeric:tabular-nums}
.page-home .studio-story .studio-process strong{font:500 16px/1.2 'DM Sans',sans-serif!important;margin:0!important;color:#f4f4f1}
.page-home .studio-story .studio-process small{display:none}
/* From 1280 px the picture sits behind the section's own fade (#cooling::after, z -1); the
   tabs step out of the picture's layer so they stay crisp while the picture keeps its fade. */
@media(min-width:1280px){
  .page-home .home-build-story .build-scene{z-index:auto}
  .page-home .home-build-story .build-scene>img:first-child{position:relative}
  .page-home .home-build-story .build-scene>:not(.build-tabs):not(.build-switch){z-index:-2}
  .page-home .build-scene .build-tabs{z-index:1}
}

/* Round 5 (owner 2026-10-11) */
/* Hero: "building" glows (no italics). */
.page-home .hero-title .hero-glow{font-style:normal;color:#fff;text-shadow:0 0 6px #ffffffb3,0 0 22px #e3edffb3,0 0 48px #c9dcf673;animation:hero-glow-breathe 5s ease-in-out infinite}
@keyframes hero-glow-breathe{0%,100%{text-shadow:0 0 6px #ffffffb3,0 0 22px #e3edffb3,0 0 48px #c9dcf673}50%{text-shadow:0 0 8px #ffffffd9,0 0 30px #e3edffd9,0 0 64px #c9dcf6a6}}

/* Designs heading: "Designed to [belong]." with the [creations] brackets. */
.page-home .home-design-edit .h-br{font-weight:300;color:#9b978f}

.page-home .home-studio-links{display:flex;flex-wrap:wrap;gap:12px}

/* Cooling: one size whichever configuration is shown; the GPU figures are icy and as big as the EliteDesk lead figure. */
.page-home .home-build-story .build-result-label{max-width:none!important}
.page-home .home-build-story #home-build-title{min-height:2lh}
.page-home .home-build-story .build-story-intro{min-height:3lh}
.page-home .home-build-story .build-results{min-height:136px}
@media(min-width:1280px){.page-home .home-build-story .build-story-intro{min-height:4lh}.page-home .home-build-story .build-results{min-height:142px}}
@media(max-width:760px){
  .page-home .home-build-story #home-build-title{min-height:3lh}
  .page-home .home-build-story .build-story-intro{min-height:5lh}
  .page-home .home-build-story .build-results{min-height:190px}
  .page-home .home-build-story .feature-actions{flex-direction:column;align-items:flex-start;gap:18px}
}

/* Forum: shorter stage, same bubbles. */
@media(min-width:1061px){.page-home .home-forum-stage-layout .forum-stage{height:400px}.page-home .stage-bubble{top:calc(50% + var(--y) * .72)}}
@media(min-width:761px) and (max-width:1060px){.page-home .home-forum-stage-layout .forum-stage{height:380px}.page-home .stage-bubble{top:calc(50% + var(--y) * .7)}}

/* Reviews: a smaller spotlight. */
.page-home .review-spotlight-quote p{font-size:clamp(20px,2vw,26px)!important;line-height:1.3!important}
.page-home .review-spotlight .review-stars{margin-bottom:14px}
.page-home .review-spotlight .review-stars svg{width:16px;height:16px}
.page-home .review-spotlight figcaption{margin-top:18px}
@media(min-width:761px){.page-home .review-spotlight{grid-template-columns:minmax(0,300px) minmax(0,1fr)!important;align-items:center}}
@media(max-width:760px){.page-home .review-spotlight-photo{aspect-ratio:16/10}.page-home .review-spotlight-quote p{font-size:19px!important}}
.page-home .home-build-story .build-results{align-items:flex-start;align-content:flex-start}
.page-home .home-build-story .build-results>button>.build-result-label{font-size:13px;color:#e6eef5;letter-spacing:.02em;margin-top:6px}
.page-home .home-build-story .build-results>button>.build-result-kicker{font-size:11px}

/* Cooling switcher (owner 2026-10-11): one rounded button, previous / next circles, a dot per
   configuration (home-cooling-switch-v1.js). Replaces the underline tabs. */
.page-home .home-build-story:has(.build-switch) .build-tabs{display:none!important}
.page-home .build-switch{display:flex;width:fit-content;flex-direction:column;align-items:center;gap:12px;color:#f4f4f1}
.page-home .build-switch-pill{display:flex;align-items:center;gap:10px;min-width:280px;padding:6px;box-sizing:border-box;border:1px solid #f4f4f157;border-radius:12px;background:#18191ccc;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.page-home .build-switch-name{flex:1;text-align:center;font:500 14px/1.2 'DM Sans',sans-serif;white-space:nowrap;padding:0 6px}
.page-home .build-switch-step{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;background:currentColor;color:#f4f4f1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;transition:opacity .2s}
.page-home .build-switch-step.is-prev{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 16H9'/%3E%3Cpath d='M15 10l-6 6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 16H9'/%3E%3Cpath d='M15 10l-6 6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")}
.page-home .build-switch-step:hover{opacity:.85}
.page-home .build-switch-step:focus-visible{outline:2px solid #f4f4f1;outline-offset:3px}
.page-home .build-switch-dots{display:flex;gap:4px}
.page-home .build-switch-dots button{width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.page-home .build-switch-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:#f4f4f1;opacity:.35;transition:opacity .2s,transform .2s}
.page-home .build-switch-dots button[aria-current="true"]::before{opacity:1;transform:scale(1.15)}
.page-home .build-switch-dots button:focus-visible{outline:2px solid #f4f4f1;outline-offset:1px;border-radius:50%}
@media(min-width:1280px){.page-home .build-scene .build-switch{position:absolute;z-index:2;left:auto;right:calc(var(--page-gutter,72px));translate:none;bottom:30px}}
@media(max-width:760px){.page-home .build-switch-pill{min-width:min(300px,calc(100vw - 48px))}}

/* Designs index (owner 2026-10-11): three more designs, a "+N more" mosaic tile and the [creations] call to action,
   one row on desktop and tablets, a 2 x 2 grid plus a full-width button on phones. */
.page-home .home-designs-index.is-short .home-see-all{display:none}
.page-home .home-designs-index.is-short .hdi-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;margin-left:0!important;margin-right:0!important;padding:0!important;-webkit-mask-image:none!important;mask-image:none!important;scroll-snap-type:none}
.page-home .home-designs-index.is-short .hdi-tile{opacity:1!important;filter:none!important}
.page-home .home-designs-index.is-short .hdi-tile::before,.page-home .home-designs-index.is-short .hdi-tile::after{display:none!important}
.page-home .home-designs-index.is-short .hdi-tile:hover .hdi-name{opacity:1!important}
.page-home .home-designs-index.is-short .hdi-tile:hover .hdi-art{border-color:rgba(21,21,21,.22)!important}
.page-home .hdi-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:12% 10% 10%;box-sizing:border-box}
.page-home .hdi-mosaic img{width:100%!important;height:100%!important;opacity:.55;filter:saturate(.6)!important;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)!important;mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)!important}
.page-home .hdi-more-count{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(24px,2.4vw,34px)/1 'DM Sans',sans-serif;letter-spacing:-.02em;color:#151515;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #fff,0 0 4px #fff}
.page-home .home-designs-index.is-short .hdi-end{display:block!important;grid-column:auto!important}
.page-home .home-designs-index.is-short .hdi-end-tile{height:auto!important;max-height:none!important;aspect-ratio:1;justify-content:flex-end;padding:18px 18px 64px!important;border-radius:16px}
.page-home .home-designs-index.is-short .hdi-end-tile .hdi-cta-label{font-size:clamp(14px,1.2vw,17px);line-height:1.2;white-space:normal}
.page-home .home-designs-index.is-short .hdi-end-tile .ui-arrow{position:absolute;left:18px;right:auto!important;top:auto!important;bottom:16px!important;width:34px!important;height:34px!important;padding:9px!important;border-radius:50%;background:#f4f4f1;color:#151515;border:0!important;transform:none!important}
.page-home .home-designs-index.is-short .hdi-end-tile:hover .ui-arrow{transform:translate(2px,-2px)!important}
@media(max-width:760px){
  .page-home .home-designs-index.is-short .hdi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-home .home-designs-index.is-short .hdi-end{grid-column:1 / -1!important}
  .page-home .home-designs-index.is-short .hdi-end-tile{aspect-ratio:auto;min-height:76px;justify-content:center;padding:16px 70px 16px 20px!important}
  .page-home .home-designs-index.is-short .hdi-end-tile .ui-arrow{left:auto!important;right:16px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
  .page-home .home-designs-index.is-short .hdi-end-tile:hover .ui-arrow{transform:translateY(-50%)!important}
  .page-home .home-designs-index.is-short .hdi-end-tile .hdi-cta-label{font-size:16px}
}

/* Below 1280 px the switcher sits under the picture in the page flow (home-cooling-switch-v1.js moves it). */
@media(max-width:1279px){
  .page-home .home-build-story>.build-switch{position:static;translate:none;order:2;align-self:center;margin:4px auto 0;color:#f4f4f1}
}
@media(min-width:761px) and (max-width:1279px){.page-home .home-build-story>.build-switch{margin:22px auto 6px}}

/* Reviews dot bar (owner 2026-10-11): previous / next chevrons on the ends of the pill, like the workshop carousel. */
.page-home .review-glass-pill>[data-review-prev],.page-home .review-glass-pill>[data-review-next]{display:grid!important;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background-color .2s}
.page-home .review-glass-pill>[data-review-prev]{order:-1}
.page-home .review-glass-pill>[data-review-next]{order:2}
.page-home .review-glass-pill>[data-review-prev] svg,.page-home .review-glass-pill>[data-review-next] svg{display:block!important;width:18px;height:18px}
.page-home .review-glass-pill>[data-review-prev]:hover,.page-home .review-glass-pill>[data-review-next]:hover{background:#ffffff18}
.page-home .review-glass-pill>[data-review-prev]:focus-visible,.page-home .review-glass-pill>[data-review-next]:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Audit round (owner 2026-10-11). */
/* Reviews: the dot bar and pause button fit inside the page edges on phones. */
@media(max-width:760px){
  .page-home #reviews .review-navigation{gap:8px!important}
  .page-home #reviews .review-glass-pill{flex:0 1 auto!important;min-width:0!important;max-width:calc(100% - 62px)!important}
  .page-home #reviews .review-dots{min-width:0!important;gap:0!important}
  .page-home #reviews .review-glass-pill{padding:0 8px!important}
  .page-home #reviews .review-glass-pill>button{width:36px!important;flex:0 0 36px!important}
  .page-home #reviews .review-dot{width:24px!important;flex:0 0 24px!important}
  .page-home #reviews .review-dot[aria-current="true"]{width:46px!important;flex:0 0 46px!important}
}
/* Channel: no separate heading (kept for screen readers); a bigger YouTube mark whose play button glows red. */
.page-home .yt-showcase .channel-intro{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.page-home .yt-showcase .channel-masthead{margin-bottom:32px}
.page-home .yt-showcase .channel-brand svg{overflow:visible;animation:yt-glow 3.6s ease-in-out infinite}
@keyframes yt-glow{0%,100%{filter:drop-shadow(0 0 4px #ff003399) drop-shadow(0 0 12px #ff003355)}50%{filter:drop-shadow(0 0 7px #ff0033cc) drop-shadow(0 0 22px #ff003377)}}
@media(min-width:1061px){
  .page-home .yt-showcase .channel-brand{font-size:32px!important;gap:16px!important}
  .page-home .yt-showcase .channel-brand svg{width:46px!important;height:33px!important}
  .page-home .yt-showcase .channel-handle{font-size:16px!important;padding-left:28px!important;margin-left:14px!important}
}
/* Workshop steps: 2 x 2 wherever one row would leave "04 Ship" alone. */
@media(max-width:1279px){
  html body.page-home #workshop ol.studio-process{display:grid!important;grid-template-columns:repeat(2,max-content)!important;column-gap:40px!important;row-gap:10px!important}
  html body.page-home #workshop ol.studio-process li{margin:0!important}
}
/* Cooling on phones: the space kept for the longest configuration sits below the buttons, not under the heading. */
@media(max-width:760px){
  .page-home .home-build-story #home-build-title,.page-home .home-build-story .build-story-intro{min-height:0!important}
  .page-home .home-build-story .build-story-content{min-height:412px}
}
/* Cooling on tablets: the figures sit beside the copy under the picture. */
@media(min-width:761px) and (max-width:1279px){
  .page-home .home-build-story{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
  .page-home .home-build-story>*{grid-column:1/-1}
  .page-home .home-build-story>.build-story-content{grid-column:1}
  .page-home .home-build-story>.build-evidence{grid-column:2}
}
/* "See it in motion" opens the product page: the rounded button with an up-right arrow, play icon kept. */
html body.page-home .home-build-story .feature-actions a.build-watch{position:relative!important;display:inline-flex!important;align-items:center;gap:10px;width:fit-content;min-height:46px;box-sizing:border-box;padding:6px 54px 6px 6px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important;text-decoration:none!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch .build-play{width:32px!important;height:32px!important;flex:none}
html body.page-home .home-build-story .feature-actions a.build-watch .build-play svg{width:14px;height:14px}
/* Forum: sentence case like every other button. */
html body.page-home .home-forum-cta{text-transform:none!important;letter-spacing:0!important;font-size:16px!important}
/* Bento on phones: both tall cards keep two lines for the design name, so the titles line up. */
@media(max-width:760px){.page-home .bento-tall .home-design-caption .model-spec{min-height:2lh}}
/* Designs index end card (owner 2026-10-13): the "+N more" mosaic and "[creations] / See all N designs" are one dark
   card. Its top two thirds hold the next designs, soft and feathered into the grey, with the count over them; the bottom
   third keeps the label and the filled arrow circle. Two columns wide on desktop and tablets, the fourth square on phones. */
.page-home .home-designs-index.is-short .hdi-end{grid-column:span 2!important;display:flex!important}
.page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic{flex:1;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,1fr);align-items:stretch;justify-content:stretch!important;gap:0;aspect-ratio:auto!important;min-height:0;padding:0!important;overflow:hidden;border-radius:16px}
.page-home .hdi-cta-mosaic{position:relative;min-height:0;overflow:hidden}
.page-home .hdi-cta-mosaic img{position:absolute;top:50%;width:22%;height:auto;aspect-ratio:1;object-fit:contain;translate:0 -50%;filter:blur(1.2px);opacity:.85}
.page-home .hdi-cta-mosaic img:nth-child(1){left:3%}.page-home .hdi-cta-mosaic img:nth-child(2){left:22%}.page-home .hdi-cta-mosaic img:nth-child(3){left:56%}.page-home .hdi-cta-mosaic img:nth-child(4){left:75%}
.page-home .hdi-cta-mosaic .hdi-more-count{color:#fff;text-shadow:0 0 18px rgba(24,26,29,.9),0 1px 3px rgba(24,26,29,.8);font-size:clamp(30px,3vw,44px)}
.page-home .hdi-end-tile.has-mosaic .hdi-cta-text{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 70px 4px 20px}
.page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .ui-arrow{left:auto!important;right:18px!important;top:auto!important;bottom:calc(100% / 6 - 17px)!important}
.page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic:hover .ui-arrow{transform:translate(2px,-2px)!important}
@media(max-width:760px){
  .page-home .home-designs-index.is-short .hdi-end{grid-column:auto!important}
  .page-home .hdi-cta-mosaic img{width:40%;translate:none}
  .page-home .hdi-cta-mosaic img:nth-child(1){left:6%;top:4%}.page-home .hdi-cta-mosaic img:nth-child(2){left:54%;top:4%}
  .page-home .hdi-cta-mosaic img:nth-child(3){left:6%;top:52%}.page-home .hdi-cta-mosaic img:nth-child(4){left:54%;top:52%}
  .page-home .hdi-cta-mosaic .hdi-more-count{font-size:30px}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic{grid-template-rows:minmax(0,62fr) minmax(0,38fr)}
  .page-home .hdi-end-tile.has-mosaic .hdi-cta-text{padding:0 52px 2px 14px;gap:3px}
  .page-home .hdi-end-tile.has-mosaic .hdi-cta-kicker{font-size:11px}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .hdi-cta-label{font-size:14px;line-height:1.2}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .ui-arrow{right:12px!important;width:30px!important;height:30px!important;padding:8px!important;top:auto!important;bottom:calc(19% - 15px)!important;transform:none!important}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic:hover .ui-arrow{transform:none!important}
}
/* Owner 2026-10-13: the card ends where the design pictures end, so it matches their height: the names below the
   pictures are one fixed 2.7em line box (13 px type) after a 10 px gap, and the card leaves exactly that space free. */
.page-home .home-designs-index.is-short .hdi-end{font-size:13px;padding-bottom:calc(10px + 2.7em);box-sizing:border-box}
@media(max-width:760px){
  .page-home .hdi-cta-mosaic img{width:31%}
  .page-home .hdi-cta-mosaic img:nth-child(1){left:12%;top:3%}.page-home .hdi-cta-mosaic img:nth-child(2){left:57%;top:3%}
  .page-home .hdi-cta-mosaic img:nth-child(3){left:12%;top:50%}.page-home .hdi-cta-mosaic img:nth-child(4){left:57%;top:50%}
}
/* Owner 2026-10-13: "[creations] / See all N designs" sits higher, with the arrow circle below it in the card's
   bottom-left corner. */
.page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic{grid-template-rows:minmax(0,1fr) auto}
.page-home .hdi-end-tile.has-mosaic .hdi-cta-text{justify-content:flex-start;padding:0 20px 62px}
.page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .ui-arrow{left:20px!important;right:auto!important;bottom:18px!important;top:auto!important}
@media(max-width:760px){
  .page-home .hdi-end-tile.has-mosaic .hdi-cta-text{padding:0 12px 46px}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .hdi-cta-label{font-size:13px;white-space:nowrap}
  .page-home .home-designs-index.is-short .hdi-end-tile.has-mosaic .ui-arrow{left:12px!important;bottom:11px!important;width:28px!important;height:28px!important;padding:7px!important}
  .page-home .hdi-cta-mosaic img{width:26%}
  .page-home .hdi-cta-mosaic img:nth-child(1){left:16%;top:6%}.page-home .hdi-cta-mosaic img:nth-child(2){left:58%;top:6%}
  .page-home .hdi-cta-mosaic img:nth-child(3){left:16%;top:52%}.page-home .hdi-cta-mosaic img:nth-child(4){left:58%;top:52%}
  .page-home .hdi-cta-mosaic .hdi-more-count{font-size:26px}
}

/* Hero words (owner 2026-10-22): the glowing word cycles (home-hero-words-v1.js). It always sits on its own line, so the
   changing word width never reflows "For the love of"; old and new word share one grid cell while they swap. */
.page-home .hero-title .hero-glow.hw-on{display:grid;justify-content:start;width:max-content}
.page-home .hero-title .hw-word{grid-area:1/1;white-space:nowrap;perspective:600px}
.page-home .hero-title .hw-ch{display:inline-block;transform-origin:50% 60%;backface-visibility:hidden;will-change:transform,filter,opacity}
.page-home .hero-title .hw-out{pointer-events:none}
/* "[creations]" among the hero words is drawn in the brand's DM Sans (static 700, matching the headline's weight). */
.page-home .hero-title .hw-brand{font-family:'Creations Mark','Creations Sans',sans-serif;font-weight:700;letter-spacing:-.03em}