.product-preview { background: var(--paper); padding: 120px 0px; }

.section-heading { grid-template-columns: 1fr 1.8fr 1fr; align-items: start; gap: 32px; display: grid; }

.section-heading h2 { letter-spacing: -0.05em; margin: -8px 0px 0px; font-size: clamp(42px, 5vw, 70px); line-height: 0.98; }

.section-heading > p:last-child { color: rgb(102, 99, 93); margin: 0px; font-size: 15px; line-height: 1.6; }

.section-index { color: rgb(155, 112, 47); padding-top: 6px; }

.product-cards { border-top: 1px solid rgb(198, 192, 181); grid-template-columns: 1fr 1fr; margin-top: 64px; display: grid; }

.product-cards article { border-bottom: 1px solid rgb(198, 192, 181); grid-template-columns: 120px 1fr; gap: 24px; padding: 42px 0px; display: grid; }

.product-cards article:first-child { border-right: 1px solid rgb(198, 192, 181); padding-right: 44px; }

.product-cards article:last-child { padding-left: 44px; }

.product-code { color: rgb(165, 120, 53); border: 1px solid rgb(185, 177, 164); place-items: center; width: 92px; height: 92px; font-size: 44px; font-weight: 650; display: grid; }

.product-cards p { color: rgb(98, 95, 88); min-height: 48px; margin: 0px 0px 32px; font-size: 15px; line-height: 1.55; }

.product-cards strong { letter-spacing: -0.03em; align-items: baseline; gap: 8px; font-size: 30px; display: flex; }

.product-cards strong small { color: rgb(119, 115, 107); letter-spacing: 0px; font-size: 12px; font-weight: 450; }

.price-note { color: rgb(135, 130, 121); margin: 18px 0px 0px; font-size: 11px; }

#products, #calculator, #about, #contacts { scroll-margin-top: 24px; }

.product-copy .product-name { min-height: 48px; color: var(--ink); margin: 0px 0px 16px; font-size: 17px; font-weight: 650; }

.product-copy .product-use { color: rgb(111, 106, 98); min-height: 72px; margin: 0px 0px 30px; font-size: 13px; line-height: 1.65; }

.product-prices { border-top: 1px solid rgb(210, 204, 193); grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 24px; display: grid; }

.product-prices > div { flex-direction: column; gap: 7px; display: flex; }

.product-prices small { color: rgb(139, 133, 124); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; }

.product-prices strong { color: var(--ink); font-size: 25px; font-weight: 620; display: block; }

.product-prices strong em { color: rgb(119, 115, 107); margin-left: 4px; font-size: 11px; font-style: normal; font-weight: 450; }

.calculator-section { background: var(--ink); color: rgb(255, 255, 255); padding: 120px 0px 48px; position: relative; overflow: hidden; }

.calculator-section::before { content: ""; opacity: 0.045; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 11px); position: absolute; inset: 0px; }

.calculator-heading { grid-template-columns: 1fr 1.8fr 1fr; align-items: start; gap: 32px; display: grid; position: relative; }

.calculator-heading h2 { letter-spacing: -0.05em; margin: -8px 0px 0px; font-size: clamp(42px, 5vw, 70px); line-height: 0.98; }

.calculator-heading > p:last-child { color: rgba(255, 255, 255, 0.55); margin: 0px; font-size: 15px; line-height: 1.65; }

.section-index-light { color: var(--gold-light); }

.calculator-grid { background: rgb(33, 33, 31); border: 1px solid rgba(255, 255, 255, 0.13); grid-template-columns: minmax(0px, 1.25fr) minmax(380px, 0.75fr); margin-top: 68px; display: grid; position: relative; }

.calculator-form { padding: 48px; }

.calculator-form fieldset { border: 0px; margin: 0px 0px 42px; padding: 0px; }

.calculator-form legend, .input-row label > span, .reserve-control > span b { color: rgba(255, 255, 255, 0.52); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; font-size: 10px; font-weight: 600; display: block; }

.mix-switch { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; }

.mix-switch button { text-align: left; color: rgb(255, 255, 255); cursor: pointer; background: 0px 0px; border: 1px solid rgba(255, 255, 255, 0.15); flex-direction: column; gap: 7px; padding: 22px; transition: border-color 0.2s, background 0.2s; display: flex; }

.mix-switch button:hover { border-color: rgba(255, 255, 255, 0.35); }

.mix-switch button.active { border-color: var(--gold); background: rgba(201, 152, 74, 0.09); }

.mix-switch b { font-size: 18px; font-weight: 600; }

.mix-switch span { color: rgba(255, 255, 255, 0.48); font-size: 12px; }

.input-row { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; display: grid; }

.unit-input { position: relative; }

.unit-input input { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); outline: 0px; width: 100%; height: 70px; padding: 0px 70px 0px 20px; font-size: 25px; font-weight: 600; transition: border-color 0.2s; }

.unit-input input:focus { border-color: var(--gold); }

