*{box-sizing:border-box}
html,body{margin:0!important;padding:0;width:100%;min-height:100%;overflow-x:clip;overscroll-behavior-x:none;background:#fff}
html{scroll-behavior:smooth}
body.hc-page{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#1d1d1f;font-size:14px;-webkit-font-smoothing:antialiased}
.hc-page button{font:inherit;cursor:pointer;color:inherit;border:0}
.hc-page button,.hc-page button:hover,.hc-page button:focus{box-shadow:none!important}
.hc-page button:focus-visible,.hc-page a:focus-visible{outline:2px solid #0071e3;outline-offset:5px}
.site-home{width:100%;background:#fff}
#ast-scroll-top,.ast-scroll-to-top,.ast-scroll-top-icon{display:none!important}
.resin-stage{--ink:#1d1d1f;position:relative;width:100%;height:100svh;min-height:640px;overflow:hidden;background:#fff;color:var(--ink);isolation:isolate;touch-action:pan-y}
.resin-stage>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:pan-y;mix-blend-mode:screen;mask-image:url("/assets/wordmark-mask.svg?v=894d6ca43c32");mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;-webkit-mask-image:url("/assets/wordmark-mask.svg?v=894d6ca43c32");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:100% 100%}
.site-nav{position:absolute;z-index:6;left:6.1vw;right:6.1vw;top:27px;height:40px;display:flex;align-items:center;justify-content:space-between}
.nav-brand,.site-footer>a:first-child{font-size:12px;font-weight:650;letter-spacing:-.025em;text-decoration:none;color:inherit}
.nav-brand span{font-size:8px;vertical-align:top;margin-left:2px}
.site-nav nav{display:flex;align-items:center;gap:34px}
.site-nav nav a{font-size:12px;color:#424245;text-decoration:none;transition:color .2s}
.site-nav nav a:hover,.site-footer a:hover{color:#0071e3}
.site-nav nav .nav-contact{padding:9px 15px;background:#1d1d1f;color:#fff;border-radius:20px}
.site-nav nav .nav-contact:hover{background:#333336;color:#fff}
.nav-contact span{margin-left:5px;font-size:14px}
.identity{position:absolute;z-index:2;left:50%;top:47%;transform:translate(-50%,-50%);width:100%;text-align:center;pointer-events:none}
.hero-eyebrow,.section-kicker{margin:0 0 22px;font-size:10px;letter-spacing:.13em;font-weight:600;color:#86868b}
.brand-wordmark{margin:0 auto;color:transparent;background:linear-gradient(112deg,#161a22 0%,#26314a 14%,#bc8742 27%,#f1d695 33%,#858b99 40%,#172139 51%,#212b43 64%,#d3b874 74%,#28324c 85%,#7f422f 98%);background-size:220% 100%;background-position:0 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:clamp(42px,11.2vw,176px);font-weight:850;line-height:.96;letter-spacing:-.095em;user-select:none;animation:resin-wordmark-flow 16s ease-in-out infinite alternate}
@keyframes resin-wordmark-flow{from{background-position:0 50%}to{background-position:100% 50%}}
.hero-copy{margin:29px 20px 0;font-size:clamp(17px,2vw,23px);letter-spacing:-.025em;color:#6e6e73}
.hero-link,.text-link{display:inline-flex;gap:10px;align-items:center;margin-top:18px;color:#06c;text-decoration:none;font-size:14px}
.hero-link:hover,.text-link:hover,.contact-link:hover{color:#0077ed;text-decoration:underline}
.pigment{position:absolute;z-index:5;bottom:54px;display:flex;align-items:center;gap:13px;user-select:none;-webkit-user-select:none}
.pigment-left{left:6.1vw}.pigment-right{right:6.1vw}
.control-label{font-size:8px;letter-spacing:.11em;color:#86868b;white-space:nowrap}
.swatches{display:flex;gap:9px;align-items:center}
.swatch{position:relative;flex:0 0 36px;width:36px;height:36px;padding:0!important;background:transparent!important;border-radius:50%!important;touch-action:none;-webkit-tap-highlight-color:transparent;outline-offset:3px!important}
.swatch:before{content:'';position:absolute;inset:8px;background:var(--swatch);border-radius:50%;box-shadow:inset 0 0 0 1px #0002;transition:transform .2s,box-shadow .2s}
.swatch[data-metallic="1"]:before{background:linear-gradient(135deg,#ffffff20 10%,#ffffffbd 36%,#ffffff15 48%,#0003 70%,#fff9 92%),var(--swatch)}
.swatch:after{content:'';position:absolute;inset:3px;border:1px solid transparent;border-radius:50%;transition:border-color .2s,transform .2s}
.swatch[data-selected=true]:after{border-color:#86868b}
.swatch[aria-pressed=true]:before{transform:scale(1.18);box-shadow:0 0 0 4px #1111}
.swatch[aria-pressed=true]:after{border-color:var(--swatch);transform:scale(1.08)}
@media(hover:hover){.swatch:hover:before{transform:scale(1.12)}}
.hero-actions{position:absolute;z-index:6;left:50%;bottom:53px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;white-space:nowrap}
.quiet-button,.mix-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent!important;padding:7px 0!important;font-size:11px!important;line-height:1.4;color:#6e6e73!important}
.quiet-button svg,.mix-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.quiet-button{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
.has-pigment .quiet-button{opacity:1;visibility:visible;pointer-events:auto}
.mix-button{color:#06c!important}
.mix-button:hover{color:#0077ed!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.intro-section{padding:150px 24px 123px;text-align:center;background:#f5f5f7}
.section-kicker{margin-bottom:18px}
.intro-section h2,.showcase-heading h2,.approach-section h2,.contact-section h2{margin:0;font-size:clamp(42px,7vw,92px);font-weight:650;line-height:.99;letter-spacing:-.075em}
.section-copy{max-width:570px;margin:24px auto 0;color:#6e6e73;font-size:18px;line-height:1.5;letter-spacing:-.02em}
.text-link{margin-top:22px}
.showcase-heading .section-kicker{margin-bottom:15px}
.showcase-heading h2{max-width:1000px;margin-inline:auto;font-size:clamp(32px,3.7vw,49px);line-height:1.03}
.style-image{height:clamp(125px,15vh,165px);background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.style-marble .style-image{background-image:url("/assets/textures/marble-plan.webp?v=076b89b2b7e3")}
.style-flake .style-image{background-image:url("/assets/textures/flake-plan.webp?v=d6e5a9620a7b")}
.style-satin .style-image{background-image:url("/assets/textures/satin-plan.webp?v=b2aa64ba645b")}
.style-metallic .style-image{background-image:url("/assets/textures/metallic-plan.webp?v=ce1839bb1f15")}
.style-pearl .style-image{background-image:url("/assets/textures/pearl-plan.webp?v=fccfcd351183")}
.style-terrazzo .style-image{background-image:url("/assets/textures/terrazzo-plan.webp?v=64e8bcf44efe")}
.style-stone .style-image{background-image:url("/assets/textures/stone-plan.webp?v=77cb6492a2f4")}
.style-emerald .style-image{background-image:url("/assets/textures/emerald-plan.webp?v=fa2f49f2b63f")}
.style-graphite .style-image{background-image:url("/assets/textures/graphite-plan.webp?v=23c879ece31a")}
.flooring-grid{padding:0 5vw 135px;display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#fff}
.floor-card{overflow:hidden;border-radius:24px;background:#f5f5f7}
.floor-visual{height:min(58vw,620px);background-image:url("/assets/floor-styles-contact-sheet.png?v=4ba84728b01e");background-size:200% 200%;background-repeat:no-repeat}
.floor-visual-home{background-position:left bottom}
.floor-visual-work{background-position:right top}
.floor-card-copy{padding:28px 30px 34px}
.floor-card-copy h3{font-size:29px}
.floor-card-copy>span{font-size:15px;margin-top:8px}
.approach-section{padding:145px max(8vw,24px) 155px;background:#f5f5f7;text-align:center}
.approach-section h2{font-size:clamp(40px,6.3vw,78px)}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:1050px;margin:78px auto 0;text-align:left}
.process-steps article{border-top:1px solid #d2d2d7;padding-top:17px}
.process-steps article>span{font-size:11px;color:#86868b}
.process-steps h3{margin:35px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.process-steps p{margin:0;max-width:260px;color:#6e6e73;font-size:14px;line-height:1.55}
.contact-section{padding:145px 24px 150px;text-align:center;background:#fff}
.contact-section h2{font-size:clamp(46px,7vw,88px)}
.contact-section>p:not(.section-kicker){margin:22px auto 0;max-width:520px;color:#6e6e73;font-size:18px;line-height:1.5}
.contact-link{display:inline-flex;align-items:center;gap:8px;margin-top:25px;color:#06c;font-size:15px;text-decoration:none}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 6vw;border-top:1px solid #d2d2d7;color:#86868b;font-size:11px}
.site-footer a{color:inherit;text-decoration:none}
@media(max-width:850px){
  .style-image{height:22vh;min-height:155px}
  .floor-card-copy{padding:24px}
}
@media(max-width:620px){
  .resin-stage{min-height:680px}
  .resin-stage>canvas{mask-image:url("/assets/wordmark-mask-mobile.svg?v=c5b586c3400f");-webkit-mask-image:url("/assets/wordmark-mask-mobile.svg?v=c5b586c3400f")}
  .site-nav{left:22px;right:22px;top:19px}
  .site-nav nav{gap:16px}
  .site-nav nav a{font-size:10px}
  .site-nav nav .nav-contact{padding:8px 10px}
  .nav-brand{font-size:10px}
  .identity{top:45%}
  .hero-eyebrow{font-size:8px;margin-bottom:15px}
  .brand-wordmark{font-size:clamp(34px,12.2vw,52px);letter-spacing:-.09em}
  .hero-copy{max-width:300px;margin:21px auto 0;padding:0 15px;font-size:17px;line-height:1.35}
  .hero-link{font-size:12px;margin-top:14px}
  .pigment{bottom:91px;gap:7px}
  .pigment-left{left:15px}.pigment-right{right:15px}
  .control-label{display:none}
  .swatches{gap:3px}
  .swatch{width:32px;height:32px;flex-basis:32px}
  .swatch:before{inset:7px}
  .hero-actions{bottom:35px;gap:13px}
  .quiet-button,.mix-button{font-size:10px!important}
  .intro-section{padding:98px 22px 88px}
  .intro-section h2{font-size:clamp(41px,11vw,62px)}
  .section-copy{font-size:16px}
  .showcase-heading h2{font-size:clamp(34px,9vw,48px)}
  .style-image{height:28vw;min-height:116px;max-height:170px}
  .flooring-grid{grid-template-columns:1fr;padding:0 18px 90px;gap:13px}
  .floor-visual{height:76vw;max-height:430px}
  .floor-card-copy{padding:22px}
  .floor-card-copy h3{font-size:25px}
  .approach-section{padding:100px 24px}
  .approach-section h2{font-size:clamp(40px,10vw,58px)}
  .process-steps{grid-template-columns:1fr;gap:23px;margin:48px auto 0}
  .process-steps h3{margin-top:20px}
  .contact-section{padding:100px 24px 105px}
  .contact-section h2{font-size:clamp(46px,12vw,68px)}
  .contact-section>p:not(.section-kicker){font-size:16px}
  .site-footer{padding:19px 18px;font-size:9px;gap:10px}
}
@media(max-height:760px) and (min-width:621px){
  .showcase-heading h2{font-size:clamp(34px,4.5vw,54px)}
  .style-image{height:min(17vh,145px)}
}
@media(max-width:370px){
  .site-nav{left:15px;right:15px}
  .site-nav nav{gap:10px}
  .site-nav nav a{font-size:9px}
  .site-nav nav .nav-contact{padding:7px 8px}
  .nav-brand{font-size:9px}
  .pigment-left{left:9px}.pigment-right{right:9px}
  .swatch{width:29px;height:29px;flex-basis:29px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand-wordmark{animation:none;background-position:50% 50%}.swatch:before,.swatch:after,.site-nav nav a{transition:none!important}}


/* The wordmark is a normal first section. */
.hero-section{--hero-paper:#fafaf8;--hero-line:#535550;height:100svh;min-height:440px;background:var(--hero-paper)}
.hero-scene{position:relative;width:100%;height:100%;overflow:hidden;background:var(--hero-paper);touch-action:pan-y}
/* The fluid stays in the viewport, clipped to the scrolling hero's visible area. */
.resin-surface{--wordmark-mask:url("/assets/wordmark-mask.svg?v=894d6ca43c32");position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:normal;-webkit-clip-path:inset(var(--resin-clip,0px 0px 100% 0px));clip-path:inset(var(--resin-clip,0px 0px 100% 0px))}
.resin-surface>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#resin-canvas{-webkit-mask-image:var(--wordmark-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:var(--wordmark-position,0px 0px);-webkit-mask-size:var(--wordmark-size,100% 100%);mask-image:var(--wordmark-mask);mask-mode:alpha;mask-repeat:no-repeat;mask-position:var(--wordmark-position,0px 0px);mask-size:var(--wordmark-size,100% 100%)}
.wordmark-outline{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.wordmark-outline-art{display:block;width:100%;height:100%}
.wordmark-outline-mobile{display:none}
.hero-scene .site-nav{top:25px;left:5vw;right:5vw}
.hero-scene .nav-brand{color:var(--hero-line)}
.hero-scene .nav-contact{padding:8px 14px;border:1px solid #53555038;border-radius:22px;background:transparent;color:var(--hero-line);font-size:12px;text-decoration:none;transition:border-color .2s,color .2s}
.hero-scene .nav-contact span{margin-left:7px}
.hero-scene .nav-contact:hover{border-color:#53555080;color:#242622}
.hero-scene .identity{top:50%;z-index:2;transform:translate(-50%,-50%)}
.hero-scene .brand-wordmark{font-size:clamp(52px,12vw,190px);letter-spacing:-.095em;font-family:Arial,Helvetica,sans-serif;font-weight:900;color:transparent!important;background:none!important;-webkit-text-fill-color:transparent;animation:none}
.intro-section{padding-top:120px;background:#fff}
/* A warm paper field and spare charcoal contours keep the film quiet behind the resin. */
.installer-illustration{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;pointer-events:none}
.installer-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 32% 71%,#d7b87908 0,transparent 62%),radial-gradient(ellipse at 72% 42%,#b8ccdc08 0,transparent 60%),var(--hero-paper)}
.installer-poster,.installer-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08);pointer-events:none}
.installer-poster{opacity:.36}
.installer-film{opacity:0}
.installer-illustration.is-starting-video .installer-film,.installer-illustration.has-video-frame .installer-film{opacity:.36}
.installer-illustration.is-starting-video .installer-poster,.installer-illustration.has-video-frame .installer-poster{visibility:hidden}
.hc-page .installer-play{position:absolute;z-index:1;right:5vw;bottom:20px;display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;margin:0;background:transparent;font-size:12px;line-height:1.4;color:#6e6e73;pointer-events:auto}
.hc-page .installer-play:hover{color:#1d1d1f}
.installer-play[hidden]{display:none!important}

/* One camera move: a close-up of the centre tile pulls back to the whole grid. */
.finish-section{background:#fff}
.showcase-heading{padding:112px 24px 90px;text-align:center}
.showcase-heading h2{font-size:clamp(42px,6.6vw,88px)}
.finish-scroll{position:relative}
.finish-viewport{height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;background:#fff;isolation:isolate}
.finish-grid{width:min(90vw,1320px);height:min(76svh,850px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);transform-origin:center}
.finish-tile{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:12px;background:#e8e8ed;isolation:isolate}
.finish-tile .style-image{position:absolute;inset:0;height:100%;min-height:0;max-height:none;transition:none}
.finish-tile::after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0006);pointer-events:none;opacity:var(--finish-labels,1)}
.finish-tile h3{position:absolute;z-index:1;left:20px;bottom:16px;margin:0;color:#fff;font-size:clamp(14px,1.5vw,22px);font-weight:500;letter-spacing:-.025em;opacity:var(--finish-labels,1)}
.finish-scroll.is-animated{height:310svh}
.finish-scroll.is-animated .finish-viewport{position:sticky;top:0}
.finish-scroll.is-animated .finish-grid{transform:scale(var(--finish-scale,1));will-change:transform}
.finish-scroll.is-animated .finish-tile{border-radius:var(--finish-radius,12px)}
@media(max-width:620px){
  .resin-surface{--wordmark-mask:url("/assets/wordmark-mask-mobile.svg?v=c5b586c3400f")}
  .wordmark-outline-desktop{display:none}
  .wordmark-outline-mobile{display:block}
  .hero-scene .site-nav{left:22px;right:22px;top:18px}
  .hero-scene .nav-brand{font-size:10px}
  .hero-scene .nav-contact{font-size:10px;padding:7px 11px}
  .hero-scene .brand-wordmark{font-size:clamp(35px,12.2vw,58px);letter-spacing:-.09em}
  .hc-page .installer-play{right:10px;bottom:14px;font-size:11px}
  .showcase-heading{padding:86px 22px 64px}
  .showcase-heading h2{font-size:clamp(40px,10.8vw,64px)}
  .finish-grid{width:92vw;height:min(92vw,72svh);gap:8px}
  .finish-tile{border-radius:8px}
  .finish-tile h3{left:9px;bottom:12px;font-size:12px}
  .finish-scroll.is-animated{height:280svh}
}
@media(prefers-reduced-motion:reduce){
  .finish-scroll.is-animated{height:auto}
  .finish-scroll.is-animated .finish-viewport{position:relative}
  .finish-scroll.is-animated .finish-grid{transform:none;will-change:auto}
  .finish-tile::after,.finish-tile h3{opacity:1}
}

.floor-card-copy>p{display:block;margin:0 0 8px;color:#86868b;font-size:9px;letter-spacing:.1em;font-weight:600}
.floor-card-copy h3{margin:0;font-weight:600;letter-spacing:-.04em}
.floor-card-copy>span{display:block;color:#6e6e73;line-height:1.4}