/* BaSton – Lithic Gallery – Global CSS
   Exact 1:1 structural replica of Stitch screens.
   No Tailwind. Pure Vanilla CSS.
   Fonts loaded via <link preload> in HTML to avoid render-blocking. */

/* ── DESIGN TOKENS ── */
:root {
  --background:#fbf9f8;--on-background:#1b1c1c;
  --surface:#fbf9f8;--surface-bright:#fbf9f8;
  --surface-container-lowest:#ffffff;--surface-container-low:#f5f3f3;
  --surface-container:#efeded;--surface-container-high:#eae8e7;
  --surface-container-highest:#e4e2e2;--surface-dim:#dbd9d9;
  --surface-tint:#7f5600;--surface-variant:#e4e2e2;
  --on-surface:#1b1c1c;--on-surface-variant:#504537;
  --inverse-surface:#303030;--inverse-on-surface:#f2f0f0;
  --primary:#7f5600;--on-primary:#ffffff;
  --primary-container:#dca54a;--on-primary-container:#5a3c00;
  --primary-fixed:#ffddaf;--primary-fixed-dim:#f6bc5f;
  --secondary:#565e74;--on-secondary:#ffffff;
  --secondary-container:#dae2fd;
  --tertiary:#615f52;--on-tertiary:#ffffff;
  --tertiary-container:#b3afa1;
  --error:#ba1a1a;--on-error:#ffffff;
  --error-container:#ffdad6;
  --outline:#827565;--outline-variant:#d4c4b1;
  --font-headline:'Noto Serif',serif;
  --font-body:'Manrope',sans-serif;
  --font-label:'Manrope',sans-serif;
}

/* ── RESET & BASE ── */
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--background);color:var(--on-surface);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button,input,textarea,select{font-family:inherit}
::selection{background:var(--primary-container);color:var(--on-primary-container)}

.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