.unit-input em { color: rgba(255, 255, 255, 0.42); font-size: 12px; font-style: normal; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }

.reserve-control { display: block; }

.reserve-control > span { justify-content: space-between; align-items: flex-start; display: flex; }

.reserve-control > span b { margin: 0px; }

.reserve-control output { color: var(--gold-light); font-size: 15px; font-weight: 650; }

.reserve-control input { width: 100%; accent-color: var(--gold); cursor: pointer; }

.reserve-control small { color: rgba(255, 255, 255, 0.34); margin-top: 12px; font-size: 10px; display: block; }

.calculator-result { background: var(--paper); color: var(--ink); flex-direction: column; padding: 48px; display: flex; }

.calculator-result > p { color: rgb(138, 133, 124); text-transform: uppercase; letter-spacing: 0.14em; margin: 0px; font-size: 10px; }

.result-tonnage { align-items: baseline; gap: 12px; margin: 20px 0px 32px; display: flex; }

.result-tonnage strong { letter-spacing: -0.07em; font-size: clamp(64px, 6vw, 92px); font-weight: 650; line-height: 1; }

.result-tonnage span { color: rgb(107, 103, 95); font-size: 13px; }

.result-lines { border-top: 1px solid rgb(213, 207, 196); }

.result-lines > div { border-bottom: 1px solid rgb(213, 207, 196); justify-content: space-between; padding: 13px 0px; font-size: 12px; display: flex; }

.result-lines span { color: rgb(125, 120, 111); }

.result-lines b { font-weight: 600; }

.wholesale-status { color: rgb(107, 103, 95); align-items: center; gap: 9px; margin-top: 18px; font-size: 11px; display: flex; }

.status-dot { background: rgb(168, 161, 151); border-radius: 50%; width: 7px; height: 7px; }

.status-dot.active { background: rgb(78, 138, 85); box-shadow: rgba(78, 138, 85, 0.12) 0px 0px 0px 4px; }

.result-total { flex-direction: column; margin-top: auto; padding-top: 34px; display: flex; }

.result-total > span { color: rgb(119, 113, 104); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; }

.result-total strong { letter-spacing: -0.045em; margin: 8px 0px 5px; font-size: clamp(36px, 3.8vw, 54px); line-height: 1; }

.result-total small { color: rgb(139, 133, 124); font-size: 10px; }

.result-actions { grid-template-columns: 1fr auto; gap: 8px; margin-top: 26px; display: grid; }

.result-actions .button { cursor: pointer; border: 0px; justify-content: space-between; }

.copy-button { color: rgb(108, 102, 94); cursor: pointer; background: 0px 0px; border: 1px solid rgb(207, 200, 188); padding: 0px 15px; font-size: 10px; }

.copy-button:hover { color: var(--ink); border-color: rgb(158, 150, 138); }

.calculator-note { color: rgba(255, 255, 255, 0.36); padding-top: 20px; font-size: 10px; line-height: 1.5; position: relative; }

.process-section { background: var(--paper); padding: 124px 0px; }

.process-grid { grid-template-columns: 0.82fr 1.18fr; gap: 110px; display: grid; }

.process-intro { align-self: start; position: sticky; top: 42px; }

.process-intro h2 { letter-spacing: -0.055em; margin: 24px 0px 28px; font-size: clamp(48px, 5.5vw, 74px); line-height: 0.94; }

.process-intro > p:last-child { color: rgb(113, 108, 100); max-width: 320px; font-size: 14px; line-height: 1.6; }

.process-list { border-top: 1px solid rgb(201, 194, 182); margin: 0px; padding: 0px; list-style: none; }

.process-list li { border-bottom: 1px solid rgb(201, 194, 182); grid-template-columns: 80px 1fr; gap: 28px; padding: 34px 0px; display: grid; }

.process-list li > span { color: rgb(161, 117, 51); font-family: var(--font-display), sans-serif; font-size: 11px; }

.process-list b { font-size: 20px; font-weight: 620; }

.process-list p { color: rgb(113, 108, 100); max-width: 460px; margin: 10px 0px 0px; font-size: 13px; line-height: 1.6; }

.about-section { color: rgb(255, 255, 255); background: rgb(32, 32, 30); padding: 128px 0px; overflow: hidden; }

.about-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 80px; display: grid; }

.about-copy h2 { letter-spacing: -0.06em; margin: 25px 0px 38px; font-size: clamp(50px, 6vw, 82px); line-height: 0.92; }

.about-copy > p { color: rgba(255, 255, 255, 0.48); max-width: 470px; font-size: 14px; line-height: 1.72; }

.about-copy .about-lead { color: rgba(255, 255, 255, 0.84); font-size: 19px; line-height: 1.5; }

.about-tags { flex-wrap: wrap; gap: 8px; margin-top: 36px; display: flex; }

.about-tags span { color: rgba(255, 255, 255, 0.64); text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid rgba(255, 255, 255, 0.16); padding: 10px 13px; font-size: 9px; }

