/* Shared image-above-copy cards, following How we work. */
html body.visual-home #playground#playground:has(.space-picker)>.stage-top,
html body.visual-home #playground#playground:has(.learning-picker)>.stage-top,
html body.visual-home #playground#playground .world-followup{display:none!important}
#direct-experiences[hidden]{display:none!important}
#direct-experiences{padding:28px;scroll-margin-top:20px}
.direct-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1240px;margin:0 auto}
.direct-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dce5df;border-radius:22px;overflow:hidden;min-width:0}
.direct-card-media{position:relative;aspect-ratio:16/9;background:#eef3ef;overflow:hidden}
.direct-card-media>img{width:100%;height:100%;object-fit:cover;display:block}
.direct-card-badge{position:absolute;top:18px;left:18px;padding:10px 15px;border-radius:40px;background:#20352de8;color:#fff;font-size:14px;font-weight:600}
.direct-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:26px;flex:1}
.direct-card-copy h2{font-size:clamp(23px,2vw,30px);line-height:1.2;color:#20352d;margin:0}
.direct-card-copy p{font-size:16px;line-height:1.55;color:#59695f;margin:0 0 8px}
.direct-card-copy .pill{margin-top:auto;background:#20352d;color:white;border:0;padding:13px 20px;font-size:15px}
.direct-card-status{margin-top:auto;color:#657a6e;border:1px solid #c5d2ca;border-radius:30px;padding:10px 15px;font-size:14px}
.direct-card-cue{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;pointer-events:none}
.direct-card-cue svg{width:100%;height:100%}
html body.visual-home #expertise#expertise{display:block!important}
html body.visual-home #expertise#expertise .section-intro{position:static!important;width:100%!important;max-width:900px!important;margin:0 0 32px!important}
html body.visual-home #expertise#expertise .section-intro h2{font-size:clamp(30px,3vw,46px)!important;line-height:1.15!important}
html body.visual-home #expertise#expertise .service-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;width:100%!important;margin:0!important}
html body.visual-home #expertise#expertise .service-panel{display:flex!important;flex-direction:column!important;padding:0!important;min-height:0!important;height:auto!important;background:#fff!important;border:1px solid #dce5df!important;border-radius:22px!important;overflow:hidden!important}
html body.visual-home #expertise#expertise .service-panel:after{display:none!important}
html body.visual-home #expertise#expertise .service-panel .service-photo{display:block!important;position:static!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important;opacity:1!important;transform:none!important;mask-image:none!important}
html body.visual-home #expertise#expertise .service-panel .service-panel-content{position:static!important;width:100%!important;padding:26px!important;box-sizing:border-box!important;flex:1!important;background:none!important;display:flex!important;flex-direction:column!important}
html body.visual-home #expertise#expertise .service-panel-heading{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important}
html body.visual-home #expertise#expertise .service-panel h3{color:#20352d!important;font-size:28px!important;line-height:1.2!important;margin:0 0 14px!important}
html body.visual-home #expertise#expertise .service-number{color:#809086!important;font-size:13px!important;padding:0!important}
html body.visual-home #expertise#expertise .service-body{display:flex!important;flex-direction:column!important;align-items:flex-start!important;flex:1!important}
html body.visual-home #expertise#expertise .service-body p{color:#59695f!important;font-size:16px!important;line-height:1.55!important;margin:0 0 20px!important}
html body.visual-home #expertise#expertise .tags{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0 0 24px!important}
html body.visual-home #expertise#expertise .tags span{font-size:12px!important;color:#52665a!important;background:#f3f6f3!important;border-color:#dce5df!important;padding:6px 9px!important}
html body.visual-home #expertise#expertise .text-link{margin-top:auto!important;background:#20352d!important;color:#fff!important;border-radius:40px!important;padding:13px 20px!important;font-size:15px!important}
@media(max-width:900px){html body.visual-home #expertise#expertise .service-list{grid-template-columns:1fr!important;max-width:650px!important;margin:0 auto!important}}
@media(max-width:600px){#direct-experiences{padding:16px 12px}.direct-card-grid{grid-template-columns:1fr;gap:20px}.direct-card-copy{padding:22px}.direct-card-media{aspect-ratio:16/10}}

/* Products use the same direct cards, with one compact category filter. */
html body.visual-home[data-active-world="products"] #playground#playground>.stage-top,
html body.visual-home[data-active-world="products"] #playground#playground #showroom,
html body.visual-home[data-active-world="products"] #playground#playground #product-showcase,
html body.visual-home[data-active-world="products"] #playground#playground .preview-slider-shell:has(#product-showcase){display:none!important}
.product-card-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 28px}
.product-card-filters button{border:1px solid #cbd7cf;background:#fff;color:#20352d;border-radius:40px;font:inherit;font-size:15px;padding:11px 20px;cursor:pointer;min-height:44px}
.product-card-filters button[aria-pressed="true"]{background:#20352d;color:#fff;border-color:#20352d}
.product-card-filters button:focus-visible{outline:3px solid #74c8bc;outline-offset:3px}
.direct-card-grid[data-world="products"]{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;container-type:inline-size}
.direct-card-grid[data-world="products"] .direct-card{flex:0 0 calc((100% - 48px)/3);box-sizing:border-box}
@container(max-width:1007px){.direct-card-grid[data-world="products"] .direct-card{flex-basis:calc((100% - 24px)/2)}}
@container(max-width:663px){.direct-card-grid[data-world="products"] .direct-card{flex-basis:100%}}
.direct-card-grid[data-world="products"] .direct-card{max-width:none;width:auto;justify-self:center}
.direct-card-grid[data-world="products"] .direct-card-media{aspect-ratio:4/3;background:white}
.direct-card-grid[data-world="products"] .direct-card-media>img{object-fit:contain}
@media(max-width:600px){.product-card-filters{gap:8px;margin-bottom:20px}.product-card-filters button{padding:10px 14px;font-size:14px}}

.watch-preview-placeholder{display:grid;place-items:center;background:#edf2ec!important}.watch-preview-placeholder>div{display:flex;flex-direction:column;align-items:center;gap:8px;color:#20352d}.watch-preview-placeholder svg{width:110px;height:130px}.watch-preview-placeholder span{font-size:18px;font-weight:600}.watch-preview-placeholder small{font-size:13px;color:#65796b}

/* One forest-and-mint demo palette across all three worlds. */
html body.visual-home #playground#playground{background:#222e28!important;border-color:#46554d!important}
#direct-experiences{background:#222e28;color:#f5f7f3;border-radius:22px}
#direct-experiences:focus{outline:none}
.direct-section-heading{max-width:1240px;margin:0 auto 24px;color:#f5f7f3;font-size:clamp(24px,2.5vw,34px);line-height:1.2}
#direct-experiences .direct-card-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;container-type:inline-size}
#direct-experiences .direct-card{flex:0 0 calc((100% - 48px)/3);box-sizing:border-box;background:#26332c;border-color:#4b5d52}
#direct-experiences .direct-card-media{aspect-ratio:4/3;background:#f5f6f2}
#direct-experiences .direct-card-media>img{object-fit:contain}
#direct-experiences .direct-card-copy h2{color:#f5f7f3}
#direct-experiences .direct-card-copy p{color:#c5d0c9}
#direct-experiences .direct-card-copy .pill{background:#a5cec4;color:#1d3028;transition:background .18s ease,transform .18s ease}
#direct-experiences .direct-card-copy .pill:hover{background:#c0e1d8;transform:translateY(-2px)}
#direct-experiences .direct-card-copy .pill:focus-visible{outline:3px solid #e2f4ed;outline-offset:4px}
#direct-experiences .direct-card-status{color:#cad6ce;border-color:#667c6e}
#direct-experiences .direct-card-badge{background:#243b30ed;color:#eff8f3}
#direct-experiences .product-card-filters{max-width:1240px;padding-bottom:20px;border-bottom:1px solid #4b5d52}
#direct-experiences .product-card-filters button{background:transparent;color:#d5ded8;border-color:#62786a}
#direct-experiences .product-card-filters button:hover{background:#34483c}
#direct-experiences .product-card-filters button[aria-pressed="true"]{background:#a5cec4;color:#1d3028;border-color:#a5cec4}
@container(max-width:1007px){#direct-experiences .direct-card{flex-basis:calc((100% - 24px)/2)}}
@container(max-width:663px){#direct-experiences .direct-card{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){#direct-experiences .pill{transition:none!important;transform:none!important}}

/* Photographic previews fill the frame; product interfaces remain uncropped. */
#direct-experiences .direct-card-grid[data-world="spaces"] .direct-card-media,
#direct-experiences .direct-card-grid[data-world="learning"] .direct-card-media{background:#26332c}
#direct-experiences .direct-card-grid[data-world="spaces"] .direct-card-media>img,
#direct-experiences .direct-card-grid[data-world="learning"] .direct-card-media>img{object-fit:cover;object-position:center}

/* The supplied product artwork is 3:2: show it edge to edge. */
#direct-experiences .direct-card:is([data-project="sofa"],[data-project="modular"],[data-project="barrel"],[data-project="footwear"],[data-project="camper"]) .direct-card-media{aspect-ratio:3/2;background:#26332c}
#direct-experiences .direct-card:is([data-project="sofa"],[data-project="modular"],[data-project="barrel"],[data-project="footwear"],[data-project="camper"]) .direct-card-media>img{width:100%;height:100%;object-fit:contain}

/* Compact, one-at-a-time product previews with hero-style navigation. */
.product-carousel{max-width:560px;margin:0 auto}
.product-carousel-viewport{overflow:hidden;border-radius:22px;touch-action:pan-y}
#direct-experiences .product-carousel-track{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;container-type:normal;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
#direct-experiences .product-carousel-track .direct-card{flex:0 0 100%;width:100%;min-width:0}
.product-carousel-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:18px;color:#c5d0c9;font-size:14px}
.product-carousel-controls button{width:52px;height:52px;border:1px solid #8ca79a;border-radius:50%;background:#293c32;color:#e7f5ee;font:inherit;font-size:28px;cursor:pointer;transition:background .2s}
.product-carousel-controls button:hover{background:#3c5547}
.product-carousel-controls button:focus-visible{outline:3px solid #a5cec4;outline-offset:4px}
@media(prefers-reduced-motion:reduce){#direct-experiences .product-carousel-track{transition:none}}

/* Continue the hero background through the demo area. */
html body.visual-home .hero{background:#222e28!important}
html body.visual-home .hero .world-context{display:none!important}
html body.visual-home #playground#playground{margin-top:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#direct-experiences{border-radius:0;padding-top:24px}
.product-carousel{position:relative}
.product-carousel-controls .carousel-prev,.product-carousel-controls .carousel-next{position:absolute;top:var(--arrow-top,180px);transform:translateY(-50%);z-index:3;background:#24372ee8;backdrop-filter:blur(8px)}
.product-carousel-controls .carousel-prev{left:12px}
.product-carousel-controls .carousel-next{right:12px}
.product-carousel-controls{margin-top:12px;gap:12px}
.product-carousel-controls .carousel-pause{width:32px;height:32px;font-size:15px}
#direct-experiences .product-carousel-track{transition-duration:.8s}
@media(prefers-reduced-motion:reduce){#direct-experiences .product-carousel-track{transition:none}}

/* Pair product cards like Spaces and Learning; slide only longer collections. */
#direct-experiences .direct-card-grid[data-world="products"]:not(.product-carousel-track) .direct-card{flex-basis:calc((100% - 24px)/2)}
.product-carousel{max-width:1240px;container-type:inline-size}
#direct-experiences .product-carousel-track{gap:24px}
#direct-experiences .product-carousel-track .direct-card{flex:0 0 calc((100% - 24px)/2);width:calc((100% - 24px)/2)}
@container(max-width:663px){
 #direct-experiences .product-carousel-track .direct-card,
 #direct-experiences .direct-card-grid[data-world="products"]:not(.product-carousel-track) .direct-card{flex-basis:100%;width:100%}
}

/* Reserve navigation gutters so arrows never cover preview cards. */
.product-carousel{box-sizing:border-box;max-width:1384px;padding-inline:72px}
.product-carousel-controls .carousel-prev{left:4px}
.product-carousel-controls .carousel-next{right:4px}
@media(max-width:700px){
 .product-carousel{padding-inline:0}
 .product-carousel-controls .carousel-prev,
 .product-carousel-controls .carousel-next{position:static;transform:none}
}

/* Close the page with the same forest and mint palette as the demos. */
html body.visual-home #contact{
 --ink:#1d3028;--paper:#f5f7f3;--accent:#a5cec4;
 background:#222e28;color:#f5f7f3
}
html body.visual-home #contact h2 em{color:#a5cec4}
html body.visual-home #contact :is(.eyebrow,.contact-bottom p,.enquiry-note,address){color:#c5d0c9}
html body.visual-home #contact .primary{background:#a5cec4;color:#1d3028;border-color:#a5cec4}
html body.visual-home #contact .primary:hover{background:#c0e1d8;border-color:#c0e1d8}
html body.visual-home #contact .project-enquiry{background:#26332c;border-color:#4b5d52}
html body.visual-home #contact :is(input,select,textarea){background:#f5f7f3;color:#1d3028;border-color:#8ca79a}
html body.visual-home #contact :is(input,textarea)::placeholder{color:#596b60;opacity:1}
html body.visual-home #contact :is(input,select,textarea,button,a):focus-visible{outline:3px solid #a5cec4;outline-offset:4px}
html body.visual-home #contact .email{color:#a5cec4}
html body.visual-home>footer{background:#222e28;color:#c5d0c9;border-top:1px solid #4b5d52}
html body.visual-home>footer a{color:#f5f7f3}
html body.visual-home>footer a:hover{color:#a5cec4}

/* Compact service context, with natural document flow for complete cards. */
#direct-experiences .direct-section-intro{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:20px 36px;max-width:1240px;margin:0 auto 28px;align-items:start}
#direct-experiences .direct-section-intro .direct-section-heading{margin:0;font-size:clamp(24px,2.5vw,34px)}
#direct-experiences .direct-section-explanation p{margin:0;color:#c5d0c9;font-size:16px;line-height:1.55;max-width:78ch}
#direct-experiences .direct-section-explanation .direct-section-service{margin-top:10px;color:#a5cec4;font-size:14px}
#direct-experiences{height:auto;max-height:none;overflow:visible}
@media(max-width:700px){
 #direct-experiences .direct-section-intro{grid-template-columns:1fr;gap:12px;margin-bottom:22px}
}

/* Paint dark sections through the desktop page gutters. */
html body.visual-home :is(.hero,#contact),
html body.visual-home>footer{
 box-shadow:0 0 0 100vmax #222e28;
 clip-path:inset(0 -100vmax)
}
/* Keep slide geometry aligned with the visible viewport. */
#direct-experiences .product-carousel-track{
 width:100%;max-width:none;margin:0;padding:0;justify-content:flex-start
}

/* Fill the Spaces selector thumbnail without letterboxing. */
html body.visual-home .world-selector button:is([data-world="spaces"],[data-world="learning"])>img{
 object-fit:cover!important;object-position:center!important;background:#222e28
}

/* Show every example when it fits, without redundant slider controls. */
.product-carousel.all-visible{max-width:1240px;padding-inline:0}
.product-carousel-controls[hidden]{display:none!important}
#direct-experiences .direct-section-intro{margin-bottom:20px}
#direct-experiences .product-card-filters{margin-bottom:20px;padding-bottom:16px}


/* Shared desktop geometry: stable product slots, balanced service rows. */
html body.visual-home #playground#playground:not(.expanded){
 min-height:0!important;height:auto!important;max-height:none!important;
}
#direct-experiences{padding-bottom:32px;min-height:0!important}
#direct-experiences :is(.direct-section-intro,.product-card-filters,.direct-card-grid){
 max-width:1480px;
}
#direct-experiences .product-carousel{max-width:1480px}
#direct-experiences .product-carousel-track{max-width:none}
#direct-experiences .direct-card-grid[data-world="learning"] .direct-card,
#direct-experiences .direct-card-grid[data-world="spaces"] .direct-card{
 flex-basis:calc((100% - 24px)/2);
}
#direct-experiences .direct-card-grid[data-world="products"]:not(.product-carousel-track) .direct-card{
 flex-basis:calc((100% - 48px)/3);
}
@container(min-width:1320px){
 #direct-experiences .direct-card-grid[data-world="spaces"] .direct-card{
  flex-basis:calc((100% - 72px)/4);
 }
}
@container(max-width:1199px){
 #direct-experiences .direct-card-grid[data-world="products"]:not(.product-carousel-track) .direct-card{
  flex-basis:calc((100% - 24px)/2);
 }
}
@container(max-width:663px){
 #direct-experiences .direct-card-grid[data-world="learning"] .direct-card,
 #direct-experiences .direct-card-grid[data-world="spaces"] .direct-card,
 #direct-experiences .direct-card-grid[data-world="products"]:not(.product-carousel-track) .direct-card{
  flex-basis:100%;
 }
}
@media(min-width:1051px){
 html body.visual-home .landing-overview>.world-choice{
  width:100%;max-width:1240px;margin-inline:auto!important;padding-block:28px 36px;
 }
 html body.visual-home .landing-overview .world-selector button{
  grid-template-columns:120px minmax(0,1fr);min-height:152px!important;
  padding:14px!important;gap:16px;
 }
 html body.visual-home .landing-overview .world-selector button>img,
 html body.visual-home .landing-overview .world-selector .product-detail-crop{
  width:120px;height:120px;min-height:0;
 }
 html body.visual-home .landing-overview .world-selector strong{font-size:25px!important}
 html body.visual-home .landing-overview .world-card-link{margin-top:12px;font-size:14px!important}
}

/* Align the service selector and gallery to one content boundary. */
@media(min-width:1051px){
 html body.visual-home .landing-overview>.world-choice{
  max-width:1480px;width:calc(100% - 56px);margin-inline:auto!important;
 }
}
#direct-experiences .product-card-filters{
 width:100%;justify-content:flex-start;clear:both;
}
html body.visual-home .landing-overview .world-selector button[aria-pressed="false"]{
 background:#dde5df!important;border-color:#c7d3ca!important;
}

/* Keep the framed desktop view dark to its lower edge, without clipping content. */
html body.visual-home #direct-experiences{
 min-height:var(--frame-min-height,0px)!important;
}

/* A single, explicit selection treatment for all service cards. */
html body.visual-home .landing-overview .world-selector button[aria-pressed="false"]{
 background:#26332c!important;border:1px solid #52665b!important;color:#f5f7f3!important;
}
html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{
 background:#a5cec4!important;border:1px solid #a5cec4!important;color:#1d3028!important;
}
html body.visual-home .landing-overview .world-selector button strong,
html body.visual-home .landing-overview .world-selector button small{color:inherit!important}
html body.visual-home .landing-overview .world-selector button[aria-pressed="false"] .world-card-link{color:#a5cec4!important}
html body.visual-home .landing-overview .world-selector button[aria-pressed="true"] .world-card-link{color:#1d3028!important}
.world-selected-label{display:block;margin-top:7px;font-size:12px;font-weight:600;line-height:1.25;color:#1d3028}
.world-selector button[aria-pressed="false"] .world-selected-label{visibility:hidden}
html body.visual-home .landing-overview .world-selector button{cursor:pointer;transition:background .25s,border-color .25s}
html body.visual-home .landing-overview .world-selector button:focus-visible{outline:3px solid #e1f3ec!important;outline-offset:4px}

/* Keep carousel navigation at the sides without a counter or playback row. */
.product-carousel-controls>span,
.product-carousel-controls .carousel-pause{display:none!important}
@media(min-width:701px){
 .product-carousel-controls{margin:0;height:0}
}