/* ── HELPER CLASSES ── */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 2rem;}
.noto-serif{font-family:var(--font-headline)}
.manrope{font-family:var(--font-body)}
.signature-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-container) 100%)}
.glass-nav{background:rgba(251,249,248,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.texture-zoom:hover img{transform:scale(1.05)}

/* ── NAVBAR ── */
.site-nav{position:fixed;top:0;width:100%;z-index:50;background:rgba(251,249,248,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.site-nav .container{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}
.site-nav .logo{font-family:var(--font-headline);font-size:1.5rem;font-weight:700;letter-spacing:-.04em;color:var(--on-surface)}
.site-nav .links{display:flex;align-items:center;gap:2.5rem}
.site-nav .links a{font-family:var(--font-headline);font-size:.875rem;text-transform:uppercase;font-weight:500;letter-spacing:-.01em;color:rgba(27,28,28,.7);transition:color .3s}
.site-nav .links a:hover,.site-nav .links a.active{color:var(--primary)}
.site-nav .links a.active{border-bottom:2px solid var(--primary);padding-bottom:.25rem}
.site-nav .cta{background:var(--primary);color:var(--on-primary);padding:.5rem 1.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;border:none;cursor:pointer;transition:transform .2s}
.site-nav .cta:hover{transform:scale(1.03)}
.site-nav .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--on-surface)}

/* ── SECTION UTILITY ── */
.section-label{font-family:var(--font-label);font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.3em;color:var(--primary);margin-bottom:1rem;display:block}
.divider-accent{height:1px;width:2rem;background:var(--primary);transition:width .5s}

/* ══════════════════════════════════════════
   HOME SECTION (home_raw.html replica)
   ══════════════════════════════════════════ */
#home{position:relative;min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 0 1rem;overflow:hidden}
#home .hero-bg{position:absolute;inset:0;z-index:0}
#home .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.8}
#home .hero-bg .overlay{position:absolute;inset:0;background:linear-gradient(to bottom,var(--surface),rgba(251,249,248,.1) 50%,var(--surface))}
#home .hero-inner{position:relative;z-index:1;max-width:1200px;text-align:center}
#home .tagline{font-family:var(--font-headline);font-style:italic;font-size:1.5rem;color:rgba(80,69,55,.9);display:inline-flex;align-items:center;gap:1rem;margin-bottom:.5rem}
#home .tagline .q{color:rgba(127,86,0,.4);font-size:3rem;font-family:var(--font-headline)}
#home .hero-title{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:12rem;
  color:var(--primary);
  line-height:1;
  letter-spacing:-.05em;
  filter:drop-shadow(0 2px 10px rgba(127,86,0,.15));
  animation: heroFloat 4s ease-in-out infinite;
  display:inline-block;
}
@keyframes heroFloat{
  0%,100%  { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}
#home .hero-sub{font-family:var(--font-label);font-weight:500;font-size:.875rem;text-transform:uppercase;letter-spacing:.4em;color:var(--on-surface-variant);opacity:.8;margin-bottom:2rem}
#home .hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
#home .hero-btns .btn-prim{background:linear-gradient(135deg,var(--primary),var(--primary-container));color:var(--on-primary);padding:.875rem 2.5rem;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.15em;border:none;cursor:pointer;box-shadow:0 8px 20px rgba(127,86,0,.1);transition:transform .2s}
#home .hero-btns .btn-prim:hover{transform:scale(1.05)}
#home .hero-btns .btn-sec{background:rgba(251,249,248,.5);backdrop-filter:blur(12px);border:1px solid rgba(212,196,177,.3);padding:.875rem 2.5rem;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;transition:background .2s}
#home .hero-btns .btn-sec:hover{background:var(--surface-container-highest)}

/* Advantage (side-by-side) */
#advantage{padding:2.5rem 1.5rem;background:var(--surface);border-top:1px solid rgba(212,196,177,.1)}
#advantage .container{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
#advantage .left .label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;font-weight:800;color:var(--primary);margin-bottom:1rem}
#advantage .left h3{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.15}
#advantage .left p{font-size:1.125rem;color:var(--on-surface-variant);line-height:1.7}
#advantage .right{border-left:1px solid rgba(212,196,177,.2);padding-left:4rem}
#advantage .right h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem}
.feature-row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.feature-row .icon{color:var(--primary);font-size:1.25rem;margin-top:.15rem}
.feature-row h4{font-family:var(--font-headline);font-size:1.25rem;font-weight:700}

/* ══════════════════════════════════════════
   PRODUCTS SECTION (products_raw.html + products_granite_raw.html)
   ══════════════════════════════════════════ */
#products{padding-top:6rem}
#products .prod-header{padding-top:3rem;text-align:left}
#products .prod-header h2{font-family:var(--font-headline);font-size:3.5rem;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:1rem}
#products .prod-header p{max-width:640px;font-size:1.125rem;color:var(--on-surface-variant);line-height:1.6;font-weight:300;margin-bottom:2.5rem}
/* Toggle */
.toggle-wrap{margin-bottom:2.5rem}
.toggle-bar{display:inline-flex;padding:.25rem;background:var(--surface-container);border-radius:.25rem;border:1px solid rgba(212,196,177,.3)}
.toggle-bar button{padding:.625rem 2rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;border:none;cursor:pointer;border-radius:.375rem;background:transparent;color:var(--on-surface-variant);transition:all .3s}
.toggle-bar button.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(127,86,0,.2)}
/* Collection layout (marble) */
.collection-panel{padding:3rem 0;background:var(--surface-container-lowest)}
.collection-panel .container{display:grid;grid-template-columns:1fr 2fr;gap:3rem}
.collection-panel .sticky-col{position:sticky;top:6rem;align-self:start}
.collection-panel .sticky-col h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;margin-bottom:1rem}
.collection-panel .sticky-col>p{color:var(--on-surface-variant);line-height:1.6;margin-bottom:2rem}
.spec-border{border-left:1px solid rgba(212,196,177,.3);padding-left:1.5rem}
.spec-block{margin-bottom:1.5rem}
.spec-block h5{font-family:var(--font-label);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--primary);margin-bottom:.375rem}
.spec-block p,.spec-block li{font-size:.875rem;font-weight:500;line-height:1.6}
/* marble grid 2-col */
.marble-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.marble-card .img-wrap{aspect-ratio:4/5;overflow:hidden;position:relative;margin-bottom:1rem;background:var(--surface)}
.marble-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.marble-card:hover .img-wrap img{transform:scale(1.05)}
.marble-card .img-wrap .ring{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.marble-card h3{font-family:var(--font-headline);font-size:1.5rem;font-weight:700;margin-bottom:.25rem}
.marble-card p{font-size:.875rem;color:var(--on-surface-variant);line-height:1.5}
.marble-card.wide{grid-column:span 2}
.marble-card.wide .img-wrap{aspect-ratio:16/9}
/* granite grid 5-col */
.granite-section{padding:3rem 0;background:var(--surface-container-low)}
.granite-section .container{}
.granite-header{display:grid;grid-template-columns:5fr 7fr;gap:2rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(212,196,177,.3)}
.granite-header h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;margin-bottom:.75rem}
.granite-header>div:last-child{display:flex;flex-wrap:wrap;gap:1.5rem 3rem}
.granite-header .meta h4{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--primary);margin-bottom:.375rem}
.granite-header .meta p{font-size:.875rem;font-weight:500;line-height:1.6;max-width:20rem}
.granite-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:start}
.granite-card{display:flex;flex-direction:column;gap:.5rem}
.granite-card .swatch{width:100%;padding-bottom:100%;position:relative;overflow:hidden;background:var(--surface-container)}
.granite-card .swatch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.granite-card:hover .swatch img{transform:scale(1.05)}
.granite-card .name{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-top:.5rem}
.granite-custom{width:100%;padding-bottom:100%;position:relative;border:2px dashed rgba(212,196,177,.4);text-align:center;transition:border-color .3s;height:0}
.granite-custom .inner-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;padding:1rem}
.granite-custom:hover{border-color:var(--primary)}
.granite-custom .t{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.25rem}
.granite-custom .s{font-size:.5625rem;color:var(--on-surface-variant);display:block}
/* Specialized solutions */
.specialized{padding:3rem 0;background:var(--surface)}
.specialized .container{}
.specialized .head{text-align:center;margin-bottom:2rem}
.specialized .head h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;margin-bottom:.75rem}
.specialized .head .bar{width:3rem;height:.25rem;margin:0 auto}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.spec-card .img{aspect-ratio:4/3;overflow:hidden;margin-bottom:.75rem;background:var(--surface-container)}
.spec-card .img img{width:100%;height:100%;object-fit:cover}
.spec-card .ico{width:2.5rem;height:2.5rem;background:var(--surface-container);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.spec-card .ico .material-symbols-outlined{color:var(--primary);font-size:1.25rem}
.spec-card h4{font-weight:700;font-size:1.125rem;margin-bottom:.375rem}
.spec-card p{font-size:.875rem;color:var(--on-surface-variant);line-height:1.6}
/* Signature applications */
.sig-apps{padding:3rem 0;background:var(--surface)}
.sig-apps .container{}
.sig-apps .head{text-align:center;margin-bottom:2.5rem}
.sig-apps .head .over{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--primary);margin-bottom:.25rem}
.sig-apps .head h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700}
.sig-apps .head .line{width:4rem;height:2px;background:var(--primary);margin:.75rem auto 0}
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.sig-card .img{aspect-ratio:16/9;overflow:hidden;margin-bottom:1.5rem;border:1px solid rgba(212,196,177,.2)}
.sig-card .img img{width:100%;height:100%;object-fit:cover}
.sig-card .body{background:var(--surface-container-low);padding:2rem;border:1px solid rgba(212,196,177,.2);transition:background .3s}
.sig-card:hover .body{background:var(--surface-container-high)}
.sig-card .body h3{font-weight:700;font-size:1.25rem;margin-bottom:.75rem}
.sig-card .body p{color:var(--on-surface-variant);font-size:.875rem;line-height:1.6;margin-bottom:1.5rem}
.sig-card .tags{display:flex;flex-wrap:wrap;gap:.5rem}
.sig-card .tag{font-size:.5625rem;font-weight:700;text-transform:uppercase;background:var(--surface-container-lowest);padding:.25rem .5rem;letter-spacing:-.02em}
/* Products bottom CTA */
.prod-cta{padding:5rem 0;background:var(--on-surface);text-align:center}
.prod-cta h3{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;font-style:italic;color:var(--surface);margin-bottom:1rem}
.prod-cta p{font-size:1.125rem;font-weight:300;color:rgba(228,226,226,.8);max-width:640px;margin:0 auto 2rem}
.prod-cta button{padding:1rem 2.5rem;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--on-primary);border:none;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.3);transition:transform .3s}
.prod-cta button:hover{transform:scale(1.05)}

