:root{
--ink:#1C1A17;
--ink-soft:#3A352F;
--bone:#F5F2EC;
--sand:#EDE7DC;
--stone:#DDD6CA;
--line:#CFC7B7;
--red:#B0202E;
--red-deep:#8E1623;
--clay:#7C5A3A;
--white:#FFFFFF;
--muted:#736B5E;
--shadow:0 18px 50px -22px rgba(28,26,23,.35);
--maxw:1240px;
--display:"Cormorant Garamond",Georgia,serif;
--sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);
background:var(--bone);
color:var(--ink);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
text-wrap:pretty; /* inherited: tidier line breaks / no orphans site-wide; ignored by unsupporting browsers */
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.eyebrow{
font-family:var(--sans);font-size:12px;font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:var(--red);
display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red)}
.eyebrow.center{justify-content:center}
.lead{font-size:18px;color:var(--ink-soft);max-width:60ch}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--sans);font-size:13px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
padding:15px 26px;border-radius:2px;cursor:pointer;
transition:.3s ease;border:1px solid transparent;
}
.btn .arr{transition:transform .3s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- specimen label (signature) ---------- */
.spec{
font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.spec span{position:relative;padding-left:14px}
.spec span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--red);transform:translateY(-50%)}
.spec span:first-child{padding-left:0}
.spec span:first-child::before{display:none}
/* ---------- header ---------- */
.topbar{background:var(--ink);color:#cfc7b7;font-size:12px;letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{transition:.2s}.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:22px;align-items:center}
.topbar .tb-r .sep{opacity:.4}
header{
position:sticky;top:0;z-index:60;
background:rgba(245,242,236,.0);
transition:background .35s ease,box-shadow .35s ease,border-color .35s;
border-bottom:1px solid transparent;
}
header.solid{background:rgba(245,242,236,.96);backdrop-filter:blur(10px);border-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:inline-flex;align-items:center;line-height:1}
.logo img{height:30px;width:auto;display:block}
header.on-hero:not(.solid) .menu>li>a{color:#fff}
header.on-hero:not(.solid) .logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
header.on-hero:not(.solid) .burger span{background:#fff}
.menu{display:flex;list-style:none;gap:30px;align-items:center}
.menu>li{position:relative}
.menu>li>a{
font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);
display:flex;align-items:center;gap:5px;padding:28px 0;transition:color .2s;
}
.menu>li>a:hover{color:var(--red)}
.menu>li>a .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6}
.dropdown{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
background:#fff;border:1px solid var(--line);border-radius:4px;
min-width:230px;padding:10px;box-shadow:var(--shadow);
opacity:0;visibility:hidden;transition:.25s ease;
}
.menu>li:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{display:block;padding:10px 14px;font-size:13.5px;color:var(--ink-soft);border-radius:3px;transition:.2s}
.dropdown a:hover{background:var(--sand);color:var(--red);padding-left:18px}
.nav-cta{display:flex;align-items:center;gap:16px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--bone);transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);overflow-y:auto;padding:26px}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.drawer-top .logo img{height:30px}
.drawer .x{background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.drawer details{border-bottom:1px solid rgba(255,255,255,.12)}
.drawer summary{font-family:var(--display);font-size:24px;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary .pl{color:var(--red);font-family:var(--sans);font-size:24px}
.drawer details a,.drawer>a{display:block;color:#cfc7b7;font-size:15px;padding:9px 0 9px 4px}
.drawer details a:last-child{padding-bottom:18px}
.drawer>a{font-family:var(--display);font-size:24px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding:16px 0}
/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff;margin-top:-78px;padding-top:78px}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#2a2622}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hslide.active{opacity:1}
.hslide img{width:100%;height:100%;object-fit:cover;opacity:.92;transform:scale(1.04);transition:transform 7s ease}
.hslide.active img{transform:scale(1.12)}
.hero-dots{position:absolute;left:0;bottom:30px;z-index:3;width:100%}
.hero-dots .wrap{display:flex;gap:11px}
.hero-dots button{width:34px;height:3px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.35);transition:.3s;border-radius:2px}
.hero-dots button.active{background:#fff;width:50px}
.hero-grad{position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(20,18,16,.78) 0%,rgba(20,18,16,.5) 34%,rgba(20,18,16,.12) 60%,rgba(20,18,16,0) 100%),
linear-gradient(0deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,0) 40%)}
.hero .wrap{width:100%;padding-bottom:74px;padding-top:60px}
.hero .eyebrow{color:#fff}.hero .eyebrow::before{background:#fff}
.hero h1{font-size:clamp(46px,7vw,88px);max-width:16ch;margin:20px 0 0;font-weight:500}
.hero h1 em{font-style:italic;color:#fff}
.hero p{max-width:46ch;font-size:18px;color:rgba(255,255,255,.86);margin-top:22px}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-spec{margin-top:46px;color:rgba(255,255,255,.7)}
.hero-spec span::before{background:#fff}
.scroll-cue{position:absolute;right:34px;bottom:40px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:14px}
.scroll-cue::after{content:"";width:1px;height:46px;background:rgba(255,255,255,.5)}
@media(max-width:760px){.scroll-cue{display:none}}
/* ---------- trust marquee ---------- */
.trust{background:var(--ink);color:#cfc7b7;border-top:1px solid rgba(255,255,255,.08)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.trust .item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:36px 18px;position:relative}
.trust .item+.item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:48px;background:rgba(255,255,255,.14)}
.trust .item b{font-family:"Cormorant Garamond",Georgia,serif;color:#fff;font-size:clamp(28px,3vw,36px);font-weight:600;line-height:1;letter-spacing:.01em}
.trust .item small{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:600}
/* ---------- section base ---------- */
section{position:relative}
.sec{padding:104px 0}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(31px,4vw,46px);margin:18px 0 0;font-weight:500}
.sec-head h2 em{font-style:italic}
/* ---------- story ---------- */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.story-copy p{color:var(--ink-soft);margin-top:18px;font-size:16.5px}
.story-quote{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.3;color:var(--ink);border-left:2px solid var(--red);padding-left:22px;margin:30px 0}
.story-img{position:relative}
.story-img img{width:100%;height:560px;object-fit:cover;border-radius:4px;background:var(--stone)}
.story-badge{position:absolute;left:-26px;bottom:34px;background:var(--bone);border:1px solid var(--line);padding:20px 26px;border-radius:4px;box-shadow:var(--shadow);text-align:center}
.story-badge b{font-family:var(--display);font-size:42px;font-weight:600;display:block;line-height:1;color:var(--red);margin-bottom:16px}
.story-badge small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
/* ---------- collections ---------- */
.coll{background:var(--sand)}
.coll-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:42px}
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.tabs button{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:13px 26px;background:none;border:0;cursor:pointer;color:var(--muted);transition:.25s}
.tabs button.active{background:var(--ink);color:#fff}
.tagline{font-family:var(--display);font-style:italic;font-size:20px;color:var(--muted);margin-bottom:30px}
.coll-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.swatch{position:relative;display:block;border-radius:4px;overflow:hidden;background:var(--stone);aspect-ratio:3/4}
.swatch img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.swatch:hover img{transform:scale(1.07)}
.swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.82) 0%,rgba(20,18,16,.3) 42%,rgba(20,18,16,0) 72%)}
.swatch .cap{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff}
.swatch .cap b{font-family:var(--display);font-size:23px;font-weight:500;display:block;line-height:1.1}
.swatch .cap small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.coll-foot{display:flex;justify-content:center;margin-top:46px}
/* ---------- whats new ---------- */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;margin-bottom:46px}
.feature .f-img{position:relative;min-height:420px;background:var(--stone)}
.feature .f-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .f-tag{position:absolute;top:18px;left:18px;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:2px}
.feature .f-copy{padding:52px 50px}
.feature h3{font-size:clamp(26px,3vw,38px);margin:16px 0 0;font-weight:500}
.feature p{color:var(--ink-soft);margin:18px 0 26px;font-size:16px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ncard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:.35s}
.ncard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--stone)}
.ncard .n-img{height:230px;background:var(--stone);overflow:hidden}
.ncard .n-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.ncard:hover .n-img img{transform:scale(1.06)}
.ncard .n-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.ncard h3{font-size:23px;margin-bottom:10px;line-height:1.15}
.ncard p{font-size:14.5px;color:var(--muted);flex:1}
.ncard .more{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;gap:8px}
.ncard:hover .more .arr{transform:translateX(4px)}.ncard .more .arr{transition:.3s}
/* ---------- innovation band ---------- */
.inno{background:var(--ink);color:var(--bone);overflow:hidden}
.inno-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.inno-img{min-height:480px;position:relative;background:#2a2622}
.inno-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.inno-copy{padding:96px 70px}
.inno-copy h2{font-size:clamp(30px,3.6vw,44px);margin:18px 0 20px;color:#fff;font-weight:500}
.inno-copy p{color:rgba(245,242,236,.78);font-size:16.5px;max-width:46ch}
.inno-list{list-style:none;margin:30px 0 34px;display:grid;gap:14px}
.inno-list li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:rgba(245,242,236,.9)}
.inno-list li svg{flex:none;margin-top:3px}
/* ---------- projects ---------- */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pcard{position:relative;border-radius:6px;overflow:hidden;background:var(--stone);min-height:440px;display:flex;align-items:flex-end;color:#fff}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.4) 42%,rgba(20,18,16,0) 80%)}
.pcard .p-in{position:relative;z-index:2;padding:38px}
.pcard .p-in h3{font-size:28px;color:#fff;font-weight:500;margin:10px 0 8px}
.pcard .p-in p{font-size:14px;color:rgba(255,255,255,.82);max-width:42ch;margin-bottom:16px}
.pcard .p-in .more{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;display:inline-flex;gap:8px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px}
/* ---------- sustainability ---------- */
.sus{background:var(--clay);color:#fff;background:linear-gradient(160deg,#6f5236,#4a3522)}
.sus-head{text-align:center;max-width:60ch;margin:0 auto 56px}
.sus-head h2{font-size:clamp(30px,4vw,46px);color:#fff;margin:18px 0 14px;font-weight:500}
.sus-head .eyebrow{color:#fff;justify-content:center}.sus-head .eyebrow::before{background:#fff}
.sus-head p{color:rgba(255,255,255,.82)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.pillar{text-align:center;padding:0 8px}
.pillar .ic{width:64px;height:64px;margin:0 auto 20px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pillar h3{font-size:20px;color:#fff;margin-bottom:10px;font-weight:500}
.pillar p{font-size:14px;color:rgba(255,255,255,.78)}
.sus-foot{display:flex;justify-content:center;margin-top:54px}
/* ---------- visualiser CTA ---------- */
.viz{padding:0;background:#1a1714}
.viz-in{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;min-height:460px}
.viz-in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.viz-in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.85),rgba(20,18,16,.3) 70%)}
.viz-in .wrap{position:relative;z-index:2;width:100%}
.viz-copy{max-width:600px;padding:60px 0}
.viz-copy .eyebrow{color:#fff}
.viz-copy .eyebrow::before{background:#fff}
.viz-copy h2{font-size:clamp(28px,3.6vw,42px);color:#fff;font-weight:500;margin:16px 0 16px}
.viz-copy p{color:rgba(255,255,255,.85);margin-bottom:28px;max-width:44ch}
/* ---------- newsletter ---------- */
.news{background:var(--ink);color:var(--bone)}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.news h2{font-size:clamp(28px,3.4vw,40px);color:#fff;font-weight:500}
.news p{color:rgba(245,242,236,.72);margin-top:14px;max-width:46ch}
.news-form{display:flex;gap:12px;flex-wrap:wrap}
.news-form input{flex:1;min-width:220px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:16px 18px;border-radius:3px;font-family:var(--sans);font-size:15px}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-form input:focus{outline:none;border-color:#fff}
.news small{display:block;margin-top:14px;font-size:12px;color:rgba(245,242,236,.5)}
/* ---------- footer ---------- */
footer{background:#15130F;color:#b7afa1;padding:74px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-brand .logo{margin-bottom:20px;display:inline-block}.f-brand .logo img{height:30px}
.f-brand p{font-size:13.5px;line-height:1.8}
.f-brand .reg{font-size:12px;opacity:.6;margin-top:10px}
footer h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:20px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{font-size:14px;transition:.2s}footer ul a:hover{color:#fff;padding-left:4px}
.f-contact p{font-size:14px;line-height:1.9}
.f-contact a:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.f-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:24px 0 30px;font-size:12.5px;opacity:.7}
.f-bot a:hover{color:#fff}
/* footer — native Elementor widget rebuild (containers reuse .f-* classes) */
.kimgres-footer-tpl .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
.kimgres-footer-tpl .f-brand>*{width:100%}
.kimgres-footer-tpl .f-logo img{height:30px;width:auto;display:inline-block}
.kimgres-footer-tpl .f-logo{margin-bottom:18px}
.kimgres-footer-tpl .f-desc p{margin:0}
.kimgres-footer-tpl .f-reg p{font-size:12px;opacity:.6;margin:10px 0 0}
.kimgres-footer-tpl .f-links .elementor-icon-list-icon{display:none}
.kimgres-footer-tpl .f-links .elementor-icon-list-items{display:grid;gap:11px;padding:0;margin:0}
.kimgres-footer-tpl .f-links .elementor-icon-list-item{padding:0;margin:0;border:0}
.kimgres-footer-tpl .f-links .elementor-icon-list-item>a{padding:0}
.kimgres-footer-tpl .f-links .elementor-icon-list-text{font-size:14px;color:#b7afa1;transition:.2s}
.kimgres-footer-tpl .f-links .elementor-icon-list-item:hover .elementor-icon-list-text{color:#fff;padding-left:4px}
.kimgres-footer-tpl .f-cinfo p{font-size:14px;line-height:1.9;margin:0}
.kimgres-footer-tpl .f-cinfo a{color:#b7afa1}
.kimgres-footer-tpl .f-cinfo a:hover{color:#fff}
.kimgres-footer-tpl .socials{margin-top:22px}
.kimgres-footer-tpl .socials .elementor-social-icons-wrapper{display:flex;gap:12px}
.kimgres-footer-tpl .socials .elementor-social-icon{width:40px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#b7afa1;transition:.25s}
.kimgres-footer-tpl .socials .elementor-social-icon:hover{background:var(--red);border-color:var(--red);color:#fff}
.kimgres-footer-tpl .socials .elementor-social-icon i{color:inherit;font-size:15px}
.kimgres-footer-tpl .f-wabtn{margin-top:18px}
.kimgres-footer-tpl .f-wabtn .elementor-button{background:var(--red);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border-radius:2px}
.kimgres-footer-tpl .f-wabtn .elementor-button:hover{background:var(--red-deep)}
.kimgres-footer-tpl .f-bot p{margin:0}
.kimgres-footer-tpl .f-bot a{color:#b7afa1}
/* ---------- WooCommerce single product (two-column, local style) ---------- */
/* No dark hero on product pages -> force the header into its solid/dark state so the nav is readable on the light background */
body.single-product .kimgres-header-tpl{background:rgba(245,242,236,.96)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
body.single-product .kimgres-header-tpl .kg-nav .elementor-item,
body.single-product .kimgres-header-tpl .kg-nav .elementor-item:focus,
body.single-product .kimgres-header-tpl .kg-nav .elementor-item:hover{color:var(--ink)!important;opacity:1}
body.single-product .kimgres-header-tpl .kg-nav .sub-arrow svg{fill:var(--ink)!important}
body.single-product .kimgres-header-tpl .kg-nav .elementor-menu-toggle{color:var(--ink)!important}
.kg-prod-single{background:var(--bone)}
.kg-prod-single .wrap{max-width:var(--maxw);margin:0 auto;padding:150px 28px 40px}
.kg-prod-row{display:flex;flex-direction:row;gap:48px;align-items:flex-start}
.kg-prod-media{flex:0 0 55%;max-width:55%;min-width:0}
.kg-prod-info{flex:1 1 45%;min-width:0}
.kg-prod-info .eyebrow{margin-bottom:14px}
.kg-prod-info .elementor-widget-theme-post-title .elementor-heading-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.05;color:var(--ink);margin:0}
.kg-prod-info .sp-tagline{color:var(--muted);margin:6px 0 0}
.kg-prod-info .kg-prod-cta{margin:26px 0 6px}
.kg-prod-info .kg-prod-specs{margin-top:30px}
.kg-prod-info .kg-prod-specs h2{display:none}
.kg-prod-info .kg-spec-row{grid-template-columns:130px 1fr;padding:11px 2px}
/* Woo native gallery tidy + capped height so tall photos don't dominate */
.kg-prod-media .woocommerce-product-gallery{margin:0!important;width:100%!important}
.kg-prod-media .woocommerce-product-gallery__wrapper{margin:0}
.kg-prod-media .flex-viewport{height:auto!important}
.kg-prod-media .woocommerce-product-gallery__image{height:auto!important}
.kg-prod-media .woocommerce-product-gallery__image img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;object-position:center 62%;width:100%!important;height:auto!important;display:block}
.kg-prod-media .flex-control-thumbs{display:flex;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.kg-prod-media .flex-control-thumbs li{width:88px}
.kg-prod-media .flex-control-thumbs img{border-radius:5px;opacity:.7;cursor:pointer;border:2px solid transparent}
.kg-prod-media .flex-control-thumbs .flex-active,.kg-prod-media .flex-control-thumbs img:hover{opacity:1;border-color:var(--red)}
/* colour swatch chip */
.kg-prod-swatch{display:flex;align-items:center;gap:16px;margin-top:22px}
.kg-prod-swatch .kg-sw-img{width:84px;height:84px;border-radius:6px;overflow:hidden;border:1px solid var(--line);flex:none}
.kg-prod-swatch .kg-sw-img img{width:100%;height:100%;object-fit:cover;display:block}
.kg-prod-swatch .kg-sw-meta{display:flex;flex-direction:column;gap:4px}
.kg-prod-swatch .kg-sw-name{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink)}
.kg-prod-swatch .kg-sw-sku{font-size:12.5px;color:var(--muted);letter-spacing:.05em}
/* Align the colour swatch row to the same 2-column grid as the spec rows
(130px label column + value column) so the thumbnail sits under the labels
and the name/SKU line up with the spec values above it. */
.kg-prod-info .kg-prod-swatch{display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:center;padding:0 2px}
.kg-prod-info .kg-prod-swatch .kg-sw-img{width:100%;height:92px}
/* Match the spec rows' tighter mobile gap so the name/SKU line up exactly */
@media(max-width:600px){.kg-prod-info .kg-prod-swatch{gap:4px}}
/* .kg-prod-desc sits inside .wrap (which already pads 28px), so its own
horizontal padding double-insets the description. Drop it so the text lines
up with the specs, swatch and section headings. */
.kg-prod-desc{max-width:var(--maxw);margin:10px auto 0;padding:0 2px}
.kg-prod-desc .elementor-widget-theme-post-content{font-size:16px;line-height:1.85;color:var(--ink-soft);max-width:820px}
@media(max-width:900px){.kg-prod-single .wrap{padding-top:140px}.kg-prod-row{flex-direction:column;gap:28px}.kg-prod-media{flex-basis:100%;max-width:100%}}
/* ---------- single product page ---------- */
.sp-hero .eyebrow{color:#fff;justify-content:flex-start}
.sp-hero .eyebrow::before{background:var(--red)}
.sp-tagline{font-family:var(--display);font-style:italic;font-size:clamp(18px,2.4vw,24px);color:rgba(255,255,255,.9);margin-top:8px;max-width:34ch}
.kg-prod-cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 6px}
.kg-prod-cta .btn{cursor:pointer}
.kg-prod-specs{margin:40px 0 8px}
.kg-prod-specs h2{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:500;margin:0 0 18px;color:var(--ink)}
.kg-spec-list{border-top:1px solid var(--line)}
.kg-spec-row{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:14px 2px;border-bottom:1px solid var(--line)}
.kg-spec-row dt{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.kg-spec-row dd{margin:0;font-size:15.5px;color:var(--ink)}
/* product photo carousel */
.kg-gallery{margin:0 0 40px}
.kg-gal-stage{position:relative;border-radius:8px;overflow:hidden;background:var(--stone);aspect-ratio:16/11}
.kg-gal-slides{width:100%;height:100%}
.kg-gal-slide{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none}
.kg-gal-slide.is-active{opacity:1;pointer-events:auto}
.kg-gal-slide img{width:100%;height:100%;object-fit:cover;display:block}
.kg-gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,18,16,.5);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.kg-gal-nav:hover{background:var(--red)}
.kg-gal-prev{left:16px}.kg-gal-next{right:16px}
.kg-gal-thumbs{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.kg-gal-thumb{width:88px;height:64px;padding:0;border:2px solid transparent;border-radius:5px;overflow:hidden;cursor:pointer;background:var(--stone);opacity:.7;transition:.2s}
.kg-gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kg-gal-thumb.is-active{border-color:var(--red);opacity:1}
.kg-gal-thumb:hover{opacity:1}
@media(max-width:600px){.kg-gal-thumb{width:64px;height:48px}.kg-gal-nav{width:38px;height:38px;font-size:20px}}
.kg-prod-related{background:var(--sand);padding:72px 0}
.kg-prod-related:not(:has(.kg-post-card)){display:none}
@media(max-width:600px){.kg-spec-row{grid-template-columns:1fr;gap:4px}.kg-prod-gallery{grid-template-columns:1fr}}
/* ---------- whatsapp float ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:.3s}
.wa:hover{transform:scale(1.08)}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media(max-width:1080px){
.coll-grid{grid-template-columns:repeat(3,1fr)}
.story-grid{gap:42px}
}
@media(max-width:900px){
.menu,.nav-cta .btn{display:none}
.burger{display:flex}
.story-grid,.feature,.inno-grid,.proj-grid,.news-grid{grid-template-columns:1fr}
.feature .f-img{min-height:300px}
.inno-copy,.feature .f-copy{padding:54px 34px}
.pillars{grid-template-columns:repeat(2,1fr);gap:36px 24px}
.cards3{grid-template-columns:1fr}
.story-badge{left:18px}
}
@media(max-width:620px){
.wrap{padding:0 20px}
.sec{padding:72px 0}
.coll-grid{grid-template-columns:repeat(2,1fr)}
.trust .wrap{grid-template-columns:repeat(2,1fr)}
.trust .item{padding:26px 12px}
.trust .item:nth-child(odd)::before{display:none}
.trust .item:nth-child(n+3)::after{content:"";position:absolute;top:0;left:16%;width:68%;height:1px;background:rgba(255,255,255,.12)}
.topbar .tb-l{display:none}
.f-grid{grid-template-columns:1fr 1fr;gap:34px}
.hero{min-height:88vh}
}
@media (prefers-reduced-motion: reduce){
*{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}
/* ---------- page hero (inner banner) ---------- */
.page-hero{position:relative;min-height:48vh;display:flex;align-items:flex-end;color:#fff;margin-top:-78px;padding-top:78px;background:#2a2622;overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.45) 55%,rgba(20,18,16,.4) 100%)}
.page-hero .wrap{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:58px}
.page-hero .eyebrow{color:#fff}.page-hero .eyebrow::before{background:#fff}
.page-hero h1{font-size:clamp(38px,5.4vw,66px);font-weight:500;margin-top:16px;max-width:20ch}
.page-hero p{max-width:54ch;color:rgba(255,255,255,.85);font-size:17px;margin-top:16px}
.crumb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:#fff}.crumb .sep{opacity:.5}.crumb .cur{color:#fff}
/* ---------- generic content ---------- */
.prose{max-width:74ch}
.prose p{color:var(--ink-soft);font-size:16.5px;margin-top:16px}
.prose p:first-child{margin-top:0}
.bigp p{font-size:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .s-img{width:100%;height:500px;object-fit:cover;border-radius:4px;background:var(--stone)}
.split h2{font-size:clamp(28px,3.6vw,42px);font-weight:500;margin-bottom:6px}
.value-list{list-style:none;display:grid;gap:13px;margin-top:24px}
.value-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink-soft)}
.value-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:9px}
.band{background:var(--sand)}
.band-dark{background:var(--ink);color:var(--bone)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:rgba(245,242,236,.8)}
.center-head{max-width:64ch;margin:0 auto 54px;text-align:center}
.center-head .eyebrow{justify-content:center}
.center-head h2{font-size:clamp(30px,4vw,46px);margin:16px 0 12px;font-weight:500}
/* ---------- 4-up mission ---------- */
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:34px 32px}
.band-dark .qcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.qcard h3{font-size:21px;font-weight:500;margin-bottom:10px}
.qcard p{font-size:15px;color:var(--muted)}
.band-dark .qcard p{color:rgba(245,242,236,.72)}
/* ---------- timeline ---------- */
.timeline{position:relative;max-width:840px;margin:0 auto;padding-left:38px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl{position:relative;padding-bottom:40px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-38px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--red);border:3px solid var(--bone);box-shadow:0 0 0 1px var(--line)}
.tl b{font-family:var(--display);font-size:26px;color:var(--red);display:block;line-height:1}
.tl h3{font-size:20px;margin:8px 0 6px;font-weight:500}
.tl p{color:var(--ink-soft);font-size:15.5px;max-width:60ch}
/* ---------- certifications ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cert{background:#fff;border:1px solid var(--line);border-radius:6px;padding:42px 30px;text-align:center}
.cert .badge{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--red)}
.cert h3{font-size:20px;font-weight:500;margin-bottom:10px}
.cert p{color:var(--muted);font-size:14.5px}
/* ---------- faq ---------- */
.faqcat h2{font-size:clamp(22px,2.6vw,30px);font-weight:500;margin:46px 0 10px}
.faqcat:first-of-type h2{margin-top:0}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:20px 0;font-size:16.5px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{color:var(--red);font-size:24px;flex:none;line-height:1;transition:transform .3s}
.faq[open] summary .pl{transform:rotate(45deg)}
.faq .ans{padding:0 0 24px;color:var(--ink-soft);font-size:15.5px;max-width:80ch}
.faq .ans ul{margin:10px 0 0 20px;display:grid;gap:8px}
/* ---------- locations ---------- */
.loc-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:42px}
.loc-tabs button{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:11px 22px;border:1px solid var(--line);background:#fff;border-radius:2px;cursor:pointer;color:var(--muted);transition:.25s}
.loc-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.loc{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px;display:flex;flex-direction:column}
.loc .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px}
.loc h3{font-size:15.5px;font-weight:600;font-family:var(--sans);line-height:1.5;margin-bottom:14px}
.loc p{font-size:13.5px;color:var(--ink-soft);margin-bottom:4px}
.loc .hours{font-size:12.5px;color:var(--muted);margin:10px 0;line-height:1.7}
.loc .links{margin-top:auto;display:flex;gap:16px;padding-top:16px;border-top:1px solid var(--sand)}
.loc .links a{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.field input,.field textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cinfo{background:var(--ink);color:var(--bone);border-radius:6px;padding:42px 38px}
.cinfo h3{color:#fff;font-size:24px;font-weight:500;margin-bottom:18px}
.cinfo p{color:rgba(245,242,236,.8);font-size:15px;line-height:1.9}
.cinfo a:hover{color:#fff}
.cinfo .blk{padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}
.cinfo .blk small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.55);display:block;margin-bottom:6px}
/* ---------- projects list ---------- */
.filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:42px}
.filter button{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:11px 24px;border:1px solid var(--line);background:#fff;border-radius:2px;cursor:pointer;color:var(--muted);transition:.25s}
.filter button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plcard{position:relative;border-radius:6px;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;color:#fff;background:var(--stone)}
.plcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.plcard:hover img{transform:scale(1.06)}
.plcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.2) 65%,rgba(20,18,16,0) 100%)}
.plcard .pl-in{position:relative;z-index:2;padding:26px}
.plcard h3{font-size:21px;color:#fff;font-weight:500;margin-bottom:10px;line-height:1.15}
.plcard .meta{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.8}
.plcard .meta b{color:#fff;font-weight:600}
.plcard .badge{position:absolute;top:16px;left:16px;z-index:3;background:rgba(20,18,16,.62);backdrop-filter:blur(4px);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:2px}
/* ---------- product (core collection) banner page ---------- */
.embed-note{background:#fff;border:1px dashed var(--line);border-radius:6px;padding:30px 32px;color:var(--muted);font-size:14.5px;text-align:center;max-width:760px;margin:0 auto}
.embed-note b{color:var(--ink-soft)}
/* ---------- misc ---------- */
.center-foot{display:flex;justify-content:center;margin-top:52px}
@media(max-width:980px){
.split{grid-template-columns:1fr;gap:34px}
.split .s-img{height:360px;order:-1}
.cert-grid,.loc-grid,.proj-list{grid-template-columns:repeat(2,1fr)}
.contact-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:640px){
.quad,.cert-grid,.loc-grid,.proj-list,.row2{grid-template-columns:1fr}
.page-hero{min-height:42vh}
.timeline{padding-left:30px}.tl::before{left:-30px}
}
/* Some HTML-widget sections hard-code grid-template-columns as an inline style,
which beats the class-based mobile rules above. Force card grids to collapse
on tablet/phone so they never overflow or cram (What's New .quad, Bespoke .cards3). */
@media(max-width:900px){
.quad,.cards3{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:600px){
.quad,.cards3{grid-template-columns:1fr !important}
}
/* header breathing room + remove crowding */
.nav{height:84px}
.menu{gap:27px}
.menu>li>a{font-size:13px;padding:30px 0}
@media(max-width:1180px){ .menu{gap:20px} .menu>li>a{font-size:12.5px} }
/* content video */
.media-video{position:relative;width:100%;border-radius:6px;overflow:hidden;background:#1a1714;aspect-ratio:16/9}
.media-video video{width:100%;height:100%;object-fit:cover;display:block}
.media-tall{aspect-ratio:4/5}
/* flip cards */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.flip{position:relative;height:360px;border-radius:6px;perspective:1300px;cursor:pointer}
.flip-in{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
@media (hover:hover){.flip:hover .flip-in{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.flip-front img,.flip-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.flip-front::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,18,16,.85),rgba(20,18,16,.2))}
.flip-back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
.flip-back::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(20,18,16,.86)}
.flip-front h3{position:relative;z-index:2;color:#fff;font-size:22px;font-weight:500}
.flip-front .hint{position:relative;z-index:2;color:rgba(255,255,255,.72);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px}
.flip-back .t{position:relative;z-index:2}
.flip-back h3{color:#fff;font-size:19px;font-weight:500;margin-bottom:10px}
.flip-back p{color:rgba(255,255,255,.85);font-size:13.5px;line-height:1.62}
/* inspiration gallery (masonry) */
.gallery{columns:4;column-gap:16px}
.gitem{break-inside:avoid;margin-bottom:16px;border-radius:5px;overflow:hidden;position:relative;display:block;background:var(--stone)}
.gitem img{width:100%;display:block;transition:transform .6s}
.gitem:hover img{transform:scale(1.05)}
.gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;color:#fff;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(0deg,rgba(20,18,16,.82),transparent);opacity:0;transition:.3s}
.gitem:hover .cap{opacity:1}
/* certificate gallery */
.cert-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cert-doc{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.cert-doc:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--stone)}
.cert-doc .imgwrap{background:var(--sand);padding:18px;display:flex;align-items:center;justify-content:center;min-height:230px}
.cert-doc img{max-width:100%;max-height:260px;object-fit:contain;box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
.cert-doc .cap{padding:15px 18px;font-size:12.5px;font-weight:600;color:var(--ink-soft);border-top:1px solid var(--sand)}
/* openings */
.openings{display:grid;gap:16px;max-width:920px;margin:0 auto}
.job{border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
.job summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px}
.job summary::-webkit-details-marker{display:none}
.job .jt{font-family:var(--display);font-size:24px;font-weight:500;line-height:1.1}
.job .jl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;margin-top:6px}
.job summary .pl{color:var(--red);font-size:26px;flex:none;transition:.3s;line-height:1}
.job[open] summary .pl{transform:rotate(45deg)}
.job .jbody{padding:4px 28px 28px;border-top:1px solid var(--sand)}
.job .jbody h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:20px 0 10px;font-weight:700}
.job .jbody ul{margin:0 0 0 18px;display:grid;gap:8px;color:var(--ink-soft);font-size:14.5px}
/* map in location card */
.loc .map{margin:-28px -28px 18px;height:180px;background:var(--stone);border-bottom:1px solid var(--line)}
.loc .map iframe{width:100%;height:100%;border:0;display:block}
/* slideshow */
.slideshow{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:#1a1714}
.ss{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.ss.active{opacity:1}
.ss img{width:100%;height:100%;object-fit:cover}
.ss-dots{position:absolute;left:0;bottom:16px;width:100%;display:flex;gap:8px;justify-content:center;z-index:3}
.ss-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.ss-dots button.active{background:#fff}
/* case study */
.cs{max-width:840px;margin:0 auto}
.cs .lead-it{font-family:var(--display);font-style:italic;font-size:20px;color:var(--ink);margin-bottom:6px}
.cs .stat-row{display:flex;gap:34px;flex-wrap:wrap;margin:24px 0 8px;padding:24px 28px;background:var(--sand);border-radius:6px}
.cs .stat b{font-family:var(--display);font-size:30px;color:var(--red);display:block;line-height:1}
.cs .stat small{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs h2{font-size:clamp(24px,3vw,32px);font-weight:500;margin:40px 0 4px}
.cs h3{font-size:18px;font-weight:600;font-family:var(--sans);margin:26px 0 2px}
.cs .sub{font-style:italic;color:var(--muted);font-family:var(--display);font-size:18px}
.cs p{color:var(--ink-soft);font-size:16.5px;margin-top:14px}
.cs .cs-hero-img{width:100%;height:460px;object-fit:cover;border-radius:6px;margin-bottom:40px;background:var(--stone)}
/* collaboration videos band */
.collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.collab .media-video{margin-bottom:16px}
.collab h3{color:#fff;font-size:22px;font-weight:500}
.collab p{color:rgba(245,242,236,.68);font-size:13.5px;margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.notable{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.notable span{font-size:12.5px;color:rgba(245,242,236,.85);border:1px solid rgba(255,255,255,.2);border-radius:40px;padding:9px 18px}
/* contact richer info panel */
.cinfo .iconrow{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.cinfo .iconrow:first-of-type{border-top:0}
.cinfo .iconrow .ic{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff}
.cinfo .iconrow small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.55);margin-bottom:4px}
.cinfo .iconrow p{margin:0;font-size:14.5px;color:rgba(245,242,236,.9);line-height:1.6}
.cinfo .wa-btn{margin-top:24px;display:inline-flex;width:100%;justify-content:center}
@media(max-width:980px){
.flip-grid{grid-template-columns:repeat(2,1fr)}
.cert-gallery{grid-template-columns:repeat(2,1fr)}
.gallery{columns:2}
.collab-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
.flip-grid{grid-template-columns:1fr}
.cert-gallery{grid-template-columns:1fr}
.gallery{columns:1}
}
/* ===== amendment 2 ===== */
/* 1. remove hero overlay gap (darker top so it blends with the topbar) */
.page-hero::after{background:linear-gradient(0deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.5) 50%,rgba(20,18,16,.8) 100%)}
/* 3. white eyebrow + white ticks on dark backgrounds */
.inno .eyebrow,.band-dark .eyebrow,.sus .eyebrow,.collab .eyebrow,.green-card .eyebrow{color:#fff}
.inno .eyebrow::before,.band-dark .eyebrow::before,.sus .eyebrow::before,.collab .eyebrow::before{background:#fff}
.inno-list li svg path,.band-dark .value-list li svg path{stroke:#fff}
/* visualiser video: contained (not cropped) + smaller */
.media-video.media-phone{aspect-ratio:auto;max-width:300px;margin:0 auto;background:transparent}
.media-video.media-phone video{object-fit:contain;width:100%;height:auto;border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
/* certifications redesign */
.cert3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cert3 .c{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.cert3 .c:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:var(--stone)}
.cert3 .c .frame{background:var(--sand);padding:26px 26px 0;display:flex;align-items:flex-end;justify-content:center;min-height:248px}
.cert3 .c .frame img{max-width:86%;max-height:240px;object-fit:contain;box-shadow:0 18px 40px -20px rgba(0,0,0,.55);border-radius:2px}
.cert3 .c .b{padding:20px 24px 24px}
.cert3 .c .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
.cert3 .c h3{font-size:16.5px;font-weight:600;font-family:var(--sans);margin-top:7px;line-height:1.35}
.cert3 .c .view{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}
/* round icon for qcards */
.qic{width:46px;height:46px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:16px}
/* why-bespoke image cards */
.why-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.why-card .ph{height:210px;overflow:hidden;background:var(--stone)}
.why-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.why-card:hover .ph img{transform:scale(1.05)}
.why-card .b{padding:26px 26px 30px}
.why-card h3{font-size:19px;font-weight:500;margin-bottom:10px}
.why-card p{font-size:14px;color:var(--muted);line-height:1.65}
/* certified green standards cards with logos */
.green-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.green-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:28px;text-align:center}
.green-card .logo{background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:26px 30px;margin-bottom:20px}
.green-card .logo .elementor-widget-container{display:flex;align-items:center;justify-content:center;width:100%}
.green-card .logo img{width:auto;height:auto;max-width:100%;object-fit:contain;margin:0 auto}
.green-card h3{color:#fff;font-size:16.5px;font-weight:600;font-family:var(--sans);margin-bottom:10px}
.green-card p{color:rgba(245,242,236,.72);font-size:13.5px;line-height:1.6}
@media(max-width:900px){.cert3,.why-card-grid,.green-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cert3,.why-card-grid,.green-grid{grid-template-columns:1fr}}
/* ===== round 3 homepage (pdf layout) ===== */
.coll-head{max-width:760px}
.coll-head .tagline2{font-family:var(--display);font-style:italic;font-size:20px;color:var(--muted);margin:10px 0 0}
.coll-tabs{display:flex;justify-content:center;margin:30px 0 32px}
.tabs.ttabs{border:0;background:none;border-radius:0;overflow:visible;display:flex;gap:56px;box-shadow:none}
.tabs.ttabs button{background:none;border:0;cursor:pointer;font-family:var(--display);font-size:23px;letter-spacing:normal;text-transform:uppercase;color:var(--muted);padding:6px 2px;position:relative;transition:color .25s}
.tabs.ttabs button.active{background:none;color:var(--ink)}
.tabs.ttabs button::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .3s}
.tabs.ttabs button.active::after{transform:scaleX(1)}
.arr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1400px;margin:0 auto;border-radius:4px;overflow:hidden}
.arr{position:relative;aspect-ratio:9/16;display:block;background:var(--stone)}
.arr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.arr:hover img{transform:scale(1.06)}
.arr::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.78),rgba(20,18,16,0) 48%)}
.arr .cap{position:absolute;left:20px;right:12px;bottom:20px;z-index:2;color:#fff}
.arr .cap small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:7px}
.arr .cap b{font-family:var(--display);font-weight:500;font-size:24px;line-height:1}
@media(max-width:980px){.arr-grid{grid-template-columns:repeat(3,1fr)}.tabs.ttabs{gap:34px}}
@media(max-width:560px){.arr-grid{grid-template-columns:repeat(2,1fr)}}
.wn-band{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.wn-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wn-band::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.56)}
.wn-copy{position:relative;z-index:2;padding:76px 24px;max-width:840px}
.wn-copy .kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:26px}
.wn-copy .sub-it{font-family:var(--display);font-style:italic;font-size:22px;color:rgba(255,255,255,.9);margin-bottom:6px}
.wn-copy h2{font-family:var(--display);font-size:clamp(30px,4.6vw,54px);color:#fff;font-weight:500;text-transform:uppercase;line-height:1.04;margin-bottom:22px}
.wn-copy p{font-family:var(--display);font-style:italic;font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.9);max-width:60ch;margin:0 auto 30px}
.series-band{display:grid;grid-template-columns:repeat(3,1fr)}
.series-col{position:relative;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 30px;color:#fff;overflow:hidden}
.series-col>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.series-col:hover>img{transform:scale(1.05)}
.series-col::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.82),rgba(20,18,16,.4))}
.series-col .in{position:relative;z-index:2}
.series-col h3{color:#fff;font-family:var(--display);font-size:27px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.series-col p{color:rgba(255,255,255,.86);font-size:14px;line-height:1.6;max-width:34ch;margin:0 auto 22px}
.series-col .more{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;display:inline-flex;flex-direction:column;align-items:center;gap:7px}
@media(max-width:820px){.series-band{grid-template-columns:1fr}}
.trio{display:grid;grid-template-columns:repeat(3,1fr)}
.trio-card{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.trio-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.trio-card:hover img{transform:scale(1.05)}
.trio-card::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.44);transition:.3s}
.trio-card:hover::after{background:rgba(20,18,16,.56)}
.trio-in{position:relative;z-index:2;padding:24px}
.trio-in h3{font-family:var(--display);font-size:31px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.trio-in p{font-family:var(--display);font-style:italic;font-size:18px;color:rgba(255,255,255,.92)}
@media(max-width:820px){.trio{grid-template-columns:1fr}}
.vizf{position:relative;overflow:hidden;color:#fff}
.vizf>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vizf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.92),rgba(20,18,16,.55) 46%,rgba(20,18,16,.28))}
.vizf-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;min-height:540px;padding:70px 0}
.vizf .eyebrow{color:#fff}.vizf .eyebrow::before{background:#fff}
.vizf h2{color:#fff}
.vizf .lead{color:rgba(255,255,255,.85)}
.tabletwrap{display:flex;justify-content:center;align-items:center}
.tablet{position:relative;width:min(100%,470px);background:#0d0d0d;border-radius:22px;padding:12px;box-shadow:0 55px 100px -30px rgba(0,0,0,.75);transform:rotate(-3deg);border:1px solid rgba(255,255,255,.08)}
.tablet .screen{border-radius:12px;overflow:hidden;aspect-ratio:4/3;position:relative}
.tablet .screen img{width:100%;height:100%;object-fit:cover;display:block}
.tablet .pill{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;background:rgba(20,18,16,.72);color:#fff;font-size:10.5px;letter-spacing:.06em;padding:7px 15px;border-radius:30px;white-space:nowrap}
@media(max-width:820px){.vizf-grid{grid-template-columns:1fr;gap:34px;padding:54px 0}.tablet{transform:none}}
.sus-head{max-width:900px}
.sus-head h2{white-space:nowrap;font-size:clamp(24px,3.5vw,40px);letter-spacing:-.02em}
@media(max-width:760px){.sus-head h2{white-space:normal;font-size:28px}}
/* ============================================================
ELEMENTOR COMPATIBILITY APPENDIX (Kimgres)
Makes native Elementor containers/widgets render like the
original hand-coded markup.
============================================================ */
/* Zero Elementor's default 10px container padding so our .wrap / .sec
classes fully own spacing */
.e-con{
--container-default-padding-block-start:0;
--container-default-padding-block-end:0;
--container-default-padding-inline-start:0;
--container-default-padding-inline-end:0;
}
.e-con,.e-con-inner{--widgets-spacing:0px}
/* Grid containers built as native containers must beat .e-con{display:flex} */
.e-con.story-grid,.e-con.news-grid,.e-con.inno-grid,.e-con.vizf-grid,.e-con.green-grid{display:grid !important}
/* Certifications section rebuilt as native containers: keep CTA row horizontal */
.e-con.center-foot{flex-direction:row}
/* Full-bleed sections should never be width-capped by boxed defaults */
.hero,.trust,.coll,.inno,.vizf,#new,#explore,.news{width:100%}
/* --- Heading widgets: neutralise kit color forcing, honour source colors --- */
.elementor-widget-heading .elementor-heading-title{color:inherit;margin:0}
.band-dark .elementor-heading-title,
.inno .elementor-heading-title,
.sus .elementor-heading-title,
.vizf .elementor-heading-title,
.news .elementor-heading-title,
.hero .elementor-heading-title{color:#fff}
/* text-editor widgets shouldn't add their own spacing; source rules handle it */
.elementor-widget-text-editor{color:inherit}
/* --- Button widgets carrying source .btn classes ---
_css_classes land on the widget wrapper; style the inner and strip skin */
.elementor-widget-button.btn a.elementor-button{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--sans);font-size:13px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
padding:15px 26px;border-radius:2px;cursor:pointer;
transition:.3s ease;border:1px solid transparent;
background:none;color:inherit;box-shadow:none;text-shadow:none;fill:currentColor;
}
.elementor-widget-button.btn .elementor-button-content-wrapper{gap:10px}
.elementor-widget-button.btn-red a.elementor-button{background:var(--red);color:#fff}
.elementor-widget-button.btn-red a.elementor-button:hover{background:var(--red-deep);color:#fff}
.elementor-widget-button.btn-ghost a.elementor-button{border-color:var(--ink);color:var(--ink)}
.elementor-widget-button.btn-ghost a.elementor-button:hover{background:var(--ink);color:var(--bone)}
.elementor-widget-button.btn-ghost-light a.elementor-button{border-color:rgba(255,255,255,.55);color:#fff}
.elementor-widget-button.btn-ghost-light a.elementor-button:hover{background:#fff;color:var(--ink);border-color:#fff}
/* button widget wrapper shouldn't stretch full width */
.elementor-widget-button.btn{width:auto}
.elementor-widget-button.btn .elementor-button-wrapper{display:inline-flex}
/* image widgets fill their card wrappers where source expects it */
.story-img .elementor-widget-image,.story-img .elementor-widget-image img{width:100%}
.inno-img .elementor-widget-image,.inno-img .elementor-widget-image img{width:100%;height:100%}
.inno-img .elementor-widget-image .elementor-widget-container{height:100%}
.inno-img .elementor-widget-image img{object-fit:cover}
/* section vertical rhythm when .sec sits on a native container */
.e-con.sec{padding-top:104px;padding-bottom:104px}
@media(max-width:620px){.e-con.sec{padding-top:72px;padding-bottom:72px}}
/* keep decorative html-widget grids edge-to-edge */
.elementor-widget-html{width:100%}
/* ---- homepage native-heading sizes (source used inline styles here) ---- */
.story-copy h2{font-size:clamp(31px,4vw,46px);margin-top:16px}
.coll-head h2{font-size:clamp(31px,4vw,46px);margin-top:14px}
.vizf-grid h2{font-size:clamp(30px,3.8vw,46px);margin:16px 0 14px;color:#fff}
.story-copy h2 em,.coll-head h2 em{font-style:italic}
/* hero heading widget: match source .hero h1 */
.hero .elementor-widget-heading .elementor-heading-title{
font-family:var(--display);font-weight:500;line-height:1.05;
font-size:clamp(46px,7vw,88px);max-width:16ch;margin-top:20px;color:#fff;
}
.hero .elementor-heading-title em{font-style:italic;color:#fff}
/* hero actions row */
.hero-actions{display:flex;flex-direction:row;gap:16px;margin-top:34px;flex-wrap:wrap}
/* story badge sits over image */
.story-img{position:relative}
/* ---- hero as native Elementor container ---- */
.e-con.hero{flex-direction:column;justify-content:flex-end;min-height:92vh;position:relative;margin-top:-84px;padding-top:84px}
.e-con.hero>.elementor-widget-html{width:100%;position:static}
.e-con.hero .wrap{position:relative;z-index:2}
/* story/inno/vizf native two-col grids keep their column children full-height */
.e-con.inno-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
@media(max-width:900px){.e-con.inno-grid{grid-template-columns:1fr}}
.e-con.vizf-grid{position:relative;z-index:2}
/* ============================================================
FIXES — Elementor wrapper interference & overflow
============================================================ */
/* clip the off-screen mobile drawer so it can't cause horizontal scroll */
html,body{overflow-x:hidden}
/* .vizf > img.bg was a direct-child selector; the bg image now sits inside
Elementor widget wrappers, so retarget it as a descendant */
.vizf img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vizf>.elementor-widget-html{position:static}
/* hero CTA row: force inline buttons at natural width */
.hero-actions{display:flex !important;flex-direction:row !important;flex-wrap:wrap;gap:16px;align-items:center}
.hero-actions>.elementor-widget{width:auto;max-width:none}
.hero-actions>.elementor-widget-button .elementor-button-wrapper{display:inline-flex}
/* sus-foot / coll-foot / center button rows: keep the button hugging content, centered */
.sus-foot,.coll-foot{display:flex;justify-content:center}
.sus-foot>.elementor-widget,.coll-foot>.elementor-widget{width:auto}
/* ============================================================
EDITOR VISIBILITY — never hide reveal content inside Elementor editor
============================================================ */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal,
body.elementor-editor-active .reveal{opacity:1 !important;transform:none !important;transition:none !important}
/* native pillar grid (Our Commitment) built with real containers */
.e-con.pillars-native{display:flex;flex-direction:row;flex-wrap:wrap;gap:30px;justify-content:center}
.e-con.pillar-col{flex:1 1 0;min-width:180px;text-align:center}
.pillar-col .elementor-heading-title{color:#fff;font-size:20px}
.pillar-col .elementor-widget-text-editor{color:rgba(255,255,255,.78);font-size:14px}
.pillar-col .elementor-widget-icon{margin-bottom:8px}
@media(max-width:900px){.e-con.pillar-col{flex:1 1 40%}}
@media(max-width:560px){.e-con.pillar-col{flex:1 1 100%}}
/* native trust strip */
.e-con.trust-native{display:flex;flex-direction:row;flex-wrap:wrap}
.e-con.trust-item{flex:1 1 0;min-width:160px;text-align:center;padding:36px 18px;position:relative}
.trust-item .elementor-heading-title{font-family:"Cormorant Garamond",Georgia,serif;color:#fff;font-size:clamp(28px,3vw,36px);font-weight:600;line-height:1}
.trust-item .elementor-widget-text-editor{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:600;margin-top:9px}
@media(max-width:620px){.e-con.trust-item{flex:1 1 50%}}
/* native pillar icon: thin circle, white icon (override Elementor framed default) */
.pillar-col .elementor-widget-icon{text-align:center}
.pillar-col .elementor-icon{
width:64px;height:64px;border:1px solid rgba(255,255,255,.35) !important;
background:transparent !important;color:#fff;display:inline-flex;align-items:center;justify-content:center;
}
.pillar-col .elementor-icon svg{width:24px;height:24px;fill:#fff}
.pillar-col .elementor-icon i{font-size:24px;color:#fff}
/* divider label on the dark commitment band */
.sus-head .elementor-widget-divider{--divider-color:#fff}
.sus-head .elementor-divider__text{color:#fff}
.sus-head .elementor-widget-divider{margin-bottom:14px}
/* visualiser checklist on the dark band: light readable text, clean checks, no red dots */
.vizf .value-list li{display:block;color:rgba(255,255,255,.92);font-size:15px;padding:7px 0 7px 26px;position:relative}
.vizf .value-list li::before{display:none}
.vizf .value-list li span{color:#fff}
/* close the cream sliver between the topbar and the transparent nav on inner pages:
pull the page hero up the FULL header height (topbar 38 + nav 84) */
.page-hero{margin-top:-88px !important;padding-top:104px}
/* native button icon spacing/alignment */
.elementor-button .elementor-button-icon{display:inline-flex;align-items:center}
/* ---- contact page: native Elementor Form styled to match the design ---- */
.contact-grid h2{font-size:clamp(26px,3.2vw,36px);margin:12px 0 22px;font-weight:500}
.contact-grid .elementor-form-fields-wrapper{margin:0 -9px}
.contact-grid .elementor-field-group{padding:0 9px;margin-bottom:18px}
.contact-grid .elementor-field-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px;padding:0;line-height:1.4}
.contact-grid .elementor-field-group input,
.contact-grid .elementor-field-group textarea,
.contact-grid .elementor-field-group .elementor-field-textual{width:100%;background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);height:auto;box-shadow:none}
.contact-grid .elementor-field-group textarea{min-height:150px;resize:vertical}
.contact-grid .elementor-field-group input:focus,
.contact-grid .elementor-field-group textarea:focus{outline:none;border-color:var(--red);box-shadow:none}
.contact-grid .elementor-field-group.elementor-field-type-submit{margin-top:4px}
.contact-grid .elementor-button{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;border-radius:2px;background:var(--red);color:#fff;transition:.3s}
.contact-grid .elementor-button:hover{background:var(--red-deep);color:#fff}
/* contact form submit button must be red (override Elementor global accent) */
.contact-grid .elementor-button,
.contact-grid .elementor-field-type-submit .elementor-button{background-color:var(--red) !important;color:#fff !important}
.contact-grid .elementor-button:hover{background-color:var(--red-deep) !important}
/* force arrow glyphs (→) to render as text, not the colour-emoji fallback */
body,.btn,.arr,.more,.crumb,.view,.cinfo,.elementor-button{font-variant-emoji:text}
/* WhatsApp buttons already carry the WA icon — drop the redundant trailing arrow */
.wa-btn .arr{display:none}
/* FIX class collision: collection tiles are (gradient overlay),
but button/link arrows are — neutralise the tile styling on those */
span.arr{aspect-ratio:auto !important;background:none !important;display:inline-flex !important;
align-items:center;position:static !important;overflow:visible !important;
width:auto !important;height:auto !important;border-radius:0 !important}
span.arr::after,span.arr::before{display:none !important;content:none !important}
/* ============================================================
TilePedia — tall image-overlay cards (match reference) + spacing
============================================================ */
.tp-wrap{padding-top:20px;padding-bottom:20px}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1160px;margin:0 auto}
.tpcard{position:relative;min-height:520px;border-radius:5px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:44px 26px;color:#fff}
.tpcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tpcard:hover img{transform:scale(1.06)}
.tpcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.55) 46%,rgba(20,18,16,.32) 100%)}
.tpcard .tp-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.tpcard h3{font-family:var(--display);font-size:26px;font-weight:500;color:#fff;line-height:1.15;margin-bottom:16px}
.tpcard p{font-size:14px;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:22px;max-width:30ch}
.tpcard .more{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.tpcard .more svg{transition:transform .3s}
.tpcard:hover .more svg{transform:translateY(3px)}
@media(max-width:980px){.tp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tp-grid{grid-template-columns:1fr}.tpcard{min-height:420px}}
/* ============================================================
Mobile drawer -> side panel (not full screen) + backdrop
============================================================ */
.drawer{inset:auto;top:0;right:0;bottom:0;left:auto;width:min(86vw,360px);box-shadow:-24px 0 60px -20px rgba(0,0,0,.5)}
.kg-backdrop{position:fixed;inset:0;z-index:79;background:rgba(20,18,16,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.kg-backdrop.show{opacity:1;visibility:visible}
/* ============================================================
Lightweight image lightbox (certifications & galleries)
============================================================ */
.kg-lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(15,13,11,.92);padding:40px}
.kg-lb.open{display:flex}
.kg-lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 90px -20px rgba(0,0,0,.8);border-radius:3px}
.kg-lb .kg-lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.kg-lb .kg-lb-close:hover{background:#fff;color:#1C1A17}
.kg-lb .kg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.25);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.kg-lb .kg-lb-nav:hover{background:#fff;color:#1C1A17}
.kg-lb .kg-lb-prev{left:24px}.kg-lb .kg-lb-next{right:24px}
.kg-lb .kg-lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:560px){.kg-lb .kg-lb-nav{width:42px;height:42px}.kg-lb .kg-lb-prev{left:8px}.kg-lb .kg-lb-next{right:8px}}
/* make cert cards look clickable */
a[data-lb]{cursor:zoom-in}
/* ============================================================
About Us — native Elementor layout helpers
============================================================ */
.e-con.split{display:grid !important;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:980px){.e-con.split{grid-template-columns:1fr;gap:34px}}
/* image widgets used as split panels fill the column */
.split>.elementor-widget-image{height:100%}
.split>.elementor-widget-image .elementor-widget-container{height:100%}
.split .elementor-widget-image img{width:100%;height:100%;min-height:500px;object-fit:cover;border-radius:4px;display:block}
@media(max-width:980px){.split .elementor-widget-image img{min-height:340px;order:-1}}
/* dark gradient band */
.about-band-dark{background:linear-gradient(120deg,#211d19,#15130f)}
/* native stat cards */
.e-con.about-stats{display:grid !important;grid-template-columns:1fr 1fr;gap:18px}
.e-con.about-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:28px}
.about-stat .elementor-heading-title{font-family:var(--display);font-size:40px;color:#fff;line-height:1}
.about-stat .elementor-widget-text-editor{color:rgba(245,242,236,.6);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.about-stat .elementor-widget-text-editor p{margin:0}
/* native quad cards */
.e-con.quad{display:grid !important;grid-template-columns:1fr 1fr;gap:30px}
.e-con.qcard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:34px 32px}
.band .qcard .elementor-heading-title{font-size:21px;font-weight:500;color:var(--ink)}
.qcard .elementor-widget-text-editor{font-size:15px;color:var(--muted);margin-top:10px}
.qcard .elementor-widget-text-editor p{margin:0}
@media(max-width:640px){.e-con.quad{grid-template-columns:1fr}}
/* About stats: keep 2 columns on mobile (2x2) instead of a single column */
.e-con.about-stats{grid-template-columns:1fr 1fr !important}
/* about hero as native container with bg image */
.e-con.page-hero{background-size:cover;background-position:center}
.e-con.page-hero>.wrap{position:relative;z-index:2}
/* About Us native heading sizes */
.elementor-widget-heading.ab-h2 .elementor-heading-title{font-size:clamp(28px,3.8vw,44px);margin-top:14px}
.elementor-widget-heading.ab-vision-h2 .elementor-heading-title{color:#fff;font-size:clamp(30px,4vw,50px);margin-top:14px;line-height:1.1}
.elementor-widget-heading.ab-vision-h2 em{font-style:italic}
.about-band-dark .center-head .elementor-heading-title{color:#fff}
/* certifications as a clean image gallery (no per-card wording) */
.cert-gallery .c .frame{padding:26px !important;min-height:300px}
.cert-gallery .c{background:#fff}
/* certifications: remove the card box — show the certificate images only */
.cert-gallery .c{background:none !important;border:none !important;border-radius:0 !important;overflow:visible !important;box-shadow:none !important}
.cert-gallery .c:hover{background:none !important;border:none !important;box-shadow:none !important;transform:translateY(-4px)}
.cert-gallery .c .frame{background:none !important;padding:0 !important;min-height:0 !important;align-items:center}
.cert-gallery .c .frame img{max-width:100% !important;max-height:none !important;width:100%;height:auto;object-fit:contain;box-shadow:0 16px 38px -18px rgba(0,0,0,.4)}
/* embedded product catalogue */
.catalogue-sec{padding:0 !important}
.wl-catalogue{width:100%;display:block}
/* ============================================================
Post loop grid (Blog / Latest News) — cards from real Posts
============================================================ */
.kg-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1240px;margin:0 auto;padding:0 28px}
/* Related-designs grid sits inside .wrap (which already pads), so drop its own
padding to line the cards up with the "Related designs" heading. The blog
grid (#kg-blog-grid) is NOT inside a .wrap, so this scope leaves it intact. */
.wrap > .kg-post-grid{padding-left:0;padding-right:0}
.kg-post-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,border-color .35s}
.kg-post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--stone)}
.kg-pc-img{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--stone)}
.kg-pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kg-post-card:hover .kg-pc-img img{transform:scale(1.05)}
.kg-pc-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.kg-pc-body .eyebrow{margin-bottom:14px}
.kg-pc-title{font-family:var(--display);font-size:24px;font-weight:500;line-height:1.16;margin:0 0 12px}
.kg-pc-title a{color:var(--ink);transition:color .2s}
.kg-pc-title a:hover{color:var(--red)}
.kg-pc-ex{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;flex:1}
.kg-pc-more{margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center}
.kg-pc-more:hover{color:var(--red-deep)}
.kg-post-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}
@media(max-width:960px){.kg-post-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:600px){.kg-post-grid{grid-template-columns:1fr}}
/* ---------- blog pagination ---------- */
.kg-pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;max-width:1240px;margin:56px auto 0;padding:0 28px}
.kg-pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;transition:.25s ease;text-decoration:none}
.kg-pg:hover{border-color:var(--ink);color:var(--red)}
.kg-pg.is-current{background:var(--red);border-color:var(--red);color:#fff;cursor:default}
.kg-pg-arrow{font-size:20px;line-height:1}
.kg-pg.is-disabled{opacity:.35;pointer-events:none}
.kg-pg-gap{padding:0 4px;color:var(--muted);font-weight:600;letter-spacing:.05em;align-self:flex-end}
@media(max-width:600px){.kg-pagination{gap:6px}.kg-pg{min-width:40px;height:40px;padding:0 9px}}
/* ============================================================
Single post template (inner blog / news page)
============================================================ */
/* Pull the hero up under the fixed/sticky header so it fills the full header
height (which ranges ~100–140px across breakpoints — tallest when the nav
wraps near 1000–1024px). Over-pulling is safe: the header sits on top. */
.sp-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;color:#fff;background:#2a2622;overflow:hidden;margin-top:-150px;padding-top:150px}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,18,16,.94) 0%,rgba(20,18,16,.5) 55%,rgba(20,18,16,.78) 100%)}
.sp-hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:52px}
.sp-bc{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:16px}
.sp-bc a:hover{color:#fff}
.sp-cat .elementor-post-info{margin:0}
.sp-cat .elementor-post-info__item,.sp-cat a{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.sp-cat .elementor-post-info__item svg,.sp-cat .elementor-post-info__terms-list-item:before{display:none}
.sp-hero .elementor-widget-theme-post-title .elementor-heading-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,54px);line-height:1.08;color:#fff;max-width:32ch;margin-top:14px}
.sp-meta{margin-top:16px}
.sp-meta .elementor-post-info__item{color:rgba(255,255,255,.78);font-size:13px;letter-spacing:.04em}
.sp-meta .elementor-post-info__item svg{fill:rgba(255,255,255,.6);width:13px;height:13px}
/* body prose */
.sp-body{padding:58px 0 30px;background:var(--bone)}
.sp-body .wrap{max-width:772px}
.sp-body .elementor-widget-theme-post-content{font-size:16.5px;line-height:1.85;color:var(--ink-soft)}
.sp-body .elementor-widget-theme-post-content h2{font-family:var(--display);font-size:clamp(24px,3vw,33px);font-weight:500;margin:38px 0 12px;color:var(--ink);line-height:1.2}
.sp-body .elementor-widget-theme-post-content h3{font-size:20px;font-weight:600;margin:28px 0 8px;color:var(--ink)}
.sp-body .elementor-widget-theme-post-content p{margin:0 0 18px}
.sp-body .elementor-widget-theme-post-content img{border-radius:6px;height:auto;margin:26px 0;max-width:100%}
.sp-body .elementor-widget-theme-post-content ul,.sp-body .elementor-widget-theme-post-content ol{margin:0 0 20px 22px;display:grid;gap:9px}
.sp-body .elementor-widget-theme-post-content a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* CTA buttons inside post content (a.btn / .btn-red): the link rule above would
otherwise force red-on-red text + underline. Re-assert button styling with
higher specificity so the label shows and it sizes like a normal button. */
.sp-body .elementor-widget-theme-post-content a.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:2px;border:1px solid transparent;text-decoration:none}
.sp-body .elementor-widget-theme-post-content a.btn-red{background:var(--red);color:#fff}
.sp-body .elementor-widget-theme-post-content a.btn-red:hover{background:var(--red-deep);color:#fff}
.sp-body .elementor-widget-theme-post-content a.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.sp-body .elementor-widget-theme-post-content a.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.sp-body .elementor-widget-theme-post-content a.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
/* CTA wrapper carries inline text-align:center, but it spans the full content
width so the button lands right-of-centre; left-align it to the text column. */
.sp-body .elementor-widget-theme-post-content .kg-btn-wrap{text-align:left!important;margin:30px 0}
.sp-body .elementor-widget-theme-post-content figure{margin:26px 0}
/* Floated images (alignleft / alignright): keep body text off the image edge */
.sp-body .elementor-widget-theme-post-content .alignleft{float:left;margin:8px 38px 22px 0;max-width:48%}
.sp-body .elementor-widget-theme-post-content .alignright{float:right;margin:8px 0 22px 38px;max-width:48%}
/* --- Blog single: keep content in a centred column (some post templates render
the content full-bleed with no .wrap); Elementor forces max-width:100% so we
need !important. Standalone text gets a readable width sharing the same left
edge, while media-text rows + images use the full column. --- */
.sp-body .elementor-widget-theme-post-content{max-width:1184px!important;margin-left:auto!important;margin-right:auto!important}
.sp-body .elementor-widget-theme-post-content > p,
.sp-body .elementor-widget-theme-post-content > h2,
.sp-body .elementor-widget-theme-post-content > h3,
.sp-body .elementor-widget-theme-post-content > ul,
.sp-body .elementor-widget-theme-post-content > ol{max-width:768px}
/* Latest News posts: body copy runs the full content width (no reading column) */
body.kg-latest-news .sp-body .elementor-widget-theme-post-content > p,
body.kg-latest-news .sp-body .elementor-widget-theme-post-content > h2,
body.kg-latest-news .sp-body .elementor-widget-theme-post-content > h3,
body.kg-latest-news .sp-body .elementor-widget-theme-post-content > ul,
body.kg-latest-news .sp-body .elementor-widget-theme-post-content > ol{max-width:none}
/* --- Gutenberg "Media & Text" blocks: two even columns, real gap, drop
Gutenberg's default 8% content inset. Image + text are TOP-aligned
(align-items:start) so the image sits at the top of its column, level with
the first line of text, instead of drifting to the vertical middle when the
text is long. Each block should hold ONE section (image beside its lead /
first section); extra headings are pulled out to full-width in the content. --- */
.sp-body .wp-block-media-text{grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin:44px 0}
.sp-body .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 1fr}
.sp-body .wp-block-media-text__content{padding:0;align-self:start}
.sp-body .wp-block-media-text__content > :first-child{margin-top:0}
.sp-body .wp-block-media-text__content > :last-child{margin-bottom:0}
.sp-body .wp-block-media-text__content p{margin:0 0 14px}
/* show the whole image at its natural ratio (top-aligned) instead of the stretched fill */
.sp-body .wp-block-media-text.is-image-fill-element .wp-block-media-text__media{min-height:0!important;height:auto!important;background-image:none!important;align-self:start!important}
.sp-body .wp-block-media-text__media{margin:0!important;align-self:start}
.sp-body .wp-block-media-text__media img{position:static!important;width:100%!important;height:auto!important;object-fit:cover;border-radius:8px;margin:0!important;display:block}
/* --- Mobile: stack image over text, full width, no leftover fill height --- */
@media(max-width:781px){
.sp-body .wp-block-media-text,
.sp-body .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:14px;margin:28px 0;align-items:start!important}
.sp-body .wp-block-media-text__media,
.sp-body .wp-block-media-text.is-image-fill-element .wp-block-media-text__media{grid-column:1!important;grid-row:1!important;height:auto!important;min-height:0!important;align-self:start!important}
.sp-body .wp-block-media-text__content{grid-column:1!important;grid-row:2!important}
.sp-body .wp-block-media-text__media img{height:auto!important}
.sp-body .elementor-widget-theme-post-content .alignleft,
.sp-body .elementor-widget-theme-post-content .alignright{float:none;max-width:100%;margin:22px 0}
.sp-body .elementor-widget-theme-post-content .alignleft img,
.sp-body .elementor-widget-theme-post-content .alignright img{width:100%!important;height:auto!important}
}
.sp-cta{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
/* related */
.sp-related{background:var(--sand);padding:72px 0}
.sp-related .wrap{max-width:1240px}
.sp-rel-h .elementor-heading-title{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:500;margin-bottom:30px}
.sp-related .elementor-post__thumbnail{border-radius:8px;overflow:hidden;aspect-ratio:16/11}
.sp-related .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover}
.sp-related .elementor-post__title{font-family:var(--display);font-weight:500}
.sp-related .elementor-post__title a{color:var(--ink)}
.sp-related .elementor-post__title a:hover{color:var(--red)}
.sp-related .elementor-post__read-more{color:var(--red);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* ============================================================
Modern product catalogue (Blog-style: CSS in stylesheet,
markup via [kimgres_catalogue] shortcode, JS in kimgres-design.js)
============================================================ */
.kg-cat{--kc-red:#B0202E;--kc-ink:#1C1A17;--kc-muted:#736B5E;--kc-line:#e7e2d8;--kc-bg:#F5F2EC;
font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;color:var(--kc-ink);max-width:1320px;margin:0 auto;padding:0 28px 90px}
.kg-cat *{box-sizing:border-box}
.kg-cat-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:6px 0 22px;margin-bottom:26px;border-bottom:1px solid var(--kc-line)}
.kg-cat-top .h{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1}
.kg-cat-top .sub{font-size:13.5px;color:var(--kc-muted);margin-top:8px}
.kg-cat-count{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kc-muted);font-weight:600}
.kg-cat-count b{color:var(--kc-ink)}
.kg-cat-body{display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start}
.kg-cat-side{position:sticky;top:110px}
.kg-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.kg-side-head b{font-size:15px;letter-spacing:.02em}
.kg-clear{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kc-red);background:none;border:0;cursor:pointer;padding:4px}
.kg-clear:hover{text-decoration:underline}
.kg-fgroup{border-top:1px solid var(--kc-line);padding:20px 0}
.kg-fgroup h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kc-ink);margin:0 0 15px}
.kg-pills{display:flex;flex-wrap:wrap;gap:8px}
.kg-pill{font-size:12.5px;padding:8px 15px;border:1px solid var(--kc-line);border-radius:40px;cursor:pointer;background:#fff;transition:.2s;color:var(--kc-muted);text-transform:capitalize;font-weight:500}
.kg-pill:hover{background:var(--kc-ink) !important;border-color:var(--kc-ink) !important;color:#fff !important}
.kg-pill.on{background:var(--kc-ink);border-color:var(--kc-ink);color:#fff}
.kg-search{width:100%;padding:10px 13px;border:1px solid var(--kc-line);border-radius:9px;font-size:13px;margin-bottom:12px;font-family:inherit;background:#fff}
.kg-search:focus{outline:none;border-color:var(--kc-red)}
.kg-serieswrap{max-height:300px;overflow:auto;display:grid;gap:1px;padding-right:4px}
.kg-serieswrap::-webkit-scrollbar{width:6px}.kg-serieswrap::-webkit-scrollbar-thumb{background:#d8d1c3;border-radius:3px}
.kg-check{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:7px 6px;cursor:pointer;border-radius:7px;color:#463f37;text-transform:capitalize}
.kg-check:hover{background:var(--kc-bg)}
.kg-check input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid #cfc7b7;border-radius:5px;cursor:pointer;position:relative;flex:none;transition:.15s}
.kg-check input:checked{background:var(--kc-red);border-color:var(--kc-red)}
.kg-check input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.kg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.kg-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--kc-line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.kg-tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(28,26,23,.45);border-color:#ddd5c6}
.kg-tile .ph{position:relative;aspect-ratio:1;overflow:hidden;background:#efe9df}
.kg-tile .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kg-tile:hover .ph img{transform:scale(1.07)}
.kg-tile .ph .view{position:absolute;left:12px;bottom:12px;background:rgba(20,18,16,.72);backdrop-filter:blur(4px);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:30px;opacity:0;transform:translateY(6px);transition:.3s}
.kg-tile:hover .ph .view{opacity:1;transform:none}
.kg-tile .info{padding:16px 17px 18px}
.kg-tile .series{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--kc-red)}
.kg-tile .sku{font-size:14.5px;font-weight:500;margin-top:6px;color:var(--kc-ink);letter-spacing:.01em}
.kg-tile .kg-cl{font-size:11.5px;color:var(--kc-muted);margin-top:4px;text-transform:capitalize}
.kg-empty{grid-column:1/-1;text-align:center;padding:90px 20px;color:var(--kc-muted);font-size:15px}
.kg-loading{grid-column:1/-1;text-align:center;padding:90px 20px;color:var(--kc-muted);font-size:14px}
.kg-mfilter{display:none}
@media(max-width:1024px){
.kg-cat-body{grid-template-columns:1fr;gap:24px}
.kg-cat-side{position:static}
.kg-mfilter{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--kc-ink);color:#fff;border:0;border-radius:40px;padding:11px 20px;cursor:pointer;margin-bottom:18px}
.kg-cat-side.collapsed{display:none}
.kg-grid{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media(max-width:680px){.kg-grid{grid-template-columns:repeat(2,1fr);gap:14px}.kg-tile .info{padding:13px 13px 15px}}
/* ---------- New blog ACF content blocks: inherit the .sp-body article style ---------- */
/* Text blocks match the existing post-content typography exactly */
.sp-body .elementor-widget-text-editor{font-size:16.5px;line-height:1.85;color:var(--ink-soft);font-family:var(--sans)}
.sp-body .elementor-widget-text-editor h2{font-family:var(--display);font-size:clamp(24px,3vw,33px);font-weight:500;margin:38px 0 12px;color:var(--ink);line-height:1.2}
.sp-body .elementor-widget-text-editor h3{font-size:20px;font-weight:600;margin:28px 0 8px;color:var(--ink)}
.sp-body .elementor-widget-text-editor p{margin:0 0 18px}
.sp-body .elementor-widget-text-editor > *:first-child{margin-top:0}
.sp-body .elementor-widget-text-editor > *:last-child{margin-bottom:0}
.sp-body .elementor-widget-text-editor ul,.sp-body .elementor-widget-text-editor ol{margin:0 0 20px 22px;display:grid;gap:9px}
.sp-body .elementor-widget-text-editor a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.sp-body .elementor-widget-text-editor strong{color:var(--ink)}
/* ACF image blocks (45% width, left) — rounded to match, with breathing room */
.sp-body .elementor-widget-image img{border-radius:6px;height:auto;max-width:100%}
/* Vertical rhythm for the stacked image/text blocks */
.elementor-element-829068ba{gap:26px!important;--gap:26px!important;--row-gap:26px!important}
.elementor-element-829068ba .elementor-widget-image{margin:0}
.elementor-element-829068ba .elementor-widget-image:first-child{margin-top:0}
/* Phones: images span full width */
@media(max-width:767px){
.elementor-element-829068ba .elementor-widget-image{width:100%!important;max-width:100%!important;--container-widget-width:100%!important}
.sp-body .elementor-widget-text-editor{font-size:16px}
}
/* ---------- Blog banner CTA (below content, before related posts) ---------- */
.kg-cta-band{background:var(--ink);padding:66px 24px;text-align:center}
.kg-cta-band .e-con-inner{max-width:640px;margin:0 auto}
.kg-cta-band__inner{max-width:640px;margin:0 auto}
.kg-cta-band__eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.kg-cta-band__title{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.1;color:#fff;margin:0 0 14px}
.kg-cta-band__text{font-family:var(--sans);font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);margin:0 auto 28px;max-width:48ch}
.kg-cta-band__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-ghost-light{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink)}
/* ---------- Blog single-post: single column (HTML-only layout) ---------- */
.sp-body.e-con > .e-con-inner{max-width:820px;margin-left:auto;margin-right:auto}
/* ---------- Pasted-HTML article helpers (works on ANY blog post) ---------- */
/* Add class="kg-block-img" to an ![]()
for the stacked image-top / text-below look */
.sp-body .elementor-widget-theme-post-content .kg-block-img{
display:block;width:65%;max-width:65%;height:auto;border-radius:6px;margin:26px 0;
}
@media(max-width:767px){
.sp-body .elementor-widget-theme-post-content .kg-block-img{width:100%;max-width:100%}
}
/* ---------- Stack media-text blocks: image ON TOP, text BELOW (was side-by-side) ---------- */
.sp-body .elementor-widget-theme-post-content .wp-block-media-text{
display:flex!important;flex-direction:column!important;align-items:flex-start!important;
grid-template-columns:none!important;grid-template-areas:none!important;
}
/* image always first, even on has-media-on-the-right blocks (DOM order is text-first there) */
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__media{order:-1!important}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__content{order:0!important}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__media{
width:65%;max-width:65%;margin:0 0 22px;border-radius:6px;overflow:hidden;
}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__content{
width:100%!important;padding:0!important;grid-column:1!important;
}
/* fill-mode blocks lose their grid row height once stacked -> give them a box */
.sp-body .elementor-widget-theme-post-content .wp-block-media-text.is-image-fill-element .wp-block-media-text__media{
height:auto!important;min-height:0!important;aspect-ratio:3/2;position:relative;
}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text.is-image-fill-element .wp-block-media-text__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* normal (non-fill) media-text images */
.sp-body .elementor-widget-theme-post-content .wp-block-media-text:not(.is-image-fill-element) .wp-block-media-text__media img{
width:100%;height:auto;display:block;
}
@media(max-width:767px){
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__media{width:100%;max-width:100%}
}
/* ---------- Plain block images: match the 65% stacked look ---------- */
.sp-body .elementor-widget-theme-post-content figure.wp-block-image{
width:65%;max-width:65%;margin:26px 0;
}
.sp-body .elementor-widget-theme-post-content figure.wp-block-image img{
width:100%;height:auto;display:block;border-radius:6px;
}
@media(max-width:767px){
.sp-body .elementor-widget-theme-post-content figure.wp-block-image{width:100%;max-width:100%}
}
/* ---------- Remaining side-by-side patterns -> stacked image-top / text-below ---------- */
/* floated images (alignleft / alignright) and resized figures: unfloat, 65%, block */
.sp-body .elementor-widget-theme-post-content figure.wp-block-image,
.sp-body .elementor-widget-theme-post-content figure.wp-block-image.alignleft,
.sp-body .elementor-widget-theme-post-content figure.wp-block-image.alignright,
.sp-body .elementor-widget-theme-post-content figure.wp-block-image.is-resized{
float:none!important;width:65%!important;max-width:65%!important;margin:26px 0!important;
}
.sp-body .elementor-widget-theme-post-content .alignleft,
.sp-body .elementor-widget-theme-post-content .alignright{
float:none!important;margin:26px 0!important;
}
.sp-body .elementor-widget-theme-post-content figure.wp-block-image img{
width:100%!important;height:auto!important;display:block;border-radius:6px;
}
/* column blocks: stack into one column */
.sp-body .elementor-widget-theme-post-content .wp-block-columns{
display:flex!important;flex-direction:column!important;gap:0!important;
}
.sp-body .elementor-widget-theme-post-content .wp-block-column{
width:100%!important;max-width:100%!important;flex-basis:auto!important;
}
@media(max-width:767px){
.sp-body .elementor-widget-theme-post-content figure.wp-block-image,
.sp-body .elementor-widget-theme-post-content figure.wp-block-image.alignleft,
.sp-body .elementor-widget-theme-post-content figure.wp-block-image.alignright{
width:100%!important;max-width:100%!important;
}
}
/* ---------- Stack all Gutenberg flex groups vertically (kills leftover side-by-side) ---------- */
.sp-body .elementor-widget-theme-post-content .wp-block-group.is-layout-flex{
display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
align-items:stretch!important;gap:0!important;justify-content:flex-start!important;
}
/* everything except the image fills the width; figures keep their 65% */
.sp-body .elementor-widget-theme-post-content .wp-block-group.is-layout-flex > :not(figure){
width:auto!important;max-width:100%!important;flex:0 0 auto!important;
}
/* ---------- Tighten image spacing: one margin on the wrapper, none on the ![]()
---------- */
.sp-body .elementor-widget-theme-post-content figure.wp-block-image{margin:18px 0!important}
.sp-body .elementor-widget-theme-post-content figure.wp-block-image img{margin:0!important}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__media{margin:6px 0 20px!important}
.sp-body .elementor-widget-theme-post-content .wp-block-media-text__media img{margin:0!important}
/* ============================================================
Large / tall screens (≥1500px): the hero is 92vh, so on a big monitor
it becomes very tall and — with content pinned to the bottom — leaves a
large empty area up top. Cap the hero height so the (original, centred,
bottom-aligned) content rises into view and the empty top shrinks.
============================================================ */
@media (min-width:1500px){
.hero,
.e-con.hero{
min-height:min(84vh,820px);
}
}
/* --- text-wrap: pretty on ALL headings & body text (incl. Elementor widgets) --- */
h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,dt,dd,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor blockquote{text-wrap:pretty}
/* --- native Elementor flip-box grid (sustainability commitment) --- */
.flip-native{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media (max-width:1024px){.flip-native{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.flip-native{grid-template-columns:1fr}}
.flip-native .elementor-widget-flip-box{width:100%}
.flip-native .elementor-flip-box{border-radius:6px;overflow:hidden}
.flip-native .elementor-flip-box__layer__overlay{text-align:left;padding:26px}
.flip-native .elementor-flip-box__front .elementor-flip-box__layer__overlay{justify-content:flex-end;background:linear-gradient(0deg,rgba(20,18,16,.85),rgba(20,18,16,.15))}
.flip-native .elementor-flip-box__back .elementor-flip-box__layer__overlay{justify-content:center}
.flip-native .elementor-flip-box__layer__title{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.15}
.flip-native .elementor-flip-box__back .elementor-flip-box__layer__title{font-size:20px;margin-bottom:12px}
.flip-native .elementor-flip-box__back .elementor-flip-box__layer__description{font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.9)}
/* --- native flip-box mobile flip (JS toggles --flipped on tap; touch only) --- */
/* Flipped state: swap faces (front hidden, back shown un-rotated) => no 3D backface, no iOS mirror.
Only added by JS on hover:none devices, so desktop keeps its CSS hover flip untouched. */
.flip-native .elementor-widget-flip-box.elementor-flip-box--flipped .elementor-flip-box__front{display:none!important}
.flip-native .elementor-widget-flip-box.elementor-flip-box--flipped .elementor-flip-box__back{transform:none!important;opacity:1!important}
@media (hover:none){
.flip-native .elementor-flip-box{cursor:pointer}
/* not-flipped: cancel sticky :hover flip so re-tapping the same card flips it back */
.flip-native .elementor-widget-flip-box:not(.elementor-flip-box--flipped) .elementor-flip-box:hover .elementor-flip-box__front,
.flip-native .elementor-widget-flip-box:not(.elementor-flip-box--flipped) .elementor-flip-box:focus-within .elementor-flip-box__front{transform:none!important}
.flip-native .elementor-widget-flip-box:not(.elementor-flip-box--flipped) .elementor-flip-box:hover .elementor-flip-box__back,
.flip-native .elementor-widget-flip-box:not(.elementor-flip-box--flipped) .elementor-flip-box:focus-within .elementor-flip-box__back{transform:rotateX(0) rotateY(-180deg)!important}
}