.photo-collage { min-height: 680px; position: relative; }

.photo-collage figure { background: rgb(17, 17, 17); margin: 0px; position: absolute; overflow: hidden; }

.photo-collage img { object-fit: cover; filter: saturate(0.72) contrast(1.06); width: 100%; height: 100%; transition: filter 0.35s, transform 0.6s; display: block; }

.photo-collage figure:hover img { filter: saturate() contrast(1.02); transform: scale(1.018); }

.photo-main { inset: 0px 80px 110px 0px; }

.photo-small { border: 10px solid rgb(32, 32, 30); width: 205px; height: 285px; }

.photo-small-one { top: 40px; right: 0px; }

.photo-small-two { bottom: 0px; right: 22px; }

.photo-caption { background: var(--gold); color: rgb(22, 21, 18); text-transform: uppercase; letter-spacing: 0.12em; padding: 12px 15px; font-size: 9px; position: absolute; bottom: 70px; left: 22px; }

.faq-section { background: rgb(231, 226, 216); padding: 124px 0px; }

.faq-grid { grid-template-columns: 0.68fr 1.32fr; gap: 100px; display: grid; }

.faq-grid h2 { letter-spacing: -0.055em; margin: 24px 0px 0px; font-size: clamp(48px, 5.5vw, 74px); line-height: 0.94; }

.faq-list { border-top: 1px solid rgb(189, 181, 168); }

.faq-list details { border-bottom: 1px solid rgb(189, 181, 168); }

.faq-list summary { cursor: pointer; padding: 26px 48px 26px 0px; font-size: 17px; font-weight: 600; list-style: none; position: relative; }

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary span { color: rgb(155, 112, 47); font-size: 24px; font-weight: 350; transition: transform 0.2s; position: absolute; top: 23px; right: 4px; }

.faq-list details[open] summary span { transform: rotate(45deg); }

.faq-list details p { color: rgb(105, 100, 92); max-width: 650px; margin: -4px 0px 26px; font-size: 13px; line-height: 1.7; }

.contacts-section { color: rgb(255, 255, 255); background: rgb(22, 22, 21); padding: 124px 0px 0px; }

.contacts-grid { grid-template-columns: 1fr 0.78fr; gap: 110px; display: grid; }

.contacts-copy h2 { letter-spacing: -0.06em; margin: 24px 0px 28px; font-size: clamp(54px, 6vw, 86px); line-height: 0.9; }

.contacts-copy > p:not(.section-index) { color: rgba(255, 255, 255, 0.47); margin: 0px; font-size: 15px; }

.contact-links { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 54px; }

.contact-links a { border-bottom: 1px solid rgba(255, 255, 255, 0.14); flex-direction: column; gap: 6px; padding: 21px 40px 21px 0px; transition: padding-left 0.2s; display: flex; position: relative; }

.contact-links a:hover { padding-left: 10px; }

.contact-links small { color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; }

.contact-links b { font-size: 22px; font-weight: 540; }

.contact-links a > span { color: rgba(255, 255, 255, 0.36); position: absolute; top: 50%; right: 5px; transform: translateY(-50%); }

.contact-form { background: rgb(34, 34, 32); border: 1px solid rgba(255, 255, 255, 0.12); align-self: start; padding: 42px; }

.contact-form label { margin-bottom: 26px; display: block; }

.contact-form label > span { color: rgba(255, 255, 255, 0.46); text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 9px; font-size: 9px; display: block; }

.contact-form input, .contact-form textarea { color: rgb(255, 255, 255); resize: vertical; background: 0px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.22); border-image: initial; border-radius: 0px; outline: 0px; width: 100%; padding: 13px 0px; font-size: 14px; }

.contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); }

.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.2); }

.contact-form .button { cursor: pointer; border: 0px; justify-content: space-between; width: 100%; margin-top: 8px; }

.contact-form > p { color: rgba(255, 255, 255, 0.3); margin: 12px 0px 0px; font-size: 9px; line-height: 1.5; }

.address-card { border-top: 1px solid rgba(255, 255, 255, 0.14); justify-content: space-between; align-items: flex-end; margin-top: 94px; padding: 34px 0px; display: flex; }

.address-card > div { flex-direction: column; gap: 10px; display: flex; }

.address-card small { color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; }

.address-card b { font-size: 20px; font-weight: 520; }

.address-card a { color: rgba(255, 255, 255, 0.66); border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 4px; font-size: 11px; }

.address-card a span { margin-left: 18px; }

footer { color: rgba(255, 255, 255, 0.38); background: rgb(13, 13, 12); padding: 36px 0px; }

.footer-grid { grid-template-columns: 1fr 1fr auto; align-items: center; gap: 24px; font-size: 10px; display: grid; }

.footer-brand { align-items: center; gap: 18px; display: flex; }

.footer-brand img { opacity: 0.68; width: 84px; height: auto; }

.footer-grid p { margin: 0px; }

@keyframes settle { 
  0% { opacity: 0.55; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1.015); }
}