:root{--navy:#10243e;--navy2:#162f51;--navy3:#224b78;--blue:#3678c7;--blue-light:#eaf2fc;--paper:#fbfcff;--ink:#15273f;--muted:#65758a;--line:#e4eaf1;--white:#fff;--radius:18px;--shadow:0 14px 48px rgba(15,37,65,.075);
 /* SENI BANGUNAN design tokens: semantic roles, not arbitrary shades. */
 --sb-utility:#15384d;
 --sb-navigation:#0b263e;
 --sb-hero:#071c30;
 --sb-hero-rgb:7,28,48;
 --sb-accent:#ffdd45;
 --sb-accent-hover:#ffec91;
 --sb-surface:#f6f9fb;
 --sb-surface-raised:#ffffff;
 --sb-ink:#173750;
 --sb-ink-muted:#54718a;
 --sb-divider:#d9e3ed;
 --sb-menu-hover:#eef5fb;
 --sb-menu-link:#075d9c;
 --sb-on-dark:#ffffff;
 --sb-on-dark-muted:#e3ebf1;
}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}img,svg{max-width:100%}img{display:block}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:'Manrope',Arial,sans-serif;letter-spacing:-.045em}h1{font-size:clamp(2.65rem,5vw,5.05rem);line-height:1.11;font-weight:800}h2{font-size:clamp(2rem,3.25vw,3.05rem);line-height:1.18;font-weight:800}h3{font-size:1.18rem;line-height:1.45}p{line-height:1.7}ul{padding-left:1.35rem;line-height:1.8}::selection{background:#bfd9fb;color:var(--navy)}:focus-visible{outline:3px solid #68a4ee;outline-offset:4px}
.container{width:min(1200px,calc(100% - 56px));margin-inline:auto}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:.73rem;letter-spacing:.15em;font-weight:800;text-transform:uppercase}.eyebrow::before{content:'';width:25px;height:2px;background:currentColor}.eyebrow.light{color:#a7cdfb}.section{padding:88px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}.section-head p{max-width:470px;color:var(--muted);margin-top:12px}.lead{font-size:1.12rem;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:.88rem}.fine{font-size:.76rem;color:var(--muted)}.text-link{color:var(--navy3);font-weight:800;font-size:.91rem;display:inline-flex;align-items:center;gap:9px}.text-link:hover{color:var(--blue)}.text-link::after{content:'↗';font-size:1.12em}
.preview-strip{background:#fdf3de;border-bottom:1px solid #ead69f;color:#6c4b16;font-size:.79rem;padding:10px 0}.preview-strip .container{display:flex;gap:12px;align-items:center}.preview-strip strong{font-weight:800}.utility{background:#0c1f36;color:#d2ddec;font-size:.76rem}.utility .container{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px}.utility-inner{display:flex;align-items:center;gap:22px}.utility-dot{width:7px;height:7px;background:#72c7b4;border-radius:100%;display:inline-block;margin-right:7px}.site-header{position:relative;z-index:20;background:white;border-bottom:1px solid #e9eef4;box-shadow:0 3px 13px rgba(18,38,66,.03)}.header-content{height:91px;display:flex;align-items:center;justify-content:space-between;gap:34px}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brand-crest{width:52px;height:52px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:12px;position:relative;overflow:hidden;font-family:Manrope,sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.08em}.brand-crest::after{content:'';position:absolute;width:50px;height:50px;border:1px solid rgba(255,255,255,.25);border-radius:50%;right:-25px;top:-22px}.brand-crest img{width:100%;height:100%;object-fit:contain;background:white}.brand-title{font-family:Manrope,sans-serif;font-size:1.04rem;font-weight:800;letter-spacing:-.04em;color:var(--navy);line-height:1.15;white-space:nowrap}.brand-sub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8792a3;font-weight:800;margin-top:4px}.nav{display:flex;align-items:center;gap:32px;margin-left:auto}.nav a{color:#425268;font-size:.87rem;font-weight:700;transition:color .2s}.nav a:hover,.nav a[aria-current="page"]{color:#1d62a6}.nav a[aria-current="page"]::after{content:'';display:block;height:2px;background:var(--blue);margin-top:7px}.header-right{display:flex;align-items:center;gap:14px}.menu-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:9px;width:45px;height:45px;align-items:center;justify-content:center}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:10px;padding:14px 22px;font-size:.88rem;font-weight:800;line-height:1.25;border:1px solid transparent;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;text-align:center;white-space:normal}.button:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(21,54,89,.15)}.button-primary{background:var(--blue);color:#fff}.button-primary:hover{background:#296bad}.button-dark{background:var(--navy);color:white}.button-outline{background:transparent;color:var(--navy);border-color:#d1dfed}.button-outline:hover{background:var(--blue-light)}.button-glass{background:rgba(255,255,255,.11);color:#fff;border:1px solid rgba(255,255,255,.26)}.button-glass:hover{background:rgba(255,255,255,.2)}.button-white{background:#fff;color:var(--navy)}.button-disabled{background:#d9e2ec;color:#5b6f85;box-shadow:none;cursor:not-allowed}.button-disabled:hover{transform:none;box-shadow:none}.button-sm{padding:11px 17px;font-size:.81rem}.button svg,.text-link svg{width:17px;height:17px;flex:none}.mobile-nav{display:none}
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;opacity:.26;background-image:radial-gradient(#6989b1 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(90deg,transparent 8%,black 96%)}.hero:after{content:'';position:absolute;width:760px;height:760px;right:-440px;top:-250px;border:1px solid rgba(158,196,235,.13);border-radius:50%;box-shadow:0 0 0 85px rgba(160,195,230,.035),0 0 0 180px rgba(160,195,230,.035)}.hero-layout{display:grid;grid-template-columns:1.01fr .99fr;gap:60px;align-items:center;min-height:650px;padding-top:72px;padding-bottom:75px;position:relative;z-index:2}.hero-copy{padding:15px 0}.hero-copy h1{max-width:700px;margin:22px 0 20px}.hero-copy h1 span{color:#83b4ee}.hero-copy p{max-width:495px;color:#c2d4e8;font-size:1.06rem;line-height:1.8}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}.hero-cred{display:flex;align-items:center;gap:18px;margin-top:43px;color:#a7bad0;font-size:.78rem}.hero-cred b{color:#fff;font-size:1.06rem}.hero-cred-line{width:1px;height:29px;background:rgba(255,255,255,.21)}.hero-media{position:relative;min-width:0}.hero-media img{width:100%;height:475px;object-fit:cover;border-radius:12px;box-shadow:0 30px 55px rgba(0,0,0,.2)}.hero-media:before{content:'';position:absolute;border:1px solid rgba(202,224,245,.3);border-radius:14px;inset:-15px 20px 17px -17px;z-index:-1}.hero-media-card{position:absolute;left:-30px;bottom:28px;background:#fff;color:var(--ink);border-radius:12px;padding:18px 23px;box-shadow:0 20px 35px rgba(0,0,0,.24);display:flex;align-items:center;gap:13px;max-width:290px}.hero-media-card .marker{width:43px;height:43px;background:#e9f2ff;color:#2b69ae;display:grid;place-items:center;border-radius:9px;flex-shrink:0}.hero-media-card strong{display:block;font-size:.84rem}.hero-media-card small{display:block;color:var(--muted);font-size:.71rem;margin-top:5px}
.trustbar{background:#fff;border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:24px}.trust-item{display:flex;align-items:center;gap:15px;padding-inline:18px;border-right:1px solid var(--line)}.trust-item:first-child{padding-left:0}.trust-item:last-child{border:0}.trust-icon{display:grid;place-items:center;background:#ecf3fc;border-radius:11px;color:#2a5f9c;width:45px;height:45px;flex-shrink:0}.trust-item strong{font-size:.88rem;display:block}.trust-item span{font-size:.77rem;color:var(--muted);margin-top:4px;display:block}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.category-card{border-radius:16px;background:#fff;overflow:hidden;border:1px solid var(--line);transition:transform .18s,box-shadow .18s}.category-card:hover,.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.category-card img{height:196px;width:100%;object-fit:cover}.category-card-copy{padding:19px 19px 23px}.category-card .category-index{color:#4b83ba;text-transform:uppercase;font-size:.67rem;font-weight:800;letter-spacing:.12em;margin-bottom:8px}.category-card h3{font-size:1.06rem}.category-card p{color:var(--muted);font-size:.79rem;margin:8px 0 14px;line-height:1.7}.category-card .text-link{font-size:.79rem}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s;min-width:0}.product-media{height:222px;background:#eaf1f9;position:relative;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover}.product-tag{position:absolute;top:13px;left:13px;background:#fff;color:#48647f;font-size:.61rem;letter-spacing:.035em;padding:8px 10px;border-radius:7px;font-weight:800;max-width:calc(100% - 26px);box-shadow:0 2px 12px rgba(0,0,0,.06)}.product-copy{padding:20px}.product-category{font-size:.67rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#47749f}.product-name{font-size:1.02rem;margin:9px 0 17px;line-height:1.42;min-height:44px}.product-copy .text-link{font-size:.81rem}.product-copy .text-link::after{content:'→'}.product-brand{font-size:.78rem;color:var(--muted);margin-top:-9px;margin-bottom:14px}.cta-dark{background:var(--navy);color:#fff;border-radius:20px;padding:48px 55px;display:grid;grid-template-columns:1.5fr auto;gap:40px;align-items:center;position:relative;overflow:hidden}.cta-dark:before{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.13);width:500px;height:500px;right:-230px;top:-230px}.cta-dark h2{font-size:clamp(1.6rem,3vw,2.7rem);margin:16px 0 14px}.cta-dark p{max-width:600px;color:#b4c8dd}.cta-dark .button{position:relative;z-index:2}
.story{background:#f1f5fa}.story-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:74px}.story-image{position:relative}.story-image img{width:100%;height:470px;object-fit:cover;border-radius:18px}.story-stamp{position:absolute;right:-20px;bottom:-21px;padding:23px 28px;background:#fff;border-radius:13px;box-shadow:var(--shadow)}.story-stamp strong{display:block;color:var(--navy);font-size:1rem}.story-stamp small{font-size:.77rem;color:var(--muted)}.story-copy h2{margin:17px 0 18px}.story-copy p{color:#435970;margin-bottom:16px}.story-points{display:grid;gap:17px;margin:26px 0}.story-point{display:flex;align-items:center;gap:14px;font-weight:700;font-size:.87rem}.check{width:27px;height:27px;background:#deebfa;border-radius:50%;display:grid;place-items:center;color:#2f6eac;flex-shrink:0}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.visit-panel{border:1px solid var(--line);background:#fff;border-radius:17px;padding:33px}.visit-panel h3{font-size:1.35rem;margin-bottom:16px}.visit-list{display:grid;gap:22px;margin:25px 0 30px}.visit-line{display:grid;grid-template-columns:42px 1fr;gap:15px}.visit-icon{width:42px;height:42px;border-radius:11px;background:#eff5fb;display:grid;place-items:center;color:#3a74a9}.visit-line strong{display:block;font-size:.89rem;margin-bottom:5px}.visit-line p{color:var(--muted);font-size:.85rem;line-height:1.65}.map-art{background:linear-gradient(135deg,#e6eef8,#cadbee);min-height:370px;position:relative;overflow:hidden;border:1px solid #dbe8f4;border-radius:17px;display:grid;place-items:center}.map-art:before{content:'';position:absolute;inset:-60px;background:repeating-linear-gradient(0deg,transparent 0 65px,#b1c8df 65px 80px,transparent 80px 130px),repeating-linear-gradient(90deg,transparent 0 60px,#b1c8df 60px 77px,transparent 77px 135px);transform:rotate(-18deg);opacity:.73}.map-art-content{position:relative;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:25px;text-align:center;max-width:340px;margin:25px}.map-art-content .pin{color:#2e6db6;font-size:2.6rem}.map-art-content h3{margin-bottom:8px}.map-art-content p{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:74px}.faq-heading p{color:var(--muted);margin-top:20px}.faq-list{border-top:1px solid #dce4ed}.faq-list details{border-bottom:1px solid #dce4ed;padding:0}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;font-weight:800;font-size:.96rem}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';font-weight:400;font-size:1.5rem;color:var(--blue)}.faq-list details[open] summary::after{content:'−'}.faq-list details p{color:var(--muted);font-size:.87rem;padding-bottom:23px;max-width:640px}.footer{background:#0b1d33;color:#e8f0f9;padding:67px 0 0}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:56px;padding-bottom:62px}.footer .brand-title{color:#fff}.footer .brand-sub{color:#9aafc6}.footer-intro{color:#a7bbcf;font-size:.83rem;margin:23px 0}.footer-title{font-family:Manrope,sans-serif;font-size:.89rem;font-weight:800;margin:8px 0 24px}.footer-list{display:grid;gap:13px;font-size:.82rem;color:#b1c2d6}.footer-list a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:21px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#95aac0;font-size:.75rem}.footer-note{font-size:.71rem;color:#8ca2bc;margin-top:16px}
.page-hero{background:var(--navy);color:white;padding:74px 0 76px;position:relative;overflow:hidden}.page-hero:after{content:'';width:350px;height:350px;border:1px solid rgba(255,255,255,.12);border-radius:50%;position:absolute;right:2%;top:-180px;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 165px rgba(255,255,255,.02)}.page-hero h1{font-size:clamp(2.5rem,4.4vw,4.15rem);margin:15px 0}.page-hero p{color:#c1d4e7;max-width:670px;font-size:1.05rem}.breadcrumbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;color:#8aa7ca;font-size:.79rem}.breadcrumbs a{color:#bbd4f0}.breadcrumbs a:hover{color:#fff}.catalogue-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 28px}.search-field{position:relative;flex:1;min-width:240px}.search-field input{width:100%;border:1px solid #d8e3ef;background:#fff;border-radius:11px;padding:16px 17px 16px 48px;color:var(--ink);outline:none}.search-field input:focus{border-color:#3678c7;box-shadow:0 0 0 3px #bcd8f9}.search-field svg{position:absolute;left:16px;top:15px;color:#879ab0}.sort-select{border:1px solid #d8e3ef;background:white;border-radius:11px;padding:15px 18px;color:var(--ink)}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0 28px}.filter-btn{padding:11px 17px;border:1px solid #d7e3f0;background:#fff;border-radius:60px;color:#55708d;font-size:.8rem;font-weight:800}.filter-btn.is-active,.filter-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}.catalogue-count{font-size:.83rem;color:var(--muted);margin-bottom:20px}.empty-state{display:none;background:#fff;border:1px solid var(--line);padding:50px;text-align:center;border-radius:15px}.empty-state.is-visible{display:block}.catalogue-disclaimer{padding:16px 21px;background:#fff7e9;border:1px solid #f1dab6;border-radius:10px;margin-bottom:22px;font-size:.8rem;color:#79561c}.product-detail{display:grid;grid-template-columns:1fr .88fr;gap:70px;align-items:start}.product-detail-media{background:#eaf1f9;border-radius:18px;overflow:hidden;position:relative}.product-detail-media img{width:100%;height:520px;object-fit:cover}.product-detail-copy{padding-top:18px}.product-detail-copy h1{font-size:clamp(2.3rem,4vw,3.9rem);margin:16px 0 22px}.product-detail-copy p{color:var(--muted)}.product-detail-info{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:25px 0;display:grid;gap:16px}.product-detail-info div{display:flex;justify-content:space-between;gap:22px;font-size:.9rem}.product-detail-info span{color:var(--muted)}.product-actions{display:grid;gap:12px;margin-top:25px}.product-actions .button{width:100%}.product-fine{font-size:.8rem;color:#916225;background:#fff4dc;padding:14px;border-radius:8px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.about-grid img{border-radius:17px;width:100%;height:440px;object-fit:cover}.about-grid h2{margin:18px 0}.about-grid p{color:var(--muted);margin-bottom:14px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:33px}.contact-card h2{font-size:1.6rem;margin:12px 0 15px}.contact-card p{color:var(--muted)}.contact-card .button{margin-top:25px}.privacy{max-width:800px}.privacy h2{font-size:1.35rem;margin:30px 0 12px}.privacy p,.privacy li{color:var(--muted)}.not-found{text-align:center;padding:125px 0}.not-found h1{margin-bottom:14px}.not-found p{color:var(--muted);margin-bottom:30px}
@media(max-width:1100px){.nav{gap:19px}.header-right .button{display:none}.hero-layout{gap:35px}.category-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.25fr 1fr;gap:40px}.story-grid{gap:44px}}
@media(max-width:760px){.container{width:min(100% - 36px,1200px)}.utility{display:none}.header-content{height:73px}.brand-crest{height:45px;width:45px}.brand-title{font-size:.95rem}.brand-sub{font-size:.57rem}.nav{display:none}.menu-toggle{display:flex}.mobile-nav{position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 22px 28px rgba(18,40,63,.12);padding:12px 20px 20px;border-top:1px solid var(--line)}.mobile-nav[hidden]{display:none}.mobile-nav:not([hidden]){display:grid;gap:0}.mobile-nav a{padding:14px 6px;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy)}.preview-strip .container{align-items:start}.section{padding:65px 0}.section-head{align-items:start;flex-direction:column;gap:14px;margin-bottom:28px}.hero-layout{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:65px;padding-bottom:75px}.hero-copy h1{font-size:clamp(2.65rem,10vw,4.2rem)}.hero-copy p{font-size:.96rem}.hero-actions{margin-top:26px}.hero-cred{margin-top:30px}.hero-media img{height:auto;aspect-ratio:1.18;object-fit:cover}.hero-media-card{left:12px;bottom:-15px}.trust-grid{grid-template-columns:1fr;gap:0;padding:12px 0}.trust-item{border:0;border-bottom:1px solid var(--line);padding:13px 0}.trust-item:last-child{border:0}.category-grid,.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}.category-card img{height:145px}.category-card-copy,.product-copy{padding:15px}.category-card h3{font-size:.89rem}.category-card p{font-size:.73rem}.product-media{height:160px}.product-name{font-size:.88rem;min-height:38px}.product-tag{font-size:.57rem;padding:6px;top:8px;left:8px}.cta-dark{grid-template-columns:1fr;padding:34px 26px;gap:20px}.cta-dark h2{font-size:1.7rem}.story-grid,.visit-grid,.faq-grid,.product-detail,.about-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.story-image img{height:360px}.story-stamp{right:8px}.faq-grid{gap:12px}.visit-panel{padding:24px}.footer-grid{grid-template-columns:1fr 1fr;gap:29px}.footer-bottom{flex-wrap:wrap}.page-hero{padding:54px 0}.product-detail-media img{height:auto;aspect-ratio:1.06}.product-detail-copy{padding-top:0}.about-grid img{height:340px}}
@media(max-width:440px){.brand-crest{height:39px;width:39px}.brand-title{font-size:.83rem}.brand-sub{font-size:.5rem}.hero-actions{display:grid}.hero-actions .button{width:100%}.hero-media-card{max-width:240px;padding:12px 14px}.category-grid{gap:10px}.category-card img{height:124px}.category-card-copy{padding:12px}.category-card h3{font-size:.8rem}.category-card p{display:none}.category-card .text-link{font-size:.72rem;margin-top:10px}.product-grid{grid-template-columns:1fr 1fr}.product-media{height:132px}.product-copy{padding:12px}.product-copy .text-link{font-size:.72rem}.footer-grid{grid-template-columns:1fr}.contact-card{padding:24px}.filter-btn{font-size:.73rem;padding:10px 13px}.catalogue-tools{align-items:stretch}.sort-select{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* SENI BANGUNAN approved visual identity — premium navy / yellow seal */
:root{--navy:#08294b;--navy2:#0b3763;--navy3:#104d87;--blue:#0759c8;--blue-light:#eaf3fd;--paper:#f5f9fc;--ink:#09284a;--yellow:#ffdc37;--yellow-deep:#f4c914}
.utility{background:#06213e}.site-header{background:#fff;box-shadow:0 5px 25px rgba(5,35,67,.07)}
.brand-crest{background:transparent;border-radius:50%;width:66px;height:66px;overflow:visible;box-shadow:0 2px 10px rgba(7,36,67,.08)}.brand-crest:after{display:none}.brand-crest img{border-radius:50%;background:transparent;object-fit:contain}
.brand-title{font-size:1.2rem;letter-spacing:-.035em}.brand-sub{color:#4e6681;letter-spacing:.12em}
.header-content{height:99px}.nav a[aria-current="page"]{color:#0059c9}.nav a[aria-current="page"]:after{background:var(--yellow-deep)}
.hero{background:linear-gradient(116deg,#062746 0%,#093663 68%,#0d477a 100%)}.hero:before{opacity:.14}.hero-copy h1 span{color:#fff}.eyebrow.light{color:var(--yellow)}
.eyebrow.light:before{background:var(--yellow)}.hero-copy h1{font-size:clamp(2.65rem,4.55vw,4.75rem)}
.button-primary{background:var(--yellow);color:#092747;border-color:var(--yellow);box-shadow:0 8px 25px rgba(255,220,55,.13)}.button-primary:hover{background:#ffe76a;border-color:#ffe76a;color:#092747}
.hero-media img{border-radius:15px}.hero-media-card .marker{background:#fff2b0;color:#073762}
.trust-icon{background:#eaf3ff;color:#0759c8}.category-card,.product-card{box-shadow:0 4px 24px rgba(8,41,75,.035)}
.category-card:hover,.product-card:hover{border-color:#b7d4f1}.cta-dark{background:linear-gradient(115deg,#08294b,#0c3d6e)}
.footer{background:#06213e}.page-hero{background:linear-gradient(120deg,#08294b,#104675)}
@media(max-width:760px){.header-content{height:76px}.brand-crest{height:51px;width:51px}.brand-title{font-size:.98rem}.brand-sub{font-size:.55rem}}
@media(max-width:440px){.brand-crest{height:44px;width:44px}.brand-title{font-size:.85rem}.brand-sub{font-size:.47rem}}

/* Stock availability indicators: product cards and product detail */
.stock-status{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;line-height:1.35;white-space:normal}
.stock-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px currentColor;outline:2px solid #fff;outline-offset:-1px;transform:scale(.8)}
.stock-status--available{color:#16803b}
.stock-status--out{color:#c62828}
.stock-status--preorder{color:#b36a00}
.stock-status--unknown{color:#65758a}
.product-stock{margin:-5px 0 14px}
.product-detail-info .stock-status{justify-content:flex-end;text-align:right}
@media(max-width:440px){.stock-status{font-size:.75rem;gap:6px}.stock-dot{width:10px;height:10px}}

/* Ensure availability colours override general product-detail text rules. */
.product-detail-info .stock-status--available{color:#16803b}
.product-detail-info .stock-status--out{color:#c62828}
.product-detail-info .stock-status--preorder{color:#b36a00}
.product-detail-info .stock-status--unknown{color:#65758a}
.stock-status .stock-dot{background-color:currentColor;box-shadow:none;outline:none;transform:none}

/* Final stock-dot fix: use explicit dot background colours.
   The generic .product-detail-info span colour must not make the dot grey. */
.stock-status .stock-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  outline: none;
  transform: none;
  background-color: #65758a;
  box-shadow: 0 0 0 3px #e8edf2;
}
.stock-status--available .stock-dot {
  background-color: #16803b;
  box-shadow: 0 0 0 3px #e2f3e8;
}
.stock-status--out .stock-dot {
  background-color: #c62828;
  box-shadow: 0 0 0 3px #fbe7e7;
}
.stock-status--preorder .stock-dot {
  background-color: #c17900;
  box-shadow: 0 0 0 3px #fff1d8;
}
.stock-status--unknown .stock-dot {
  background-color: #65758a;
  box-shadow: 0 0 0 3px #e8edf2;
}
@media (max-width: 440px) {
  .stock-status .stock-dot { width: 10px; height: 10px; flex-basis: 10px; }
}


/* Accessibility: keyboard users can jump past navigation. */
.skip-link {position:absolute;left:16px;top:-120px;z-index:1000;background:#fff;color:#08294b;border:2px solid #0759c8;border-radius:8px;padding:12px 16px;font-weight:800;box-shadow:0 8px 26px rgba(8,41,75,.18)}
.skip-link:focus {top:12px}

/* Bilingual language selector – keyboard and touch accessible */
.language-picker{position:relative;flex-shrink:0;z-index:25}
.language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#10243e;font:inherit;font-size:.82rem;font-weight:650;padding:9px 11px;white-space:nowrap;cursor:pointer;min-height:42px}
.language-trigger:hover,.language-trigger:focus-visible{border-color:#c79922;outline-offset:3px}
.language-options{position:absolute;right:0;top:calc(100% + 7px);min-width:205px;padding:5px;border:1px solid #dce5ef;border-radius:12px;background:#fff;box-shadow:0 12px 28px #0c29432b;z-index:100}
.language-options[hidden]{display:none!important}
.language-options button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:8px;text-align:left;background:transparent;color:#10243e;font:inherit;font-size:.88rem;padding:12px;cursor:pointer}
.language-options button:hover,.language-options button:focus-visible{background:#f0f5fa}
.language-check{margin-left:auto;color:#16674c;font-weight:800}
@media(max-width:650px){.language-trigger{padding:8px 9px;gap:5px;font-size:.73rem}.language-trigger [data-language-label]{max-width:77px;overflow:hidden;text-overflow:ellipsis}.language-options{min-width:198px}}

/* Consistent SVG flags on Windows, Android, iOS and desktop browsers */
.language-flag{display:inline-block;width:21px;height:15px;flex:0 0 21px;border-radius:2px;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(16,36,62,.14);vertical-align:middle}
.language-flag.flag-id{background-image:url("flags/id.svg")}
.language-flag.flag-en{background-image:url("flags/gb.svg")}

/* Mobile and tablet header containment (2026-10-25)
   Keep logo, language menu and navigation within the available viewport.
   The compact trigger retains the SVG flag; full language names remain in the dropdown. */
@media (max-width: 1199px) {
  .header-content { gap: 12px; min-width: 0; }
  .header-content .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand-crest { flex-shrink: 0; }
  .brand > span:last-child { min-width: 0; max-width: 100%; overflow: hidden; }
  .brand-title, .brand-sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav { display: none; }
  .header-right { flex: 0 0 auto; min-width: 0; margin-left: auto; gap: 9px; }
  .header-right > .button { display: none; }
  .menu-toggle { display: flex; flex: 0 0 45px; }
  .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 22px 28px rgba(18,40,63,.12); padding: 12px 20px 20px; border-top: 1px solid var(--line); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav:not([hidden]) { display: grid; gap: 0; }
  .mobile-nav a { padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--navy); }
}
@media (max-width: 760px) {
  .header-content { gap: 8px; }
  .header-content .brand { gap: 8px; }
  .header-right { gap: 7px; }
  .language-trigger { display: inline-flex; gap: 5px; padding: 0 7px; width: 55px; height: 44px; min-height: 44px; }
  .language-trigger [data-language-label] { display: none; }
  .language-trigger svg { width: 12px; height: 12px; flex-shrink: 0; }
  .language-options { min-width: 205px; }
}
@media (max-width: 520px) {
  .brand-sub { display: none; }
  .brand-title { font-size: clamp(.72rem, 3.1vw, .88rem); }
  .brand-crest { width: 42px; height: 42px; }
  .menu-toggle { width: 44px; height: 44px; flex-basis: 44px; }
}

/* Refined trust-bar imagery; isolated from other site icons */
.trust-icon.trust-icon-image{width:56px;height:56px;min-width:56px;flex-shrink:0;background:transparent;border-radius:15px;overflow:hidden;box-shadow:0 4px 14px rgba(9,40,74,.09);margin-top:0}
.trust-icon-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:15px}
.trust-item{min-width:0;align-items:center}.trust-item>div{min-width:0}
@media(max-width:760px){.trust-icon.trust-icon-image{width:52px;height:52px;min-width:52px}}

/* CMS additions: optional announcement, product photo gallery and key features */
.site-announcement{padding:10px 0;background:#fff3c0;color:#453509;text-align:center;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}
.product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.product-gallery a{display:block;aspect-ratio:1.25;overflow:hidden;border:1px solid #d6e4f0;border-radius:10px;background:#f1f6fb}
.product-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.product-gallery a:focus-visible{outline:3px solid #f8cf34;outline-offset:2px}
.product-highlights{margin:12px 0 22px;padding-left:1.25rem;line-height:1.8;color:#233f60}
/* SENI BANGUNAN — refined navigation (2026-10-25)
   Visual-only update: existing links, dropdown logic, CMS and stock functions stay unchanged. */
.site-header{
  background:#fff;
  border-bottom:1px solid #e7edf4;
  box-shadow:0 3px 20px rgba(8,41,75,.045);
}
.site-header .header-content{
  height:80px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
/* Give the logo, name and location their own clean lines. */
.site-header .brand{
  flex:0 1 auto;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  flex-shrink:1;
}
.site-header .brand-crest{
  width:55px;
  height:55px;
  flex:0 0 55px;
  box-shadow:0 2px 9px rgba(8,41,75,.075);
}
.site-header .brand > span:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  overflow:visible;
}
.site-header .brand-title{
  display:block;
  max-width:100%;
  font-family:Manrope,Arial,sans-serif;
  font-size:1.035rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
  color:#08294b;
}
.site-header .brand-sub{
  display:block;
  max-width:100%;
  margin-top:0;
  font-size:.59rem;
  line-height:1.25;
  font-weight:750;
  letter-spacing:.11em;
  white-space:nowrap;
  color:#60758e;
}
/* One-line navigation with discrete hover and a gold active underline. */
.site-header .nav{
  display:flex;
  align-items:center;
  gap:3px;
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
}
.site-header .nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 11px;
  border-radius:8px;
  color:#40556d;
  font-size:.835rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  transition:color .16s ease,background-color .16s ease;
}
.site-header .nav a:hover{
  background:#f3f7fb;
  color:#08294b;
}
.site-header .nav a[aria-current="page"]{
  color:#08294b;
  font-weight:800;
  background:#f8faff;
}
.site-header .nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  bottom:3px;
  left:20%;
  right:20%;
  height:3px;
  margin:0;
  border-radius:4px;
  background:#f4c914;
}
.site-header .header-right{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:9px;
  min-width:0;
  margin-left:0;
}
.site-header .language-picker{flex:0 0 auto}
.site-header .language-trigger{
  height:43px;
  min-height:43px;
  padding:0 12px;
  border:1px solid #d7e2ef;
  border-radius:10px;
  background:#fff;
  gap:9px;
  color:#17314e;
  font-size:.8rem;
  font-weight:700;
  box-shadow:none;
}
.site-header .language-trigger:hover,
.site-header .language-trigger[aria-expanded="true"]{
  border-color:#b6cbe2;
  background:#f7fafd;
}
.site-header .language-trigger [data-language-label]{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
.site-header .language-options{border-radius:11px;box-shadow:0 14px 32px rgba(8,41,75,.14)}
.site-header .header-right > .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:0 14px;
  border:1px solid #d7e2ef;
  border-radius:10px;
  background:#f6f9fd;
  color:#0d3154;
  font-size:.80rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:none;
  transform:none;
}
.site-header .header-right > .button:hover{
  background:#eaf2fa;
  border-color:#b8d0e7;
  box-shadow:none;
  transform:none;
}
.site-header a:focus-visible,.site-header button:focus-visible{
  outline:3px solid #dfb620;
  outline-offset:3px;
}
/* Collapse before links can become cramped. Existing JS controls the mobile drawer. */
@media(max-width:1199px){
  .site-header .header-content{height:75px;gap:12px}
  .site-header .brand{flex:1 1 auto;min-width:0}
  .site-header .brand-crest{height:49px;width:49px;flex-basis:49px}
  .site-header .brand > span:last-child{overflow:hidden}
  .site-header .brand-title,.site-header .brand-sub{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .site-header .nav{display:none}
  .site-header .header-right{margin-left:auto;gap:9px}
  .site-header .header-right > .button{display:none}
  .site-header .menu-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;
    border:1px solid #d7e2ef;border-radius:10px;background:#f8fafc;color:#092c50;
  }
  .site-header .menu-toggle:hover,.site-header .menu-toggle[aria-expanded="true"]{background:#ebf3fc;border-color:#abc5e0}
  .site-header .mobile-nav{
    position:absolute;top:100%;left:0;right:0;
    width:100%;padding:10px max(18px,calc((100% - 1200px)/2)) 18px;
    border-top:1px solid #e6edf5;background:#fff;
    box-shadow:0 18px 28px rgba(8,41,75,.12);
  }
  .site-header .mobile-nav[hidden]{display:none}
  .site-header .mobile-nav:not([hidden]){display:grid;gap:2px}
  .site-header .mobile-nav a{
    display:block;padding:14px 16px;border:0;border-radius:9px;
    color:#28435f;font-size:.94rem;font-weight:750;
  }
  .site-header .mobile-nav a:hover,.site-header .mobile-nav a[aria-current="page"]{
    background:#f0f6fd;color:#092e54;
  }
  .site-header .mobile-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 #f4c914}
}
@media(max-width:760px){
  .site-header .header-content{height:72px;gap:8px}
  .site-header .brand{gap:9px}
  .site-header .brand-title{font-size:.94rem}
  .site-header .brand-sub{font-size:.52rem}
  .site-header .language-trigger{
    height:44px;min-height:44px;width:55px;padding:0 7px;gap:5px;
  }
  .site-header .language-trigger [data-language-label]{display:none}
  .site-header .header-right{gap:7px}
}
@media(max-width:520px){
  .site-header .brand-crest{width:42px;height:42px;flex-basis:42px}
  .site-header .brand-title{font-size:clamp(.75rem,3.15vw,.88rem)}
  .site-header .brand-sub{display:none}
}
@media(max-width:350px){
  .site-header .header-content{gap:6px}
  .site-header .brand{gap:6px}
  .site-header .brand-crest{width:38px;height:38px;flex-basis:38px}
  .site-header .header-right{gap:5px}
  .site-header .language-trigger{width:51px}
  .site-header .menu-toggle{width:42px;flex-basis:42px}
}
@media(prefers-reduced-motion:reduce){.site-header .nav a{transition:none}}
/* ====================================================================
   SENI BANGUNAN • Brand Cohesion Theme, October 2026
   Derived from the existing gold/navy SB seal. Visual-only adjustments.
   Does not alter layout breakpoints, scripts, CMS, text or stock statuses.
   ==================================================================== */
:root {
  --navy: #072b52;
  --navy2: #0b3867;
  --navy3: #104e86;
  --blue: #0755aa;
  --blue-light: #eef4fa;
  --paper: #f7f9fc;
  --ink: #102c4a;
  --muted: #61738a;
  --line: #dce5ef;
  --yellow: #ffdb32;
  --yellow-deep: #f2c426;
  --brand-gold-soft: #fff5cd;
  --brand-gold-border: #eac868;
  --brand-navy-deep: #061f3c;
  --radius: 18px;
  --shadow: 0 14px 36px rgba(7,37,70,.10);
}

/* 1. Unified backdrop, lettering, interaction colors */
body { background: var(--paper); color: var(--ink); }
::selection { background: #ffeb90; color: #061f3c; }
:focus-visible { outline-color: #bb8900; }
.section-head h2, .story-copy h2, .visit-grid h2,
.faq-heading h2, .contact-card h2 { color: var(--navy); }
.eyebrow { color: #8b6300; letter-spacing: .13em; }
.eyebrow::before { background: var(--yellow-deep); height: 3px; }
.eyebrow.light { color: #ffe26a; }
.eyebrow.light::before { background: #ffe26a; }
.text-link { color: #0a477e; }
.text-link:hover { color: #765500; }
.text-link:focus-visible { outline-offset: 5px; }

/* 2. Brand header: subtle gold acknowledgement of SB crest */
.utility, .footer { background: var(--brand-navy-deep); }
.site-header {
  border-bottom: 1px solid #e6eaf0;
  box-shadow: 0 7px 22px rgba(8,34,63,.06);
}
.site-header .brand-crest { box-shadow: 0 2px 0 rgba(8,43,82,.05),0 0 0 2px rgba(255,219,50,.20); }
.site-header .brand-title { color: var(--brand-navy-deep); }
.site-header .nav a:hover { color: var(--navy); }
.site-header .nav a[aria-current="page"] { color: var(--navy); }
.site-header .nav a[aria-current="page"]::after { background: var(--yellow-deep); }
.site-header .header-right > .button,
.site-header .language-trigger,
.site-header .menu-toggle { border-color: #d4e0ec; }
.site-header .header-right > .button:hover,
.site-header .language-trigger:hover,
.site-header .menu-toggle:hover { border-color: #d6b24b; background: #fffcf2; }
.site-header .language-options button:hover,
.site-header .language-options button:focus-visible { background: #fff7dd; }
.site-header .mobile-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--yellow-deep); }

/* 3. Hero: luxurious deep navy, restrained warm gold detail */
.hero {
  background:
    radial-gradient(ellipse at 94% 4%,rgba(255,216,55,.12),transparent 33%),
    linear-gradient(120deg,#061f3c 0%,#082e57 58%,#0b3e70 100%);
}
.hero::before { opacity:.10; }
.hero::after { border-color:rgba(248,210,67,.21); box-shadow:0 0 0 85px rgba(255,210,74,.025),0 0 0 180px rgba(255,210,74,.018); }
.hero-copy p { color: #d7e3f2; }
.hero-cred { color: #c2d0e2; }
.hero-cred-line { background: rgba(255,221,105,.30); }
.hero-media img { box-shadow: 0 24px 55px rgba(0,9,25,.28); }
.hero-media::before { border-color: rgba(255,216,73,.27); }
.hero-media-card { border: 1px solid #e2e9f1; box-shadow: 0 19px 35px rgba(0,15,34,.20); }
.hero-media-card .marker { background: var(--brand-gold-soft); color: var(--navy); }

/* 4. Buttons: yellow is the primary action, navy the secondary */
.button { border-radius: 11px; }
.button-primary {
  color: var(--brand-navy-deep);
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 7px 18px rgba(165,120,0,.16);
}
.button-primary:hover { background: #ffe56b; border-color: #ffe56b; box-shadow: 0 10px 22px rgba(165,120,0,.19); }
.button-dark { background: var(--brand-navy-deep); color:#fff; }
.button-dark:hover { background:#103d6a; }
.button-outline { border-color: #c8d7e7; color: var(--navy); }
.button-outline:hover { background: #fff8df; border-color: var(--brand-gold-border); }
.button-glass { border-color: rgba(255,255,255,.27); }
.button-white { color:var(--brand-navy-deep); }

/* 5. Consistent surface cadence and trust strip */
.trustbar { background:#fff; border-bottom:1px solid var(--line); }
.trust-grid { padding-block: 22px; }
.trust-item strong { color:var(--navy); }
.trust-item span { color:#6a7b8c; }
.trust-icon.trust-icon-image {
  background:#f0f5fb;
  border:1px solid #e0e9f4;
  box-shadow:0 2px 10px rgba(8,41,75,.07);
}
#kategori { background:linear-gradient(180deg,#f8fafc 0%,#f3f7fb 100%); }
#kategori + .section { background:#fff; }
.section.story { background:#f2f6fb; }

/* 6. Cards: one radius, one elevation, delicate gold affordance */
.category-card,.product-card,.visit-panel,.contact-card {
  border-color: #dde5ee;
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(7,37,70,.035);
}
.category-card:hover,.product-card:hover {
  border-color: #e0bc50;
  box-shadow: 0 13px 30px rgba(7,37,70,.10);
}
.category-card .category-index,.product-category { color:#215b91; }
.category-card h3,.product-name { color:var(--navy); }
.product-media, .product-detail-media { background:#edf3f9; }
.product-tag { border:1px solid rgba(14,47,80,.08); }
.product-card .text-link,.category-card .text-link { color:#153e69; }
.product-card .text-link:hover,.category-card .text-link:hover { color:#795600; }

/* 7. Highlighted band and story: visually relate to hero and seal */
.cta-dark {
  background:
    radial-gradient(circle at 98% 0%,rgba(255,219,50,.10),transparent 33%),
    linear-gradient(120deg,#061f3c 0%,#0b3967 100%);
  border: 1px solid rgba(255,220,84,.16);
  box-shadow: 0 14px 35px rgba(7,37,70,.12);
}
.cta-dark::before { border-color:rgba(255,220,84,.18); }
.cta-dark p { color:#d3dfec; }
.story-image img { box-shadow:0 12px 32px rgba(8,41,75,.10); }
.story-stamp { border:1px solid #e4eaf0; }
.check { background:#fff4cc; color:#775500; }

/* 8. Location, filters and FAQ: consistent tactile detailing */
.visit-icon { background:#fff3c8; color:var(--navy); }
.map-art { background:linear-gradient(145deg,#e8f0f8,#cedde9); border-color:#d8e3ed; }
.map-art-content { border: 1px solid #dfe7f0; }
.map-art-content .pin { color:var(--navy3); }
.faq-list { border-color:var(--line); }
.faq-list details { border-color:var(--line); }
.faq-list summary::after { color:#996e00; }
.faq-list summary:hover { color:#123e67; }
.faq-list details[open] summary { color:var(--navy); }
.search-field input,.sort-select { border-color:#d5e0eb; }
.search-field input:focus,.sort-select:focus-visible { border-color:#bf910f; box-shadow:0 0 0 3px #fff0b5; }
.filter-btn { border-color:#d4e0eb; color:#315270; }
.filter-btn.is-active,.filter-btn:hover { background:var(--navy); border-color:var(--navy);color:#fff; }
.catalogue-disclaimer,.preview-strip { background:#fff6df; border-color:#eddbaf; color:#684917; }
.site-announcement { background:#fff2c5; color:#553c09; }
.product-fine { background:#fff6df; color:#755114; }

/* 9. Inner pages and footer: design language carries through */
.page-hero { background:linear-gradient(117deg,#061f3c,#0e406d); }
.page-hero::after { border-color:rgba(255,224,85,.17); box-shadow:0 0 0 80px rgba(255,221,88,.025),0 0 0 165px rgba(255,221,88,.012); }
.breadcrumbs a { color:#e5e8ee; }
.footer { border-top:3px solid var(--yellow-deep); }
.footer-title { color:#fff; }
.footer-list a:hover { color:#ffe26a; }
.footer-bottom { border-color:rgba(255,255,255,.14); }

/* 10. Mobile: preserve the proven no-overflow header and readable spacing */
@media (max-width:760px) {
  .trust-grid { padding-block:10px; }
  .trust-item { border-color:var(--line); }
  .hero { background:linear-gradient(148deg,#061f3c 0%,#0b3a69 100%); }
  .hero-media-card { box-shadow:0 12px 25px rgba(0,15,34,.16); }
}
@media (prefers-reduced-motion:reduce) {
  .category-card,.product-card,.button { transition:none; }
}

/* ======================================================================
   SENI BANGUNAN • Calm, cohesive typography refinement • October 2026
   Visual-only: typography, line-lengths and breathing room.
   Keeps existing page structure, breakpoints, language, inventory and CMS.
   ====================================================================== */
:root {
  --type-display: clamp(2.35rem, 4vw, 3.45rem);
  --type-heading: clamp(1.85rem, 2.9vw, 2.45rem);
  --type-body: 1rem;
}
body {
  font-size: var(--type-body);
  line-height: 1.65;
  font-weight: 400;
}
h1,h2,h3,h4 {
  font-family: 'Manrope',Arial,sans-serif;
  font-weight: 600;
  letter-spacing: -.029em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--type-display); line-height: 1.15; }
h2 { font-size: var(--type-heading); line-height: 1.25; }
h3 { line-height: 1.35; }
p { line-height: 1.7; }
/* Less shouting in labels, navigation and interactions. */
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .095em; line-height: 1.5; }
.text-link { font-weight: 600; font-size: .88rem; }
.site-header .brand-title { font-weight: 700; letter-spacing: -.025em; }
.site-header .brand-sub { font-weight: 600; letter-spacing: .075em; }
.site-header .nav a,
.site-header .nav a[aria-current="page"] { font-weight: 600; }
.site-header .language-trigger,
.site-header .header-right > .button { font-weight: 600; }
.site-header .mobile-nav a { font-weight: 600; }
.button { font-weight: 700; letter-spacing: -.01em; }
.filter-btn { font-weight: 600; }
/* Hero: readable, balanced headline; avoid full-width oversized blocks. */
.hero-copy h1 {
  font-size: var(--type-display);
  line-height: 1.14;
  letter-spacing: -.033em;
  font-weight: 600;
  max-width: 15ch;
  margin: 20px 0 18px;
  text-wrap: balance;
}
.hero-copy p { max-width: 50ch; font-size: 1.02rem; line-height: 1.73; }
.hero-actions { margin-top: 29px; }
.hero-cred { margin-top: 35px; }
.hero-cred b { font-weight: 700; }
/* Section hierarchy: calm, consistent throughout the site. */
.section-head h2,
.story-copy h2,
.faq-heading h2,
.visit-grid h2,
.about-grid h2 {
  font-size: var(--type-heading);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.section-head p { max-width: 56ch; margin-top: 11px; font-size: .96rem; line-height: 1.72; }
.lead { font-size: 1.04rem; line-height: 1.72; }
/* Product and category cards: let photos/products remain the focus. */
.category-card h3 { font-size: 1.01rem; line-height: 1.38; font-weight: 600; }
.product-name { font-size: 1rem; line-height: 1.42; font-weight: 600; }
.category-card .category-index,
.product-category { font-size: .65rem; font-weight: 700; letter-spacing: .065em; }
.product-tag { font-weight: 700; }
.product-copy .text-link,
.category-card .text-link { font-weight: 600; }
.trust-item strong { font-weight: 700; }
/* CTA, store content, FAQ and footer. */
.cta-dark h2 {
  font-size: clamp(1.65rem,2.55vw,2.2rem);
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.story-point, .visit-line strong { font-weight: 600; }
.visit-panel h3 { font-size: 1.21rem; font-weight: 600; }
.faq-list summary { font-weight: 600; font-size: .94rem; line-height: 1.5; }
.footer-title { font-weight: 700; }
/* Inner pages: same heading scale, never visually heavier than homepage. */
.page-hero h1 {
  font-size: clamp(2.2rem,3.8vw,3.35rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.03em;
  max-width: 19ch;
  text-wrap: balance;
}
.page-hero p { font-size: 1rem; line-height: 1.72; max-width: 62ch; }
.product-detail-copy h1 {
  font-size: clamp(2.05rem,3.4vw,3.15rem);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.contact-card h2 { font-size: 1.42rem; font-weight: 600; }
.privacy h2 { font-size: 1.28rem; font-weight: 600; }
@media (max-width: 760px) {
  :root {
    --type-display: clamp(2.25rem, 8.4vw, 3.1rem);
    --type-heading: clamp(1.68rem, 5.1vw, 2.1rem);
  }
  .hero-copy h1 { font-size: var(--type-display); line-height: 1.17; max-width: 17ch; }
  .hero-copy p { font-size: .97rem; }
  .section-head h2,.story-copy h2,.faq-heading h2,.visit-grid h2,.about-grid h2 { font-size: var(--type-heading); }
  .cta-dark h2 { font-size: clamp(1.55rem,5vw,1.9rem); }
  .page-hero h1 { font-size: clamp(2rem,7vw,2.85rem); }
  .product-detail-copy h1 { font-size: clamp(1.9rem,6vw,2.7rem); }
}
@media (max-width: 440px) {
  :root { --type-display: clamp(2.1rem, 8.1vw, 2.55rem); }
  .hero-copy h1 { font-size: var(--type-display); }
  .category-card h3 { font-size: .85rem; }
  .product-name { font-size: .88rem; }
}
/* ======================================================================
   SENI BANGUNAN — Consistent desktop design (October 2026)
   Desktop/tablet only. The mobile website (<= 760px) is unchanged.
   This deliberately does NOT disable browser zoom or responsive reflow.
   ====================================================================== */
@media (min-width: 761px) {
  /* Restrict desktop content to one readable canvas rather than stretching
     across ultrawide or 4K monitors. Keep comfortable side gutters. */
  .container { width: min(1200px, calc(100% - 64px)); }

  /* The previous vw-based font-size clamps changed headline sizes between
     laptops and large desktop monitors. Use a stable type scale instead. */
  :root {
    --type-display: 3.125rem;
    --type-heading: 2.375rem;
  }
  h1 { font-size: var(--type-display); }
  h2 { font-size: var(--type-heading); }
  .hero-copy h1 {
    font-size: var(--type-display);
    line-height: 1.14;
    max-width: 15ch;
  }
  .section-head h2,
  .story-copy h2,
  .faq-heading h2,
  .visit-grid h2,
  .about-grid h2 { font-size: var(--type-heading); }
  .page-hero h1 { font-size: 3rem; }
  .product-detail-copy h1 { font-size: 2.75rem; }
  .cta-dark h2 { font-size: 2rem; }

  /* The same grid algorithm at every desktop width: 2/3/4 columns as
     available space permits, rather than a sudden 4-to-2-column jump. */
  .category-grid,
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
    gap: 20px;
  }

  /* Fixed inter-section rhythm. Keep the original mobile spacing. */
  .section { padding-block: 78px; }
  .hero-layout {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 48px;
    padding-block: 68px;
    min-height: 620px;
  }
  .hero-copy,
  .hero-media { min-width: 0; }
  .story-grid { gap: 52px; }
  .faq-grid { gap: 52px; }
  .footer-grid { column-gap: 34px; }
}

/* Intermediate desktop widths need less hero spacing, but retain the
   same typography and structure. This never applies to phones. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-layout { gap: 32px; }
  .story-grid,
  .faq-grid { gap: 34px; }
}

/* Storefront photo: show the actual SENI BANGUNAN shop signage. */
.hero-media > img { object-position:center top; }

/* SENI BANGUNAN · Premium retail header and CMS-driven search (2026-10-26)
   Scoped to the header. Hero, cards, content and Pages CMS are untouched. */
.sb-utility{background:linear-gradient(105deg,#061d3e,#06366a 54%,#082347);border-bottom:1px solid rgba(255,255,255,.09);color:#f0f6ff}
.sb-utility .container{width:min(1660px,calc(100% - 56px));max-width:none}
.sb-utility-inner{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.sb-utility-contact,.sb-utility-trust{display:flex;align-items:center;gap:21px;min-width:0}
.sb-utility-contact>span,.sb-utility-contact>a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.74rem;font-weight:600}
.sb-utility-contact svg,.sb-utility-trust svg{width:16px;height:16px;color:#ffda3d;flex-shrink:0}
.sb-utility-contact>a:hover{text-decoration:underline;text-underline-offset:3px}
.sb-utility-trust{margin-left:auto;gap:20px}
.sb-utility-trust>span{display:flex;align-items:center;gap:7px;font-size:.7rem;line-height:1.2;font-weight:700;white-space:nowrap}
.sb-utility-trust small{display:block;margin-top:3px;color:#b8cce5;font-size:.61rem;font-weight:500}
.sb-site-header{background:#fff;border-bottom:1px solid #e4edf5;box-shadow:0 8px 24px rgba(5,31,67,.05)}
.sb-site-header .container{width:min(1660px,calc(100% - 56px));max-width:none}
.sb-site-header .sb-header-content{height:98px;display:flex;align-items:center;gap:clamp(14px,1.35vw,25px);justify-content:space-between}
.sb-site-header .brand{flex:0 0 auto;gap:11px;margin-right:clamp(0px,.7vw,14px)}
.sb-site-header .brand-crest{width:58px;height:58px;flex-basis:58px;border-radius:50%}
.sb-site-header .brand-title{font-size:1.06rem}
.sb-site-header .brand-sub{font-size:.63rem;letter-spacing:.14em}
.sb-site-header .sb-main-nav{display:flex;align-items:center;gap:1px;min-width:0;margin-left:auto;flex-shrink:0}
.sb-site-header .sb-main-nav>a,.sb-site-header .sb-nav-products-link{padding:10px 9px;font-size:.86rem;white-space:nowrap}
.sb-site-header .sb-header-right{gap:10px;flex-shrink:0;margin-left:0}
.sb-site-header .sb-directions{background:#eff5ff;border:1px solid #d8e7f8;border-radius:13px;white-space:nowrap;gap:8px;color:#082b54;font-weight:800}
.sb-site-header .sb-directions:hover{background:#e7f1ff}
.sb-site-header .language-trigger{height:48px;min-height:48px;border-radius:14px;padding:0 12px;background:#fff}
.sb-nav-products{display:flex;align-items:center;position:relative}
.sb-nav-products-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 11px;background:transparent;border:0;border-radius:7px;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}
.sb-nav-products-trigger svg{flex:none}
.sb-nav-categories{position:absolute;z-index:55;top:calc(100% + 15px);left:-12px;width:295px;max-height:70vh;overflow:auto;background:white;border:1px solid #dbe6f2;box-shadow:0 20px 55px rgba(10,40,76,.16);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px}
.sb-nav-categories[hidden]{display:none!important}
.sb-nav-categories>strong{color:#758ca4;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;padding:8px 10px}
.sb-site-header .sb-nav-categories>a{padding:11px 12px;border-radius:9px;display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:normal;font-size:.83rem;color:#12345b}
.sb-site-header .sb-nav-categories>a:hover{background:#f1f6fc}
.sb-nav-categories small{color:#71869d;font-size:.69rem;font-weight:600;white-space:nowrap}
.sb-site-header .sb-nav-categories .sb-nav-all{color:#073c79;font-weight:800;border-top:1px solid #e7edf4;border-radius:0;margin-top:6px;padding-top:14px}
.sb-global-search{position:relative;display:flex;align-items:stretch;min-width:230px;flex:1 1 340px;max-width:530px;height:54px;padding:4px;background:#f3f7fc;border:1px solid #dbe7f3;border-radius:16px;box-shadow:inset 0 1px 3px rgba(7,39,75,.025)}
.sb-global-search:focus-within{background:#fff;border-color:#8cb6e4;box-shadow:0 0 0 3px rgba(80,151,232,.12)}
.sb-search-control{display:flex;align-items:center;flex:1 1 auto;gap:10px;min-width:0;padding:0 11px}
.sb-search-icon{display:flex;color:#335779;flex:0 0 auto}
.sb-global-search input[type="search"]{width:100%;min-width:0;flex:1 1 auto;border:0;outline:0;background:transparent;box-shadow:none;color:#102b4f;font-size:.85rem;font-weight:500;padding:0;margin:0;appearance:none}
.sb-global-search input[type="search"]::placeholder{color:#6d829b;opacity:1}
.sb-global-search input[type="search"]::-webkit-search-cancel-button{display:none}
.sb-search-clear{border:0;background:transparent;color:#44617d;font-size:1.4rem;font-weight:500;width:24px;height:32px;flex:0 0 24px;border-radius:6px;padding:0}
.sb-search-clear:hover{background:#e5eef8}
.sb-search-clear[hidden]{display:none!important}
.sb-search-submit{padding:0 21px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffe76b,#ffcf29);color:#091c38;font-weight:800;font-size:.84rem;box-shadow:0 2px 6px rgba(184,140,15,.12)}
.sb-search-submit:hover{background:#ffce21}
.sb-search-submit:focus-visible{outline:3px solid #2272d0;outline-offset:2px}
.sb-search-options{position:absolute;z-index:80;top:calc(100% + 9px);left:0;right:0;min-width:min(410px,90vw);max-height:min(480px,65vh);overflow:auto;list-style:none;margin:0;padding:8px;border:1px solid #dce7f2;border-radius:15px;background:#fff;box-shadow:0 18px 46px rgba(7,39,75,.19)}
.sb-search-options[hidden]{display:none!important}
.sb-search-option{display:flex;align-items:center;gap:12px;min-height:66px;padding:9px 10px;border-radius:10px;cursor:pointer;line-height:1.35;outline:none}
.sb-search-option:hover,.sb-search-option[aria-selected="true"]{background:#eef5ff}
.sb-search-option-media{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;background:#f1f6fb;border-radius:9px;overflow:hidden}
.sb-search-option-media img{width:100%;height:100%;object-fit:contain}
.sb-search-option-media svg{width:23px;height:23px;fill:none;stroke:#2870ac;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-search-option-detail{display:flex;flex-direction:column;gap:4px;min-width:0}
.sb-search-option-detail strong{font-weight:750;color:#0b315b;font-size:.83rem;white-space:normal}
.sb-search-option-detail small{font-size:.72rem;color:#698098;white-space:normal;line-height:1.3}
.sb-search-empty{padding:14px 12px;color:#627a95;font-size:.83rem}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sb-site-header .menu-toggle{border-radius:12px;background:#f4f8fd;border:1px solid #d6e4f2;color:#0a305a}
@media(max-width:1620px){
  .sb-utility-trust>span:nth-child(2){display:none}
  .sb-site-header .brand-title{font-size:.95rem}
  .sb-site-header .brand-sub{font-size:.55rem}
  .sb-site-header .brand-crest{width:50px;height:50px;flex-basis:50px}
  .sb-site-header .sb-main-nav>a,.sb-site-header .sb-nav-products-link{padding-inline:7px;font-size:.8rem}
  .sb-site-header .sb-directions{padding-inline:11px}
}
@media(max-width:1430px){
  .sb-site-header .sb-main-nav{display:none}
  .sb-site-header .menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 45px;width:45px;height:46px}
  /* Match the existing mobile drawer whenever the desktop navigation is hidden. */
  .sb-site-header .mobile-nav{
    position:absolute;top:100%;left:0;right:0;
    width:100%;padding:10px max(18px,calc((100% - 1200px)/2)) 18px;
    border-top:1px solid #e6edf5;background:#fff;box-shadow:0 18px 28px rgba(8,41,75,.12);
  }
  .sb-site-header .mobile-nav[hidden]{display:none}
  .sb-site-header .mobile-nav:not([hidden]){display:grid;gap:2px}
  .sb-site-header .mobile-nav a{display:block;padding:14px 16px;border:0;border-radius:9px;color:#28435f;font-size:.94rem;font-weight:750}
  .sb-site-header .mobile-nav a:hover,.sb-site-header .mobile-nav a[aria-current="page"]{background:#f0f6fd;color:#092e54}
  .sb-site-header .mobile-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 #f4c914}
  .sb-global-search{max-width:720px;flex-basis:400px}
  .sb-site-header .brand{flex:0 0 auto}
  .sb-site-header .sb-header-right{margin-left:auto}
}
@media(max-width:1080px){
  .sb-utility-trust{display:none}
  .sb-utility-inner{justify-content:center}
  .sb-site-header .sb-directions{display:none}
}
@media(max-width:760px){
  .sb-utility .container,.sb-site-header .container{width:min(100% - 32px,1600px)}
  .sb-utility-contact{justify-content:center;gap:12px}
  .sb-utility-contact>span,.sb-utility-contact>a{font-size:.65rem}
  .sb-utility-contact>a{display:none}
  .sb-utility-inner{min-height:35px}
  .sb-site-header .sb-header-content{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:10px 0 12px}
  .sb-site-header .brand{grid-column:1;grid-row:1;min-width:0}
  .sb-site-header .sb-header-right{grid-column:2;grid-row:1;margin-left:auto}
  .sb-site-header .brand-crest{width:44px;height:44px;flex-basis:44px}
  .sb-site-header .brand-title{font-size:.93rem}
  .sb-site-header .brand-sub{font-size:.5rem}
  .sb-global-search{grid-column:1/-1;grid-row:2;width:100%;max-width:none;height:49px;margin-top:12px;min-width:0}
  .sb-global-search input[type="search"]{font-size:.8rem}
  .sb-search-submit{padding:0 17px}
  .sb-site-header .language-trigger{height:43px;min-height:43px}
  .sb-site-header .mobile-nav{top:100%}
  .sb-search-options{min-width:0;max-height:55vh}
}
@media(max-width:390px){
  .sb-utility-contact>span:last-of-type{display:none}
  .sb-site-header .sb-header-content{column-gap:6px}
  .sb-site-header .brand-title{font-size:.78rem}
  .sb-site-header .brand-crest{width:39px;height:39px;flex-basis:39px}
  .sb-site-header .header-right{gap:4px}
  .sb-global-search input[type="search"]::placeholder{font-size:.73rem}
}
@media(prefers-reduced-motion:reduce){.sb-site-header *, .sb-utility *{transition:none!important;scroll-behavior:auto!important}}

/* SENI BANGUNAN | storefront-sign brand and functional Products menu.
   Only header branding and its category dropdown are affected. */
.sb-site-header .sb-sign-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  border-radius: 3px;
}
.sb-site-header .sb-sign-face {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 251px;
  height: 66px;
  padding: 0 8px 2px;
  border: 1px solid #b88b21;
  border-bottom: 3px solid #aa7917;
  border-radius: 2px;
  background: linear-gradient(175deg,#f8cf43 0%,#f1b923 100%);
  box-shadow: 0 3px 10px rgba(77,57,8,.13);
  color: #121714;
  font-family: Impact, 'Arial Narrow', 'Franklin Gothic Condensed', sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.014em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.sb-site-header .sb-sign-brand:hover .sb-sign-face {background: linear-gradient(175deg,#ffda56 0%,#f2bf2e 100%)}
.sb-site-header .sb-sign-brand:focus-visible {outline: 3px solid #286eb4;outline-offset: 5px}
.sb-site-header .sb-nav-products-trigger {
  transform: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background .18s ease,color .18s ease;
}
.sb-site-header .sb-nav-products-trigger svg {display:block;transition:transform .18s ease}
.sb-site-header .sb-nav-products-trigger[aria-expanded="true"] {background:rgba(255,221,69,.12);color:var(--sb-accent)}
.sb-site-header .sb-nav-products-trigger[aria-expanded="true"] svg {transform:rotate(180deg)}
.sb-site-header .sb-nav-products-trigger:focus-visible {outline:3px solid var(--sb-accent);outline-offset:3px}
/* Menu touches its trigger: no dead gap when moving the mouse from Products into categories. */
.sb-site-header .sb-nav-categories {top:100%;margin-top:0}
@media (max-width: 1550px) {
  .sb-site-header .sb-sign-face {width:225px;height:61px;font-size:27px}
}
@media (max-width: 760px) {
  .sb-site-header .sb-sign-face {width:185px;height:52px;font-size:22px}
}
@media (max-width: 390px) {
  .sb-site-header .sb-sign-face {width:153px;height:44px;font-size:18px;padding-inline:5px}
}


/* Product detail: transparent missing-photo state instead of an unrelated item image. */
.product-detail-placeholder{
  width:100%;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  background:#f2f6fa;
  /* Readable WCAG AA label contrast even when CMS uploads no product photo. */
  color:#40586e;
  text-align:center;
  padding:30px;
}
.product-detail-placeholder svg{stroke-width:1.3;color:#40586e}
.product-detail-placeholder span{font-size:.91rem;font-weight:700}
@media(max-width:760px){
  .product-detail-placeholder{min-height:300px}
}




/* SENI BANGUNAN — unified design system (all public pages).
   Semantic color roles; do not define a second theme later in this file.
   Status colors retain their independent meanings. */
:root{
 --sb-utility:#244a52;
 --sb-navigation:#102b3c;
 --sb-hero:#102b3c;
 --sb-hero-rgb:16,43,60;
 --sb-brand:var(--sb-navigation);
 --sb-brand-deep:var(--sb-hero);
 --sb-accent:#ffdd45;
 --sb-accent-hover:#ffec91;
 --sb-gold:var(--sb-accent);
 --sb-gold-deep:#8c6412;
 --sb-surface:#f2eee7;
 --sb-surface-raised:#ffffff;
 --sb-warm-surface:#f2eee7;
 --sb-trust-surface:#ffffff;
 --sb-trust-border:#e1e7ea;
 --sb-trust-muted:#536878;
 --sb-trust-icon-bg:#fff5dd;
 --sb-canvas:var(--sb-surface);
 --sb-ink:#203846;
 --sb-text:#586a72;
 --sb-muted:#445c68;
 --sb-ink-muted:#54718a;
 --sb-border:#dddcd6;
 --sb-divider:var(--sb-border);
 --sb-menu-hover:#eef5fb;
 --sb-menu-link:#075d9c;
 --sb-on-dark:#ffffff;
 --sb-on-dark-muted:#e3ebf1;
 --sb-radius:12px;
 --sb-radius-lg:18px;
 --sb-shadow-soft:0 5px 18px rgba(7,28,48,.055);
 --sb-shadow-hover:0 14px 34px rgba(7,28,48,.13);
 --sb-content:1320px;
 --navy:var(--sb-brand);
 --navy2:var(--sb-utility);
 --navy3:var(--sb-ink);
 --blue:var(--sb-menu-link);
 --blue-light:var(--sb-menu-hover);
 --paper:var(--sb-surface-raised);
 --ink:var(--sb-ink);
 --muted:var(--sb-muted);
 --line:var(--sb-border);
 --shadow:var(--sb-shadow-soft);
}
body{background:var(--sb-surface-raised);color:var(--sb-ink)}
.container{width:min(var(--sb-content),calc(100% - 64px))}
h1,h2,h3,h4{letter-spacing:-.045em}
.section{padding-block:clamp(64px,6vw,94px)}
.section-head{gap:clamp(18px,3vw,44px);margin-bottom:clamp(25px,3vw,37px)}
.section-head h2{font-size:clamp(2rem,3vw,3.15rem)}
.section-head p,.fine,.muted,.about-grid p,.privacy p,.product-detail-copy>p,.product-detail-info>div>span,.product-detail-info strong,.story-copy p,.visit-line p,.faq-heading p{color:var(--sb-text)}
.eyebrow,.page-hero .eyebrow{color:#796022;font-size:.71rem;letter-spacing:.12em}
.eyebrow::before{background:currentColor}
.text-link{color:var(--sb-menu-link);transition:color .18s ease}
.text-link:hover{color:var(--sb-ink)}
.button{border-radius:10px;font-weight:750;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.button-primary{background:var(--sb-accent);border-color:var(--sb-accent);color:var(--sb-hero);box-shadow:none}
.button-primary:hover{background:var(--sb-accent-hover);border-color:var(--sb-accent-hover);color:var(--sb-hero)}
.button-dark{background:var(--sb-navigation);border-color:var(--sb-navigation);color:var(--sb-on-dark)}
.button-dark:hover{background:var(--sb-utility);border-color:var(--sb-utility);color:var(--sb-on-dark)}
:focus-visible,.button:focus-visible,.text-link:focus-visible{outline:3px solid var(--sb-accent);outline-offset:3px}
/* A uniform branded header on home, catalog, product, about and contact pages. */
.sb-utility{background:var(--sb-utility);color:var(--sb-on-dark-muted);border-bottom:1px solid rgba(255,255,255,.09)}
.sb-utility .container,.sb-site-header .container{width:min(1420px,calc(100% - 72px));max-width:1420px}
.sb-utility-inner{min-height:34px}
.sb-utility-contact>span,.sb-utility-contact>a,.sb-utility-trust>span{font-size:.68rem;font-weight:600;letter-spacing:.015em}
.sb-utility-contact svg,.sb-utility-trust svg{color:var(--sb-accent)}
.sb-utility-trust small{color:#c2d1dc}
.sb-site-header{background:var(--sb-navigation);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 3px 16px rgba(2,15,27,.12)}
.sb-site-header .sb-header-content{height:86px;gap:clamp(12px,1.4vw,25px)}
.sb-site-header .sb-main-nav>a,.sb-site-header .sb-nav-products-link,.sb-site-header .sb-nav-products-trigger{color:var(--sb-on-dark);font-size:.82rem;letter-spacing:.015em;font-weight:750}
.sb-site-header .sb-main-nav>a:hover,.sb-site-header .sb-nav-products-link:hover,.sb-site-header .sb-nav-products-trigger:hover{color:var(--sb-accent)}
.sb-site-header .sb-global-search{height:47px;background:var(--sb-surface-raised);border:1px solid var(--sb-border);border-radius:9px;box-shadow:none}
.sb-global-search:focus-within{background:#fff;border-color:#90b6d2;box-shadow:0 0 0 2px #dceaf4}
.sb-global-search input[type="search"]::placeholder{color:#62788a}
.sb-site-header .sb-directions{background:#173b55;color:var(--sb-on-dark);border:1px solid #34566e;border-radius:9px;box-shadow:none;font-weight:750}
.sb-site-header .sb-directions:hover{background:#24516d;color:var(--sb-on-dark)}
.sb-site-header .language-trigger{border-radius:8px;background:var(--sb-surface-raised);color:var(--sb-ink)}
.sb-site-header .sb-nav-categories{background:var(--sb-surface-raised);color:var(--sb-ink);border:1px solid var(--sb-border);border-radius:10px;box-shadow:0 18px 38px rgba(7,28,48,.18)}
.sb-site-header .sb-nav-categories>strong{color:var(--sb-ink-muted)}
.sb-site-header .sb-main-nav .sb-nav-categories>a,.sb-site-header .sb-main-nav .sb-nav-categories>a:visited{color:var(--sb-ink)!important;background:transparent}
.sb-site-header .sb-main-nav .sb-nav-categories>a:hover,.sb-site-header .sb-main-nav .sb-nav-categories>a:focus-visible{background:var(--sb-menu-hover);color:var(--sb-hero)!important}
.sb-site-header .sb-nav-categories small{color:var(--sb-ink-muted)}
.sb-site-header .menu-toggle{background:#173b55;border:1px solid #34566e;color:#fff;border-radius:8px}
.sb-site-header .mobile-nav{background:var(--sb-surface-raised);box-shadow:0 18px 25px rgba(7,28,48,.15)}
.sb-site-header .mobile-nav a{color:var(--sb-ink)}
.sb-site-header .mobile-nav a:hover,.sb-site-header .mobile-nav a[aria-current="page"]{background:var(--sb-menu-hover);color:var(--sb-ink)}
/* One shared desktop header geometry, for homepage and every inner page. */
/* Change layout before translated controls run out of space; only the menu
   button remains at split-screen widths. Never mix desktop nav with hamburger. */
@media(min-width:1431px){
 .sb-site-header .sb-header-content{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.25vw,22px);height:auto;min-height:83px;padding-block:11px}
 .sb-site-header .sb-header-brand-search{display:flex;align-items:center;gap:clamp(12px,1.1vw,19px);flex:1 1 40%;min-width:0}
 .sb-site-header .sb-header-brand-search .sb-global-search{flex:1 1 auto;min-width:155px;max-width:none}
 .sb-site-header .sb-header-navigation{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1.05vw,17px);min-width:0}
 .sb-site-header .sb-main-nav{display:flex;align-items:center;gap:clamp(8px,.8vw,15px)}
 .sb-site-header .sb-header-right{display:flex;align-items:center;gap:10px}
}
@media(min-width:1101px) and (max-width:1430px){
 .sb-site-header .sb-header-content{display:flex;align-items:center;gap:16px;min-height:78px;height:auto;padding-block:10px}
 .sb-site-header .sb-header-brand-search{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:14px}
 .sb-site-header .sb-header-brand-search .sb-global-search{flex:1 1 260px;min-width:0;max-width:none}
 .sb-site-header .sb-header-navigation{display:flex;align-items:center;flex:none}
 .sb-site-header .sb-main-nav{display:none}
 .sb-site-header .sb-header-right{display:flex;align-items:center;gap:10px}
 .sb-site-header .menu-toggle{display:flex}
}
@media(max-width:1100px){
 .sb-site-header .sb-header-brand-search,.sb-site-header .sb-header-navigation{display:contents}
 .sb-site-header .sb-main-nav{display:none}
 .sb-site-header .sb-header-content{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:0 14px;height:auto;min-height:0;padding-block:12px
 }
 .sb-site-header .sb-sign-brand{grid-column:1;grid-row:1;justify-self:start}
 .sb-site-header .sb-header-right{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;margin-left:0}
 .sb-site-header .sb-directions{display:none}
 .sb-site-header .menu-toggle{display:flex}
 .sb-site-header .sb-global-search{
  grid-column:1/-1;grid-row:2;width:100%;max-width:none;min-width:0;
  margin-top:10px
 }
}
@media(max-width:760px){
 .sb-site-header .sb-header-content{grid-template-columns:minmax(0,1fr) auto}
 .sb-site-header .sb-global-search{grid-column:1/-1;grid-row:2}
}
@media(max-width:480px){
 .sb-site-header .language-trigger{padding-inline:8px;max-width:145px}
 .sb-site-header .sb-header-right{gap:6px}
}
/* The same high-contrast selected-page indicator on each route. */
.sb-site-header .sb-main-nav>a[aria-current="page"],
.sb-site-header .sb-main-nav .sb-nav-products-trigger[data-active-page="true"]{
 background:transparent;color:var(--sb-accent);border-color:transparent;
 box-shadow:inset 0 -2px 0 var(--sb-accent);border-radius:0
}
.sb-site-header .sb-main-nav .sb-nav-products-trigger[aria-expanded="true"]{color:var(--sb-accent)}
/* Explicitly override the legacy product-menu ink color on the dark header. */
.sb-site-header .sb-main-nav .sb-nav-products-trigger:not([data-active-page="true"]):not([aria-expanded="true"]){color:var(--sb-on-dark)}
.sb-site-header .sb-main-nav .sb-nav-products-link:hover,
.sb-site-header .sb-main-nav .sb-nav-products-trigger:hover{color:var(--sb-accent)}

/* One consistent directions action, never white on white. */
.sb-site-header .sb-directions{background:#173b55;border:1px solid #496376;color:#fff}
.sb-site-header .sb-directions:hover{background:#24516d;border-color:#638193;color:#fff}
/* Icon breadcrumb: labels stay accessible; intermediate destinations stay textual. */
.breadcrumbs,.sb-result-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.breadcrumbs .sb-breadcrumb-home,.sb-result-breadcrumb .sb-breadcrumb-home{
 display:inline-flex;align-items:center;justify-content:center;
 width:36px;height:36px;min-width:36px;border:1px solid currentColor;
 border-radius:8px;opacity:.9;text-decoration:none;vertical-align:middle
}
.breadcrumbs .sb-breadcrumb-home:hover,.sb-result-breadcrumb .sb-breadcrumb-home:hover{opacity:1;background:rgba(128,128,128,.11)}
.breadcrumbs .sb-breadcrumb-home:focus-visible,.sb-result-breadcrumb .sb-breadcrumb-home:focus-visible{outline:3px solid var(--sb-accent);outline-offset:3px}
.breadcrumbs .sb-breadcrumb-home svg,.sb-result-breadcrumb .sb-breadcrumb-home svg{width:18px;height:18px}
.sb-breadcrumbs-product{margin-bottom:30px;color:var(--sb-ink)}
.sb-breadcrumbs-product a{color:#31576a;text-decoration:none}
.sb-breadcrumbs-product a:hover{text-decoration:underline}
.sb-breadcrumbs-product [aria-current="page"]{font-weight:650;overflow-wrap:anywhere}

/* Light inner-page headings contrast with the dark site navigation. */
.page-hero{background:var(--sb-surface);color:var(--sb-ink);border-bottom:1px solid var(--sb-border);padding-block:clamp(62px,6vw,94px)}
.page-hero::after{display:none}
.page-hero h1{color:var(--sb-ink);font-size:clamp(2.65rem,4.1vw,4.4rem);line-height:1.1}
.page-hero p{color:var(--sb-text);max-width:62ch}
.page-hero .breadcrumbs,.page-hero .breadcrumbs a{color:var(--sb-ink-muted)}
.category-card,.product-card,.visit-panel,.contact-card{background:var(--sb-surface-raised);border:1px solid var(--sb-border);border-radius:var(--sb-radius);box-shadow:var(--sb-shadow-soft)}
.product-card:hover,.category-card:hover{transform:translateY(-2px);border-color:#b8cbd9;box-shadow:var(--sb-shadow-hover)}
.category-card p,.product-category{color:var(--sb-text)}
.category-card img,.product-media,.product-detail-media{background:var(--sb-surface);border-radius:var(--sb-radius)}
.product-media img{object-fit:contain}
.product-copy .product-name{color:var(--sb-ink)}
.product-detail{gap:clamp(25px,4vw,75px)}
.story,.homepage-story-section{background:var(--sb-surface)}
.story-stamp,.story-image img,.check,.visit-icon,.map-art{border-radius:var(--sb-radius)}
.check,.visit-icon{background:var(--sb-menu-hover);color:var(--sb-ink)}
.faq-list,.faq-list details{border-color:var(--sb-border)}
.faq-list summary{padding-block:26px;font-weight:700}
.faq-list details[open] summary,.faq-list summary::after{color:var(--sb-ink)}
.footer{background:var(--sb-hero);color:var(--sb-on-dark-muted);border-top:3px solid var(--sb-accent);padding-top:clamp(62px,6vw,95px)}
.footer-grid{gap:clamp(24px,4vw,60px)}
.footer-title{font-size:.81rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-on-dark)}
.footer-list,.footer-intro{color:#c2d1dc}
.footer-list a:hover{color:var(--sb-accent)}
.footer-bottom{border-top-color:#355067}
@media(max-width:900px){
 .sb-utility-trust{display:none}
 .sb-site-header .sb-header-content{height:75px}
}
@media(max-width:760px){
 .container,.sb-utility .container,.sb-site-header .container{width:calc(100% - 36px);max-width:none}
 .sb-site-header .sb-header-content{height:auto}
 .section{padding-block:clamp(52px,10vw,75px)}
 .section-head h2{font-size:clamp(2rem,7.5vw,2.7rem)}
 .page-hero{padding-block:54px}
 .page-hero h1{font-size:clamp(2.5rem,9vw,3.4rem)}
}
@media(prefers-reduced-motion:reduce){.button,.text-link{transition:none}}


/* Product detail recommendations: three compact, contextual category links.
   Kept separate from the homepage directory and the full catalogue grid. */
.product-related-section{background:var(--sb-warm-surface,#f2eee7);padding-block:clamp(38px,4.2vw,68px)}
.product-related-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.product-related-head .eyebrow{color:#876925}
.product-related-head h2{font-size:clamp(1.55rem,2.35vw,2.25rem);line-height:1.17;color:var(--sb-ink,#203846);margin:10px 0}
.product-related-head p{font-size:.92rem;color:var(--sb-text,#586a72);line-height:1.55}
.product-related-all{display:inline-flex;align-items:center;gap:8px;flex:none;font-weight:750;color:var(--sb-ink,#203846);text-underline-offset:4px;font-size:.88rem}
.product-related-all:hover{color:#a67720}
.product-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:15px}
.related-category-card{min-width:0;display:flex;align-items:center;gap:14px;padding:12px;
 min-height:110px;background:#fff;border:1px solid var(--sb-divider,#dddcd6);border-radius:12px;
 color:var(--sb-ink,#203846);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.related-category-card:hover{border-color:#b49a69;transform:translateY(-2px)}
.related-category-card:focus-visible,.product-related-all:focus-visible{outline:3px solid var(--sb-accent,#ffdd45);outline-offset:3px}
.related-category-image{display:grid;place-items:center;flex:none;width:92px;height:84px;overflow:hidden;background:#f2f4f3;border-radius:8px}
.related-category-image img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.related-category-title{font-weight:750;font-size:clamp(.86rem,1vw,1rem);line-height:1.35;flex:1;min-width:0}
.related-category-arrow{flex:none;color:var(--sb-ink,#203846)}
@media(max-width:900px){.product-related-grid{gap:10px}.related-category-card{gap:10px;padding:10px}.related-category-image{width:65px;height:70px}}
@media(max-width:700px){.product-related-head{align-items:start;flex-direction:column;gap:12px}.product-related-grid{grid-template-columns:1fr}.related-category-card{min-height:83px}.related-category-image{width:72px;height:64px}}
@media(prefers-reduced-motion:reduce){.related-category-card{transition:none}}