/* ══════════════════════════════════════════
   PARTNERS SECTION (partners_raw.html)
   ══════════════════════════════════════════ */
#partners .hero-row{padding:4rem 0;display:flex;gap:4rem;align-items:center}
#partners .hero-row .text{flex:1;display:flex;flex-direction:column;gap:2rem}
#partners .hero-row .text h2{font-family:var(--font-headline);font-size:3.5rem;letter-spacing:-.04em;line-height:1}
#partners .hero-row .text p{font-size:1.25rem;color:var(--on-surface-variant);max-width:36rem;line-height:1.6}
#partners .hero-row .text p span{color:var(--on-surface);font-weight:600}
#partners .hero-row .map-box{flex:1;aspect-ratio:1;background:var(--surface-container-low);position:relative;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden}
#partners .hero-row .map-box img{width:100%;height:100%;object-fit:contain;opacity:.4;mix-blend-mode:multiply}
.node{position:absolute;border-radius:50%;background:var(--primary)}
.node-lg{width:1rem;height:1rem;animation:pulse 2s infinite;box-shadow:0 0 20px rgba(127,86,0,.5)}
.node-md{width:.75rem;height:.75rem;opacity:.6}
.node-sm{width:.5rem;height:.5rem;opacity:.4}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Strength bento */
.strength-section{background:var(--surface-container-low);padding:6rem 3rem}
.strength-section .container{}
.strength-section h2{font-family:var(--font-headline);font-size:2.5rem;letter-spacing:-.02em;margin-bottom:4rem}
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.bento-card{padding:3rem;display:flex;flex-direction:column;justify-content:space-between;min-height:20rem;transition:transform 0.3s ease,box-shadow 0.3s ease}
.bento-card:hover{transform:scale(1.02);box-shadow:0 4px 15px rgba(0,0,0,0.08)}
.bento-card.default{background:var(--surface-container-lowest)}
.bento-card.accent{color:var(--on-primary)}
.bento-card .material-symbols-outlined{font-size:2.5rem;margin-bottom:auto}
.bento-card.default .material-symbols-outlined{color:var(--primary)}
.bento-card h3{font-family:var(--font-headline);font-size:1.5rem;margin-bottom:.5rem}
.bento-card p{font-size:1rem;line-height:1.5}
.bento-card.default p{color:var(--on-surface-variant)}
.bento-card.accent p{opacity:.9}

