/* ============================================ JJM STONE ART — Stylesheet Palette: charcoal · ivory · brass Google Fonts loaded via in (see shell()), not @import — @import chains a 2nd + 3rd round-trip behind the main stylesheet and was the single biggest render-blocking delay on every page. ============================================ */ :root{ --ink:#141210; --ink-soft:#2A2622; --ivory:#F7F3EC; --ivory-warm:#EFE8DC; --brass:#B08D4F; --brass-light:#D4B681; --taupe:#8A7B6A; --line:rgba(176,141,79,.28); --line-soft:rgba(138,123,106,.2); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ivory);color:var(--ink); font-family:'Jost',sans-serif;font-weight:300;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3,h4,.serif{font-family:'Cormorant Garamond',serif;font-weight:300;letter-spacing:.01em} img{display:block;width:100%;height:100%;object-fit:cover;background:var(--ivory-warm)} /* fixed-ratio image boxes: fill them absolutely so nothing can collapse or paint dark. EVERY box whose > img is absolute below MUST appear here, or the image escapes. */ .hero,.page-head,.pcard-img,.pd-main,.mat-img,.post-img,.split-img, .cat-grid > .cat,.gal-item,.pd-thumb{position:relative} .hero > picture,.hero > img,.page-head > img,.pcard-img > img,.pd-main > img,.mat-img > img, .post-img > img,.cat-grid > .cat > img,.gal-item > img,.pd-thumb > img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* --------------------------------------------------------------- PRODUCT IMAGERY — never crop the piece. Stone photos here range from 0.47 (very tall) to 4.68 (very wide), so any single crop would slice most of them. These boxes letterbox instead: the whole design is always visible, on a stone-toned ground. --------------------------------------------------------------- */ .pcard-img > img,.pd-main > img,.mat-img > img{ object-fit:contain;background:var(--ivory-warm); } .pcard-img,.pd-main,.mat-img{background:var(--ivory-warm)} .pd-main > img{padding:10px} a{color:inherit;text-decoration:none} .wrap{max-width:1340px;margin:0 auto;padding:0 clamp(20px,5vw,64px)} .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);font-weight:400} .rule{width:52px;height:1px;background:var(--brass);margin:0 auto 22px} em{font-style:italic;color:var(--brass)} /* ---------- ANNOUNCE + NAV ---------- */ .announce{background:var(--ink);color:var(--ivory-warm);text-align:center;padding:11px 20px; font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:300} nav{position:sticky;top:0;z-index:80;background:rgba(247,243,236,.9); backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:86px} .logo{display:flex;align-items:center;gap:13px} .logo-mark{width:auto;height:38px;object-fit:contain;background:none;flex:none} .logo-txt{font-family:'Cormorant Garamond',serif;font-size:25px;letter-spacing:.14em;font-weight:500;line-height:1.05} .logo-txt span{color:var(--brass)} .logo-txt small{display:block;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.42em; color:var(--taupe);margin-top:2px;font-weight:300} .f-logo-img{width:auto;height:96px;object-fit:contain;background:none;margin-bottom:16px} .nav-links{display:flex;gap:34px;align-items:center} .nav-links > a, .nav-drop > a{font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-soft);position:relative;padding-bottom:4px;display:inline-block} .nav-links > a::after, .nav-drop > a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--brass);transition:width .35s ease} .nav-links > a:hover::after, .nav-drop:hover > a::after{width:100%} .nav-links a.active{color:var(--brass)} .nav-links a.active::after{width:100%} .nav-drop{position:relative} .drop-menu{position:absolute;top:100%;left:-24px;min-width:260px;background:var(--ivory); border:1px solid var(--line);padding:14px 0;opacity:0;visibility:hidden;transform:translateY(8px); transition:.3s ease;box-shadow:0 22px 50px rgba(20,18,16,.1)} .nav-drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateY(0)} .drop-menu a{display:block;padding:11px 26px;font-size:12.5px;letter-spacing:.06em; color:var(--ink-soft);transition:.25s ease} .drop-menu a:hover{background:var(--ivory-warm);color:var(--brass);padding-left:32px} .nav-cta{border:1px solid var(--ink);padding:12px 26px;font-size:11px;letter-spacing:.2em; text-transform:uppercase;transition:.35s ease} .nav-cta:hover{background:var(--ink);color:var(--ivory)} .nav-cta::after{display:none !important} .burger{display:none;font-size:22px;cursor:pointer;background:none;border:none;color:var(--ink)} /* ---------- BUTTONS ---------- */ .btn-row{display:flex;gap:16px;flex-wrap:wrap} .btn{padding:16px 38px;font-size:11px;letter-spacing:.22em;text-transform:uppercase; transition:.35s ease;border:1px solid;display:inline-block} .btn-solid{background:var(--brass);border-color:var(--brass);color:var(--ink)} .btn-solid:hover{background:transparent;color:var(--brass);border-color:var(--brass)} .btn-ghost{border-color:rgba(247,243,236,.45);color:var(--ivory)} .btn-ghost:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)} .btn-dark{border-color:var(--ink);color:var(--ink)} .btn-dark:hover{background:var(--ink);color:var(--ivory)} .link-arrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase; border-bottom:1px solid var(--brass);padding-bottom:6px;color:var(--brass);display:inline-block} /* ---------- HERO ---------- */ .hero{position:relative;height:88vh;min-height:600px;overflow:hidden;background:var(--ink)} .hero > picture{display:block} .hero picture img{width:100%;height:100%;object-fit:cover} .hero img{filter:brightness(.92)} .hero-overlay{position:absolute;inset:0; background:linear-gradient(100deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.62) 34%, rgba(20,18,16,.18) 66%,rgba(20,18,16,.04) 100%)} .hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;color:var(--ivory)} .hero-content .wrap{width:100%} .hero h1{font-size:clamp(44px,6.4vw,92px);line-height:1.06;margin:20px 0 26px;max-width:15ch} .hero h1 em{color:var(--brass-light)} .hero p{max-width:44ch;font-size:16px;color:rgba(247,243,236,.8);margin-bottom:40px} .hero .eyebrow{color:var(--brass-light)} .scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%); font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(247,243,236,.55)} /* ---------- PAGE HEADER ---------- */ .page-head{position:relative;height:46vh;min-height:340px;overflow:hidden;background:var(--ink)} .page-head img{filter:brightness(.55)} .page-head .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,16,.8),rgba(20,18,16,.35))} .page-head .inner{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center;color:var(--ivory)} .page-head h1{font-size:clamp(38px,5.4vw,68px);line-height:1.1;margin-top:16px;max-width:20ch} .page-head h1 em{color:var(--brass-light)} .page-head .eyebrow{color:var(--brass-light)} .page-head p{color:rgba(247,243,236,.72);max-width:52ch;margin-top:18px;font-size:15px} .crumb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe); padding:22px 0;border-bottom:1px solid var(--line-soft)} .crumb a:hover{color:var(--brass)} /* ---------- SECTIONS ---------- */ section{padding:clamp(76px,9vw,132px) 0} .sec-head{text-align:center;max-width:660px;margin:0 auto clamp(44px,6vw,72px)} .sec-head h2{font-size:clamp(32px,4.4vw,56px);line-height:1.12;margin:16px 0 20px} .sec-head p{color:var(--taupe);font-size:15px} .band{background:var(--ivory-warm)} .band-dark{background:var(--ink);color:var(--ivory)} .band-dark .sec-head p{color:rgba(247,243,236,.6)} .band-dark h2 em{color:var(--brass-light)} /* ---------- TRUST ---------- */ .trust{border-bottom:1px solid var(--line);background:var(--ivory-warm)} .trust-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:44px 0} .trust-item{border-right:1px solid var(--line);padding:0 18px} .trust-item:last-child{border-right:none} .trust-item .num{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--brass);line-height:1} .trust-item .lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);margin-top:10px} /* ---------- COLLECTION CARDS ---------- */ .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .cat-grid > .cat{position:relative;aspect-ratio:3/3.6;overflow:hidden;background:var(--ink);display:block} .cat-grid > .cat img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1);filter:brightness(.82)} .cat-grid > .cat:hover img{transform:scale(1.06)} .cat-veil{position:absolute;inset:0; background:linear-gradient(to top,rgba(20,18,16,.88) 0%,rgba(20,18,16,.16) 55%,transparent 100%)} .cat-txt{position:absolute;left:0;right:0;bottom:0;padding:34px 30px;color:var(--ivory)} .cat-txt h3{font-size:26px;margin-bottom:6px;color:var(--ivory)} .cat-txt .sub{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-light)} .cat-txt .count{font-size:11px;color:rgba(247,243,236,.55);margin-top:8px} .cat-txt .go{font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-top:14px; opacity:0;transform:translateY(8px);transition:.45s ease;display:block;color:var(--brass-light)} .cat:hover .go{opacity:1;transform:translateY(0)} /* ---------- SPLIT ---------- */ .split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(40px,7vw,96px);padding-inline:0} .split-img{aspect-ratio:4/4.6;overflow:hidden} .split-txt{padding-right:clamp(20px,6vw,80px)} .split-txt h2{font-size:clamp(30px,4vw,50px);line-height:1.14;margin:16px 0 24px} .split-txt p{color:var(--taupe);margin-bottom:18px;font-size:15px} .band-dark .split-txt p{color:rgba(247,243,236,.66)} .feat-list{list-style:none;margin:28px 0 34px} .feat-list li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline;font-size:14px} .feat-list li span{color:var(--brass);font-family:'Cormorant Garamond',serif;font-size:15px} /* ---------- GALLERY ---------- */ .grp{margin-bottom:clamp(56px,7vw,96px)} .grp-head{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:30px;flex-wrap:wrap;gap:10px} .grp-head h3{font-size:clamp(24px,3vw,34px)} .grp-head .n{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)} .grp-head p{font-size:14px;color:var(--taupe);width:100%;margin-top:6px} .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .gal-item{position:relative;aspect-ratio:1/1.15;overflow:hidden;background:var(--ivory-warm); cursor:pointer;border:1px solid transparent;transition:.35s ease} .gal-item img{transition:transform .9s cubic-bezier(.2,.8,.2,1)} .gal-item:hover img{transform:scale(1.07)} .gal-item:hover{border-color:var(--brass)} .gal-item .zoom{position:absolute;inset:0;background:rgba(20,18,16,.42);opacity:0; transition:.35s ease;display:flex;align-items:center;justify-content:center; color:var(--ivory);font-size:10px;letter-spacing:.24em;text-transform:uppercase} .gal-item:hover .zoom{opacity:1} /* ---------- MATERIAL CARDS ---------- */ .mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .mat{background:var(--ivory);border:1px solid var(--line);overflow:hidden;transition:.4s ease} .mat:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(20,18,16,.09)} .mat-img{aspect-ratio:4/3.1;overflow:hidden} .mat-img img{transition:transform 1s cubic-bezier(.2,.8,.2,1)} .mat:hover .mat-img img{transform:scale(1.07)} .mat-body{padding:22px 22px 26px} .mat-body h4{font-size:21px;margin-bottom:5px} .mat-body .origin{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)} .mat-body .enq{display:block;margin-top:16px;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--brass)} /* ---------- PROCESS ---------- */ .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:20px} .proc{padding:44px 30px;border:1px solid var(--line);background:var(--ivory)} .proc .n{font-family:'Cormorant Garamond',serif;font-size:44px;color:var(--brass);line-height:1} .proc h4{font-size:22px;margin:14px 0 10px} .proc p{font-size:13.5px;color:var(--taupe)} /* ---------- PLACEHOLDER ---------- */ .placeholder{border:1px dashed var(--brass);background:var(--ivory-warm); padding:clamp(48px,7vw,90px) 34px;text-align:center} .placeholder h3{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px} .placeholder p{color:var(--taupe);max-width:52ch;margin:0 auto 26px;font-size:15px} .ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px} .ph-box{aspect-ratio:1/1.15;border:1px solid var(--line);background:var(--ivory); display:flex;align-items:center;justify-content:center;color:var(--taupe); font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:10px} /* ---------- CTA ---------- */ .cta-band{background:var(--ink);color:var(--ivory);text-align:center} .cta-band h2{font-size:clamp(32px,4.6vw,56px);line-height:1.12;margin:18px 0 22px;max-width:18ch;margin-inline:auto} .cta-band h2 em{color:var(--brass-light)} .cta-band p{color:rgba(247,243,236,.62);max-width:48ch;margin:0 auto 40px} .cta-band .btn-row{justify-content:center} /* ---------- FAQ ---------- */ .faq-list{max-width:860px;margin:0 auto} .faq{border-bottom:1px solid var(--line)} .faq summary{padding:26px 0;cursor:pointer;list-style:none;display:flex; justify-content:space-between;gap:24px;align-items:center; font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2.2vw,24px)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';color:var(--brass);font-size:26px;line-height:1;transition:.3s} .faq[open] summary::after{content:'\2013'} .faq p{padding:0 0 26px;color:var(--taupe);font-size:15px;max-width:70ch} /* ---------- BLOG ---------- */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .post{background:var(--ivory);border:1px solid var(--line);overflow:hidden;transition:.4s ease;display:block} .post:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(20,18,16,.09)} .post-img{aspect-ratio:4/2.7;overflow:hidden} .post-img img{transition:transform 1s cubic-bezier(.2,.8,.2,1)} .post:hover .post-img img{transform:scale(1.06)} .post-body{padding:26px 26px 30px} .post-body .meta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)} .post-body h3{font-size:23px;margin:12px 0 10px;line-height:1.25} .post-body p{font-size:14px;color:var(--taupe)} /* ---------- CONTACT ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,86px);align-items:start} .c-block{margin-bottom:34px;padding-bottom:34px;border-bottom:1px solid var(--line)} .c-block:last-child{border-bottom:none} .c-block h4{font-size:20px;margin-bottom:8px} .c-block a{color:var(--brass)} .c-block p{color:var(--taupe);font-size:14.5px} form{background:var(--ivory-warm);padding:clamp(30px,4vw,48px);border:1px solid var(--line)} .field{margin-bottom:22px} label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--taupe);margin-bottom:9px} input,select,textarea{width:100%;padding:14px 16px;border:1px solid var(--line); background:var(--ivory);font-family:'Jost',sans-serif;font-size:14.5px;font-weight:300; color:var(--ink);outline:none;transition:.3s ease} input:focus,select:focus,textarea:focus{border-color:var(--brass)} textarea{min-height:130px;resize:vertical} .f2{display:grid;grid-template-columns:1fr 1fr;gap:22px} /* ---------- ABOUT ---------- */ .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .val{padding:46px 34px;border:1px solid var(--line);background:var(--ivory)} .val h4{font-size:23px;margin-bottom:12px} .val p{font-size:14px;color:var(--taupe)} .quote{text-align:center;max-width:860px;margin:0 auto} .quote p{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3.4vw,40px); line-height:1.4;font-style:italic;color:var(--ink)} .band-dark .quote p{color:var(--ivory)} .quote .by{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-top:26px} /* ---------- FOOTER ---------- */ footer{background:var(--ink-soft);color:rgba(247,243,236,.6);padding:80px 0 32px;font-size:13px} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:52px; padding-bottom:52px;border-bottom:1px solid rgba(176,141,79,.2)} footer h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase; color:var(--brass-light);margin-bottom:20px;font-weight:400} footer ul{list-style:none} footer li{margin-bottom:11px} footer a:hover{color:var(--brass-light)} .f-logo{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ivory); letter-spacing:.1em;margin-bottom:16px} .f-bottom{display:flex;justify-content:space-between;padding-top:26px; font-size:11px;letter-spacing:.06em;flex-wrap:wrap;gap:12px} .f-social{display:flex;gap:14px;margin-top:20px} .f-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px; border:1px solid rgba(247,243,236,.25);border-radius:50%;color:rgba(247,243,236,.7); transition:border-color .2s,color .2s} .f-social a:hover{border-color:var(--brass-light);color:var(--brass-light)} /* ---------- WHATSAPP FLOAT ---------- */ .wa{position:fixed;right:24px;bottom:24px;z-index:90;background:var(--brass);color:var(--ink); padding:15px 26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase; box-shadow:0 14px 36px rgba(20,18,16,.28);transition:.35s ease} .wa:hover{background:var(--ink);color:var(--brass-light)} /* ---------- LIGHTBOX ---------- */ .lb{position:fixed;inset:0;background:rgba(20,18,16,.95);z-index:200; display:none;align-items:center;justify-content:center;padding:40px} .lb.on{display:flex} .lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain} .lb-close{position:absolute;top:26px;right:34px;color:var(--ivory);font-size:34px; cursor:pointer;line-height:1;background:none;border:none} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--ivory); font-size:40px;cursor:pointer;background:none;border:none;padding:20px;opacity:.6;transition:.3s} .lb-nav:hover{opacity:1;color:var(--brass-light)} .lb-prev{left:20px}.lb-next{right:20px} /* ============ PRODUCT CARDS ============ */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .pcard{background:var(--ivory);border:1px solid var(--line);overflow:hidden;transition:.4s ease;display:block} .pcard:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(20,18,16,.11)} .pcard-img{aspect-ratio:4/3.1;overflow:hidden;position:relative;background:var(--ivory-warm)} .pcard-img img{transition:transform 1s cubic-bezier(.2,.8,.2,1)} .pcard:hover .pcard-img img{transform:scale(1.06)} .pcard-sku{position:absolute;top:14px;left:14px;background:rgba(20,18,16,.78); color:var(--brass-light);font-size:9.5px;letter-spacing:.16em;padding:6px 11px} .pcard-body{padding:22px 22px 26px} .pcard-body .cat{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)} .pcard-body h3{font-size:23px;margin:8px 0 8px;line-height:1.2} .pcard-body p{font-size:13.5px;color:var(--taupe);line-height:1.6} .pcard-body .view{display:block;margin-top:16px;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--brass)} /* ============ PRODUCT DETAIL ============ */ .pd{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,4.5vw,68px);align-items:start} .pd-main{aspect-ratio:4/3;overflow:hidden;background:var(--ivory-warm);border:1px solid var(--line)} .pd-main img{cursor:zoom-in} .pd-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px} .pd-thumb{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);cursor:pointer; opacity:.55;transition:.3s ease;background:var(--ivory-warm)} .pd-thumb:hover{opacity:1} .pd-thumb.on{opacity:1;border-color:var(--brass)} .pd-info h1{font-size:clamp(32px,4vw,50px);line-height:1.08;margin:10px 0 18px} .pd-info .lede{color:var(--taupe);font-size:15.5px;margin-bottom:8px} .pd-long{color:var(--taupe);font-size:14.5px;line-height:1.75;margin-top:12px;display:none} .pd-long.on{display:block} .readmore{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass); border-bottom:1px solid var(--brass);background:none;border-top:0;border-left:0;border-right:0; padding:0 0 4px;cursor:pointer;font-family:'Jost',sans-serif;margin-top:10px} .spec{display:grid;grid-template-columns:150px 1fr;gap:14px 20px;margin:30px 0 6px; padding-top:26px;border-top:1px solid var(--line);align-items:start} .spec dt{font-size:12px;letter-spacing:.1em;font-weight:400;color:var(--ink);padding-top:9px} .spec dd{font-size:14px;color:var(--taupe);padding-top:9px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{border:1px solid var(--line);background:var(--ivory);padding:10px 17px; font-size:11.5px;letter-spacing:.09em;cursor:pointer;transition:.25s ease; font-family:'Jost',sans-serif;color:var(--ink)} .chip:hover{border-color:var(--brass);color:var(--brass)} .chip.on{background:var(--ink);border-color:var(--ink);color:var(--ivory)} .chip.on:hover{color:var(--brass-light)} .sw-row{display:flex;flex-wrap:wrap;gap:11px} .sw{width:56px;text-align:center;cursor:pointer} .sw span{display:block;width:56px;height:56px;overflow:hidden;border:2px solid transparent; transition:.25s ease;background:var(--ivory-warm)} .sw img{width:100%;height:100%;object-fit:cover} .sw small{display:block;font-size:9px;letter-spacing:.06em;color:var(--taupe);margin-top:6px} .sw.on span{border-color:var(--brass)} .sw:hover span{border-color:var(--brass-light)} .pd-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px} .cta-enq{background:var(--brass);color:var(--ink);border:1px solid var(--brass); padding:17px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:.3s ease} .cta-enq:hover{background:transparent;color:var(--brass)} .cta-wa{background:#1f6f4a;color:#fff;border:1px solid #1f6f4a;padding:17px;text-align:center; font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:.3s ease} .cta-wa:hover{background:transparent;color:#1f6f4a} .pd-note{font-size:12.5px;color:var(--taupe);margin-top:16px;text-align:center} /* ============ DRAWING BLOCK ============ */ .drawing{background:var(--ivory-warm);border:1px solid var(--line); padding:clamp(28px,3.5vw,44px);margin-top:38px} .drawing h3{font-size:26px;margin:10px 0 12px} .drawing p{font-size:14.5px;color:var(--taupe);margin-bottom:20px} .drawing .btn-row{margin-top:18px} .dw-list{list-style:none;margin:18px 0 0} .dw-list li{font-size:13.5px;color:var(--taupe);padding:7px 0 7px 24px;position:relative} .dw-list li::before{content:'\2713';position:absolute;left:0;color:var(--brass)} .drop-static{border:1px dashed var(--brass);background:var(--ivory);padding:24px;text-align:center} .drop-static .big{font-size:13.5px;color:var(--ink);margin-bottom:5px} .drop-static .sm{font-size:11.5px;color:var(--taupe)} /* ============ RELATED ============ */ .rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* ---------- RESPONSIVE ---------- */ @media(max-width:1024px){ .cat-grid{grid-template-columns:repeat(2,1fr)} .mat-grid,.gal,.ph-grid{grid-template-columns:repeat(3,1fr)} .proc-grid,.val-grid,.blog-grid{grid-template-columns:repeat(2,1fr)} .split,.contact-grid{grid-template-columns:1fr} .split-txt{padding:0 clamp(20px,5vw,64px)} .f-grid{grid-template-columns:1fr 1fr;gap:36px} .nav-links{display:none} .burger{display:block} .nav-links.open{display:flex;position:absolute;top:86px;left:0;right:0; flex-direction:column;background:var(--ivory);border-bottom:1px solid var(--line); padding:26px 34px;gap:20px;align-items:flex-start} .nav-links.open .drop-menu{position:static;opacity:1;visibility:visible;transform:none; border:none;box-shadow:none;padding:8px 0 0;min-width:0} .nav-links.open .drop-menu a{padding:8px 0 8px 18px} .prod-grid,.rel-grid{grid-template-columns:repeat(2,1fr)} .pd{grid-template-columns:1fr} .spec{grid-template-columns:1fr;gap:4px 0} .spec dt{padding-top:16px} .spec dd{padding-top:2px} } @media(max-width:640px){ .cat-grid,.mat-grid{grid-template-columns:1fr} .gal,.ph-grid{grid-template-columns:repeat(2,1fr)} .proc-grid,.val-grid,.blog-grid{grid-template-columns:1fr} .trust-in{grid-template-columns:1fr 1fr;gap:28px 0;padding:32px 0} .trust-item:nth-child(2){border-right:none} .f-grid{grid-template-columns:1fr;gap:34px;padding-bottom:36px} .f2{grid-template-columns:1fr} .prod-grid,.rel-grid{grid-template-columns:1fr} .pd-thumbs{grid-template-columns:repeat(4,1fr)} .pd-cta{grid-template-columns:1fr} /* --- tighter vertical rhythm --- */ section{padding:56px 0} .sec-head{margin-bottom:34px} .grp{margin-bottom:48px} footer{padding:52px 0 26px} /* --- top bar: stop the long strapline wrapping into a block --- */ .announce{font-size:9px;letter-spacing:.1em;padding:9px 14px;line-height:1.5} /* --- nav --- */ .nav-in{height:68px} .logo{gap:9px} .logo-mark{height:30px} .logo-txt{font-size:19px;letter-spacing:.1em} .logo-txt small{font-size:6.5px;letter-spacing:.28em} .f-logo-img{height:78px} .nav-cta{display:none} .nav-links.open{top:68px;padding:22px 22px 26px} /* --- hero: shorter, and the artwork stays readable behind the text --- */ .hero{height:auto;min-height:72vh;padding:64px 0 56px;display:flex;align-items:flex-end} .hero-overlay{background:linear-gradient(to bottom,rgba(20,18,16,.18) 0%,rgba(20,18,16,.42) 45%,rgba(20,18,16,.88) 100%)} .hero > img{position:absolute;inset:0} .hero h1{font-size:38px;margin:14px 0 18px;max-width:none} .hero p{font-size:14.5px;margin-bottom:28px} .hero .btn-row{gap:10px} .scroll-hint{display:none} .page-head{height:auto;min-height:0;padding:64px 0 58px} .page-head > img{position:absolute;inset:0} .page-head h1{font-size:34px;margin-top:12px} .page-head p{font-size:14px;margin-top:14px} .crumb{padding:16px 0;font-size:9.5px;letter-spacing:.14em} /* --- buttons full width, thumb-friendly --- */ .btn{padding:15px 20px;width:100%;text-align:center;font-size:10.5px;letter-spacing:.16em} .btn-row{gap:10px} .link-arrow{font-size:10.5px} /* --- product detail --- */ .pd{gap:26px} .pd-info h1{font-size:32px;margin:8px 0 14px} .spec{margin-top:24px;padding-top:20px} .chip{padding:9px 14px;font-size:11px} .sw,.sw span{width:48px} .sw span{height:48px} .drawing{padding:24px 20px;margin-top:30px} .drawing h3{font-size:22px} .cta-enq,.cta-wa{padding:16px} /* --- cards: wider boxes so landscape stone photos read properly --- */ .pcard-img{aspect-ratio:4/3} .pd-main{aspect-ratio:4/3.2} .mat-img{aspect-ratio:4/3} .gal-item{aspect-ratio:1/1} .cat-grid > .cat{aspect-ratio:4/3.4} .cat-txt{padding:24px 20px} .cat-txt h3{font-size:23px} .cat-txt .go{opacity:1;transform:none} .pcard-body{padding:18px 18px 22px} .pcard-body h3{font-size:21px} /* --- forms: 16px stops iOS auto-zoom on focus --- */ input,select,textarea{font-size:16px;padding:13px 14px} form{padding:24px 20px} /* --- floating WhatsApp: compact, out of the way --- */ .wa{right:12px;bottom:12px;padding:12px 16px;font-size:10px;letter-spacing:.12em} /* --- lightbox --- */ .lb{padding:16px} .lb-nav{font-size:32px;padding:12px} .lb-close{top:14px;right:16px;font-size:30px} .quote p{font-size:22px} .faq summary{font-size:18px;padding:20px 0} .placeholder{padding:36px 20px} .ph-box{font-size:9px;letter-spacing:.14em} } @media(max-width:380px){ .gal,.ph-grid{grid-template-columns:1fr} .hero h1{font-size:33px} .pd-thumbs{grid-template-columns:repeat(3,1fr)} } /* product-card category label must never inherit collection-card styles */ .pcard-body .cat{background:none;aspect-ratio:auto;overflow:visible;position:static}