:root {
  --ink: #11261f;
  --forest: #17352b;
  --deep: #0d211b;
  --gold: #d7a83d;
  --cream: #f3efe5;
  --paper: #faf8f2;
  --font-sans: "Manrope";
  --font-serif: "Cormorant Garamond";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-sans), sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
main { background: var(--paper); }


.site-header {
  height: 90px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between;
  position: absolute; z-index: 20; width: 100%; color: var(--ink); border-bottom: 1px solid #17352b24;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 56px; height: 56px; border: 1px solid var(--gold); display: grid; place-items: center;
  color: var(--gold); font-family: var(--font-serif); font-size: 23px; letter-spacing: 1px;
}
.brand-name { text-transform: uppercase; font-size: 11px; letter-spacing: 2.7px; line-height: 1.45; }
.brand-name small { display: block; font-size: 8px; letter-spacing: 3.3px; opacity: .7; }
nav { display: flex; gap: 42px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; }
nav a { transition: color .2s; }
nav a:hover { color: #e7bf60; }
.header-cta { text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; border-bottom: 1px solid var(--gold); padding: 10px 0; }
.header-cta span { color: var(--gold); padding-left: 16px; }

.hero {
  min-height: 790px; height: 94vh; color: var(--ink); position: relative; display: flex; align-items: center;
  overflow: hidden; background: #efe6d2;
}
.hero::before {
  content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(248,244,233,.98) 0%, rgba(248,244,233,.9) 40%, rgba(248,244,233,.2) 75%, rgba(23,53,43,.08) 100%),
    linear-gradient(0deg, rgba(247,241,226,.35), transparent 50%),
    url("https://images.unsplash.com/photo-1501430654243-c934cec2e1c0?auto=format&fit=crop&w=2200&q=90") center/cover;
  transform: scale(1.01);
}
.hero-grain {
  position: absolute; width: 610px; height: 610px; border-radius: 50%; right: -170px; top: 90px;
  border: 1px solid #e2b44c70; box-shadow: 0 0 0 90px #d9a9340b, 0 0 0 180px #d9a93408;
}
.hero-content { position: relative; z-index: 2; width: min(1180px, 90vw); margin: 75px auto 0; }
.eyebrow {
  margin: 0 0 24px; font-size: 10px; letter-spacing: 3.4px; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 14px; color: #8b6d25;
}
.eyebrow span { display: inline-block; width: 32px; height: 1px; background: var(--gold); }
.eyebrow.dark { color: #7c6a3a; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 920px; margin-bottom: 26px; font-family: var(--font-serif); font-size: clamp(62px, 7vw, 104px);
  line-height: .9; font-weight: 500; letter-spacing: -3px;
}
h1 em, h2 em { color: #dfb449; font-weight: 400; }
.hero-copy { max-width: 575px; font-size: 16px; line-height: 1.85; color: #50645d; }
.hero-actions { display: flex; align-items: center; gap: 38px; margin-top: 38px; }
.button {
  border: 0; min-width: 210px; display: inline-flex; justify-content: space-between; align-items: center;
  padding: 19px 23px; text-transform: uppercase; font-size: 10px; letter-spacing: 1.8px; font-weight: 800; cursor: pointer;
}
.button-gold { background: var(--gold); color: #13261e; }
.button-gold:hover { background: #e7bd59; }
.button span { font-size: 18px; font-weight: 400; }
.text-link { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #314940; }
.market-card {
  position: absolute; z-index: 3; right: 5vw; bottom: 80px; padding: 26px 30px; width: 250px;
  background: rgba(252,249,241,.88); color: var(--ink); backdrop-filter: blur(12px); border: 1px solid #17352b22;
}
.market-card > p { text-transform: uppercase; font-size: 9px; letter-spacing: 2.4px; color: #d4bd7d; }
.market-card div { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid #17352b1d; }
.market-card strong { color: var(--gold); font-family: var(--font-serif); font-size: 34px; font-weight: 500; }
.market-card span { text-transform: uppercase; font-size: 8px; line-height: 1.5; letter-spacing: 1.5px; }
.hero-index { position: absolute; z-index: 2; bottom: 38px; left: 5vw; font-size: 9px; letter-spacing: 2px; color: #17352b80; }

.trust-strip {
  min-height: 95px; padding: 20px 5vw; background: var(--cream); display: flex; justify-content: center; align-items: center;
  gap: 35px; color: #756e5e; text-transform: uppercase; font-size: 9px; letter-spacing: 2.2px;
}
.trust-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.section { padding: 120px max(5vw, calc((100vw - 1180px)/2)); }
.section-heading { display: grid; grid-template-columns: 1.5fr .7fr; align-items: end; gap: 60px; margin-bottom: 55px; }
h2 { font-family: var(--font-serif); font-size: clamp(48px, 5vw, 70px); line-height: .96; font-weight: 500; letter-spacing: -1.5px; }
.section-heading > p { color: #67716c; line-height: 1.8; font-size: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card { min-height: 455px; position: relative; overflow: hidden; color: white; }
.product-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: transform .6s ease; }
.product-card:hover img { transform: scale(1.05); }
.product-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, #081a15db 0%, transparent 65%); }
.product-number { position: absolute; top: 24px; left: 24px; font-size: 9px; letter-spacing: 2px; }
.product-info { position: absolute; left: 28px; bottom: 28px; }
.product-info h3 { font-family: var(--font-serif); font-size: 43px; margin-bottom: 4px; font-weight: 500; }
.product-info p { margin: 0; text-transform: uppercase; letter-spacing: 1.4px; font-size: 8px; color: #d8d5c9; }
.product-arrow { position: absolute; right: 24px; bottom: 27px; color: var(--gold); font-size: 20px; }

.capabilities { min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; background: #ece6d8; color: var(--ink); }
.cap-image {
  min-height: 650px; background:
    linear-gradient(0deg, #0d2b202e, #0d2b202e),
    url("https://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=1400&q=85") center/cover;
  position: relative;
}
.quality-seal {
  width: 145px; height: 145px; border-radius: 50%; background: var(--gold); color: var(--ink); position: absolute;
  right: -72px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 10px;
}
.quality-seal strong { font-family: var(--font-serif); font-size: 40px; font-weight: 500; border-right: 1px solid #59481766; padding-right: 10px; }
.quality-seal span { font-size: 7px; text-transform: uppercase; letter-spacing: 1.4px; line-height: 1.5; }
.cap-content { padding: 100px 8vw; }
.cap-lead { color: #61716a; line-height: 1.8; font-size: 14px; max-width: 480px; }
.cap-list { margin-top: 38px; }
.cap-list > div { display: grid; grid-template-columns: 40px 1fr; gap: 20px; border-top: 1px solid #17352b22; padding: 22px 0; }
.cap-list b { color: var(--gold); font-size: 10px; }
.cap-list span { color: #62736c; font-size: 12px; line-height: 1.6; }
.cap-list strong { color: var(--ink); display: block; font-size: 13px; margin-bottom: 5px; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.about-grid > div { padding-top: 15px; color: #707772; line-height: 1.8; font-size: 14px; }
.about-grid .about-lead { font-family: var(--font-serif); font-size: 23px; line-height: 1.35; color: var(--ink); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 75px; border-top: 1px solid #d8d4ca; }
.values > div { padding: 28px 35px 0 0; border-right: 1px solid #d8d4ca; min-height: 150px; }
.values > div + div { padding-left: 35px; }
.values > div:last-child { border: 0; }
.values span { color: #a98b45; font-size: 9px; }
.values strong { display: block; font-family: var(--font-serif); font-size: 27px; margin: 15px 0 9px; }
.values p { font-size: 11px; color: #777d78; }

.enquiry {
  background: #24473b; color: white; padding: 110px max(5vw, calc((100vw - 1180px)/2));
  display: grid; grid-template-columns: .85fr 1fr; gap: 110px; position: relative; overflow: hidden;
}
.enquiry::after { content: "ARS"; position: absolute; left: -30px; bottom: -80px; color: #ffffff04; font-family: var(--font-serif); font-size: 300px; }
.enquiry-copy { position: relative; z-index: 2; }
.enquiry-copy > p { color: #abb8b2; line-height: 1.8; font-size: 13px; max-width: 430px; }
.contact-details { margin-top: 35px; padding-top: 27px; border-top: 1px solid #ffffff1c; font-style: normal; display: grid; gap: 5px; }
.contact-details span { margin-top: 12px; color: #8d9c95; font-size: 8px; text-transform: uppercase; letter-spacing: 1.8px; }
.contact-details p, .contact-details a { color: white; font-size: 12px; line-height: 1.7; margin: 0; }
.contact-details a:hover { color: var(--gold); }
form { position: relative; z-index: 2; display: grid; gap: 22px; }
label { display: grid; gap: 9px; text-transform: uppercase; font-size: 8px; letter-spacing: 1.7px; color: #c3ccc8; }
input, select {
  width: 100%; border: 0; border-bottom: 1px solid #ffffff35; background: transparent; color: white;
  outline: none; padding: 10px 0 13px; font-size: 13px; letter-spacing: 0; text-transform: none;
}
input:focus, select:focus { border-color: var(--gold); }
input::placeholder { color: #ffffff4f; }
select option { color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
form .button { margin-top: 10px; }
.success-message { border: 1px solid #ffffff25; padding: 55px; align-self: center; position: relative; z-index: 2; }
.success-message > span { color: var(--gold); font-size: 30px; }
.success-message h3 { font-family: var(--font-serif); font-size: 35px; margin: 18px 0 8px; }
.success-message p { color: #abb8b2; }
.success-message button { border: 0; background: none; color: var(--gold); padding: 15px 0; text-transform: uppercase; font-size: 9px; letter-spacing: 1.4px; cursor: pointer; }

footer {
  min-height: 260px; padding: 55px 5vw 30px; background: #163229; color: white; display: grid;
  grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 30px; border-top: 1px solid #ffffff12;
}
.footer-brand { justify-self: start; }
footer > p { color: #788781; font-size: 11px; text-align: center; }
.footer-nav { display: flex; justify-content: flex-end; gap: 25px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; }
footer > small { grid-column: 1 / -1; color: #58655f; border-top: 1px solid #ffffff12; padding-top: 24px; font-size: 8px; letter-spacing: 1px; }

/* Design 02 — crisp editorial minimalism */
.theme-minimal {
  --ink: #171914; --forest: #2f3b2a; --gold: #a7bb54; --cream: #f4f4ef; --paper: #ffffff;
}
.theme-minimal .site-header { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); }
.theme-minimal .brand-mark { border-radius: 50%; border-color: #171914; color: #171914; font-family: var(--font-sans); font-size: 15px; font-weight: 800; }
.theme-minimal .hero::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.87) 43%, rgba(255,255,255,.12) 78%),
    url("https://images.unsplash.com/photo-1501430654243-c934cec2e1c0?auto=format&fit=crop&w=2200&q=90") center/cover;
}
.theme-minimal h1, .theme-minimal h2, .theme-minimal .product-info h3, .theme-minimal .about-lead {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -.055em;
}
.theme-minimal h1 em, .theme-minimal h2 em { color: inherit; font-style: normal; }
.theme-minimal .hero-grain, .theme-minimal .quality-seal { border-radius: 0; }
.theme-minimal .button-gold { background: #171914; color: white; }
.theme-minimal .product-grid { gap: 2px; }
.theme-minimal .product-card { min-height: 500px; }
.theme-minimal .capabilities { background: #f2f3ed; }
.theme-minimal .enquiry { background: #1c211a; }
.theme-minimal footer { background: #11130f; }


@media (max-width: 900px) {
  nav { display: none; }
  .hero { min-height: 720px; }
  .hero-content { margin-top: 30px; }
  .market-card { display: none; }
  h1 { font-size: clamp(54px, 13vw, 82px); }
  .section-heading, .about-grid, .enquiry { grid-template-columns: 1fr; gap: 25px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 420px; }
  .capabilities { grid-template-columns: 1fr; }
  .cap-image { min-height: 480px; }
  .quality-seal { right: 30px; top: auto; bottom: -65px; transform: none; }
  .cap-content { padding: 100px 7vw 80px; }
  .values { grid-template-columns: 1fr; }
  .values > div, .values > div + div { border-right: 0; border-bottom: 1px solid #d8d4ca; padding: 25px 0; }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer > p { text-align: left; }
  .footer-nav { justify-content: flex-start; }
  footer > small { grid-column: auto; }
}

@media (max-width: 560px) {
  .site-header { height: 76px; }
  .brand-mark { width: 45px; height: 45px; font-size: 18px; }
  .brand-name { font-size: 8px; }
  .header-cta { font-size: 8px; }
  .header-cta span { padding-left: 5px; }
  .hero { height: auto; padding: 115px 0 85px; }
  .hero-content { width: 88vw; margin: 0 auto; }
  h1 { letter-spacing: -1.5px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 25px; }
  .trust-strip { flex-wrap: wrap; gap: 15px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .section-heading { margin-bottom: 35px; }
  .form-row { grid-template-columns: 1fr; gap: 22px; }
  .enquiry { padding-top: 80px; padding-bottom: 80px; }
}