/* ============================================
   CONCREA — Shared Page Styles v1.0
   Used by: about.html, material.html, trade.html, shipping.html
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[data-image]{opacity:0;transition:opacity .3s ease}
[data-image].loaded{opacity:1}
:root {
  --cream: #FAF8F5;
  --cream-dark: #F0ECE8;
  --black: #1A1A1A;
  --amber: #E8A838;
  --amber-dark: #D49830;
  --mid: #6B6B6B;
  --light: #B0ACA8;
  --pale: #E8E4E0;
  --font-body: 'Outfit', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 4px;
  --max-w: 1440px;
}
html { font-size:16px; scroll-behavior:smooth }
body { font-family:var(--font-body); color:var(--black); background:var(--cream); -webkit-font-smoothing:antialiased }
a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }

/* ─── PAGE HERO ─── */
.page-hero { max-width:var(--max-w); margin:0 auto; padding:80px 48px 0 }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:500; line-height:1.15; margin-bottom:20px }
.page-hero .hero-lead { font-size:1.05rem; line-height:1.8; color:var(--mid); font-weight:300; max-width:640px }
.page-hero-banner { margin-top:40px; width:100%; height:400px; border-radius:8px; overflow:hidden; background:var(--cream-dark) }
.page-hero-banner img { width:100%; height:100%; object-fit:cover }

/* ─── CONTENT SECTIONS ─── */
.page-content { max-width:var(--max-w); margin:0 auto; padding:0 48px 80px }

/* Section block */
.section { padding:64px 0; border-top:1px solid var(--pale) }
.section:first-child { border-top:none; padding-top:48px }
.section-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--light); margin-bottom:10px; font-weight:400 }
.section h2 { font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); font-weight:500; margin-bottom:16px; line-height:1.25 }
.section h3 { font-size:1.05rem; font-weight:600; margin-bottom:12px; margin-top:32px }
.section h3:first-child { margin-top:0 }
.section p { font-size:.95rem; line-height:1.8; color:var(--mid); font-weight:300; max-width:720px; margin-bottom:16px }
.section p:last-child { margin-bottom:0 }
.section a.inline-link { color:var(--amber-dark); text-decoration:underline; text-underline-offset:3px; transition:color .3s }
.section a.inline-link:hover { color:var(--black) }

/* Two-column layout: text + image */
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.split-reverse { direction:rtl }
.split-reverse > * { direction:ltr }
.split-img { border-radius:8px; overflow:hidden; height:400px; background:var(--cream-dark) }
.split-img img { width:100%; height:100%; object-fit:cover }

/* Feature grid (3-col) */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px }
.feature-card { padding:32px; background:#fff; border-radius:8px; border:1px solid rgba(0,0,0,.04) }
.feature-icon { width:48px; height:48px; background:var(--cream-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px }
.feature-icon svg { width:22px; height:22px; color:var(--amber-dark) }
.feature-card h4 { font-size:.95rem; font-weight:600; margin-bottom:8px }
.feature-card p { font-size:.88rem; line-height:1.7; color:var(--mid); font-weight:300 }

/* Colour palette grid */
.colour-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:16px; margin-top:24px }
.colour-chip { text-align:center }
.colour-chip-swatch { width:100%; aspect-ratio:1; border-radius:8px; border:1px solid rgba(0,0,0,.06); margin-bottom:8px }
.colour-chip-name { font-size:.82rem; font-weight:500 }
.colour-chip-hex { font-size:.72rem; color:var(--light) }

/* Steps / timeline */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:24px; margin-top:32px; counter-reset:step }
.step { position:relative; padding:28px; background:#fff; border-radius:8px; border:1px solid rgba(0,0,0,.04); counter-increment:step }
.step::before { content:counter(step); font-family:var(--font-display); font-size:2rem; font-weight:400; color:var(--pale); position:absolute; top:16px; right:20px; line-height:1 }
.step h4 { font-size:.92rem; font-weight:600; margin-bottom:8px }
.step p { font-size:.85rem; line-height:1.7; color:var(--mid); font-weight:300 }

/* Info table */
.info-table { width:100%; margin-top:24px; border-collapse:collapse }
.info-table th, .info-table td { text-align:left; padding:14px 20px; font-size:.88rem; border-bottom:1px solid var(--pale) }
.info-table th { font-weight:600; color:var(--black); background:rgba(0,0,0,.02); white-space:nowrap }
.info-table td { color:var(--mid); font-weight:300 }

/* CTA banner */
.cta-banner { margin-top:64px; padding:56px 48px; background:var(--black); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:32px }
.cta-banner-text h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:#fff; margin-bottom:10px }
.cta-banner-text p { font-size:.92rem; color:rgba(255,255,255,.5); font-weight:300; max-width:480px }
.cta-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; background:var(--amber); color:var(--black); border-radius:var(--radius); font-size:.88rem; font-weight:600; letter-spacing:.02em; transition:all .3s; border:none; cursor:pointer; font-family:var(--font-body) }
.cta-btn:hover { background:var(--amber-dark) }
.cta-btn-outline { background:transparent; border:1.5px solid var(--pale); color:var(--black) }
.cta-btn-outline:hover { border-color:var(--black); background:var(--black); color:#fff }
.cta-btn-white { background:#fff; color:var(--black) }
.cta-btn-white:hover { background:var(--cream) }
.cta-btn svg { width:16px; height:16px }

/* FAQ / Accordion */
.faq-list { margin-top:24px }
.faq-item { border-bottom:1px solid var(--pale) }
.faq-q { width:100%; background:none; border:none; cursor:pointer; padding:20px 0; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-body); font-size:.95rem; font-weight:500; color:var(--black); text-align:left }
.faq-q svg { width:20px; height:20px; color:var(--light); transition:transform .3s var(--ease); flex-shrink:0 }
.faq-q.open svg { transform:rotate(180deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease) }
.faq-a-inner { padding:0 0 20px; font-size:.9rem; line-height:1.8; color:var(--mid); font-weight:300 }

/* Table scroll wrapper for mobile */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-wrap .info-table { min-width:580px }

/* Prevent horizontal overflow globally */
html, body { overflow-x:hidden }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
  .page-hero { padding:60px 32px 0 }
  .page-content { padding:0 32px 60px }
  .cta-banner { padding:40px 32px }
  .features { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  .page-hero { padding:48px 20px 0 }
  .page-hero h1 { font-size:clamp(1.6rem,5vw,2.2rem) }
  .page-hero .hero-lead { font-size:.95rem }
  .page-hero-banner { height:260px }
  .page-content { padding:0 20px 48px }
  .split { grid-template-columns:1fr; gap:24px }
  .split-reverse { direction:ltr }
  .split-img { height:280px }
  .features { grid-template-columns:1fr; gap:16px }
  .feature-card { padding:24px }
  .cta-banner { flex-direction:column; text-align:center; padding:40px 24px; border-radius:8px }
  .cta-banner-text p { max-width:100% }
  .cta-btn { width:100%; justify-content:center }
  .steps { grid-template-columns:1fr }
  .section h2 { font-size:clamp(1.2rem,4vw,1.6rem) }
}
@media(max-width:480px) {
  .page-hero-banner { height:200px }
  .colour-grid { grid-template-columns:repeat(3,1fr); gap:12px }
  .cta-banner { padding:32px 20px; margin-top:40px }
}