/* ============================================================
EkoStone — arkusz stylów strony głównej
Wgraj przez child theme (style.css / enqueue) LUB
Wygląd → Dodatkowy CSS. Klasy są identyczne jak w prototypie —
nadaj je kontenerom GenerateBlocks ("Advanced → Additional CSS classes").
============================================================ */
/* ────────── Self-hosted variable fonts (latin subset) ──────────
Served same-origin from assets/fonts/ — no Google Fonts request
(faster first paint, no third-party DNS/TLS, no versioned URLs
to maintain). Each woff2 is a variable font:
Cormorant Garamond wght 300–700 (normal + italic)
Geist / Geist Mono wght 100–900
Licenses: assets/fonts/OFL-*.txt (SIL Open Font License 1.1). */
@font-face{
font-family:"Cormorant Garamond";
font-style:normal;
font-weight:300 700;
font-display:swap;
src:url("fonts/cormorant-garamond-var.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Cormorant Garamond";
font-style:italic;
font-weight:300 700;
font-display:swap;
src:url("fonts/cormorant-garamond-italic-var.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Geist";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("fonts/geist-var.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Geist Mono";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("fonts/geist-mono-var.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
/* Palette — natural stone */
--bone: #F4F1EB;
--cream: #E8E3D6;
--paper: #f9f6ee;
--ink: #14110D;
--ink-2: #1E1A16;
--smoke: #5C564E;
--quarry: #938C81;
--hairline: rgba(20,17,13,.10);
--hairline-2: rgba(20,17,13,.18);
--hairline-d: rgba(244,241,235,.14);
--oxide: #A6603F; /* warm rust accent */
--oxide-deep: #7C4326;
--r-sm: 2px;
--r-md: 4px;
--r-lg: 10px;
--serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
--sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
--mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
--container: 1320px;
--gutter: 32px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:15px;
line-height:1.55;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:default;padding:0}
/* ────────── Type scale ────────── */
.eyebrow{
font-family:var(--mono);
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--smoke);
font-weight:400;
}
.eyebrow .dot{display:inline-block;width:4px;height:4px;background:var(--oxide);border-radius:50%;vertical-align:middle;margin:-2px 10px 0 0}
.h-display{
font-family:var(--serif);
font-weight:300;
font-size:clamp(56px,7.4vw,116px);
line-height:.96;
letter-spacing:-.018em;
}
.h-display em{font-style:italic;font-weight:400;color:var(--oxide)}
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,5.2vw,80px);line-height:1.02;letter-spacing:-.015em}
.h1 em{font-style:italic;font-weight:400}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,56px);line-height:1.05;letter-spacing:-.01em}
.h2 em{font-style:italic;font-weight:400}
.h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.005em}
.lede{font-size:18px;line-height:1.55;color:var(--smoke);max-width:46ch;font-weight:300}
/* ────────── Layout ────────── */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
/* ────────── Buttons ────────── */
.btn{
display:inline-flex;align-items:center;gap:14px;
padding:14px 22px 14px 22px;
font-family:var(--sans);font-weight:500;font-size:13px;
letter-spacing:.02em;
border-radius:999px;
transition:background .15s ease,color .15s ease,transform .16s var(--ease-out);
cursor:default;
}
.btn .arr{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform .16s var(--ease-out)}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:var(--oxide);color:var(--paper)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:var(--oxide);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-2);transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn-ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-ghost-d{background:transparent;color:var(--bone);border:1px solid var(--hairline-d)}
.btn-ghost-d:hover{border-color:var(--bone)}
/* btn-light: tlo jak --bone (kolor sekcji Materials), ciemnieje na hover */
.btn-light{background:var(--bone);color:var(--ink);border:1px solid var(--ink);transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn-light:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
/* ────────── Stone placeholder ────────── */
.slab{
position:relative;
background:#2a2622;
overflow:hidden;
isolation:isolate;
}
/* veined gradient backdrops — calibrated to actual stone color */
.slab[data-stone="alba-glow"]{
/* Cream dolomite with warm gold-amber veining */
background:
radial-gradient(110% 70% at 25% 35%, rgba(255,250,235,.85), transparent 60%),
radial-gradient(80% 60% at 75% 75%, rgba(225,195,150,.4), transparent 70%),
linear-gradient(160deg,#f6efde 0%,#ebdec1 50%,#d6c197 100%);
}
.slab[data-stone="bianco-vienna"]{
/* Cool white quartzite with charcoal-grey veining */
background:
radial-gradient(110% 70% at 30% 35%, rgba(255,255,255,.85), transparent 60%),
radial-gradient(70% 50% at 75% 80%, rgba(180,180,180,.25), transparent 70%),
linear-gradient(155deg,#f5f4f1 0%,#e6e4df 55%,#c8c5be 100%);
}
.slab[data-stone="calacatta-noir"]{
/* Black marble with white & soft gold dramatic veining */
background:
radial-gradient(80% 60% at 70% 25%, rgba(220,210,190,.18), transparent 60%),
radial-gradient(60% 50% at 25% 80%, rgba(180,140,90,.12), transparent 70%),
linear-gradient(155deg,#15110e 0%,#221c17 50%,#0e0a08 100%);
}
.slab[data-stone="taj-mahal"]{
/* Pale ivory quartzite with very subtle warm veining */
background:
radial-gradient(120% 80% at 30% 40%, rgba(255,250,238,.8), transparent 65%),
radial-gradient(80% 60% at 75% 80%, rgba(215,195,160,.3), transparent 70%),
linear-gradient(150deg,#f1ead6 0%,#e3d6b8 60%,#cab48b 100%);
}
.slab[data-stone="black-mist"]{
/* Leathered black granite — near-uniform charcoal */
background:
radial-gradient(80% 60% at 40% 35%, rgba(70,65,58,.4), transparent 70%),
linear-gradient(140deg,#1c1916 0%,#2a2620 50%,#15110e 100%);
}
.slab[data-stone="emerald"]{
/* Deep emerald quartzite with cream-white veining */
background:
radial-gradient(100% 70% at 35% 35%, rgba(170,200,160,.35), transparent 60%),
radial-gradient(70% 50% at 80% 75%, rgba(50,80,55,.5), transparent 70%),
linear-gradient(155deg,#1f3a2a 0%,#2e4f37 45%,#143020 100%);
}
.slab[data-stone="quartz-pearl"]{
/* Engineered pearl-white quartz */
background:
radial-gradient(120% 80% at 30% 35%, rgba(255,255,255,.7), transparent 65%),
linear-gradient(160deg,#f3f1ea 0%,#e6e2d6 55%,#c8c1ac 100%);
}
.slab[data-stone="dune"]{
/* Light travertine — warm sandy beige */
background:
radial-gradient(110% 70% at 30% 40%, rgba(245,225,195,.7), transparent 65%),
linear-gradient(150deg,#dfc99e 0%,#c2a87a 55%,#9a7e51 100%);
}
.slab[data-stone="onyx"]{
/* Honey onyx — translucent amber */
background:
radial-gradient(100% 70% at 60% 30%, rgba(255,210,140,.55), transparent 60%),
radial-gradient(70% 60% at 25% 80%, rgba(180,110,55,.4), transparent 70%),
linear-gradient(155deg,#6a4322 0%,#9c6a36 50%,#3e2614 100%);
}
/* veins overlay (svg generated below in markup) */
.slab .veins{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.55}
.slab .grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,")}
.slab .label{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);mix-blend-mode:difference}
.slab.lite .label{color:rgba(20,17,13,.55);mix-blend-mode:normal}
/* ────────── Top utility strip + nav ────────── */
.util{
background:var(--ink);color:var(--bone);
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:32px}
.util a{opacity:.7}
.util a:hover{opacity:1}
.util .right{display:flex;gap:24px;align-items:center}
.util .pill{padding:2px 8px;border:1px solid var(--hairline-d);border-radius:999px}
.util .office-status{font-weight:500;display:inline-block;white-space:nowrap}
.util .office-status.is-open{color:#6ee08a;text-shadow:0 0 8px rgba(110,224,138,.75)}
.util .office-status.is-closed{color:#ff6b5a;text-shadow:0 0 8px rgba(255,107,90,.55)}
.nav{
position:sticky;top:0;z-index:50;
background:rgba(250,248,243,.86);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
border-bottom:0;
}
.nav .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:0;padding-block:18px;gap:48px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
.brand .mk{width:26px;height:26px;border:1px solid var(--ink);position:relative;display:inline-block}
.brand .mk::before,.brand .mk::after{content:"";position:absolute;background:var(--ink)}
.brand .mk::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.brand .mk::after{left:0;right:0;top:50%;height:1px;transform:translateY(-.5px)}
.brand small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;margin-left:6px;font-weight:400}
/* Uploaded logo (Customize → Site Identity → Logo) — inserted via [ekostone_logo] */
.brand.brand-img{gap:0;line-height:0;align-self:center}
.brand.brand-img img{display:block;width:auto}
/* Gutenberg empty paragraphs add phantom space between blocks */
.wp-block-paragraph:empty,p.wp-block-paragraph:blank{display:none;margin:0}
/* Full-bleed pages: strip GeneratePress container padding above the hero */
.entry-content>div:empty,.entry-content>p:empty{display:none;margin:0}
.page .inside-article{padding:0}
.page.separate-containers .site-main{margin:0}
.page .entry-content{margin-top:0}
.page .entry-content>*:first-child{margin-top:0}
.nav .brand.brand-img img{height:100px;width:auto}
footer .brand.brand-img img{height:100px}
/* If your logo file is dark and ends up invisible on the dark footer,
uncomment the next line to invert it. Or upload a light version. */
/* .brand.brand-img--light img{filter:invert(1) brightness(1.1)} */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:34px;justify-content:center}
.nav ul a{font-size:13px;font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.nav ul a:hover{color:var(--oxide)}
.nav ul a .caret{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid currentColor;opacity:.5}
.nav .actions{display:flex;align-items:center;gap:14px}
.nav .phone{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.nav .phone span{display:block;font-size:10px;color:var(--smoke);text-transform:uppercase;letter-spacing:.14em;margin-bottom:2px}
/* ── Hamburger (mobile nav) ── */
.nav-toggle{display:none;grid-column:3;justify-self:end;width:44px;height:44px;padding:0;border:1px solid var(--hairline-d);border-radius:2px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";display:block;width:18px;height:1px;background:var(--ink);transition:transform .22s var(--ease-out),opacity .18s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before{position:absolute;top:-6px}
.nav-toggle-bars::after{position:absolute;top:6px}
.nav.is-open .nav-toggle-bars{background:transparent}
.nav.is-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
.nav .wrap{grid-template-columns:auto 1fr;gap:16px;min-height:0;padding-block:14px}
.nav-toggle{display:flex}
.nav ul,.nav .actions{display:none}
.nav.is-open ul,.nav.is-open .actions{display:flex}
.nav.is-open ul{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:0;justify-content:flex-start;border-top:1px solid var(--hairline-d);margin-top:4px}
.nav.is-open ul li{width:100%}
.nav.is-open ul a{width:100%;padding:16px 0;font-size:15px;border-bottom:1px solid var(--hairline-d)}
.nav.is-open .actions{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:14px;padding:20px 0 28px}
.nav.is-open .actions .btn{justify-content:center}
.nav.is-open .wrap{padding-bottom:0;grid-template-rows:auto auto auto;align-items:start}
.nav.is-open .brand.brand-img{align-self:center}
.nav.is-open .nav-toggle{align-self:center}
}
/* ────────── Hero ────────── */
.hero{position:relative;background:#14110D;color:var(--bone);overflow:hidden;min-height:760px;display:flex;align-items:stretch}
.hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#14110D}
.hero .bg .marble{
position:absolute;inset:0;
background-image:url("/wp-content/uploads/2026/10/hero-kitchen2-scaled.jpg");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
.hero .bg .marble svg{display:none}
.hero .bg .overlay{position:absolute;inset:0;z-index:2;background:
linear-gradient(90deg, rgba(20,17,13,.88) 0%, rgba(20,17,13,.62) 38%, rgba(20,17,13,.42) 70%, rgba(20,17,13,.55) 100%);
pointer-events:none;
}
.hero .bg .vidtag{
position:absolute;right:24px;top:24px;z-index:3;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(244,241,235,.75);
display:inline-flex;align-items:center;gap:10px;
padding:6px 12px;border:1px solid var(--hairline-d);border-radius:999px;
background:rgba(20,17,13,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero .bg .vidtag .rec{width:6px;height:6px;border-radius:50%;background:var(--oxide)}
.hero .stripe{position:absolute;top:0;bottom:0;right:0;width:46%;z-index:1;overflow:hidden}
.hero .stripe .slab{position:absolute;inset:0}
.hero .stripe::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,13,.35) 0%,rgba(20,17,13,.1) 28%,transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:88px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:560px}
.hero-copy{display:flex;flex-direction:column;gap:28px;max-width:780px}
body.home .hero .h-display{font-size:clamp(44px,5.6vw,88px)}
.hero h1{color:var(--bone)}
body.home .hero h1 em{color:#a6603f}
.hero .lede{color:rgba(244,241,235,.78);max-width:38ch}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero .feature{display:flex;flex-direction:column;gap:6px;max-width:280px}
.hero .feature .num{font-family:var(--serif);font-size:64px;line-height:1;font-weight:300;font-style:italic;color:var(--oxide)}
.hero .feature .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.6)}
.hero .feature p{margin:6px 0 0;color:rgba(244,241,235,.78);font-size:14px;max-width:24ch}
.hero-right{position:relative;z-index:3}
.hero-card{
position:absolute;right:0;bottom:0;width:340px;
background:
radial-gradient(120% 80% at 25% 30%, rgba(255,250,238,.88), transparent 60%),
radial-gradient(80% 60% at 80% 80%, rgba(220,195,155,.45), transparent 70%),
linear-gradient(155deg,#f6efde 0%,#ebdec1 50%,#d6c197 100%);
border:1px solid rgba(244,241,235,.4);
padding:22px;
border-radius:var(--r-md);
overflow:hidden;
isolation:isolate;
box-shadow:0 18px 50px rgba(20,17,13,.35);
}
.hero-card::before{
/* marmurowe żyłki */
content:"";
position:absolute;inset:0;z-index:-1;
background-image:url("data:image/svg+xml;utf8,");
background-size:cover;
opacity:.9;
mix-blend-mode:multiply;
}
.hero-card::after{
/* delikatny szum/ziarno */
content:"";
position:absolute;inset:0;z-index:-1;
background-image:url("data:image/svg+xml;utf8,");
opacity:.12;
mix-blend-mode:multiply;
pointer-events:none;
}
.hero-card .eyebrow{color:rgba(20,17,13,.6);position:relative}
.hero-card .eyebrow .dot{background:var(--oxide-deep,#7C4326)}
.hero-card h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:10px 0 6px;color:var(--ink);position:relative}
.hero-card p{margin:0;font-size:13px;color:rgba(20,17,13,.7);line-height:1.5;position:relative}
.hero-card .meta{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid rgba(20,17,13,.18);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,13,.7);position:relative}
.hero .scroll{position:absolute;left:var(--gutter);bottom:24px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,235,.6);z-index:3}
.hero .scroll .line{width:48px;height:1px;background:rgba(244,241,235,.4)}
/* ────────── Trust strip ────────── */
.trust{border-bottom:1px solid var(--hairline);background:var(--paper)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-cell{padding:36px 28px;border-right:1px solid var(--hairline)}
.trust-cell:last-child{border-right:0}
.trust .num{font-family:var(--serif);font-size:56px;line-height:1;font-weight:300;letter-spacing:-.02em}
.trust .num em{font-style:italic;color:var(--oxide);font-weight:400}
.trust .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-top:14px;display:block}
.trust .desc{font-size:13px;color:var(--smoke);margin-top:8px;max-width:24ch;line-height:1.5}
/* ────────── Sections ────────── */
section.block{padding:120px 0;border-bottom:1px solid var(--hairline)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:64px}
.section-head .lede{margin-top:18px}
.section-head .right{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.section-head .right .lede{max-width:42ch}
/* ────────── Featured collections (asymmetric grid) ────────── */
.collections-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:120px;
gap:24px;
}
.coll{position:relative;overflow:hidden;border-radius:var(--r-md);background:#2a2622;display:flex;align-items:flex-end;padding:24px;color:var(--bone);text-decoration:none;transition:transform 160ms var(--ease-out)}
.coll:hover{z-index:2}
.coll .slab{position:absolute;inset:0;z-index:0}
.coll .meta{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.coll .meta > .meta-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.coll .meta::before{content:"";position:absolute;left:-24px;right:-24px;bottom:-24px;top:-48px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 100%);z-index:-1}
.coll h3{font-family:var(--serif);font-weight:400;font-size:30px;margin:0;line-height:1;letter-spacing:-.005em}
.coll .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.8);margin-top:8px;display:block}
.coll .price{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,241,235,.85);text-align:right;white-space:nowrap}
.coll .price span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,235,.6);margin-bottom:3px}
.coll .badge{position:absolute;top:18px;left:18px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--bone);padding:5px 9px;border-radius:999px}
.coll .badge.radianz{background:var(--oxide);color:var(--paper)}
/* „Get a Quote" — mały CTA obok ceny w prawym dolnym rogu karty */
.coll .get-quote{
font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;
color:var(--ink);background:var(--bone);
padding:7px 12px;border-radius:999px;
cursor:pointer;border:0;
display:inline-flex;align-items:center;gap:8px;
transition:background .15s ease,color .15s ease,transform .16s var(--ease-out);
text-decoration:none;
box-shadow:0 4px 14px rgba(20,17,13,.22);
white-space:nowrap;
}
.coll .get-quote:hover{background:var(--oxide);color:var(--bone)}
.coll .get-quote:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.coll .get-quote .arr{display:inline-block;width:10px;height:1px;background:currentColor;position:relative;transition:transform .16s var(--ease-out)}
.coll .get-quote .arr::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.coll .slab{transition:transform 200ms var(--ease-out)}
.c-1{grid-column:span 7;grid-row:span 4}
.c-2{grid-column:span 5;grid-row:span 2}
.c-3{grid-column:span 5;grid-row:span 2}
.c-4{grid-column:span 4;grid-row:span 3}
.c-5{grid-column:span 4;grid-row:span 3}
.c-6{grid-column:span 4;grid-row:span 3}
/* Druga siatka — dopełniający kolaż (4 karty, idealnie wypełnia 12 kolumn) */
.m-1{grid-column:span 4;grid-row:span 3} /* lewy wysoki */
.m-2{grid-column:span 8;grid-row:span 3} /* prawy szeroki, ta sama wysokość */
.m-3{grid-column:span 8;grid-row:span 2} /* lewy doln szeroki */
.m-4{grid-column:span 4;grid-row:span 2} /* prawy dolny kwadrat */
.coll-toggle-wrap{display:flex;justify-content:center;margin-top:48px}
.coll-toggle{cursor:pointer;font-family:var(--sans)}
.coll-toggle .caret-down{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .16s var(--ease-out);margin-left:4px}
.coll-toggle[aria-expanded="true"] .caret-down{transform:rotate(180deg)}
.coll-more{margin-top:24px;opacity:1;transform:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{.coll-more{opacity:0;transform:translateY(8px)}}
.coll-more[hidden]{display:none}
/* ────────── Materials browser — grid kategorii ────────── */
.materials{background:var(--bone)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cat-card{
position:relative;aspect-ratio:4/5;overflow:hidden;
border-radius:var(--r-md);
background:#2a2622;display:flex;align-items:flex-end;padding:24px;
color:var(--bone);text-decoration:none;
transition:transform 160ms var(--ease-out);
}
.cat-card:hover{z-index:2}
.cat-card .slab{position:absolute;inset:0;z-index:0;transition:transform 200ms var(--ease-out)}
.cat-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(180deg,transparent 0%,rgba(20,17,13,.85) 100%);z-index:1;pointer-events:none}
.cat-card .cat-info{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.cat-card h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:0;line-height:1;letter-spacing:-.005em;color:var(--bone)}
.cat-card .count{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.8);margin-bottom:10px}
.cat-card .explore{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.9);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cat-card .explore .arr{display:inline-block;width:12px;height:1px;background:currentColor;position:relative;transition:transform .16s var(--ease-out)}
.cat-card .explore .arr::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mat-card{display:flex;flex-direction:column;gap:14px;padding:0 0 14px;border:1px solid var(--ink);border-radius:var(--r-md);background:var(--paper);overflow:hidden;transition:transform 160ms var(--ease-out),border-color .15s ease}
.mat-card:hover{border-color:var(--oxide)}
.mat-card .slab{aspect-ratio:4/5;border-radius:0;margin:0}
.mat-card .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 14px}
.mat-card .actions{display:flex;gap:8px;margin-top:0;padding:0 14px}
.mat-card h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:0;letter-spacing:-.005em}
.mat-card .specs{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin-top:4px;display:block}
.mat-card .priceblk{text-align:right;font-family:var(--mono);font-size:13px;color:var(--ink)}
.mat-card .priceblk span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--quarry);margin-bottom:2px}
.mat-card .chip{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ink);background:var(--bone);padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;transition:background .15s ease,color .15s ease,transform .16s var(--ease-out);text-decoration:none;box-shadow:0 4px 14px rgba(20,17,13,.18)}
.mat-card .chip:hover{background:var(--oxide);color:var(--bone)}
.mat-card .chip:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.mat-card .chip .arr{display:inline-block;width:10px;height:1px;background:currentColor;position:relative;transition:transform .16s var(--ease-out)}
.mat-card .chip .arr::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
/* ────────── Trade program (dark) ────────── */
.trade{background:var(--ink);color:var(--bone);padding:140px 0}
.trade .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.trade .eyebrow{color:rgba(244,241,235,.6)}
.trade h2{color:var(--bone)}
.trade .lede{color:rgba(244,241,235,.72);max-width:48ch}
.trade ul.bullets{list-style:none;padding:0;margin:32px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.trade ul.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(244,241,235,.85);line-height:1.5}
.trade ul.bullets li::before{content:"";display:block;width:7px;height:7px;background:var(--oxide);margin-top:8px;flex-shrink:0;transform:rotate(45deg)}
.trade-card{
background:rgba(244,241,235,.04);
border:1px solid var(--hairline-d);
border-radius:var(--r-md);
padding:36px;
}
.trade-card .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--oxide);display:block;margin-bottom:18px}
.trade-card form{display:grid;gap:14px;margin-top:24px}
.trade-card label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.6);display:block;margin-bottom:6px}
.trade-card input,.trade-card select{
width:100%;
background:transparent;
border:0;
border-bottom:1px solid var(--hairline-d);
color:var(--bone);
font:14px/1.5 var(--sans);
padding:8px 0 10px;
outline:none;
}
.trade-card input::placeholder{color:rgba(244,241,235,.35)}
.trade-card input:focus,.trade-card select:focus{border-bottom-color:var(--oxide)}
.trade-card .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trade-card .submit{margin-top:14px}
.trade-card small{display:block;margin-top:14px;font-size:11px;color:rgba(244,241,235,.5);font-family:var(--mono);letter-spacing:.06em}
/* ────────── Showroom ────────── */
.showroom .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.showroom .visual{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden}
.showroom .visual .grain{position:absolute;inset:0;opacity:.15}
.showroom .visual .stamp{position:absolute;left:24px;top:24px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(0,0,0,.4);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.showroom .visual .coords{position:absolute;right:24px;bottom:24px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);text-align:right;line-height:1.5}
.showroom .visual .coords span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.showroom .info{display:flex;flex-direction:column;gap:24px}
.showroom .info .grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px}
.showroom .info .grid h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin:0 0 10px;font-weight:500}
.showroom .info .grid p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.showroom .info .actions{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.showroom{background:var(--ink);color:var(--bone)}
.showroom .eyebrow{color:rgba(244,241,235,.6)}
.showroom .eyebrow .dot{background:var(--oxide)}
.showroom .info h2{color:var(--bone)}
.showroom .info .lede{color:rgba(244,241,235,.72)}
.showroom .info .grid h5{color:rgba(244,241,235,.55)}
.showroom .info .grid p{color:var(--bone)}
/* ────────── Selected projects ────────── */
.projects{background:var(--cream)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.proj{display:flex;flex-direction:column;gap:18px}
.proj .slab{aspect-ratio:1/1.1;border-radius:var(--r-md)}
.proj .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.proj h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:0;letter-spacing:-.005em;max-width:18ch}
.proj .who{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);text-align:right;line-height:1.6}
.proj .who span{display:block;color:var(--ink);font-size:11px;letter-spacing:.08em;text-transform:none;font-family:var(--sans);font-weight:500;margin-top:3px}
.testimonials{border-top:1px solid var(--hairline-2);padding-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.testimonial{display:flex;flex-direction:column;gap:18px}
.testimonial .qmark{font-family:var(--serif);font-size:96px;line-height:.6;color:var(--oxide);font-style:italic;font-weight:300}
.testimonial blockquote{margin:0;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.35;letter-spacing:-.005em;color:var(--ink)}
.testimonial blockquote em{font-style:italic}
.testimonial cite{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.testimonial cite span{display:block;color:var(--ink);font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;margin-top:4px;font-weight:500}
.projects-all{display:flex;justify-content:center;margin:64px 0 96px}
@media (max-width:980px){
.testimonials{grid-template-columns:1fr;gap:48px}
}
/* ────────── Sample CTA / lead gen ────────── */
.sample{background:var(--cream)}
.sample .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.sample h2 em{color:var(--oxide)}
.sample .lede{margin-top:24px}
.sample .steps{margin-top:36px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline)}
.sample .step{display:grid;grid-template-columns:48px 1fr auto;gap:24px;padding:22px 0;border-bottom:1px solid var(--hairline);align-items:center}
.sample .step .n{font-family:var(--serif);font-size:36px;line-height:1;color:var(--oxide);font-style:italic;font-weight:300}
.sample .step h5{margin:0;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.005em}
.sample .step p{margin:4px 0 0;font-size:13px;color:var(--smoke);line-height:1.5}
.sample .step .meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--quarry)}
.sample-form{
background:var(--paper);
border:2px solid var(--hairline);
border-radius:var(--r-md);
padding:40px;
}
.sample-form h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 8px;letter-spacing:-.005em}
.sample-form p{margin:0 0 28px;color:var(--smoke);font-size:14px}
.sample-form form{display:grid;gap:18px}
.sample-form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:6px}
.sample-form input,.sample-form select,.sample-form textarea{
width:100%;background:transparent;border:0;
border-bottom:1px solid var(--hairline-2);
color:var(--ink);font:14px/1.5 var(--sans);padding:8px 0 10px;outline:none;
}
.sample-form input:focus,.sample-form select:focus,.sample-form textarea:focus{border-bottom-color:var(--oxide)}
.sample-form input.quote-flash{animation:quote-flash 600ms var(--ease-out)}
@keyframes quote-flash{
0% {background:rgba(166,96,63,.32)}
100% {background:transparent}
}
/* Toast for cross-page „Get a Quote" pickup */
.quote-toast{
position:fixed;top:88px;left:50%;transform:translateX(-50%) translateY(-16px);
z-index:80;background:var(--ink);color:var(--bone);
font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.01em;
padding:14px 22px;border-radius:999px;
display:inline-flex;align-items:center;gap:12px;
box-shadow:0 18px 50px rgba(20,17,13,.35);
opacity:0;transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
pointer-events:none;
}
.quote-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.quote-toast strong{color:var(--paper);font-weight:600}
.quote-toast .qt-dot{width:8px;height:8px;border-radius:50%;background:var(--oxide);animation:qt-pulse 1.2s ease-in-out infinite}
@keyframes qt-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.sample-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sample-form .seg{position:relative;display:flex;gap:4px;border:1px solid var(--hairline-2);border-radius:999px;padding:4px;width:fit-content;background:var(--paper)}
.sample-form .seg .seg-indicator{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--ink);border-radius:999px;box-shadow:0 4px 14px rgba(20,17,13,.22);transform:translateX(0);transition:transform 200ms var(--ease-out);pointer-events:none;z-index:0}
.sample-form .seg.seg-ready .seg-indicator{opacity:1}
.sample-form .seg .seg-indicator{opacity:0}
.sample-form .seg button{position:relative;z-index:1;margin:0;padding:9px 18px;border-radius:999px;color:var(--smoke);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .25s ease,transform 160ms var(--ease-out);user-select:none;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;font-weight:400;line-height:1}
.sample-form .seg button:hover{color:var(--ink)}
.sample-form .seg button.on{color:var(--bone);font-weight:500}
.sample-form .seg button.on:hover{color:var(--bone)}
.sample-form .seg button::before{content:"";display:inline-block;width:6px;height:6px;background:var(--oxide);border-radius:50%;opacity:0;transition:opacity 160ms var(--ease-out)}
.sample-form .seg button.on::before{opacity:1}
.sample-form .seg button:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.sample-form .check{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--smoke);line-height:1.5;font-family:var(--sans);letter-spacing:0;text-transform:none}
.sample-form .check input{width:16px;height:16px;flex-shrink:0;accent-color:var(--oxide);margin-top:1px}
.sample-form .submit{margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.sample-form .submit .btn{justify-content:center;text-align:center}
.sample-form .submit small{font-size:11px;color:var(--quarry);font-family:var(--mono);letter-spacing:.06em;max-width:22ch;line-height:1.5}
/* Attachments — dropzone */
.attachments label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.attachments label small{display:block;font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:11px;color:var(--quarry);margin-top:3px;font-weight:400}
.attachments .dropzone{
display:block;cursor:pointer;
border:1px dashed var(--hairline-2);border-radius:var(--r-md);
padding:22px 22px;
background:var(--paper);
transition:border-color .2s ease,background .2s ease;
text-transform:none;letter-spacing:0;margin-bottom:0;
}
.attachments .dropzone:hover,
.attachments .dropzone.dz-over{border-color:var(--oxide);background:rgba(166,96,63,.04)}
.attachments .dz-inner{display:flex;align-items:center;gap:18px}
.attachments .dz-icon{
width:38px;height:38px;flex-shrink:0;
border:1px solid var(--ink);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1;
}
.attachments .dz-copy{font-family:var(--sans);font-size:14px;color:var(--ink);line-height:1.4}
.attachments .dz-copy strong{font-weight:500}
.attachments .dz-copy .dz-browse{color:var(--oxide);text-decoration:underline;text-underline-offset:2px}
.attachments .dz-copy small{display:block;font-size:11px;color:var(--quarry);margin-top:3px;font-family:var(--mono);letter-spacing:.04em}
.attachments .dz-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.attachments .dz-list li{
display:flex;justify-content:space-between;align-items:center;gap:14px;
font-family:var(--mono);font-size:11px;color:var(--ink);
padding:8px 12px;background:var(--paper);border:1px solid var(--hairline);border-radius:3px;
}
.attachments .dz-list .name{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.attachments .dz-list .name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachments .dz-list .size{color:var(--quarry);font-size:10px;letter-spacing:.06em}
.attachments .dz-list .rm{
background:transparent;border:0;cursor:pointer;
color:var(--smoke);font-family:var(--mono);font-size:14px;line-height:1;
width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
transition:background .2s ease,color .2s ease;
}
.attachments .dz-list .rm:hover{background:var(--ink);color:var(--bone)}
/* ────────── Press strip ────────── */
.press{background:var(--bone);border-bottom:1px solid var(--hairline)}
.press .wrap{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:32px var(--gutter)}
.press .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.press .logos{display:flex;gap:48px;align-items:center;flex:1;justify-content:space-around;flex-wrap:wrap;opacity:.65}
.press .logo{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--ink);letter-spacing:.02em}
.press .logo.cap{font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px}
.press .logo.mono{font-family:var(--mono);font-style:normal;font-weight:500;font-size:13px;letter-spacing:.1em}
/* ────────── Footer ────────── */
footer{background:var(--ink);color:var(--bone);padding:0}
/* Newsletter — pas na górze stopki */
.subscribe{padding:72px 0;background:var(--bone);border-bottom:1px solid var(--hairline)}
.subscribe .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.subscribe .pitch h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,42px);line-height:1.05;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink)}
.subscribe .pitch h3 em{font-style:italic;color:var(--oxide)}
.subscribe .pitch p{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--smoke);max-width:46ch;font-weight:300}
.subscribe .pitch .eyebrow{color:var(--smoke)}
.subscribe form{display:flex;flex-direction:column;gap:14px}
.subscribe form .consent{margin-top:5px}
.subscribe .field{display:grid;grid-template-columns:1fr auto;gap:0;align-items:end;border-bottom:1px solid var(--hairline-2);padding-bottom:10px;transition:border-color .25s ease}
.subscribe .field:focus-within{border-bottom-color:var(--oxide)}
.subscribe .field input{
background:transparent;border:0;color:var(--ink);font:16px/1.5 var(--sans);font-weight:300;
padding:8px 0;outline:none;width:100%;
}
.subscribe .field input::placeholder{color:rgba(20,17,13,.4)}
.subscribe .field button{
background:var(--ink);color:var(--bone);
font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.02em;
padding:12px 22px;border-radius:999px;border:0;cursor:pointer;
display:inline-flex;align-items:center;gap:12px;
transition:background .25s ease,color .25s ease;white-space:nowrap;
}
.subscribe .field button:hover{background:var(--oxide);color:var(--bone)}
.subscribe .field button .arr{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform .16s var(--ease-out)}
.subscribe .field button .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.subscribe .consent{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.55;color:var(--smoke);font-family:var(--sans);letter-spacing:0}
.subscribe .consent input{width:14px;height:14px;flex-shrink:0;accent-color:var(--oxide);margin-top:2px}
.subscribe .consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.footer-cols{padding:72px 0 36px}
.footer-cols .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:64px;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
footer .brand-block .brand{color:var(--bone)}
footer .brand-block .brand .mk{border-color:var(--bone)}
footer .brand-block .brand .mk::before,footer .brand-block .brand .mk::after{background:var(--bone)}
footer p.about{margin:24px 0 28px;color:rgba(244,241,235,.6);font-size:13px;line-height:1.6;max-width:36ch}
footer .addr{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(244,241,235,.7);line-height:1.7}
footer .addr span{display:block;color:rgba(244,241,235,.5);text-transform:uppercase;letter-spacing:.16em;font-size:9px;margin-bottom:4px}
footer h6{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,235,.5);margin:0 0 22px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
footer ul a{font-size:13px;color:rgba(244,241,235,.82)}
footer ul a:hover{color:var(--oxide)}
footer .bottom{margin-top:72px;padding-top:24px;border-top:1px solid var(--hairline-d);display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,235,.5)}
/* ────────── Floating sticky CTA ────────── */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.float-cta .floating{background:var(--ink);color:var(--bone);padding:14px 22px;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.02em;box-shadow:0 18px 40px rgba(20,17,13,.32);display:flex;align-items:center;gap:12px;cursor:default;transition:background .2s ease}
.float-cta .floating:hover{background:var(--oxide)}
.float-cta .floating .icon{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
/* ────────── Design brief link banner ────────── */
.brief-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bone);padding:10px 18px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(20,17,13,.25);cursor:default}
.brief-banner .pulse{width:6px;height:6px;background:var(--oxide);border-radius:50%;animation:pulse 1.8s ease-in-out infinite}
.brief-banner:hover{background:var(--oxide)}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* ────────── Responsive (lightweight) ────────── */
@media (max-width:980px){
html{overflow-x:clip}
body.home .hero .h-display{line-height:1.12}
.util{font-size:10px;letter-spacing:.08em}
.util .wrap{height:auto;min-height:32px;flex-wrap:nowrap;align-items:flex-start;gap:12px;padding-block:6px}
.util .wrap > :first-child{min-width:0;flex:1 1 auto;line-height:1.4}
.util .right{flex-shrink:0}
.footer-cols .wrap{gap:32px}
.footer-cols .wrap > *{min-width:0}
.hero .wrap{padding-top:64px;padding-bottom:64px}
.trade .wrap,.showroom .wrap,.sample .wrap{grid-template-columns:1fr;gap:48px}
.collections-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:140px}
.c-1,.c-2,.c-3,.c-4,.c-5,.c-6,
.m-1,.m-2,.m-3,.m-4{grid-column:span 6;grid-row:span 2}
.mat-grid,.proj-grid{grid-template-columns:repeat(2,1fr)}
.trust .wrap{grid-template-columns:1fr 1fr}
.trade ul.bullets{grid-template-columns:1fr}
.section-head{grid-template-columns:1fr}
.subscribe .wrap{grid-template-columns:1fr;gap:32px}
.footer-cols .wrap{grid-template-columns:1fr 1fr}
/* #sample steps/form have min-content wider than the viewport (3-col step + fit-content seg). */
.sample .wrap > *{min-width:0}
.sample .step{grid-template-columns:48px 1fr;gap:12px 16px}
.sample .step .meta{grid-column:2}
.sample-form{padding:24px}
.sample-form .seg{width:100%;max-width:100%;display:grid;grid-template-columns:repeat(3,1fr);flex-wrap:nowrap;gap:0}
.sample-form .seg button{padding:10px 8px;font-size:clamp(8px,1.8vw,10px);letter-spacing:.06em;gap:6px;justify-content:center;text-align:center;line-height:1.3;min-width:0;text-wrap:balance}
.sample-form .row{grid-template-columns:1fr}
.sample-form .submit{flex-direction:column;align-items:stretch;gap:12px}
.cat-grid, .mat-grid, .proj-grid, .testimonials{min-width:0}
.proj, .cat-card, .mat-card{min-width:0}
.proj .meta{flex-direction:column;align-items:flex-start;gap:8px}
.proj h4{max-width:none;min-width:0;font-size:clamp(18px,4.8vw,22px);text-wrap:balance}
.proj .who{text-align:left}
.cat-card .cat-info{min-width:0}
.cat-card .explore{flex-shrink:0}
.materials .cat-card{align-items:flex-end;padding:20px 16px}
.materials .cat-card .cat-info,
.materials .cat-card .cat-info > div{width:100%;justify-content:center;text-align:center}
.materials .cat-card h3{width:100%;text-align:center;text-wrap:balance;font-size:clamp(20px,5.6vw,28px)}
}
@media (max-width:620px){
.sample-form .seg button::before{display:none}
.sample-form .seg button{gap:0;letter-spacing:.03em}
.proj-grid{grid-template-columns:1fr;gap:32px}
.footer-cols .wrap{grid-template-columns:1fr;gap:28px}
footer .bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
/* Ukryj natywny nagłówek GeneratePress — zastępuje go nasz pasek .nav */
.site-header { display: none; }
/* EkoStone — fix: product photos fill the collage frame */
.slab .photo,
.coll .slab .photo,
.cat-card .slab .photo{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
z-index:0; display:block;
}
/* keep the "From $X / sf" price on tidy lines */
.coll .price, .coll .price *{ white-space:nowrap; }
.coll .price .woocommerce-Price-amount{ display:inline; }
/* adjust cover photos for projects */
.proj .slab img,
.proj .slab .photo{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
display:block;
}
/* Homepage + Projects page reveal — GPU-only; marketing timing, no blur.
Scoped so About / Contact / Stone Broker keep their own CSS. */
body.home .fl,
.projects-page .fl{opacity:0;
transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
transition-delay:var(--d,0ms)}
body.home .fl[data-dir="up"],
.projects-page .fl[data-dir="up"] {transform:translate3d(0,12px,0) scale(.985)}
body.home .fl[data-dir="down"],
.projects-page .fl[data-dir="down"] {transform:translate3d(0,-12px,0) scale(.985)}
body.home .fl[data-dir="left"],
.projects-page .fl[data-dir="left"] {transform:translate3d(-16px,0,0) scale(.985)}
body.home .fl[data-dir="right"],
.projects-page .fl[data-dir="right"]{transform:translate3d(16px,0,0) scale(.985)}
body.home .fl[data-dir="fade"],
.projects-page .fl[data-dir="fade"] {transform:scale(.985)}
body.home .fl.in,
.projects-page .fl.in{opacity:1;transform:none}
body.home .flow-word,
.projects-page .flow-word{display:inline-block;opacity:0;transform:translateY(.3em);
transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out)}
body.home .flow-word.in,
.projects-page .flow-word.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
body.home .fl, body.home .flow-word,
.projects-page .fl, .projects-page .flow-word{transform:none!important;transition:opacity 200ms ease}
.quote-toast .qt-dot,.brief-banner .pulse{animation:none}
}
@media (max-width:980px){
/* X-axis reveals expand document width and allow sideways scroll on phones. */
body.home .fl[data-dir="left"],
body.home .fl[data-dir="right"],
.projects-page .fl[data-dir="left"],
.projects-page .fl[data-dir="right"]{transform:translate3d(0,12px,0) scale(.985)}
/* Mobile hero: 1536px JPEG (~97KB) instead of the 2560px one (~240KB) —
phones don't need the full-res file and decoding it janks the reveal. */
.hero .bg .marble{
background-image:url("/wp-content/uploads/2026/10/hero-kitchen2-1536x652.jpg");
}
/* Cheaper sticky-nav blur for mobile GPUs (14px was fighting the hero animation). */
.nav{
background:rgba(250,248,243,.93);
-webkit-backdrop-filter:blur(8px) saturate(120%);
backdrop-filter:blur(8px) saturate(120%);
}
}
@media (hover: hover) and (pointer: fine){
.btn:hover .arr{transform:translateX(4px)}
.coll:hover{transform:translateY(-4px) scale(1.015)}
.coll:hover .slab{transform:scale(1.03)}
.coll .get-quote:hover{transform:translateY(-1px)}
.coll .get-quote:hover .arr{transform:translateX(3px)}
.cat-card:hover{transform:translateY(-4px) scale(1.015)}
.cat-card:hover .slab{transform:scale(1.04)}
.cat-card:hover .explore .arr{transform:translateX(4px)}
.mat-card:hover{transform:translateY(-4px) scale(1.015)}
.mat-card .chip:hover{transform:translateY(-1px)}
.mat-card .chip:hover .arr{transform:translateX(3px)}
.subscribe .field button:hover .arr{transform:translateX(4px)}
}
/* Press feedback — not hover-gated, works on touch */
.btn:active,.coll .get-quote:active,.mat-card .chip:active,
.sample-form .seg button:active{transform:scale(.97)}
/* Privacy Policy — long-form, one column */
body.privacy-policy .entry-header,
body.privacy-policy .page-header{display:none}
.legal{max-width:42rem;margin:0 auto;padding:56px var(--gutter) 96px}
.legal .eyebrow{margin:0 0 16px}
.legal h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:-.015em;margin:0 0 16px}
.legal .lede{max-width:none;margin:0 0 40px}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:36px 0 12px}
.legal h3{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.02em;margin:20px 0 8px}
.legal p,.legal li{color:var(--smoke);font-size:15px;line-height:1.65}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 16px;padding:0 0 0 1.15em}
.legal li{margin:0 0 8px}
.legal a{text-decoration:underline;text-underline-offset:2px}