/* Partner logos */
.logos-section{background:var(--surface-container-highest);padding:5rem 3rem;overflow:hidden}
.logos-section .container{text-align:center}
.logos-section .subtitle{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;color:var(--on-surface-variant);margin-bottom:3rem}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4rem;opacity:.8;transition:all .7s}
.logos-row .plogo{font-family:var(--font-headline);font-size:1.5rem;font-style:italic;letter-spacing:.15em;color:var(--on-surface)}

/* ══════════════════════════════════════════
   ABOUT US SECTION (about_raw.html)
   ══════════════════════════════════════════ */
#about .about-hero{padding:4rem 2rem 4rem;background:var(--surface)}
#about .about-hero .container{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
#about .about-hero .col-left h2{font-family:var(--font-headline);font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem;max-width:800px}
#about .about-hero .col-left p{font-size:1.125rem;color:var(--on-surface-variant);line-height:1.6;font-weight:300}
#about .about-hero .col-right{border-left:1px solid rgba(212,196,177,.5);padding-left:4rem}
#about .about-hero .col-right p{font-size:1.375rem;color:var(--on-surface-variant);line-height:1.6;font-weight:300;font-style:italic}

/* Vision/Mission */
.vm-section{padding:3rem 2rem;background:var(--surface-container-low)}
.vm-section .container{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.vm-card{padding:2.5rem;display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease,box-shadow 0.3s ease}
.vm-card:hover{transform:scale(1.02);box-shadow:0 4px 15px rgba(0,0,0,0.08)}
.vm-card.vision{background:var(--surface-container-lowest);border:1px solid rgba(212,196,177,.3);box-shadow:0 1px 3px rgba(0,0,0,.03)}
.vm-card.mission{background:var(--surface-container-highest)}
.vm-card .material-symbols-outlined{font-size:1.875rem;color:var(--primary);margin-bottom:1rem}
.vm-card h2{font-family:var(--font-headline);font-size:1.875rem;font-weight:700;margin-bottom:1rem}
.vm-card p{color:var(--on-surface-variant);line-height:1.6}
.vm-card ul{display:flex;flex-direction:column;gap:1rem}
.vm-card li{display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:500;color:var(--on-surface-variant)}
.vm-card li .material-symbols-outlined{font-size:1.25rem;color:var(--primary)}

/* Values grid */
.values-section{padding:5rem 2rem;background:var(--surface)}
.values-section .container{}
.values-section .head{margin-bottom:3rem}
.values-section h2{font-family:var(--font-headline);font-size:2.5rem;font-weight:700}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(212,196,177,.3)}
.value-cell{padding:2.5rem;background:#fff;display:flex;flex-direction:column;align-items:flex-start;transition:background .3s;border-right:1px solid rgba(212,196,177,.3)}
.value-cell:last-child{border-right:none}
.value-cell:hover{background:var(--surface-container-low)}
.value-cell .material-symbols-outlined{font-size:1.875rem;color:var(--primary);margin-bottom:2rem;transition:transform .3s}
.value-cell:hover .material-symbols-outlined{transform:scale(1.1)}
.value-cell h3{font-family:var(--font-label);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;margin-bottom:1rem}

/* Stone banner */
.stone-banner{position:relative;height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stone-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.stone-banner .dim{position:absolute;inset:0;background:rgba(27,28,28,.5)}
.stone-banner .text{position:relative;z-index:1;text-align:center}
.stone-banner h2{font-family:var(--font-headline);color:var(--on-primary);font-size:3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem}
.stone-banner .accent{height:.25rem;width:6rem;background:var(--primary);margin:0 auto}

/* ══════════════════════════════════════════
   NEWS SECTION (news_raw.html)
   ══════════════════════════════════════════ */
#news{padding:8rem 0 6rem}
#news .news-header{padding-bottom:3rem;border-bottom:1px solid rgba(212,196,177,.2);margin-bottom:5rem}
#news .news-header h2{font-family:var(--font-headline);font-size:3.5rem;letter-spacing:-.04em;line-height:1}
#news .news-header h2 span{font-style:italic;font-weight:300}
/* Bento news grid */
.news-bento{display:grid;grid-template-columns:8fr 4fr;gap:1.5rem}
.news-feat{position:relative;overflow:hidden;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--surface-container-low)}
.news-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.news-feat:hover img{transform:scale(1.05)}
.news-feat .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,28,28,.4),transparent)}
.news-feat .caption{position:relative;z-index:1;padding:2rem;color:#fff}
.news-feat .caption h2{font-family:var(--font-headline);font-size:3rem;font-weight:700;margin-bottom:.5rem}
.news-feat .caption p{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;opacity:.8}
.news-side{display:flex;flex-direction:column;gap:1.5rem}
.news-side-img{position:relative;overflow:hidden;min-height:350px;flex-shrink:0;background:var(--surface-container-low)}
.news-side-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.news-side-img:hover img{transform:scale(1.05)}
.news-side-img .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,28,28,.4),transparent)}
.news-info{background:var(--surface-container-low);padding:2rem;border-left:4px solid var(--primary);display:flex;flex-direction:column;min-height:120px}
.news-info h3{font-family:var(--font-headline);font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.news-info p{font-size:.875rem;color:var(--on-surface-variant);margin-bottom:1rem}
.news-info ul{font-size:.875rem;color:var(--on-surface-variant);padding-left:1.25rem;list-style:disc;display:flex;flex-direction:column;gap:.5rem}

/* ══════════════════════════════════════════
   CONTACT SECTION (contact_raw.html)
   ══════════════════════════════════════════ */
#contact{padding:8rem 0 6rem}
#contact .contact-headline{margin-bottom:6rem}
#contact .contact-headline .grid12{display:grid;grid-template-columns:8fr 4fr;gap:3rem;align-items:end}
#contact .contact-headline h2{font-family:var(--font-headline);font-weight:700;line-height:1.1}
#contact .contact-headline .big{display:block;font-size:3.5rem;letter-spacing:-.04em;line-height:1;margin-bottom:1rem}
#contact .contact-headline .sub{display:block;font-size:2.5rem;font-weight:400;line-height:1.3}
#contact .contact-headline .aside{padding-bottom:.5rem}
#contact .contact-headline .aside p{border-left:1px solid rgba(212,196,177,.3);padding-left:2rem;font-size:1.125rem;color:var(--on-surface-variant);line-height:1.6}
/* Form + info */
.contact-body{display:grid;grid-template-columns:7fr 5fr;gap:4rem;align-items:start}
.contact-form{background:var(--surface-container-low);padding:3rem;display:flex;flex-direction:column;gap:3rem}
.contact-form form{display:flex;flex-direction:column;gap:3rem}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.field{position:relative}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(130,117,101,.2);padding:.75rem 0;font-size:1rem;color:var(--on-surface);outline:none;transition:border-color .3s;border-radius:0;appearance:none}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--primary)}
.field label{position:absolute;left:0;top:-.875rem;font-family:var(--font-label);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(80,69,55,.6);transition:all .3s}
.field textarea{resize:none}
.field .arrow{position:absolute;right:0;top:.75rem;pointer-events:none;color:var(--on-surface-variant)}
.contact-form .submit-btn{display:inline-flex;align-items:center;justify-content:center;padding:1.25rem 3rem;font-size:.875rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--on-primary);border:none;cursor:pointer;transition:transform .2s}
.contact-form .submit-btn:hover{transform:scale(1.02)}

