/* ==========================================================================
   KAMKLASS — Design System
   Palette grounded in construction materials: poured concrete, charcoal
   steel, brass fittings, limewash plaster. Type pairs an architectural
   serif (Fraunces) with a neutral grotesk (Inter) and a mono face
   (JetBrains Mono) used for spec/blueprint-style annotations — the
   signature motif carried through the whole site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --charcoal:#17160f;      /* near-black, warm — primary dark */
  --graphite:#4a463c;      /* secondary text on light */
  --stone:#eae5d8;         /* warm concrete backdrop */
  --paper:#faf8f3;         /* off-white section bg */
  --line:#d9d2bf;          /* hairline dividers */
  --brass:#9c7a41;         /* accent — brass hardware */
  --brass-light:#c3a066;
  --white:#ffffff;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --container: 1360px;
  --gutter: clamp(24px, 5vw, 80px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--paper);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--mono); font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brass);}
.h-xl{font-size:clamp(42px, 6.4vw, 96px);}
.h-lg{font-size:clamp(32px, 4.2vw, 56px);}
.h-md{font-size:clamp(24px, 2.6vw, 34px);}
.lede{font-size:clamp(17px,1.6vw,20px); color:var(--graphite); max-width:640px; line-height:1.7;}
.mono-label{font-family:var(--mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);}

/* ---- Buttons / links ---- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--charcoal); color:var(--charcoal);
  background:transparent; transition:all .3s ease;
}
.btn:hover{background:var(--charcoal); color:var(--paper);}
.btn.solid{background:var(--charcoal); color:var(--paper);}
.btn.solid:hover{background:var(--brass); border-color:var(--brass); color:var(--charcoal);}
.btn.on-dark{border-color:rgba(250,248,243,.5); color:var(--paper);}
.btn.on-dark:hover{background:var(--paper); color:var(--charcoal);}

.text-link{
  font-family:var(--mono); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--brass); padding-bottom:4px; transition:opacity .25s;
}
.text-link:hover{opacity:.6;}

/* ---- Header / Nav ---- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--gutter);
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(250,248,243,.94); backdrop-filter:blur(10px);
  padding-top:16px; padding-bottom:16px; border-color:var(--line);
}
.brand{
  font-family:var(--serif); font-size:22px; letter-spacing:.04em; font-weight:500;
}
.brand span{color:var(--brass);}
.site-header.on-dark .brand,
.site-header.on-dark .nav a,
.site-header.on-dark .nav-toggle span{color:var(--paper);}
.nav{display:flex; align-items:center; gap:38px;}
.nav a{
  font-family:var(--mono); font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
.nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brass); transition:width .3s;}
.nav a:hover::after, .nav a.active::after{width:100%;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none;}
.nav-toggle span{width:24px; height:1px; background:var(--charcoal);}

/* ---- Hero ---- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--charcoal); color:var(--paper); overflow:hidden;
}
.hero .ph-image{position:absolute; inset:0; border:none; border-radius:0;}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,22,15,.15) 0%, rgba(23,22,15,.15) 40%, rgba(23,22,15,.86) 100%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; width:100%; padding:0 var(--gutter) 90px;}
.hero-inner .eyebrow{color:var(--brass-light);}
.hero-inner h1{max-width:920px;}
.hero-inner .lede{color:rgba(250,248,243,.78); margin-top:22px;}
.hero-actions{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
.hero-coords{
  position:absolute; z-index:2; right:var(--gutter); bottom:90px;
  font-family:var(--mono); font-size:15px; letter-spacing:.1em; color:rgba(250,248,243,.55);
  text-align:right; display:none;
}
.scroll-cue{
  position:absolute; left:var(--gutter); bottom:24px; z-index:2;
  font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:rgba(250,248,243,.6);
  display:flex; align-items:center; gap:10px; text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:34px; background:rgba(250,248,243,.4); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--brass-light); animation:scrollline 2.4s ease-in-out infinite;}
@keyframes scrollline{0%{top:-100%;}50%{top:0;}100%{top:100%;}}

/* ---- Section rhythm ---- */
section{padding:120px 0;}
@media(max-width:700px){section{padding:76px 0;}}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap;}
.hr{border:none; border-top:1px solid var(--line); margin:0;}
.dark{background:var(--charcoal); color:var(--paper);}
.dark .graphite, .dark .lede{color:rgba(250,248,243,.7);}
.dark .eyebrow{color:var(--brass-light);}
.dark .hr{border-color:rgba(250,248,243,.16);}
.stone{background:var(--stone);}

