/* Tomita opening: full-screen photography, quiet navigation, five selected interiors. */
#top{height:100svh!important;min-height:0!important;padding:0!important;background:#201d17!important;}
#heroImages{height:100svh!important;background:#201d17;}
#heroImages .hero-image-stage{background:#201d17;}
#heroImages .hero-image-frame{transition:opacity 1100ms cubic-bezier(.25,.1,.25,1);}
#heroImages .hero-image-frame.is-outgoing{transition:none;}
#heroImages .hero-image-frame::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:24%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.32),rgba(0,0,0,.09) 55%,transparent);}
#heroImages .hero-image-frame::after{height:39%;max-height:none;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 33%,rgba(0,0,0,.48));}
#heroImages .hero-image-quote{display:none!important;}
#heroImages .hero-image-caption{left:clamp(28px,4.15vw,80px);bottom:128px;max-width:480px;text-shadow:none;}
#heroImages .hero-image-caption h2{font-size:clamp(28px,2.4vw,42px);font-weight:400;line-height:1.16;letter-spacing:-.02em;margin-bottom:12px;}
#heroImages .hero-image-caption p{font-size:13px;line-height:1.7;max-width:40ch;font-weight:400;color:rgba(255,255,255,.9);}
#heroImages .hero-image-footer{left:0;right:0;bottom:38px;padding:0 clamp(28px,4.15vw,80px);height:44px;}
#heroImages .hero-collection-link{font-size:11px;letter-spacing:.12em;min-height:44px;}
#heroImages .hero-collection-link span{border-color:rgba(255,255,255,.55);padding-bottom:6px;}
#heroImages .hero-image-controls{gap:10px;}
#heroImages .hero-image-counter{font-size:11px;letter-spacing:.12em;gap:9px;}
#heroImages .hero-image-controls button{width:44px;height:44px;}
#heroImages .hero-pause{margin-right:14px;}
#heroImages .hero-pause svg{width:14px;height:14px;}
#heroImages .hero-scroll-link{position:absolute;z-index:5;left:50%;bottom:40px;transform:translateX(-50%);width:44px;min-height:44px;display:grid;place-items:center;color:#fff;text-decoration:none;opacity:.85;}
#heroImages .hero-scroll-link svg{width:18px;height:31px;}
#heroImages .hero-scroll-link:hover{opacity:1;}
#heroImages .hero-scroll-link:focus-visible{outline:1px solid #fff;outline-offset:4px;}
/* One navigation scale and one wordmark through the whole homepage. */
#siteHead{--head-ink:#302B26;transition:background-color 360ms ease,color 360ms ease,border-color 360ms ease,box-shadow 360ms ease;}
#siteHead:not(.is-over-hero){background:#F3EFE7!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;}
#siteHead > div{height:75px!important;padding-left:clamp(28px,4.15vw,80px)!important;padding-right:clamp(28px,4.15vw,80px)!important;}
#siteHead nav{font-family:Inter,Arial,sans-serif!important;font-size:12px!important;font-weight:400!important;letter-spacing:.025em!important;color:var(--head-ink)!important;border-color:transparent!important;}
#siteHead nav a{color:inherit!important;min-height:44px;align-content:center;}
#siteHead nav[aria-label="Primary"]{border-left:0!important;padding-left:0!important;gap:28px!important;}
#siteHead .head-burger{padding-right:28px!important;}
#siteHead .head-burger span{background:var(--head-ink)!important;transition:background-color 360ms ease;}
#siteHead a[aria-label="Search the designs"]{border-left:0!important;padding-left:0!important;}
#siteHead .head-plaque{top:22px!important;width:136px!important;height:31px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
#siteHead .head-plaque > img:not(.hero-wordmark){display:none!important;}
#siteHead .hero-wordmark{display:block!important;width:136px!important;height:auto!important;max-height:none!important;filter:brightness(0) invert(1);opacity:0;transition:opacity 360ms ease;}
#siteHead.is-over-hero{--head-ink:#fff;background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#fff;}
/* Crossfade the same silhouette from white to the exact Tomita orange. */
#siteHead .head-plaque::before{content:"";position:absolute;inset:0;background:#fc8702;-webkit-mask:url("home/logo-wordmark.png") center/contain no-repeat;mask:url("home/logo-wordmark.png") center/contain no-repeat;opacity:1;transition:opacity 360ms ease;pointer-events:none;}
#siteHead.is-over-hero .head-plaque::before{opacity:0;}
#siteHead.is-over-hero .hero-wordmark{opacity:1;}
@media(prefers-reduced-motion:reduce){#siteHead .head-plaque::before,#siteHead .hero-wordmark{transition:none;}}
#siteHead a:focus-visible,#siteHead button:focus-visible{outline:1px solid var(--head-ink);outline-offset:5px;}
@media(max-width:1100px) and (min-width:768px){#siteHead nav[aria-label="Primary"]{gap:20px!important;}#siteHead .head-plaque,#siteHead .hero-wordmark{width:116px!important;}#siteHead .head-burger{padding-right:20px!important;}#siteHead nav{font-size:11px!important;}#siteHead nav[aria-label="Enquiries"] a:first-child{padding-right:18px!important;}}
@media(max-width:767px){
 #siteHead > div{height:66px!important;padding-left:24px!important;padding-right:24px!important;}
 #siteHead .head-plaque{top:20px!important;width:114px!important;height:26px!important;}
 #siteHead .hero-wordmark{width:114px!important;}
 #siteHead .head-burger{padding-right:0!important;}
 #siteHead .head-burger span{width:25px!important;}
 #siteHead a[aria-label="Showroom and contact"]{display:none!important;}
 #siteHead a[aria-label="Search the designs"]{min-width:36px;min-height:44px;justify-content:flex-end;}
 #heroImages .hero-image-caption{left:24px;right:24px;bottom:126px;max-width:350px;}
 #heroImages .hero-image-caption h2{font-size:29px;max-width:13ch;margin-bottom:10px;}
 #heroImages .hero-image-caption p{font-size:12px;line-height:1.65;max-width:32ch;}
 #heroImages .hero-image-footer{padding:0 18px 0 24px;bottom:max(20px,env(safe-area-inset-bottom));gap:4px;}
 #heroImages .hero-image-controls{gap:0;}
 #heroImages .hero-image-controls button{width:40px;height:44px;}
 #heroImages .hero-image-controls .hero-pause{margin-right:0;}
 #heroImages .hero-image-counter{min-width:46px;gap:7px;font-size:10px;}
 #heroImages .hero-collection-link{font-size:10px;letter-spacing:.07em;}
 #heroImages .hero-scroll-link{display:none;}
 #heroImages .hero-image-frame::before{height:25%;background:linear-gradient(to bottom,rgba(0,0,0,.44),rgba(0,0,0,.1) 65%,transparent);}
 #heroImages .hero-image-frame::after{height:48%;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.3) 35%,rgba(0,0,0,.65));}
}
@media(max-height:540px) and (orientation:landscape){
 #siteHead > div{height:66px!important;}
 #siteHead .head-plaque{top:18px!important;height:30px!important;}
 #heroImages .hero-image-caption{bottom:90px;}
 #heroImages .hero-image-caption h2{font-size:25px;margin-bottom:8px;}
 #heroImages .hero-image-caption p{font-size:12px;}
 #heroImages .hero-image-footer{bottom:18px;}
 #heroImages .hero-scroll-link{bottom:18px;}
}
@media(prefers-reduced-motion:reduce){#heroImages .hero-image-frame,#siteHead{transition:none!important;}}

/* Captions follow the open space in each room. */
@media(min-width:768px){
 #heroImages [data-source="07"] .hero-image-caption{left:auto;right:clamp(28px,4.15vw,80px);width:min(380px,40vw);bottom:clamp(160px,20svh,210px);text-align:right;}
 #heroImages [data-source="07"] .hero-image-caption p{margin-left:auto;}
}
@media(min-width:768px) and (max-height:540px){
 #heroImages [data-source="07"] .hero-image-caption{bottom:120px;}
}

/* The charcoal chapter carries its navigation directly on the dark surface. */
html body #siteHead.is-over-charcoal{
 --head-ink:#fff;
 background:transparent!important;
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
 border-color:transparent!important;
 box-shadow:none!important;
 color:#fff!important;
}
#siteHead.is-over-charcoal .head-plaque::before{opacity:0;}
#siteHead.is-over-charcoal .hero-wordmark{opacity:1;}

/* Change beneath the dim veil; the white navigation is already settled on exit. */
html body #siteHead.is-over-charcoal,
#siteHead.is-over-charcoal .head-plaque::before,
#siteHead.is-over-charcoal .hero-wordmark,
#siteHead.is-over-charcoal .head-burger span{transition:none!important;}

/* A light glass edge; the photograph supplies the colour beneath it. */
#siteHead:not(.is-over-hero):not(.is-over-charcoal){
 border-bottom:0!important;
 box-shadow:none!important;
}

/* Flat editorial navigation: aligned controls, consistent line weights. */
html body #siteHead{border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
#siteHead nav{line-height:1.2!important;}
#siteHead nav a{align-items:center;}
#siteHead .head-burger{min-height:44px;justify-content:center;gap:5px!important;}
#siteHead .head-burger span{width:24px!important;height:1.2px!important;}
#siteHead nav[aria-label="Enquiries"]{gap:12px!important;}
#siteHead a[aria-label="Search the designs"],
#siteHead a[aria-label="Showroom and contact"]{width:44px;min-height:44px;padding:0!important;justify-content:center!important;}
#siteHead nav[aria-label="Enquiries"] svg{width:22px;height:22px;stroke-width:1.3;}
@media(min-width:768px){
 #siteHead nav[aria-label="Primary"] a{display:flex;}
 #siteHead nav[aria-label="Enquiries"]>a:first-child{display:flex;padding-right:12px!important;}
}
@media(max-width:767px){
 #siteHead nav[aria-label="Enquiries"]{gap:0!important;}
 #siteHead a[aria-label="Search the designs"]{justify-content:flex-end!important;}
}

/* The surface eases between chapters; identity colours switch cleanly. */
html body #siteHead,
html body #siteHead.is-over-hero,
html body #siteHead.is-over-charcoal{
 border-top:0!important;
 z-index:90!important;
 transition:background-color 380ms cubic-bezier(.22,.61,.36,1)!important;
}
html body #siteHead nav,
html body #siteHead nav a,
html body #siteHead .head-burger span,
html body #siteHead .head-plaque::before,
html body #siteHead .hero-wordmark{transition:none!important;}
@media(prefers-reduced-motion:reduce){html body #siteHead{transition:none!important;}}

/* Add breathing room to the bar without resizing its contents. */
html body #siteHead{padding-top:8px!important;padding-bottom:8px!important;}
@media(max-width:767px){html body #siteHead{padding-top:6px!important;padding-bottom:6px!important;}}

/* Slightly stronger navigation proportions within the existing bar. */
html body #siteHead .head-plaque,html body #siteHead .hero-wordmark{width:146px!important;}
html body #siteHead .head-plaque{height:33px!important;top:21px!important;}
html body #siteHead nav{font-size:13px!important;}
html body #siteHead .head-burger span{width:26px!important;}
html body #siteHead nav[aria-label="Enquiries"] svg{width:24px!important;height:24px!important;}
@media(min-width:768px) and (max-width:1100px){
 html body #siteHead .head-plaque,html body #siteHead .hero-wordmark{width:125px!important;}
 html body #siteHead nav{font-size:12px!important;}
}
@media(max-width:767px){
 html body #siteHead .head-plaque,html body #siteHead .hero-wordmark{width:122px!important;}
 html body #siteHead .head-plaque{height:28px!important;top:19px!important;}
}

/* Navigation recedes with the craft dim and returns white over charcoal. */
html body #siteHead,
html body #siteHead.is-over-hero,
html body #siteHead.is-over-charcoal{
 opacity:var(--craft-header-opacity,1)!important;
 transition:background-color 380ms cubic-bezier(.22,.61,.36,1),opacity 900ms cubic-bezier(.4,0,.2,1)!important;
}
html body #siteHead.is-craft-hidden{pointer-events:none!important;}
html body #siteHead:focus-within{opacity:1!important;pointer-events:auto!important;}
@media(prefers-reduced-motion:reduce){html body #siteHead{transition:none!important;}}

/* The opening photograph fills the entire visible screen. */
html body #top#top,html body #heroImages#heroImages{
 height:100vh!important;height:100dvh!important;max-height:none!important;
}
html body #heroImages .hero-image-frame img{max-height:none!important;height:100%!important;object-fit:cover!important;}
