:root {
  --ink: #22251f;
  --olive: #2f342b;
  --olive-2: #42473b;
  --stone: #d7d1c5;
  --linen: #f3f0e9;
  --paper: #fcfbf8;
  --clay: #b5916f;
  --line: rgba(34, 37, 31, .16);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
  --shadow: 0 26px 70px rgba(28, 27, 23, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.page-shell { width: min(1360px, calc(100% - 80px)); margin: 0 auto; }
.skip-link { position: fixed; top: -60px; left: 18px; z-index: 99; padding: 10px 16px; background: var(--ink); color: #fff; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.announcement-bar { background: var(--olive); color: #f6f4ef; font: 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.announcement-content { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.announcement-content p { margin: 0; }
.dot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: #bd9a70; }
.site-header { position: sticky; z-index: 30; top: 0; background: rgba(252, 251, 248, .96); border-bottom: 1px solid transparent; backdrop-filter: blur(10px); transition: box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 24px rgba(32, 34, 28, .06); }
.header-inner { display: grid; grid-template-columns: 240px 1fr 240px; min-height: 88px; align-items: center; }
.brand { width: 190px; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.3vw, 38px); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ''; position: absolute; width: 0; height: 1px; left: 0; bottom: 3px; background: var(--ink); transition: width .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { width: 100%; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.icon-button, .menu-trigger { width: 31px; height: 35px; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); }
.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.basket-link { display: flex; align-items: center; gap: 7px; margin-left: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.basket-link b { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 10px var(--mono); }
.menu-trigger { display: none; position: relative; padding: 0; }
.menu-trigger span { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform .25s, opacity .25s; }
.menu-trigger span + span { margin-top: 5px; }
.menu-trigger.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-trigger.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }
.search-panel { position: fixed; z-index: 50; inset: 0 0 auto; height: 0; background: var(--paper); overflow: hidden; border-bottom: 1px solid var(--line); opacity: 0; transition: height .35s ease, opacity .25s ease; }
.search-panel.is-open { height: 208px; opacity: 1; box-shadow: 0 18px 32px rgba(27, 29, 24, .12); }
.search-panel-inner { height: 100%; display: flex; align-items: end; gap: 30px; padding-bottom: 36px; }
.search-form { flex: 1; }
.search-form label { display: block; margin-bottom: 10px; color: #65695f; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.search-input-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); }
.search-input-wrap input { min-width: 0; flex: 1; padding: 10px 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 28px var(--serif); }
.search-input-wrap input::placeholder { color: #a6a69f; }
.search-input-wrap button { border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.close-search { align-self: center; margin-top: 42px; padding: 8px 0; border: 0; background: transparent; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.close-search span { margin-left: 5px; font-size: 21px; vertical-align: -2px; }
.mobile-menu { position: fixed; z-index: 28; top: 123px; left: 0; width: 100%; background: var(--paper); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .25s, transform .25s; }
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu nav { display: grid; padding: 20px 28px 28px; }
.mobile-menu a { padding: 12px 0; border-bottom: 1px solid var(--line); font: 26px var(--serif); }
.hero { position: relative; min-height: min(760px, calc(100svh - 123px)); overflow: hidden; background: #4b463b; color: #fff; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroScale 10s ease-out both; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 21, 17, .78) 0%, rgba(20, 21, 17, .52) 33%, rgba(20, 21, 17, .09) 67%, rgba(20, 21, 17, .08) 100%); }
.hero-content { position: relative; z-index: 1; padding-top: clamp(110px, 14vh, 170px); }
.eyebrow { margin: 0 0 19px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #77796f; }
.eyebrow-light { color: #e3ded3; }
.hero h1 { width: min(700px, 90%); margin: 0; font: 500 clamp(48px, 6.1vw, 92px)/.98 var(--serif); letter-spacing: -.045em; }
em { font-weight: 500; }
.hero h1 em { color: #d7b386; }
.hero-copy { max-width: 450px; margin: 28px 0 0; color: #eeece7; font-size: 16px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 14px 21px; font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; transition: transform .25s, background-color .25s, color .25s; }
.button span { font-size: 17px; font-weight: 400; }
.button:hover { transform: translateY(-2px); }
.button-light { background: #f6f3ec; color: var(--ink); }
.button-light:hover { background: #fff; }
.button-dark { background: var(--olive); color: #fff; }
.button-dark:hover { background: #4a5042; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.text-link span { font-size: 15px; font-weight: 400; }
.text-link-light { color: #fff; }
.hero-caption { position: absolute; z-index: 1; right: max(40px, calc((100vw - 1360px) / 2)); bottom: 42px; display: flex; align-items: flex-start; gap: 12px; color: #fff; font: 11px/1.65 var(--mono); }
.hero-caption b { color: #d7b386; font-weight: 500; }
.caption-line { width: 44px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.65); }
.hero-scroll { position: absolute; bottom: 35px; left: max(40px, calc((100vw - 1360px) / 2)); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.8); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left bottom; }
.hero-scroll span { display: inline-block; width: 29px; border-top: 1px solid currentColor; }
.benefits { border-bottom: 1px solid var(--line); background: #e9e5dc; }
.benefits-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefits p { margin: 0; padding: 22px 19px 22px 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.benefits p + p { padding-left: 26px; border-left: 1px solid var(--line); }
.benefits span { margin-right: 11px; color: #a17b58; font: 10px var(--mono); }
.section-pad { padding: 145px 0; }
.section-heading { margin-bottom: 66px; }
.heading-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; align-items: end; }
.section-heading h2, .feature-copy h2, .inspiration h2, .service-heading h2, .promo-panel h2 { margin: 0; font: 500 clamp(39px, 4.4vw, 63px)/1.06 var(--serif); letter-spacing: -.045em; }
.section-heading h2 em, .feature-copy h2 em, .inspiration h2 em, .service-heading h2 em, .promo-panel h2 em { color: #a17b58; }
.section-intro { max-width: 390px; margin: 0 0 5px; color: #5d6058; font-size: 14px; }
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.collection-card { position: relative; min-height: 432px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 21px; color: #fff; transition: transform .32s ease, box-shadow .32s ease; }
.collection-card:hover { z-index: 1; transform: translateY(-6px); box-shadow: var(--shadow); }
.collection-number { position: relative; z-index: 1; font: 10px var(--mono); opacity: .8; }
.card-amber { background: #a47c5a; }.card-smoke { background: #555246; }.card-chalk { background: #c6b9a4; }.card-clay { background: #826c5c; }
.timber-planks { position: absolute; inset: 63px -45px 78px; opacity: .92; }
.plank-engineered { background: repeating-linear-gradient(7deg, rgba(58,38,25,.26) 0 1px, transparent 1px 38px), repeating-linear-gradient(96deg, transparent 0 40px, rgba(255,239,205,.25) 41px 42px, transparent 43px 104px), linear-gradient(135deg, #bd9368, #845d41); transform: rotate(-8deg); }
.plank-herringbone { background: repeating-linear-gradient(45deg, transparent 0 35px, rgba(222,197,157,.46) 36px 38px, transparent 39px 72px), repeating-linear-gradient(-45deg, transparent 0 35px, rgba(58,47,37,.42) 36px 38px, transparent 39px 72px), #7d7461; transform: scale(1.25) rotate(45deg); }
.plank-oak { background: repeating-linear-gradient(173deg, rgba(88,63,39,.19) 0 1px, transparent 2px 30px), repeating-linear-gradient(88deg, transparent 0 56px, rgba(255,255,255,.26) 57px 59px, transparent 60px 115px), linear-gradient(145deg, #dfd2b8, #aa9474); transform: rotate(3deg); }
.plank-vinyl { background: repeating-linear-gradient(179deg, rgba(40,34,29,.3) 0 1px, transparent 2px 44px), repeating-linear-gradient(91deg, transparent 0 70px, rgba(237,218,192,.19) 71px 73px, transparent 74px 142px), linear-gradient(145deg, #a78974, #604e43); transform: rotate(-5deg); }
.collection-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,24,21,.12), transparent 42%, rgba(22,22,19,.6)); }
.collection-card-copy { position: relative; z-index: 1; }
.collection-card h3 { margin: 0; font: 500 30px/1 var(--serif); letter-spacing: -.03em; }
.collection-card p { margin: 7px 0 17px; color: rgba(255,255,255,.85); font-size: 12px; }
.collection-card-copy span { font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.feature-collection { padding: 115px 0; background: #dfdbd1; }
.feature-grid { display: grid; grid-template-columns: 1.07fr .93fr; gap: 10vw; align-items: center; }
.feature-visual { position: relative; min-height: 485px; overflow: hidden; background: #bd9873; }
.feature-swatch { position: absolute; bottom: 0; width: 34%; height: 100%; border-left: 1px solid rgba(46,37,26,.16); box-shadow: inset -36px 0 54px rgba(43,29,16,.1); }
.feature-swatch::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(169deg, rgba(61,40,20,.13) 0 1px, transparent 2px 39px); }
.swatch-light { left: 0; background: #dac59e; transform: skewY(-8deg); }.swatch-mid { left: 34%; background: #c49d70; transform: skewY(-8deg); }.swatch-dark { left: 68%; background: #99724f; transform: skewY(-8deg); }
.feature-badge { position: absolute; z-index: 2; top: 28px; left: 28px; width: 106px; height: 106px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; font: 14px/1.1 var(--serif); text-align: center; }
.feature-material { position: absolute; z-index: 2; right: 27px; bottom: 21px; margin: 0; color: #fff; font: 11px/1.45 var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .04em; }.feature-material span { opacity: .77; font-size: 9px; }
.feature-copy { max-width: 500px; }
.feature-copy > p:not(.eyebrow) { max-width: 470px; margin: 25px 0 29px; color: #5d6058; }
.price-row { display: flex; gap: 14px; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(34,37,31,.25); border-bottom: 1px solid rgba(34,37,31,.25); }.price-row span { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.price-row strong { font: 500 28px var(--serif); }.price-row small { font: 11px var(--sans); font-weight: 500; }
.feature-actions { display: flex; align-items: center; gap: 26px; margin-top: 27px; }.sample-button { padding: 5px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.sample-button span { margin-left: 7px; font-size: 18px; font-weight: 400; vertical-align: -2px; }
.inspiration { background: var(--paper); }.inspiration-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 13vw; align-items: center; }.inspiration-copy { max-width: 500px; }.inspiration-copy > p:not(.eyebrow) { max-width: 420px; margin: 25px 0 28px; color: #5d6058; }.experience-stat { display: flex; align-items: center; gap: 18px; margin-top: 64px; }.experience-stat strong { font: 500 68px/.8 var(--serif); letter-spacing: -.08em; }.experience-stat strong span { color: #a17b58; }.experience-stat p { max-width: 160px; margin: 0; color: #676a62; font-size: 12px; line-height: 1.45; }.editorial-image-wrap { position: relative; width: min(100%, 520px); justify-self: end; }.editorial-image-wrap img { width: 100%; height: auto; }.image-note { position: absolute; left: -92px; bottom: 65px; width: 183px; padding: 17px; background: var(--paper); color: #53564f; font: 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .05em; }.image-note span { color: #a17b58; }
.service-section { padding: 122px 0 110px; background: var(--olive); color: #f7f5ef; }.service-grid { display: grid; grid-template-columns: .3fr .7fr; column-gap: 28px; }.service-heading { padding-bottom: 80px; }.service-heading h2 em { color: #d5ad79; }.service-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.23); }.service-list article { padding: 28px 34px 0 0; }.service-list article + article { padding-left: 29px; border-left: 1px solid rgba(255,255,255,.23); }.service-list span { color: #d5ad79; font: 10px var(--mono); }.service-list h3 { margin: 42px 0 10px; font: 500 23px var(--serif); }.service-list p { max-width: 270px; margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
.journal-promo { padding-bottom: 135px; }.promo-panel { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; padding: 69px 7vw; background: #d4c8b6; }.promo-panel h2 em { color: #6f614e; }.promo-action { max-width: 305px; justify-self: end; }.promo-action p { margin: 0 0 23px; color: #55564e; font-size: 13px; }
.site-footer { padding: 71px 0 22px; background: #252820; color: #e9e6dd; }.footer-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-bottom: 63px; }.footer-brand img { width: 210px; filter: brightness(0) invert(1); opacity: .95; }.footer-brand p { max-width: 200px; margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: 12px; }.newsletter { max-width: 630px; justify-self: end; width: 100%; }.newsletter .eyebrow { color: #c4b7a2; }.newsletter h2 { margin: 0 0 20px; font: 500 clamp(26px, 3vw, 37px)/1.1 var(--serif); letter-spacing: -.04em; }.newsletter form { display: flex; border-bottom: 1px solid rgba(255,255,255,.6); }.newsletter input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 13px; }.newsletter input::placeholder { color: rgba(255,255,255,.55); }.newsletter button { width: 42px; border: 0; background: transparent; color: #d5ad79; font-size: 24px; }.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 33px 0 55px; border-top: 1px solid rgba(255,255,255,.19); }.footer-links p { margin: 0 0 16px; color: #c4b7a2; font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.footer-links a { display: block; margin: 7px 0; color: rgba(255,255,255,.72); font-size: 12px; transition: color .2s; }.footer-links a:hover { color: #fff; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.42); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.footer-bottom a + a { margin-left: 18px; }.toast { position: fixed; z-index: 90; right: 25px; bottom: 25px; max-width: 300px; padding: 14px 18px; background: var(--olive); color: #fff; box-shadow: var(--shadow); font-size: 12px; transform: translateY(25px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; }.toast.is-visible { transform: none; opacity: 1; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }
@keyframes heroScale { from { transform: scale(1.055); } to { transform: scale(1); } }
@media (max-width: 900px) { .page-shell { width: min(100% - 48px, 720px); }.header-inner { grid-template-columns: 1fr auto; min-height: 74px; }.brand { width: 172px; }.desktop-nav, .account-link { display: none; }.menu-trigger { display: block; margin-left: 4px; }.mobile-menu { top: 109px; }.hero { min-height: 650px; }.hero-content { padding-top: 122px; }.hero-caption { right: 24px; }.benefits-inner { grid-template-columns: repeat(2, 1fr); }.benefits p:nth-child(3) { border-left: 0; }.heading-split, .feature-grid, .inspiration-grid, .promo-panel { grid-template-columns: 1fr; gap: 38px; }.section-intro { max-width: 480px; }.collection-grid { grid-template-columns: repeat(2, 1fr); }.feature-visual { min-height: 390px; }.feature-copy { max-width: 610px; }.inspiration-grid { gap: 60px; }.editorial-image-wrap { justify-self: start; width: min(78%, 470px); }.service-grid { grid-template-columns: 1fr; }.service-heading { padding-bottom: 58px; }.service-list { grid-template-columns: 1fr; }.service-list article { padding: 26px 0; }.service-list article + article { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.23); }.service-list h3 { margin-top: 23px; }.promo-action { justify-self: start; }.footer-top { grid-template-columns: 1fr; gap: 50px; }.newsletter { justify-self: start; }.footer-links { grid-template-columns: repeat(2, 1fr); }.footer-links div:last-child { grid-column: 1 / -1; } }
@media (max-width: 580px) { .page-shell { width: calc(100% - 38px); }.announcement-content { min-height: 35px; justify-content: center; }.announcement-content p:last-child { display: none; }.brand { width: 151px; }.header-actions { gap: 4px; }.basket-link span { display: none; }.hero { min-height: calc(100svh - 108px); }.hero-image { object-position: 58% center; }.hero-wash { background: linear-gradient(90deg, rgba(21,21,18,.81), rgba(21,21,18,.35) 100%); }.hero-content { padding-top: 95px; }.hero h1 { width: 100%; font-size: clamp(47px, 14vw, 66px); }.hero-copy { max-width: 320px; font-size: 14px; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 23px; margin-top: 31px; }.hero-caption { right: 20px; bottom: 27px; font-size: 9px; }.caption-line { width: 26px; }.hero-scroll { display: none; }.benefits p { padding: 15px 5px 15px 0; font-size: 8px; line-height: 1.45; }.benefits p + p { padding-left: 10px; }.benefits span { display: none; }.section-pad { padding: 90px 0; }.section-heading { margin-bottom: 38px; }.section-heading h2, .feature-copy h2, .inspiration h2, .service-heading h2, .promo-panel h2 { font-size: 40px; }.collection-grid { grid-template-columns: 1fr; gap: 10px; }.collection-card { min-height: 315px; }.feature-collection { padding: 74px 0; }.feature-visual { min-height: 312px; }.feature-badge { top: 18px; left: 18px; width: 84px; height: 84px; font-size: 12px; }.feature-material { right: 17px; bottom: 15px; font-size: 9px; }.feature-actions { flex-wrap: wrap; gap: 18px; }.editorial-image-wrap { width: calc(100% - 25px); }.image-note { left: -19px; bottom: 22px; width: 150px; padding: 12px; font-size: 8px; }.experience-stat { margin-top: 45px; }.experience-stat strong { font-size: 57px; }.service-section { padding: 78px 0; }.service-list h3 { font-size: 21px; }.journal-promo { padding: 0 0 90px; }.promo-panel { margin: 0 -19px; padding: 46px 19px; }.footer-top { padding-bottom: 46px; }.footer-links { grid-template-columns: 1fr; padding-bottom: 36px; }.footer-links div:last-child { grid-column: auto; }.footer-bottom { flex-direction: column; }.search-panel.is-open { height: 185px; }.search-panel-inner { padding-bottom: 23px; gap: 15px; }.search-input-wrap input { font-size: 20px; }.close-search { margin-top: 42px; font-size: 0; }.close-search span { font-size: 23px; }.mobile-menu { top: 109px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-image, .reveal, .toast, .collection-card, .button { animation: none; transition: none; }.reveal { opacity: 1; transform: none; } }

/* Real category photography and strict text-safe overlays. */
.hero-scroll { display: none !important; }
.collection-card { background: #4c4940; isolation: isolate; }
.collection-image { position: absolute; inset: 0; overflow: hidden; background: #4c4940; }
.collection-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.collection-card:hover .collection-image img { transform: scale(1.045); }
.collection-card::after { z-index: 0; background: linear-gradient(180deg, rgba(15, 16, 13, .12) 0%, rgba(15, 16, 13, .04) 35%, rgba(15, 16, 13, .82) 100%); }
.collection-number, .collection-card-copy { z-index: 1; }
.collection-card:nth-child(1) .collection-image img { object-position: 48% center; }
.collection-card:nth-child(2) .collection-image img { object-position: 50% center; }
.collection-card:nth-child(3) .collection-image img { object-position: center; }
.collection-card:nth-child(4) .collection-image img { object-position: 52% center; }
.footer-brand img { width: 210px; height: 54px; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .95; }
@media (max-width: 580px) {
  .collection-card { min-height: 335px; }
  .collection-card h3 { font-size: 28px; }
  .footer-brand img { width: 190px; height: 49px; }
}

/* Genuine Alabastro product photography replaces the synthetic collection swatches. */
.feature-visual { isolation: isolate; background: #bda47d; }
.feature-collection-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.feature-visual::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(24, 25, 21, .2), transparent 52%, rgba(24, 25, 21, .22)); }
.feature-badge, .feature-material { z-index: 2; }

/* Fluid category frames: card height now follows available screen width instead of a fixed portrait height. */
.collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.collection-card { min-height: 220px; aspect-ratio: 4 / 3; }
.collection-image img { object-fit: cover; }
.collection-card:nth-child(1) .collection-image img { object-position: 50% 70%; }
.collection-card:nth-child(2) .collection-image img { object-position: 50% 68%; }
.collection-card:nth-child(3) .collection-image img { object-position: 50% 58%; }
.collection-card:nth-child(4) .collection-image img { object-position: 50% 68%; }
@media (max-width: 1100px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-card { aspect-ratio: 16 / 10; }
}
@media (max-width: 580px) {
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { min-height: 0; aspect-ratio: 4 / 3; }
}