/* ---- Placeholder image blocks (blueprint-annotation style) ---- */
.ph-image{
  position:relative; width:100%; aspect-ratio:var(--ar, 4/3);
  background:
    repeating-linear-gradient(45deg, rgba(74,70,60,.06) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #e2dccb, #cfc7ae);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.ph-image::before{ /* corner crosshairs */
  content:''; position:absolute; inset:14px; border:1px solid rgba(74,70,60,.35);
  pointer-events:none;
}
.ph-image .ph-tag{
  position:relative; margin:14px; padding:10px 14px; background:rgba(250,248,243,.9);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:15px; letter-spacing:.06em; line-height:1.6; color:var(--graphite);
  max-width:calc(100% - 28px);
}
.ph-image .ph-tag b{color:var(--charcoal); display:block; font-size:11px; letter-spacing:.08em; margin-bottom:2px;}
.ph-image.--dark{background:linear-gradient(135deg,#2a2820,#17160f);}
.ph-image.--dark .ph-tag{background:rgba(23,22,15,.85); border-color:rgba(250,248,243,.18); color:rgba(250,248,243,.75);}
.ph-image.--dark .ph-tag b{color:var(--paper);}
.ph-image.--dark::before{border-color:rgba(250,248,243,.2);}

/* Real project photo — same footprint as placeholder, no annotation overlay */
.ph-image.has-photo{background:none;}
.ph-image.has-photo::before{display:none;}
.ph-image.has-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.ph-image.has-photo .ph-tag{display:none;}

/* ---- Grids ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:56px 40px;}
.grid-6{display:grid; grid-template-columns:repeat(6,1fr); gap:0;}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;} .grid-6{grid-template-columns:repeat(2,1fr);}}

/* ---- Service / feature cards ---- */
.card{padding-top:32px; border-top:1px solid var(--line);}
.card .index{font-family:var(--mono); font-size:15px; color:var(--brass); margin-bottom:18px; display:block;}
.card h3{font-size:22px; margin-bottom:12px;}
.card p{color:var(--graphite); font-size:15px;}
.card .text-link{margin-top:20px; display:inline-block;}

/* split / offer band */
.offer-band{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:0;
  background:var(--charcoal); color:var(--paper);
}
.offer-band .txt{padding:80px var(--gutter);}
.offer-band .ph-image{aspect-ratio:auto; height:100%;}
@media(max-width:900px){.offer-band{grid-template-columns:1fr;} .offer-band .ph-image{aspect-ratio:16/9;}}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:40px;}
.stat b{font-family:var(--serif); font-size:clamp(30px,3.4vw,46px); font-weight:500; display:block;}
.stat span{font-family:var(--mono); font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite);}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr); row-gap:36px;}}

/* testimonial */
.quote{max-width:820px; margin:0 auto; text-align:center;}
.quote p{font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,32px); font-style:italic; line-height:1.5;}
.quote cite{display:block; margin-top:28px; font-style:normal;}

/* project / portfolio grid */
.proj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);}
.proj-item{position:relative; background:var(--paper);}
.proj-item .ph-image{aspect-ratio:4/3; border:none;}
.proj-item .cap{padding:22px 4px 6px;}
.proj-item .cap h3{font-size:20px; margin-bottom:6px;}
.proj-item .cap .mono-label{color:var(--brass);}
.proj-filter{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:56px;}
.proj-filter button{
  background:none; border:none; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite); padding-bottom:6px; border-bottom:1px solid transparent;
}
.proj-filter button.active, .proj-filter button:hover{color:var(--charcoal); border-color:var(--brass);}

/* form */
.form-field{margin-bottom:26px;}
.form-field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; color:var(--graphite);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:12px 2px; font-family:var(--sans); font-size:16px; color:var(--charcoal); outline:none;
  transition:border-color .25s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{border-color:var(--brass);}
.form-field textarea{resize:vertical; min-height:110px;}

/* footer */
footer{background:var(--charcoal); color:var(--paper); padding-top:100px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:70px;}
.footer-grid h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-light); margin-bottom:22px; font-weight:400;}
.footer-grid li{margin-bottom:12px; font-size:14px; color:rgba(250,248,243,.72);}
.footer-grid li a:hover{color:var(--paper);}
.footer-bottom{
  border-top:1px solid rgba(250,248,243,.14); padding:26px var(--gutter);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(250,248,243,.5);
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; padding-bottom:50px;}}

/* Hero ISO certification badges (top of homepage hero) */
.hero-certs{
  position:absolute; z-index:3; top:104px; right:var(--gutter);
  display:flex; gap:8px;
  opacity:.9;
}
.hero-certs img{
  width:38px; height:38px; border-radius:50%;
  background:rgba(250,248,243,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  padding:2px;
}
@media(max-width:700px){
  .hero-certs{top:82px; gap:6px;}
  .hero-certs img{width:30px; height:30px;}
}

/* WhatsApp floating quick link */
.whatsapp-fab{
  position:fixed; z-index:200; right:28px; bottom:28px;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .25s ease;
}
.whatsapp-fab:hover{transform:scale(1.08);}
@media(max-width:700px){
  .whatsapp-fab{width:50px; height:50px; right:18px; bottom:18px;}
}

/* ISO certification badge (text-based, no certificate image) */
.iso-badge{
  aspect-ratio:1/1; width:100%;
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  text-align:center; padding:40px;
  background:linear-gradient(135deg, var(--paper), var(--stone));
  position:relative;
}
.iso-badge::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(74,70,60,.35);
  pointer-events:none;
}
.iso-badge-mark{
  font-family:var(--serif); font-size:clamp(40px,5vw,64px); font-weight:500;
  color:var(--brass); letter-spacing:.02em; line-height:1;
}
.iso-badge-lines{display:flex; flex-direction:column; gap:8px;}
.iso-badge-lines b{font-family:var(--serif); font-size:20px; font-weight:500; color:var(--charcoal);}
.iso-badge-lines span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite);}

/* Page hero (interior pages, shorter than home) */
.page-hero{min-height:64vh;}
.page-hero .hero-inner{padding-bottom:70px;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* Mobile nav */
@media(max-width:900px){
  .nav{
    position:fixed; inset:0; top:0; background:var(--charcoal); flex-direction:column; justify-content:center;
    align-items:center; gap:34px; transform:translateX(100%); transition:transform .4s ease; z-index:99;
  }
  .nav.open{transform:translateX(0);}
  .nav a{color:var(--paper); font-size:14px;}
  .nav-toggle{display:flex;}
  .site-header.on-dark .nav-toggle span{background:var(--paper);}
  .nav-toggle span{background:var(--charcoal);}
  .site-header.is-scrolled .nav-toggle span{background:var(--charcoal);}
}