/* A material wall, a room selector and tactile colour samples. */
.tiles-story { --tile-ink: #352f2a; --tile-clay: #a9472f; background: #eedfd0; color: var(--tile-ink); scroll-margin-top: 76px; overflow: clip; }
.tile-mosaic-hero { position: relative; isolation: isolate; min-height: 640px; display: flex; flex-direction: column; justify-content: center; color: #fff6e9; background: #194741; }
.tile-mosaic-field { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.tile-mosaic-field img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.tile-mosaic-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b2927f0 0%, #102c26bd 34%, #102c2640 57%, transparent 76%); }
.tile-hero-inner { padding-block: 80px 115px; }
.tile-hero-inner .pipe-intro-meta { margin-bottom: 30px; }
.tile-hero-inner .product-number { background: #ebbb79; color: #253f35; }
.tile-hero-inner .product-type { color: #ffe0b7 !important; }
.tiles-story .tile-hero-inner h3 { margin: 0; max-width: 740px; font: 650 clamp(3.6rem, 6.7vw, 6.6rem)/1.06 var(--font-display); letter-spacing: -.025em; }
.tile-hero-inner h3 em { color: #ffcf91; font-style: normal; }
.tile-hero-inner > p { max-width: 430px; margin: 25px 0 30px; color: #fff0df; font-size: 1rem; line-height: 1.85; }
.tile-explore-link { display: inline-flex; align-items: center; gap: 30px; border-bottom: 1px solid #ffe0b790; padding: 10px 0; color: #fff5e8; font-size: .9rem; font-weight: 600; }
.tile-explore-link span { font-size: 1.3rem; transition: transform .2s ease; }
.tile-explore-link:hover span { transform: translateY(4px); }
.tile-finish-ribbon { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-evenly; align-items: center; gap: 24px; padding: 19px 24px; color: #ffebd3; background: #8e3f2eef; font: 550 .72rem/1 var(--font-body); letter-spacing: .22em; overflow: hidden; }
.tile-finish-ribbon i { font-size: 1.3rem; font-style: normal; color: #f4bb75; }
.tile-studio { padding-block: 54px 62px; }
.tile-studio-heading, .tile-material-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.tile-studio-heading { scroll-margin-top: 98px; }
.tile-studio h4 { margin: 0; font: 650 clamp(1.8rem, 2.7vw, 2.8rem)/1.2 var(--font-display); }
.tile-studio-heading p, .tile-material-heading p { margin: 0; color: #796557; font-size: .79rem; }
.tile-space-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 28px 0 0; }
.tile-space-tabs button { display: flex; align-items: center; gap: 14px; min-height: 74px; border: 0; padding: 16px 20px; background: #dfcebd; color: #473c33; text-align: left; font-size: .87rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.tile-space-tabs button > span { color: #8d7967; font-size: .66rem; font-weight: 500; }
.tile-space-tabs button[aria-selected="true"] { background: #204b46; color: #fff4e4; }
.tile-space-tabs button[aria-selected="true"] > span { color: #bdcfc7; }
.tile-space-tabs button:hover { transform: translateY(-3px); }
.tile-space-tabs button:focus-visible { outline-color: #993f2a; outline-offset: -4px; }
.tile-space-panel { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; padding: 38px 44px; min-height: 286px; background: #204b46; color: #fff5e6; overflow: hidden; }
.tile-space-panel[hidden] { display: none; }
.tile-space-panel[data-tile-panel="floor"] { background: #783e30; }
.tile-space-panel[data-tile-panel="wet"] { background: #34576b; }
.tile-space-panel[data-tile-panel="outdoor"] { background: #454a3d; }
.tile-panel-kicker { margin: 0 0 14px; font-size: .63rem; letter-spacing: .19em; opacity: .8; }
.tile-space-copy h5 { margin: 0; font: 600 clamp(2rem, 3.2vw, 3.2rem)/1.18 var(--font-display); }
.tile-space-copy > p:last-child { max-width: 510px; margin: 15px 0 0; font-size: .9rem; line-height: 1.8; color: #f4e9db; }
.tile-sample-composition { position: relative; height: 200px; min-width: 0; perspective: 900px; }
.tile-sample { position: absolute; width: 46%; aspect-ratio: 1; max-height: 190px; top: 10%; background-image: url('assets/tiles/material-mosaic.webp'); background-size: 650%; border: 1px solid #ffffff35; box-shadow: 5px 14px 18px #0c1a2240; transition: transform .4s cubic-bezier(.2,.65,.2,1); }
.tile-sample:nth-child(1) { left: 0; transform: rotate(-12deg); z-index: 1; }
.tile-sample:nth-child(2) { left: 27%; top: 0; transform: rotate(5deg); z-index: 3; }
.tile-sample:nth-child(3) { right: 0; transform: rotate(16deg); z-index: 2; }
.tile-space-panel:hover .tile-sample:nth-child(1) { transform: translate(-8px, -4px) rotate(-16deg); }
.tile-space-panel:hover .tile-sample:nth-child(2) { transform: translateY(-10px) rotate(0); }
.tile-space-panel:hover .tile-sample:nth-child(3) { transform: translate(8px, -4px) rotate(20deg); }
.sample-teal { background-position: 0% 0%; }
.sample-pattern { background-size: 760% 520%; background-position: 39.2% 0%; }
.sample-terra { background-position: 0% 31%; }
.sample-marble { background-position: 59% 52%; }
.sample-wood { background-size: 768% 512%; background-position: 39.3% 63.3%; }
.sample-stone { background-size: 700% 540%; background-position: 55.9% 0%; }
.sample-terrazzo { background-size: 768% 512%; background-position: 41.2% 38%; }
.sample-blue { background-size: 960% 640%; background-position: 60.8% 23.4%; }
.sample-charcoal { background-size: 1024% 683%; background-position: 0% 98.5%; }
.tile-sample.neutral-ivory, .tile-sample.neutral-marble { background-image: url('assets/tiles/minimal-finishes.webp'); background-size: 300% 100%; }
.tile-sample.neutral-ivory { background-position: left center; }
.tile-sample.neutral-marble { background-position: right center; }
.tile-sample.neutral-charcoal, .tile-sample.neutral-graphite { background-image: url('assets/tiles/dark-minimal-finishes.webp'); background-size: 200% 100%; }
.tile-sample.neutral-charcoal { background-position: left center; }
.tile-sample.neutral-graphite { background-position: right center; }
.tile-material-heading { margin: 46px 0 23px; }
.tile-materials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tile-material { --material-fg: #fff4e6; color: var(--material-fg); box-shadow: 0 3px 0 #00000019; }
.material-ceramic { background: #aa4d37; }
.material-double { background: #dab36e; --material-fg: #473421; }
.material-gvt { background: #b7ced0; --material-fg: #203f44; }
.material-heavy { background: #3d5147; }
.tile-material summary { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 162px; padding: 20px 36px 22px 20px; cursor: pointer; list-style: none; font: 600 1.5rem/1.3 var(--font-display); }
.tile-material summary::-webkit-details-marker { display: none; }
.tile-material-index { font: 500 .63rem/1 var(--font-body); letter-spacing: .13em; opacity: .75; }
.tile-material-toggle { position: absolute; bottom: 24px; right: 16px; font: 400 1.35rem/1 var(--font-body); transition: transform .2s ease; }
.tile-material[open] .tile-material-toggle { transform: rotate(45deg); }
.tile-material > p { padding: 0 20px 22px; margin: 0; font-size: .79rem; line-height: 1.8; }
.tile-material summary:hover { background: #ffffff0b; }
.tile-material summary:focus-visible { outline-color: currentColor; outline-offset: -4px; }
.tile-studio-visit { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding-top: 32px; border-top: 1px solid #93715255; }
.tile-studio-visit h4 { font-size: 1.8rem; }
.tile-studio-visit p { margin: 8px 0 0; color: #796557; font-size: .85rem; }
.tile-studio-visit > a { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 16px 22px; color: #fff4e7; background: #8e3f2e; font-size: .9rem; font-weight: 600; }
.tile-studio-visit > a:hover { background: #713023; }
.tile-studio-visit > a span { font-size: 1.3rem; }
/* Entrance and selection motion run only in view and stop after the transition. */
.tile-mosaic-hero.tile-in-view .tile-mosaic-field img { animation: tile-wall-arrive 1.8s cubic-bezier(.2,.65,.2,1) both; }
.tile-mosaic-hero.tile-in-view .tile-hero-inner { animation: tile-copy-arrive .7s .08s both; }
.tile-space-panel.tile-panel-enter .tile-space-copy { animation: tile-copy-arrive .35s both; }
.tile-space-panel.tile-panel-enter .tile-sample-composition { animation: tile-samples-arrive .55s both; }
@keyframes tile-wall-arrive { from { transform: scale(1.08) translateX(-1%); } to { transform: scale(1) translateX(0); } }
@keyframes tile-copy-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tile-samples-arrive { from { opacity: .4; transform: translateX(25px) rotate(4deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
html:lang(en) .tiles-story .tile-hero-inner h3 { font-size: clamp(3rem, 5.7vw, 5.6rem); letter-spacing: -.05em; line-height: 1.06; }
html:lang(en) .tile-space-copy h5 { font-size: clamp(1.7rem, 2.8vw, 2.75rem); letter-spacing: -.03em; }
html:lang(en) .tile-material summary { font-size: 1.15rem; }
html:lang(en) .tile-studio h4 { font-size: clamp(1.4rem, 2.2vw, 2.15rem); letter-spacing: -.03em; }
@media (max-width: 1000px) {
  .tile-space-tabs button { padding-inline: 14px; gap: 9px; font-size: .8rem; }
  .tile-space-panel { gap: 28px; padding: 32px; }
  .tile-sample-composition { height: 160px; }
  .tile-material summary { min-height: 154px; font-size: 1.35rem; }
}
@media (max-width: 760px) {
  .tile-mosaic-hero { min-height: 660px; justify-content: flex-end; }
  .tile-mosaic-field img { object-position: 62% center; }
  .tile-mosaic-hero::before { background: linear-gradient(0deg, #0b2927f5 6%, #102c26e0 40%, #102c2640 78%, transparent); }
  .tile-hero-inner { padding-block: 220px 106px; }
  .tile-hero-inner .pipe-intro-meta { margin-bottom: 24px; }
  .tiles-story .tile-hero-inner h3 { font-size: clamp(3rem, 10.5vw, 4.3rem); }
  .tile-hero-inner > p { font-size: .9rem; line-height: 1.75; max-width: 380px; margin: 20px 0 18px; }
  .tile-explore-link { font-size: .84rem; }
  .tile-finish-ribbon { padding: 17px 18px; gap: 18px; justify-content: flex-start; font-size: .59rem; letter-spacing: .13em; }
  .tile-finish-ribbon span, .tile-finish-ribbon i { flex: none; }
  .tile-studio { padding-block: 34px 42px; }
  .tile-studio-heading, .tile-material-heading { flex-direction: column; align-items: flex-start; gap: 9px; }
  .tile-space-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 22px; }
  .tile-space-tabs button { min-height: 64px; padding: 13px 14px; gap: 12px; font-size: .79rem; }
  .tile-space-panel { grid-template-columns: 1fr; padding: 27px 24px 24px; gap: 28px; min-height: 420px; }
  .tile-space-copy h5 { font-size: 2.25rem; }
  .tile-space-copy > p:last-child { font-size: .84rem; }
  .tile-sample-composition { width: min(300px, 90%); height: 150px; margin: 0 auto; }
  .tile-material-heading { margin: 32px 0 20px; }
  .tile-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-material summary { min-height: 146px; font-size: 1.3rem; padding-left: 16px; }
  .tile-material > p { padding-inline: 16px; font-size: .77rem; }
  .tile-studio-visit { flex-direction: column; align-items: stretch; margin-top: 32px; padding-top: 26px; gap: 23px; }
  .tile-studio-visit h4 { font-size: 1.8rem; }
  .tile-studio-visit p { line-height: 1.7; }
  html:lang(en) .tiles-story .tile-hero-inner h3 { font-size: clamp(2.6rem, 8.7vw, 3.8rem); }
  html:lang(en) .tile-material summary { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tiles-story *, .tiles-story *::before { animation: none !important; transition: none !important; }
  .tile-space-tabs button:hover, .tile-space-panel:hover .tile-sample { transform: none; }
}