/* Suikerbos Bonsmaras — styles.css
   Brand system per client CI. Colours and type are mandated, not open to
   interpretation: see BRIEF section 3. */

:root{
  --burnt:#2d2c2a;
  --sand:#d5ccbf;
  --kalk:#e5e3d7;
  --veld:#af7d39;
  --olive:#7a7c5f;

  --burnt-soft:#4a4844;
  --kalk-line:rgba(45,44,42,0.14);
  --light-line:rgba(229,227,215,0.28);

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Georgia, "Times New Roman", serif;

  --content-w:1200px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --section-pad:clamp(4rem, 9vw, 7.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--kalk);
  color:var(--burnt);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.5em;
  color:var(--burnt);
}

h1{ font-size:clamp(2.75rem, 7vw, 5.5rem); letter-spacing:0.01em; }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); letter-spacing:0.005em; }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); font-weight:600; }
h4{ font-size:1.1rem; font-weight:600; letter-spacing:0.02em; }

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--body);
  font-size:0.8rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--veld);
  font-weight:500;
  margin:0 0 0.9em;
  display:block;
}

.lede{
  font-size:1.2rem;
  line-height:1.65;
  max-width:44em;
}

/* ---------- Layout ---------- */

.wrap{
  max-width:var(--content-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{
  padding-block:var(--section-pad);
}

.bg-kalk{ background:var(--kalk); }
.bg-sand{ background:var(--sand); }
.bg-burnt{ background:var(--burnt); color:var(--kalk); }
.bg-burnt h1,
.bg-burnt h2,
.bg-burnt h3,
.bg-burnt h4{ color:var(--kalk); }
.bg-burnt .eyebrow{ color:var(--veld); }

/* ---------- Skip link ---------- */

.skip-link{
  position:absolute;
  left:1rem;
  top:-4rem;
  background:var(--burnt);
  color:var(--kalk);
  padding:0.75rem 1.25rem;
  z-index:200;
  transition:top 0.2s var(--ease);
  text-decoration:none;
  font-family:var(--body);
  letter-spacing:0.04em;
}
.skip-link:focus{ top:1rem; }

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--veld);
  outline-offset:3px;
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  font-family:var(--body);
  font-size:0.92rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  padding:0.95em 1.9em;
  border:1px solid currentColor;
  border-radius:1px;
  background:transparent;
  color:var(--burnt);
  cursor:pointer;
  transition:background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space:nowrap;
}

.btn-primary{
  background:var(--veld);
  border-color:var(--veld);
  color:var(--kalk);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:transparent;
  color:var(--veld);
}
.bg-burnt .btn-primary{ color:var(--burnt); }
.bg-burnt .btn-primary:hover,
.bg-burnt .btn-primary:focus-visible{ color:var(--veld); }

.btn-ghost{
  border-color:currentColor;
  color:var(--burnt);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  background:var(--burnt);
  color:var(--kalk);
}
.bg-burnt .btn-ghost{ color:var(--kalk); }
.bg-burnt .btn-ghost:hover,
.bg-burnt .btn-ghost:focus-visible{
  background:var(--kalk);
  color:var(--burnt);
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.2rem;
}

/* ---------- Slogan divider ---------- */

.slogan-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin:0 auto;
  max-width:520px;
}
.slogan-divider .line{
  flex:1 1 auto;
  height:1px;
  background:currentColor;
  opacity:0.45;
}
.slogan-divider .text{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:1.25rem;
  white-space:nowrap;
}

/* ---------- Nav ---------- */

.site-header{
  background:var(--burnt);
  color:var(--kalk);
  position:relative;
  z-index:100;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:0.75rem;
}
.nav-logo{
  display:flex;
  align-items:center;
}
.nav-logo img{
  height:2.75rem;
  width:auto;
}
.nav-logo .brand-text{
  display:none;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:0.92rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--kalk);
  padding-block:0.3rem;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color:var(--veld);
  border-color:var(--veld);
}
.nav-links a[aria-current="page"]{
  border-color:var(--veld);
  color:var(--veld);
}
.nav-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  color:var(--veld) !important;
  font-weight:500;
}
.nav-whatsapp svg{ width:1.05em; height:1.05em; fill:currentColor; }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--light-line);
  color:var(--kalk);
  width:2.7rem;
  height:2.7rem;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:1px;
}
.nav-toggle svg{ width:1.3rem; height:1.3rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--burnt);
    border-top:1px solid var(--light-line);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s var(--ease);
  }
  .nav-links.is-open{ max-height:24rem; }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block;
    width:100%;
    padding:1rem var(--gutter);
    border-bottom:1px solid var(--light-line);
    border-left:2px solid transparent;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible,
  .nav-links a[aria-current="page"]{
    border-left-color:var(--veld);
    border-bottom-color:var(--light-line);
  }
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  color:var(--kalk);
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:75% 28%;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(45,44,42,0.62) 0%, rgba(45,44,42,0.4) 16%, rgba(45,44,42,0.12) 34%, rgba(45,44,42,0) 46%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:clamp(1rem, 2.5vw, 1.5rem);
  text-align:center;
}
.hero-logo{
  width:clamp(240px, 26vw, 380px);
  margin:0 auto 0.6rem;
}
.hero h1{
  color:var(--kalk);
  margin-bottom:0.1em;
}
.hero .sub{
  font-size:clamp(0.95rem, 1.7vw, 1.15rem);
  max-width:36em;
  color:var(--kalk);
  margin:0 auto;
}
.hero .btn-row{ margin-top:1rem; justify-content:center; }
.hero .btn-ghost{ color:var(--kalk); }
.hero .btn-ghost:hover,
.hero .btn-ghost:focus-visible{ background:var(--kalk); color:var(--burnt); }

@media (max-width: 480px){
  .hero{ min-height:100vh; }
  .hero-inner{ padding-top:clamp(1.5rem, 4vw, 2rem); }
  .hero-logo{ width:clamp(240px, 68vw, 320px); margin-bottom:1.1rem; }
  .hero .sub{ font-size:0.98rem; }
  .hero .btn-row{ margin-top:1.4rem; gap:0.6rem; }
  .hero .btn{ padding:0.75em 1.4em; font-size:0.85rem; }
}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Intro ---------- */

.intro{
  text-align:left;
}
.intro .lede{ margin-bottom:0; }
.placeholder-note{
  margin-top:1.1em;
  font-style:italic;
  color:var(--burnt-soft);
  font-size:0.95rem;
  border-left:2px solid var(--sand);
  padding-left:1em;
}
.bg-burnt .placeholder-note{
  color:var(--sand);
  border-left-color:var(--olive);
}

/* ---------- Pillars ---------- */

.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 5vw, 3.5rem);
  margin-top:3rem;
}
.pillar h3{ margin-bottom:0.5rem; }
.pillar p{ color:var(--burnt-soft); }
.pillar .rule{
  width:2.5rem;
  height:1px;
  background:var(--veld);
  margin-bottom:1.1rem;
}
@media (max-width: 760px){
  .pillars{ grid-template-columns:1fr; gap:2.4rem; }
}

/* ---------- Motif section (bull head background) ---------- */

.motif-section{
  position:relative;
  overflow:hidden;
  text-align:center;
}
.motif-section .motif{
  position:absolute;
  top:50%;
  right:-8%;
  transform:translateY(-50%);
  width:min(70vw, 900px);
  opacity:0.1;
  pointer-events:none;
  user-select:none;
}
.motif-section .wrap{ position:relative; z-index:1; }
.motif-section .eyebrow{ justify-content:center; }
.motif-section .meta{
  font-size:1.1rem;
  margin:1.3rem 0 0.4rem;
  color:var(--sand);
}
.motif-section .meta strong{ color:var(--kalk); font-weight:600; }
.motif-section .stock-line{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-style:italic;
  margin-top:1rem;
  color:var(--kalk);
}
.motif-section .btn-row{ justify-content:center; }
.motif-section .placeholder-note{
  display:inline-block;
  text-align:left;
  margin-top:1.6rem;
}

/* ---------- Closing feature ---------- */

.feature{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:0;
}
.feature-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.feature-copy{
  padding:clamp(2.5rem, 6vw, 5rem);
}
.feature-copy .stock-line{
  font-family:var(--display);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-style:italic;
  line-height:1.3;
  margin-bottom:1.6rem;
}
@media (max-width: 860px){
  .feature{ grid-template-columns:1fr; }
  .feature-media img{ aspect-ratio:16/10; }
}

/* ---------- Generic content sections ---------- */

.content-block{
  max-width:44em;
}
.content-block + .content-block{ margin-top:clamp(3rem,7vw,5rem); }
.two-col{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
@media (max-width: 860px){
  .two-col{ grid-template-columns:1fr; }
}
.land-photo img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.stat-list{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:0.9rem;
}
.stat-list li{
  padding-left:1.4em;
  position:relative;
  color:var(--burnt-soft);
}
.stat-list li::before{
  content:"";
  position:absolute;
  left:0; top:0.65em;
  width:0.5em; height:1px;
  background:var(--veld);
}

/* ---------- Gallery ---------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-flow:dense;
  gap:clamp(0.6rem, 1.6vw, 1.1rem);
  margin-top:3rem;
}
.gallery figure{
  margin:0;
  overflow:hidden;
  background:var(--sand);
}
.gallery img{
  width:100%;
  height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform 0.5s var(--ease);
}
.gallery a:hover img,
.gallery a:focus-visible img{ transform:scale(1.035); }
.gallery .wide{ grid-column:span 2; }
.gallery .wide img{ aspect-ratio:8/5; }
@media (max-width: 760px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery .wide{ grid-column:span 2; }
}
@media (max-width: 480px){
  .gallery{ grid-template-columns:1fr 1fr; }
}

/* ---------- Video feature (atmospheric background) ---------- */

.video-feature{
  position:relative;
  overflow:hidden;
  color:var(--kalk);
  display:flex;
  align-items:center;
  min-height:60vh;
}
.video-feature-bg{
  position:absolute;
  inset:0;
}
.video-feature-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  filter:saturate(0.55) sepia(0.22) brightness(0.8);
}
.video-feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(45,44,42,0.72) 0%, rgba(45,44,42,0.55) 45%, rgba(45,44,42,0.78) 100%);
}
.video-feature .wrap{ position:relative; z-index:1; }
.video-feature h2,
.video-feature .eyebrow{ color:var(--kalk); }
.video-feature .eyebrow{ color:var(--veld); }
.video-feature p{ color:var(--sand); }
.video-feature .placeholder-note{ color:var(--sand); border-left-color:var(--olive); }

/* ---------- Auction hero (billboard style) ---------- */

.auction-hero{ padding-bottom:0; }
.auction-hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.auction-hero-copy{ padding-block:clamp(2rem, 5vw, 3rem) 0; }
.auction-logo{
  height:clamp(3.2rem, 7vw, 4.5rem);
  width:auto;
  margin-bottom:1.5rem;
}
.auction-hero-copy h1{ margin-bottom:1.4rem; }

.icon-detail-list{
  list-style:none;
  margin:0 0 1.75rem;
  padding:0;
  display:grid;
  gap:0.85rem;
}
.icon-detail-list li{
  display:flex;
  align-items:center;
  gap:0.9rem;
  font-size:1.15rem;
}
.icon-circle{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  border:1px solid var(--veld);
  color:var(--veld);
}
.icon-circle svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6; }

.stat-row{
  display:flex;
  gap:clamp(1.5rem, 4vw, 3rem);
  padding-block:1.75rem;
  border-top:1px solid var(--kalk-line);
  border-bottom:1px solid var(--kalk-line);
  margin-bottom:1.75rem;
}
.stat-row .stat{ display:flex; flex-direction:column; }
.stat-row .stat-num{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3rem);
  line-height:1;
  color:var(--burnt);
}
.stat-row .stat-label{
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--burnt-soft);
  margin-top:0.5rem;
  max-width:9em;
}

.auction-hero-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:clamp(90px, 16vw, 220px) 0 0 0;
}
.auction-hero-media video,
.auction-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.auction-contact-bar{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  background:var(--veld);
  color:var(--kalk);
  padding-block:1.1rem;
}
.auction-contact-bar .wrap{
  display:flex;
  align-items:center;
  gap:0.9rem;
  flex-wrap:wrap;
  font-size:1.05rem;
}
.auction-contact-bar .icon-circle{ border-color:var(--kalk); color:var(--kalk); }
.auction-contact-bar a{ color:var(--kalk); text-decoration:underline; text-underline-offset:3px; }
.auction-contact-bar strong{ font-weight:600; }

.icon-detail-list.centered{ justify-items:center; }
.icon-detail-list.centered li{ justify-content:center; }
.stat-row.centered{ justify-content:center; margin-inline:auto; }
.stat-row.centered .stat{ align-items:center; }
.bg-burnt .icon-circle{ border-color:var(--veld); color:var(--veld); }
.bg-burnt .stat-row{ border-color:var(--light-line); }
.bg-burnt .stat-row .stat-num{ color:var(--kalk); }
.bg-burnt .stat-row .stat-label{ color:var(--sand); }

@media (max-width: 860px){
  .auction-hero-grid{ grid-template-columns:1fr; }
  .auction-hero-media{ aspect-ratio:16/10; border-radius:60px 0 0 0; order:-1; }
  .stat-row{ flex-wrap:wrap; row-gap:1.25rem; }
}
@media (max-width: 480px){
  .stat-row{ gap:1.5rem; }
  .stat-row .stat-num{ font-size:1.9rem; }
}

/* ---------- Auction / contact page ---------- */

.detail-list{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:grid;
  gap:0.75rem;
  font-size:1.1rem;
}
.detail-list li{ display:flex; gap:0.7em; }
.detail-list .label{
  color:var(--veld);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding-top:0.35em;
  min-width:7.5em;
}

.map-embed{
  margin-top:2.5rem;
  border:1px solid var(--kalk-line);
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--sand);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
@media (max-width: 860px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-card{
  background:var(--kalk);
  border:1px solid var(--kalk-line);
  padding:clamp(1.75rem, 4vw, 2.75rem);
}
.contact-card h3{ margin-bottom:1.2rem; }
.contact-line{
  display:flex;
  align-items:baseline;
  gap:0.6em;
  font-size:1.1rem;
  padding-block:0.55rem;
  border-bottom:1px solid var(--kalk-line);
}
.contact-line:last-child{ border-bottom:0; }
.contact-line .label{
  color:var(--veld);
  font-size:0.75rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  min-width:6em;
}
.contact-line a{ text-decoration:none; border-bottom:1px solid var(--veld); }
.contact-line a:hover,
.contact-line a:focus-visible{ color:var(--veld); }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--burnt);
  color:var(--sand);
  padding-block:clamp(3rem, 7vw, 4.5rem) 2rem;
}
.footer-top{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:clamp(2rem, 5vw, 3rem);
  padding-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand img{ height:3.5rem; width:auto; margin-bottom:1.4rem; }
.footer-brand .slogan-divider{ margin-inline:0; justify-content:flex-start; max-width:none; color:var(--sand); }
.footer h4{
  color:var(--kalk);
  font-size:0.8rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-family:var(--body);
  font-weight:500;
  margin-bottom:1.1rem;
}
.footer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.65rem;
}
.footer-list a{
  text-decoration:none;
  color:var(--sand);
  border-bottom:1px solid transparent;
}
.footer-list a:hover,
.footer-list a:focus-visible{ color:var(--kalk); border-color:var(--veld); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  padding-top:1.75rem;
  border-top:1px solid var(--light-line);
  font-size:0.85rem;
  color:var(--sand);
}
@media (max-width: 760px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ---------- Floating WhatsApp button ---------- */

.wa-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:150;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.4rem;
  height:3.4rem;
  border-radius:50%;
  background:var(--veld);
  color:var(--kalk);
  box-shadow:0 6px 18px rgba(45,44,42,0.28);
  text-decoration:none;
  transition:transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible{
  background:var(--burnt);
  transform:translateY(-2px);
}
.wa-float svg{ width:1.6rem; height:1.6rem; fill:currentColor; }

/* ---------- Scroll reveal (progressive enhancement) ---------- */

@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
}

/* ---------- Misc ---------- */

hr.rule{
  border:0;
  border-top:1px solid var(--kalk-line);
  margin:0;
}