.contact-info{display:flex;flex-direction:column;gap:4rem}
.info-blocks{display:flex;flex-direction:column;gap:2.5rem}
.info-row{display:flex;align-items:flex-start;gap:1.5rem}
.info-row .ico-box{background:var(--surface-container-highest);padding:1rem;transition:background .3s}
.info-row:hover .ico-box{background:var(--primary-fixed-dim)}
.info-row .ico-box .material-symbols-outlined{color:var(--primary)}
.info-row .details h4{font-family:var(--font-label);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--on-surface-variant);margin-bottom:.5rem}
.info-row .details .val{font-family:var(--font-headline);font-size:1.5rem;font-weight:700}
.info-row .details .sub{font-size:.875rem;color:var(--on-surface-variant);margin-top:.25rem}
.contact-map{aspect-ratio:16/9;overflow:hidden;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.15);border-radius:12px;filter:grayscale(1);transition:filter 0.5s ease}

.contact-map iframe{width:100%;height:100%;border:0;display:block}

/* Contact bottom CTA */
.contact-bottom-cta{margin-top:4rem;padding-top:4rem;padding-bottom:4rem;text-align:center;border-top:1px solid rgba(212,196,177,.2)}
.contact-bottom-cta h3{font-family:var(--font-headline);font-size:2.5rem;font-weight:700;letter-spacing:-.02em}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.site-footer{background:var(--surface-container-low);padding:2.5rem 3rem}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.site-footer .brand{font-family:var(--font-headline);font-size:1rem;color:var(--on-surface)}
.site-footer .copy{font-family:var(--font-label);font-size:.5625rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(27,28,28,.5);margin-top:.25rem}
.site-footer .flinks{display:flex;flex-wrap:wrap;gap:2rem}
.site-footer .flinks a{font-family:var(--font-label);font-size:.625rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(27,28,28,.5);text-decoration:underline;text-underline-offset:4px;transition:color .3s}
.site-footer .flinks a:hover{color:var(--primary)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #home .hero-title{font-size:7rem}
  #advantage .container{grid-template-columns:1fr}
  #advantage .right{border-left:none;padding-left:0;border-top:1px solid rgba(212,196,177,.2);padding-top:3rem}
  .collection-panel .container{grid-template-columns:1fr}
  .collection-panel .sticky-col{position:static}
  .granite-grid{grid-template-columns:repeat(3,1fr)}
  .spec-grid{grid-template-columns:1fr}
  #partners .hero-row{flex-direction:column}
  #about .about-hero .container{grid-template-columns:1fr}
  #about .about-hero .col-right{border-left:none;padding-left:0;border-top:1px solid rgba(212,196,177,.3);padding-top:2rem}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .value-cell:nth-child(2){border-right:none}
  .value-cell{border-bottom:1px solid rgba(212,196,177,.3)}
  .news-bento{grid-template-columns:1fr}
  .contact-body{grid-template-columns:1fr}
  #contact .contact-headline .grid12{grid-template-columns:1fr}
}
@media(max-width:768px){
  /* ── Navbar ── */
  .site-nav .links{display:none}
  .site-nav .menu-btn{display:block}
  .site-nav .container{padding:.75rem 1rem}
  .site-nav .cta{padding:.4rem 1rem;font-size:.65rem;letter-spacing:.1em}
  .site-nav .logo{font-size:1.25rem}

  /* ── General spacing ── */
  .container{padding:0 1.25rem}

  /* ── Hero ── */
  #home{min-height:auto;padding:3rem 0 1rem}
  #home .hero-title{font-size:3.5rem}
  #home .tagline{font-size:1rem;gap:.5rem}
  #home .tagline .q{font-size:1.8rem}
  #home .hero-sub{font-size:.7rem;letter-spacing:.25em;margin-bottom:1.5rem}
  #home .hero-btns .btn-prim,
  #home .hero-btns .btn-sec{padding:.75rem 1.75rem;font-size:.75rem;width:100%;text-align:center}

  /* ── Advantage ── */
  #advantage{padding:2rem 1rem}
  #advantage .left h3{font-size:1.75rem}
  #advantage .left p{font-size:1rem}
  #advantage .right h2{font-size:1.75rem}
  .feature-row h4{font-size:1.05rem}

  /* ── Products ── */
  #products{padding-top:3rem}
  #products .prod-header h2{font-size:2.5rem !important}
  #products .prod-header p{font-size:1rem;margin-bottom:1.5rem}
  .toggle-wrap{margin-bottom:1.5rem}
  .collection-panel{padding:2rem 0}
  .collection-panel .sticky-col h2{font-size:1.75rem}
  .marble-grid{grid-template-columns:1fr}
  .marble-card.wide{grid-column:span 1}
  .marble-card.wide .img-wrap{aspect-ratio:4/5}
  .marble-card h3{font-size:1.25rem}

  /* ── Granite ── */
  .granite-grid{grid-template-columns:repeat(2,1fr)}
  .granite-header{grid-template-columns:1fr}
  .granite-header h2{font-size:1.75rem}
  .granite-section{padding:2rem 0}

  /* ── Specialized ── */
  .specialized .head h2{font-size:1.75rem}

  /* ── Signature Apps ── */
  .sig-grid{grid-template-columns:1fr}
  .sig-apps .head h2{font-size:1.75rem}
  .sig-card .body{padding:1.25rem}

  /* ── Products CTA ── */
  .prod-cta{padding:3rem 0}
  .prod-cta h3{font-size:1.5rem}
  .prod-cta p{font-size:.95rem}
  .prod-cta button{padding:.875rem 2rem;font-size:.75rem}

  /* ── Partners ── */
  #partners .hero-row{padding:2.5rem 1.25rem;gap:2rem}
  #partners .hero-row .text h2{font-size:2.5rem !important}
  #partners .hero-row .text p{font-size:1rem}
  #partners .hero-row .map-box{aspect-ratio:4/3}
  .strength-section{padding:3rem 1.25rem}
  .strength-section h2{font-size:1.75rem;margin-bottom:2rem}
  .bento-grid{grid-template-columns:1fr}
  .bento-card{padding:2rem;min-height:auto}
  .bento-card h3{font-size:1.25rem}
  .logos-section{padding:3rem 1.25rem}
  .logos-row{flex-direction:column;gap:2rem}

  /* ── About ── */
  #about .about-hero{padding:2.5rem 1rem}
  #about .about-hero .col-left h2{font-size:1.75rem !important}
  #about .about-hero .col-left p{font-size:1rem}
  #about .about-hero .col-right p{font-size:1.1rem}
  .vm-section{padding:2rem 1rem}
  .vm-section .container{grid-template-columns:1fr}
  .vm-card{padding:2rem}
  .vm-card h2{font-size:1.5rem}
  .values-section{padding:3rem 1rem}
  .values-section h2{font-size:1.75rem}
  .values-grid{grid-template-columns:1fr}
  .value-cell{border-right:none;padding:1.75rem}
  .stone-banner{height:250px}
  .stone-banner h2{font-size:1.75rem}

  /* ── News ── */
  #news{padding:4rem 0 3rem}
  #news .news-header{padding-bottom:1.5rem;margin-bottom:2.5rem}
  #news .news-header h2{font-size:2.5rem !important}
  .news-feat{min-height:350px}
  .news-feat .caption h2{font-size:1.75rem}
  .news-side-img{min-height:250px}

  /* ── Contact ── */
  #contact{padding:4rem 0 3rem}
  #contact .contact-headline{margin-bottom:3rem}
  #contact .contact-headline .big{font-size:2.25rem !important}
  #contact .contact-headline .sub{font-size:1.25rem !important}
  .contact-form{padding:2rem 1.5rem}
  .contact-form .submit-btn{width:100%;padding:1rem;font-size:.8rem}
  .info-row .details .val{font-size:1.15rem}
  .contact-map{border-radius:8px}
  .contact-bottom-cta{margin-top:2rem;padding-top:2rem;padding-bottom:2rem}
  .contact-bottom-cta h3{font-size:1.5rem}

  /* ── Footer ── */
  .site-footer{padding:2rem 1.25rem}
  .site-footer .container{flex-direction:column;text-align:center;gap:1rem}

  /* ── FABs ── */
  .fab-container{bottom:1.25rem;right:1.25rem;gap:.75rem}
  .whatsapp-btn,.back-to-top{width:3rem;height:3rem}
  .whatsapp-btn svg{width:22px;height:22px}
}

/* ── FLOATING ACTIONS ── */
.fab-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1000;
}
.whatsapp-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background 0.3s ease;
  text-decoration: none;
}
.whatsapp-btn:hover {
  transform: translateY(-4px) scale(1.05);
  background: #128C7E;
}
.back-to-top {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-4px);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* ── PERFORMANCE: content-visibility for off-screen sections ── */
#products, #partners, #about, #news, #contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Ensure picture elements inherit container sizing */
picture { display: contents; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg picture img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.stone-banner picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stone-banner picture img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.news-feat picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.news-feat picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.news-side-img picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.news-side-img picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }