/* =========================================================
   MINECO HOUSE — dark theme, dynamic build
   Signature: the interlocking-block joint (from the real HICB
   product) as a structural divider, plus the firm's own wall
   texture as a subtle site-wide backdrop.
   ========================================================= */
:root{
  --bg:            #131110;
  --bg-2:          #0D0B0A;
  --panel:         #1D1916;
  --panel-2:       #262019;
  --line:          rgba(255,255,255,.10);
  --charcoal:      #0D0B0A;
  --green:         #5FC23A;
  --green-soft:    #8FE06B;
  --green-deep:    #3C8A20;
  --oxide:         #E2602F;
  --oxide-soft:    #F08256;
  --ink:           #ECE6D8;
  --ink-soft:      #AFA99B;
  --radius:        2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Firm's own HICB wall photo, tiled very subtly behind the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(13,11,10,.94), rgba(13,11,10,.97)),
    url('assets/texture/wall-texture.jpg');
  background-size:auto, 220px auto;
  background-repeat:repeat, repeat;
  background-attachment:fixed, fixed;
  opacity:.9;
}
h1,h2,h3,h4{
  font-family:"Archivo", "Arial Black", sans-serif;
  color:#fff;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-weight:900}
h2{font-weight:800; font-size:1.9rem}
h3{font-weight:800; font-size:1.2rem; color:var(--ink)}
p{margin:0 0 1em}
a{color:var(--green-soft)}
img{max-width:100%; display:block}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--oxide-soft);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--oxide);
  display:inline-block;
}

/* ---------- interlock joint motif (signature element) ---------- */
.interlock{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin:44px auto;
  width:120px;
}
.interlock svg{width:100%; height:auto; display:block}

/* ---------- scroll reveal (dynamic content) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1; transform:none}

/* ---------- header ---------- */
a.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--charcoal); color:#fff; padding:10px 16px; z-index:200;
}
a.skip-link:focus{left:8px; top:8px}

header.site-header{
  background:rgba(13,11,10,.86);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:14px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:3px solid var(--green);
}
header.site-header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
header.site-header .brand img{
  height:40px; width:auto; border-radius:3px;
}
header.site-header .brand .word{
  font-family:"Archivo", sans-serif;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:#fff;
}
header.site-header .brand .word span{color:var(--green)}
nav.site-nav ul{
  list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap;
}
nav.site-nav a{
  color:#D9D4C6;
  text-decoration:none;
  font-family:"IBM Plex Mono", monospace;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:8px 12px;
  border-radius:var(--radius);
  transition:background .15s ease, color .15s ease;
}
nav.site-nav a:hover, nav.site-nav a:focus-visible{
  background:var(--green);
  color:var(--charcoal);
}
nav.site-nav a[aria-current="page"]{
  color:var(--green);
  border-bottom:2px solid var(--green);
}

/* ---------- hero / slideshow ---------- */
.hero{
  position:relative;
  background:var(--charcoal);
  color:var(--ink);
  min-height:min(80vh, 660px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-slides{position:absolute; inset:0; z-index:0}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.2s ease, transform 6s ease;
}
.hero-slide.is-active{opacity:1; transform:scale(1)}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.4) 0%, rgba(10,9,8,.6) 55%, rgba(10,9,8,.96) 100%);
}
.hero-slide .slide-tag{
  position:absolute;
  right:28px; top:28px;
  font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem;
  color:#fff;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.3);
  padding:6px 12px;
  opacity:0;
  transition:opacity .5s ease .3s;
}
.hero-slide.is-active .slide-tag{opacity:1}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:1040px;
  margin:0 auto;
  text-align:center;
  padding:64px 24px 56px;
  width:100%;
}
.hero-lockup{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:22px;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem, 7vw, 4.8rem);
  margin-bottom:.28em;
}
.hero h1 em{
  font-style:normal;
  color:var(--green);
}
.hero p.lede{
  font-size:1.15rem;
  color:#DCD7C9;
  max-width:640px;
  margin:0 auto 30px;
}
.hero .tag{
  font-family:"IBM Plex Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.78rem;
  color:var(--green);
  margin-bottom:14px;
}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
  border-radius:50%;
  transition:background .15s ease, transform .15s ease;
}
.hero-arrow:hover{background:var(--green); color:var(--charcoal); border-color:var(--green); transform:translateY(-50%) scale(1.08)}
.hero-arrow.prev{left:18px}
.hero-arrow.next{right:18px}

.hero-dots{
  position:relative; z-index:3;
  display:flex; gap:8px; justify-content:center; margin-top:8px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none; padding:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.hero-dots button.is-active{background:var(--green); transform:scale(1.25)}

/* BoQ illustrative slide (no scanned document exists in source material —
   real figures, presented as a designed panel rather than a fabricated scan) */
.boq-slide{
  background:var(--panel);
  color:var(--ink);
  width:min(380px, 82vw);
  padding:18px 20px;
  border-top:4px solid var(--oxide);
  font-family:"IBM Plex Mono",monospace;
  font-size:.76rem;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.boq-slide h4{font-family:"Archivo",sans-serif; font-size:.95rem; margin:0 0 10px; color:#fff}
.boq-slide .row{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line)}
.boq-slide .row:last-child{border-bottom:none; font-weight:700; color:var(--green-soft)}

/* whatsapp floating button */
.whatsapp-fab{
  position:fixed; right:20px; bottom:20px; z-index:150;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#0A2A17;
  padding:13px 18px; border-radius:30px;
  text-decoration:none; font-family:"IBM Plex Mono",monospace;
  font-weight:700; font-size:.82rem;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:transform .15s ease;
}
.whatsapp-fab:hover{transform:translateY(-3px) scale(1.03)}
.whatsapp-fab svg{width:20px; height:20px}

/* anchor offset so the sticky header doesn't cover section titles */
section[id]{scroll-margin-top:78px}

/* ---------- full-bleed real-photo banner ---------- */
.photo-banner{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image:url('assets/hero/house-real.jpg');
  background-size:cover;
  background-position:center 30%;
  background-attachment:fixed;
  overflow:hidden;
}
@media (max-width:760px){
  .photo-banner{background-attachment:scroll; min-height:340px}
}
.photo-banner::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,.72) 70%, rgba(10,9,8,.94) 100%);
}
.photo-banner .inner{
  position:relative; z-index:1;
  max-width:720px; padding:0 24px;
}
.photo-banner .eyebrow{justify-content:center; color:var(--green)}
.photo-banner .eyebrow::before{background:var(--green)}
.photo-banner h2{color:#fff; font-size:clamp(1.8rem, 4.5vw, 2.8rem)}
.photo-banner p{color:#E4DFD1; max-width:560px; margin:0 auto}

/* ---------- section band ---------- */
.section-band{
  background:var(--bg-2);
  color:var(--ink);
  padding:34px 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-band-inner{max-width:1040px; margin:0 auto}
.section-band .eyebrow{color:var(--green)}
.section-band .eyebrow::before{background:var(--green)}
.section-band h2{color:#fff; margin-bottom:.15em}
.section-band p{color:#D9D4C6; max-width:640px; margin:0}

/* ---------- layout ---------- */
main{max-width:1040px; margin:0 auto; padding:64px 24px}
section{margin-bottom:64px}
section:last-child{margin-bottom:0}
.section-head{max-width:640px; margin-bottom:28px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.22); background:var(--panel-2)}
.card.accent-green{border-left:4px solid var(--green)}
.card.accent-oxide{border-left:4px solid var(--oxide)}

/* photo card */
.photo-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.photo-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.4)}
.photo-card img{width:100%; height:auto; display:block; transition:transform .5s ease}
.photo-card:hover img{transform:scale(1.05)}
.photo-card .cap{
  padding:14px 16px;
  border-top:3px solid var(--green);
}
.photo-card .cap .spec{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--oxide-soft);
  display:block;
  margin-bottom:2px;
}
.photo-card .cap h3{margin:0 0 4px; font-size:1.05rem}
.photo-card .cap .price{
  font-family:"IBM Plex Mono", monospace;
  font-size:.85rem;
  color:var(--ink-soft);
}

/* numbered sequence — only used where content is truly sequential */
.sequence{list-style:none; margin:0; padding:0; counter-reset:step}
.sequence li{
  counter-increment:step;
  position:relative;
  padding:0 0 22px 52px;
  border-left:2px solid var(--line);
  margin-left:16px;
}
.sequence li:last-child{border-color:transparent; padding-bottom:0}
.sequence li::before{
  content:counter(step,decimal-leading-zero);
  font-family:"IBM Plex Mono", monospace;
  font-weight:700;
  font-size:.72rem;
  color:var(--charcoal);
  background:var(--green);
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:-16px; top:-2px;
}
.sequence strong{display:block; font-family:"Archivo",sans-serif; font-size:1.02rem; margin-bottom:4px; color:#fff}

ul.plain{padding-left:1.1em; margin:0}
ul.plain li{margin-bottom:.4em}
ul.check{list-style:none; padding:0; margin:0}
ul.check li{
  padding-left:1.6em;
  position:relative;
  margin-bottom:.55em;
}
ul.check li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:9px; height:9px;
  background:var(--green);
  transform:rotate(45deg);
}

/* tables */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-family:"IBM Plex Mono", monospace; font-size:.86rem; background:var(--panel)}
table caption{
  text-align:left; caption-side:top;
  font-family:"Archivo", sans-serif; font-weight:800; font-size:1.05rem;
  color:#fff; padding:14px 16px 10px; background:var(--panel);
}
th,td{border-bottom:1px solid var(--line); padding:10px 14px; text-align:left; white-space:nowrap; color:var(--ink)}
th{background:var(--bg-2); color:var(--green-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem}
tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(255,255,255,.03)}

/* stat row — animated counters */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:20px}
.stat{background:var(--panel); padding:22px 16px; text-align:center}
.stat .num{font-family:"Archivo",sans-serif; font-weight:900; font-size:2.1rem; color:var(--green-soft)}
.stat .label{font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}

/* staff */
.staff{border-left:3px solid var(--oxide); padding-left:16px; margin-bottom:20px}
.staff h4{margin:0 0 4px; color:#fff; font-size:1rem}
.staff .role{font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--oxide-soft); display:block; margin-bottom:6px}
.staff p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* partner logos */
.partner-row{display:flex; flex-wrap:wrap; gap:14px; align-items:stretch}
.partner-row .p{
  flex:1 1 150px;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  font-family:"Archivo",sans-serif; font-weight:800; color:#fff;
  text-align:center;
  transition:border-color .2s ease, transform .2s ease;
}
.partner-row .p:hover{border-color:var(--green); transform:translateY(-2px)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-block{
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius); padding:28px;
}
.contact-block a{color:var(--green-soft)}
.contact-line{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:baseline}
.contact-line:last-child{border-bottom:none}
.contact-line .k{font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); min-width:88px}

/* map card */
.map-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.map-card img{width:100%}

/* details/summary (project archive) */
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
details[open] summary .eyebrow::after{content:" (collapse)"}

/* footer */
footer.site-footer{
  background:var(--charcoal);
  color:#9C978A;
  padding:0;
  border-top:4px solid var(--green);
}
.footer-inner{
  max-width:1040px; margin:0 auto; padding:48px 24px 28px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
}
@media (max-width:700px){.footer-inner{grid-template-columns:1fr}}
.footer-inner h5{
  font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.1em;
  font-size:.7rem; color:var(--green); margin:0 0 12px;
}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.footer-brand img{height:34px; border-radius:3px}
.footer-brand span{font-family:"Archivo",sans-serif; font-weight:900; color:#fff}
footer a{color:#C9C4B6; text-decoration:none}
footer a:hover{color:var(--green)}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:8px; font-size:.88rem}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:16px 24px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.04em; color:#726D60;
}

/* misc */
.small{font-size:.85rem; color:var(--ink-soft)}
.center{text-align:center}
.mt0{margin-top:0}
.badge-live{
  display:inline-block; background:var(--green); color:var(--charcoal);
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 8px; border-radius:2px; font-weight:700;
}

/* buttons */
.btn{
  display:inline-block;
  font-family:"IBM Plex Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.8rem;
  padding:13px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green); color:#0A2A0F; font-weight:700}
.btn-primary:hover{box-shadow:0 10px 24px rgba(95,194,58,.35)}
.btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
.btn-oxide{background:var(--oxide); color:#fff; font-weight:700}
.btn-oxide:hover{box-shadow:0 10px 24px rgba(226,96,47,.35)}

/* hero block-lock animation — the firm's real HICB block cutouts,
   large and layered in front of the hero display, continuously
   sliding together, holding locked, then releasing and repeating */
.lock-anim{display:flex; align-items:flex-end; gap:4px; margin-bottom:-8px}
.lock-anim .blk{
  height:190px; width:auto;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
@media (max-width:640px){
  .lock-anim .blk{height:120px}
}
.lock-anim .blk.a{animation:lockUnlockA 4.2s cubic-bezier(.45,.05,.15,1) infinite}
.lock-anim .blk.b{animation:lockUnlockB 4.2s cubic-bezier(.45,.05,.15,1) infinite}
@keyframes lockUnlockA{
  0%,12%{transform:translateX(-46px)}
  38%,64%{transform:translateX(0)}
  88%,100%{transform:translateX(-46px)}
}
@keyframes lockUnlockB{
  0%,12%{transform:translateX(46px)}
  38%,64%{transform:translateX(0)}
  88%,100%{transform:translateX(46px)}
}
@media (max-width:640px){
  @keyframes lockUnlockA{
    0%,12%{transform:translateX(-28px)}
    38%,64%{transform:translateX(0)}
    88%,100%{transform:translateX(-28px)}
  }
  @keyframes lockUnlockB{
    0%,12%{transform:translateX(28px)}
    38%,64%{transform:translateX(0)}
    88%,100%{transform:translateX(28px)}
  }
}