/* ==========================================================================
   web3r-theme — main stylesheet
   Tokens, layout and components for the one-page landing.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --paper:#ffffff;
  --stone:#f5f2ec;
  --charcoal:#393939;
  --charcoal-deep:#242322;
  --ink:#2a2a28;
  --ink-soft:#5c5954;
  --amber:#f6a817;
  --amber-deep:#c9860c;
  --amber-pale:#fdecc7;
  --line:rgba(57,57,57,0.16);
  --line-soft:rgba(57,57,57,0.09);
  --on-dark:rgba(255,255,255,0.92);
  --on-dark-soft:rgba(255,255,255,0.64);
  --line-on-dark:rgba(255,255,255,0.18);
  --shadow:0 24px 48px -28px rgba(30,26,16,0.38);
  --font-display:"Rockwell","Roboto Slab",Georgia,"Times New Roman",serif;
  --font-body:"Avenir Next","Century Gothic","Segoe UI",system-ui,-apple-system,sans-serif;
  --chamfer-lg:polygon(0 22px,22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  --chamfer-sm:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1d1c1a; --stone:#252321; --ink:#eae6dd; --ink-soft:#b6b1a7;
    --charcoal:#141312; --charcoal-deep:#0e0d0c;
    --line:rgba(255,255,255,0.14); --line-soft:rgba(255,255,255,0.08);
    --amber-pale:rgba(246,168,23,0.16);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; color:inherit;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

.skip-link{position:absolute; left:-9999px; top:auto;}
.skip-link:focus{
  left:1rem; top:1rem; z-index:200; background:var(--amber); color:var(--charcoal-deep);
  padding:.8rem 1.2rem; font:700 .9rem/1 var(--font-body); clip-path:var(--chamfer-sm);
}

.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem);}
section{padding:clamp(3.5rem,8vw,6.5rem) 0; scroll-margin-top:6.5rem;}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font:600 .78rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-deep);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); display:inline-block;}
.contact .eyebrow{color:var(--amber);}
h2.title{font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:400; margin-top:.6rem; letter-spacing:-.01em;}
.lede{max-width:52ch; color:var(--ink-soft); font-size:1.05rem; margin-top:.9rem;}
.section-head{max-width:640px;}

.btn{
  --bg:var(--amber); --fg:var(--charcoal-deep);
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:var(--bg); color:var(--fg); font:600 .95rem/1 var(--font-body);
  padding:.95rem 1.5rem .95rem 1.35rem; border:none; cursor:pointer;
  clip-path:var(--chamfer-sm); text-decoration:none; transition:transform .18s ease, background .18s ease;
}
.btn:hover{background:var(--amber-deep);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--amber); outline-offset:2px;
}
.btn.ghost{--bg:transparent; --fg:var(--on-dark, var(--ink)); box-shadow:inset 0 0 0 1.5px var(--line-on-dark);}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--amber); color:var(--amber);}
.btn.block{width:100%; justify-content:center;}
.btn svg{width:16px; height:16px; flex:none;}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50; padding:1.7rem 0;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem;}
.site-header.scrolled{background:var(--charcoal-deep); box-shadow:0 12px 30px -18px rgba(0,0,0,.5); padding:1.1rem 0;}
.logo, .custom-logo-link{display:flex; align-items:center; gap:.9rem; text-decoration:none; flex:none;}
.logo .custom-logo{max-height:62px; width:auto;}
.logo .mark{
  width:54px; height:54px; background:var(--amber); color:var(--charcoal-deep);
  display:flex; align-items:center; justify-content:center; clip-path:var(--chamfer-sm);
  font:800 1.3rem/1 var(--font-display); flex:none;
}
.logo .word{display:flex; flex-direction:column; line-height:1.15; color:var(--on-dark);}
.logo .word b{font:700 1.08rem/1 var(--font-body); letter-spacing:.03em;}
.logo .word span{font:600 .7rem/1 var(--font-body); letter-spacing:.14em; color:var(--on-dark-soft); margin-top:.32rem;}
.main-nav{display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0;}
.main-nav a{
  color:var(--on-dark-soft); text-decoration:none; font:600 1rem/1 var(--font-body);
  letter-spacing:.01em; padding:.5rem 0; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover, .main-nav a.active{color:var(--on-dark); border-color:var(--amber);}
.header-actions{display:flex; align-items:center; gap:1.3rem;}
.menu-toggle{
  display:none; background:none; border:none; color:var(--on-dark); width:46px; height:46px;
  align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle svg{width:26px; height:26px;}
.mobile-nav{display:none;}

/* This breaks at 1180px (not the more usual ~880px) because the full desktop nav —
   bigger logo, 5 links, CTA button — needs roughly that much room to fit in one row
   without overlapping; tablets (portrait and landscape) and many laptop windows sit
   below that width, so they get the same reliable hamburger nav as phones. */
@media (max-width: 1180px){
  .main-nav{display:none;}
  .header-actions .header-cta{display:none;}
  .menu-toggle{display:flex;}
  .mobile-nav{
    display:block; position:fixed; inset:0; background:var(--charcoal-deep); z-index:60;
    transform:translateX(100%); transition:transform .32s ease; padding:1.4rem; overflow-y:auto;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:2.4rem;}
  .mobile-nav ul{list-style:none; margin:0; padding:0;}
  .mobile-nav a{
    display:block; padding:1rem 0; font:600 1.25rem/1 var(--font-display); color:var(--on-dark);
    border-bottom:1px solid var(--line-on-dark); text-decoration:none;
  }
  .mobile-nav .btn{margin-top:2rem;}
}

/* ---------- Media slots (real image or dashed placeholder) ---------- */
.media-slot-wrap{position:absolute; inset:0;}
.media-slot-wrap img{width:100%; height:100%; object-fit:cover;}
.media-slot{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding:1.5rem; border:2px dashed var(--line);
  background:repeating-linear-gradient(135deg, var(--line-soft) 0 2px, transparent 2px 14px), var(--stone);
  color:var(--ink-soft); font-size:.85rem;
}
.media-slot svg{width:34px; height:34px; opacity:.6;}
.media-slot b{color:var(--ink); font:600 .9rem var(--font-body);}
.media-slot .dims{font:500 .74rem/1 var(--font-body); letter-spacing:.02em; color:var(--amber-deep); word-break:break-word;}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:
    radial-gradient(circle at 18% 20%, rgba(246,168,23,.16), transparent 45%),
    linear-gradient(160deg, var(--charcoal-deep) 0%, var(--charcoal) 62%, #4a4136 100%);
  color:var(--on-dark); overflow:hidden; padding-top:7.5rem;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:0 var(--parallax-offset, 0px);
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 78%);
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;}
.hero-copy h1{font-size:clamp(2.3rem,5vw,3.6rem); font-weight:400; margin-top:.8rem; line-height:1.08;}
.hero-copy .lede{color:var(--on-dark-soft); font-size:1.12rem; margin-top:1.3rem; max-width:46ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;}
.hero-media{position:relative; aspect-ratio:4/5; clip-path:var(--chamfer-lg);}
.hero-media .media-slot{border-color:rgba(255,255,255,.28); color:var(--on-dark-soft); background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), rgba(255,255,255,.04);}
.hero-media .media-slot b{color:var(--on-dark);}
.hero-video-wrap{background:var(--charcoal-deep);}
.hero-video{width:100%; height:100%; object-fit:cover;}
.video-toggle{
  position:absolute; top:1rem; right:1rem; width:42px; height:42px; background:rgba(20,19,18,.55);
  border:1px solid var(--line-on-dark); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; clip-path:var(--chamfer-sm); backdrop-filter:blur(4px);
}
.video-toggle svg{width:18px; height:18px;}
.video-toggle .wave{opacity:1; transition:opacity .15s ease;}
.video-toggle.is-muted .wave{opacity:.25;}
.scroll-cue{
  position:absolute; left:50%; bottom:1.8rem; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--on-dark-soft);
  font:600 .68rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue svg{width:16px; height:16px; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}

@media (max-width: 880px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-media{aspect-ratio:16/10;}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- Services ---------- */
.services{background:var(--paper);}
.card-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font:700 .85rem/1 var(--font-body); color:var(--amber-deep); border-bottom:1px solid transparent;
  background:none; border-width:0; padding:0; cursor:pointer;
}
.card-link svg{width:14px; height:14px; transition:transform .2s ease;}
.card-link:hover svg{transform:translateX(3px);}

.service-tabs{margin-top:2.8rem;}

/* Category cards — always all 3 visible, double as tab controls once JS enhances them. */
.tab-buttons{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
.tab-card{
  background:var(--stone); color:var(--ink); border:1px solid var(--line-soft);
  padding:1.5rem 1.4rem; cursor:pointer; clip-path:var(--chamfer-sm); text-decoration:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; transition:all .2s ease;
}
.tab-card-icon{
  width:46px; height:46px; background:var(--amber-pale); color:var(--amber-deep);
  display:flex; align-items:center; justify-content:center; clip-path:var(--chamfer-sm); flex:none;
}
.tab-card-icon svg{width:24px; height:24px;}
.tab-card-num{font:800 .74rem/1 var(--font-body); letter-spacing:.08em; color:var(--amber-deep); font-variant-numeric:tabular-nums;}
.tab-card-label{font:700 1.02rem/1.3 var(--font-body); letter-spacing:-.005em;}
.tab-card:hover{border-color:var(--amber); transform:translateY(-2px);}
.tab-card.active{background:var(--charcoal); color:#fff; border-color:var(--charcoal);}
.tab-card.active .tab-card-icon{background:var(--amber); color:var(--charcoal-deep);}
.tab-card.active .tab-card-num{color:var(--amber);}

@media (max-width: 880px){
  .story{grid-template-columns:1fr;}
  .story-media{order:-1; aspect-ratio:16/9;}
  .story-media .media-slot-wrap img{object-fit:contain; background:var(--stone);}
}


/* Panels: visible and stacked by default (works with zero JS); js-enhanced turns them into real tabs. */
.tab-panels{margin-top:2.6rem; display:flex; flex-direction:column; gap:3rem;}
.tab-panel{scroll-margin-top:6.5rem;}
.tab-panel:not(:first-child){padding-top:2.6rem; border-top:1px solid var(--line);}
.js-enhanced .tab-panels{display:block;}
.js-enhanced .tab-panel{display:none; padding-top:0; border-top:none; gap:0;}
.js-enhanced .tab-panel.active{display:block; animation:panelIn .35s ease;}
@keyframes panelIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.enfoque{
  border-left:3px solid var(--amber); padding:.2rem 0 .2rem 1.15rem; color:var(--ink-soft);
  font-size:1.02rem; font-style:italic; max-width:72ch;
}
.enfoque .label{
  display:block; font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--amber-deep); margin-bottom:.35rem;
}

.group-letter{
  width:28px; height:28px; background:var(--amber-pale); color:var(--amber-deep); font:800 .85rem/1 var(--font-display);
  display:flex; align-items:center; justify-content:center; clip-path:var(--chamfer-sm); flex:none;
}

/* Accordion — native <details>/<summary>, no JS required to open/close. */
.accordion{margin-top:2.2rem; display:flex; flex-direction:column; gap:.9rem;}
.accordion-item{background:var(--stone); border:1px solid var(--line-soft);}
.accordion-trigger{
  list-style:none; display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem;
  cursor:pointer; font:700 1rem/1.3 var(--font-body); color:var(--ink);
}
.accordion-trigger::-webkit-details-marker{display:none;}
.accordion-title{flex:1;}
.accordion-count{
  font:700 .72rem/1 var(--font-body); color:var(--ink-soft); background:var(--line-soft);
  padding:.3rem .6rem; border-radius:999px; font-variant-numeric:tabular-nums;
}
.chevron{width:16px; height:16px; flex:none; color:var(--ink-soft); transition:transform .25s ease;}
.accordion-item[open] .chevron{transform:rotate(180deg);}
.accordion-content{padding:0 1.3rem 1.3rem;}
.accordion-item[open] .accordion-content{animation:accordionIn .3s ease;}
@keyframes accordionIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

.service-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.service-list li{
  padding:1rem 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.35rem;
}
.service-list li:first-child{border-top:none; padding-top:0;}
.item-title{font:700 .95rem/1.4 var(--font-body); color:var(--ink);}
.item-desc{color:var(--ink-soft); font-size:.9rem; line-height:1.6;}

/* ---------- Projects ---------- */
.projects{background:var(--stone);}
.filter-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem;}
.filter-btn{
  font:600 .82rem/1 var(--font-body); letter-spacing:.02em; padding:.6rem 1.1rem;
  background:transparent; border:1.5px solid var(--line); color:var(--ink-soft); cursor:pointer;
  clip-path:var(--chamfer-sm); transition:all .18s ease;
}
.filter-btn.active, .filter-btn:hover{background:var(--charcoal); color:#fff; border-color:var(--charcoal);}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2.4rem;}
.project-card{background:var(--paper); border:1px solid var(--line-soft); transition:transform .22s ease, box-shadow .22s ease;}
.project-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.project-card.hide{display:none;}
.project-media{position:relative; aspect-ratio:4/3; clip-path:var(--chamfer-lg); overflow:hidden;}
.project-media .media-slot{border-color:var(--line);}
.tag{
  position:absolute; top:.9rem; right:.9rem; font:700 .68rem/1 var(--font-body); letter-spacing:.06em;
  text-transform:uppercase; padding:.42rem .7rem; background:var(--amber); color:var(--charcoal-deep);
  clip-path:var(--chamfer-sm); z-index:2;
}
.tag.built{background:var(--charcoal); color:#fff;}
.tag.progress{background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line);}
.project-body{padding:1.4rem 1.5rem 1.6rem;}
.project-body h3{font-family:var(--font-body); font-size:1.08rem; font-weight:700;}
.meta-row{display:flex; align-items:center; gap:.4rem; color:var(--ink-soft); font-size:.85rem; margin-top:.5rem;}
.meta-row svg{width:14px; height:14px; flex:none;}
.specs{color:var(--ink-soft); font-size:.85rem; margin-top:.35rem; font-variant-numeric:tabular-nums;}
.project-body .card-link{margin-top:1.1rem;}

@media (max-width: 980px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .project-grid{grid-template-columns:1fr;} }

/* ---------- About ---------- */
.icon-chip{
  width:46px; height:46px; background:var(--amber-pale); color:var(--amber-deep);
  display:flex; align-items:center; justify-content:center; clip-path:var(--chamfer-sm); flex:none;
}
.icon-chip svg{width:22px; height:22px;}

.about-intro{max-width:68ch; display:flex; flex-direction:column; gap:1.1rem; margin-top:1.6rem;}
.about-intro p{color:var(--ink-soft); font-size:1.02rem; line-height:1.7;}
.about-intro p:nth-child(1){transition-delay:0s;}
.about-intro p:nth-child(2){transition-delay:.1s;}
.about-intro p:nth-child(3){transition-delay:.2s;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem;}
.value-card{background:var(--stone); border:1px solid var(--line-soft); padding:1.6rem; display:flex; flex-direction:column; gap:.9rem;}
.value-card h4{font:700 .96rem/1.3 var(--font-body); color:var(--ink); margin:0;}
.value-card p{color:var(--ink-soft); font-size:.85rem; line-height:1.55; margin:0;}
/* Staggered entrance so the four cards cascade in rather than pop together. */
.values-grid .value-card:nth-child(1){transition-delay:0s;}
.values-grid .value-card:nth-child(2){transition-delay:.08s;}
.values-grid .value-card:nth-child(3){transition-delay:.16s;}
.values-grid .value-card:nth-child(4){transition-delay:.24s;}

@media (max-width: 980px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 600px){ .values-grid{grid-template-columns:1fr;} }

.story{display:grid; grid-template-columns:.8fr 1fr; gap:3.2rem; align-items:start; margin-top:4.5rem;}
.story-media{position:relative; aspect-ratio:4/5; clip-path:var(--chamfer-lg);}
.story-copy .body-text{color:var(--ink-soft); margin-top:1.1rem; max-width:60ch; line-height:1.7;}
.pull-quote{
  margin:1.8rem 0; padding:.3rem 0 .3rem 1.3rem; border-left:3px solid var(--amber);
  font-family:var(--font-display); font-weight:400; font-style:italic; color:var(--ink);
  font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.45; max-width:52ch;
}

@media (max-width: 880px){
  .story{grid-template-columns:1fr;}
  .story-media{order:-1; aspect-ratio:16/9;}
}

.mission-vision{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:4rem;}
.mv-card{background:var(--paper); border:1px solid var(--line-soft); padding:2rem; transition:transform .22s ease, box-shadow .22s ease;}
.mv-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.mv-card h3{font-size:1.2rem; font-weight:400; margin-top:1.1rem;}
.mv-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.65; margin-top:.7rem;}
.mission-vision .mv-card:nth-child(2){transition-delay:.1s;}

@media (max-width: 700px){ .mission-vision{grid-template-columns:1fr;} }

/* ---------- Contact ---------- */
.contact{background:var(--charcoal-deep); color:var(--on-dark);}
.contact .lede{color:var(--on-dark-soft);}
.contact .wrap{display:grid; grid-template-columns:1.05fr .85fr; gap:3rem;}
.form-status{margin-top:1.6rem; padding:.9rem 1.1rem; font-size:.9rem; clip-path:var(--chamfer-sm);}
.form-status.success{background:rgba(246,168,23,.16); color:var(--amber);}
.form-status.error{background:rgba(220,80,60,.16); color:#f0a08f;}
.contact-form{margin-top:2.4rem; display:grid; gap:1.1rem;}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
label{font:600 .78rem/1 var(--font-body); letter-spacing:.04em; color:var(--on-dark-soft); text-transform:uppercase; margin-bottom:.5rem; display:block;}
input, select, textarea{
  width:100%; background:rgba(255,255,255,.06); border:1.5px solid var(--line-on-dark); color:var(--on-dark);
  font:500 .95rem/1.4 var(--font-body); padding:.85rem .9rem; clip-path:var(--chamfer-sm);
}
input::placeholder, textarea::placeholder{color:var(--on-dark-soft);}
textarea{resize:vertical; min-height:110px;}
.info-card{
  position:relative; background:rgba(255,255,255,.045); border:1px solid var(--line-on-dark); padding:2rem; margin-top:2.4rem;
  clip-path:var(--chamfer-lg); display:flex; flex-direction:column; gap:1.3rem;
}
.info-item{display:flex; gap:.9rem; align-items:flex-start;}
.info-item svg{width:20px; height:20px; color:var(--amber); flex:none; margin-top:.15rem;}
.info-item b{display:block; font:700 .86rem/1 var(--font-body);}
.info-item span{display:block; margin-top:.3rem; color:var(--on-dark-soft); font-size:.88rem;}
.social-row{display:flex; gap:.7rem; margin-top:.3rem;}
.social-row a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line-on-dark); color:var(--on-dark); text-decoration:none; clip-path:var(--chamfer-sm);
  transition:all .18s ease;
}
.social-row a:hover{background:var(--amber); color:var(--charcoal-deep); border-color:var(--amber);}
.social-row svg{width:16px; height:16px;}
.social-row.light a{border-color:var(--line); color:var(--ink);}
.social-row.light a:hover{background:var(--amber); color:var(--charcoal-deep); border-color:var(--amber);}
.section-head .social-row{margin-top:1.2rem;}
.project-modal-body .social-row{margin:1.4rem 0 0;}
.map-slot{position:relative; margin-top:.4rem; aspect-ratio:16/9; clip-path:var(--chamfer-sm); overflow:hidden;}
.map-slot .media-slot{border-color:var(--line-on-dark); background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px), rgba(255,255,255,.03); color:var(--on-dark-soft);}
.map-slot .media-slot b{color:var(--on-dark);}
.map-slot iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.15) contrast(1.05);}
.map-link{
  margin-top:.9rem; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font:700 .85rem/1 var(--font-body); color:var(--amber);
}
.map-link svg{width:14px; height:14px; transition:transform .2s ease;}
.map-link:hover svg{transform:translateX(3px);}
.form-note{font-size:.78rem; color:var(--on-dark-soft); margin-top:-.3rem;}

@media (max-width: 880px){
  .contact .wrap{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal); color:#fff; padding:3.6rem 0 0;}
.footer-top{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-on-dark);}
.footer-top .logo .word{color:#fff;}
.footer-tagline{margin-top:1rem; color:var(--on-dark-soft); font-size:.9rem; max-width:32ch;}
.footer-col h4{font:700 .8rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:1.1rem;}
.footer-col a{display:block; text-decoration:none; color:var(--on-dark-soft); font-size:.9rem; padding:.4rem 0; transition:color .18s ease;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.6rem 0; color:var(--on-dark-soft); font-size:.8rem;}
.footer-bottom .legal{display:flex; gap:1.4rem; flex-wrap:wrap;}
.footer-bottom a{color:var(--on-dark-soft); text-decoration:none;}
.footer-bottom a:hover{color:#fff;}

@media (max-width: 880px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:2rem;} }
@media (max-width: 560px){ .footer-top{grid-template-columns:1fr;} }

/* ---------- WhatsApp sticky button ---------- */
.whatsapp-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:70; width:56px; height:56px;
  background:var(--amber); color:var(--charcoal-deep); display:flex; align-items:center; justify-content:center;
  clip-path:var(--chamfer-sm); box-shadow:0 14px 28px -14px rgba(0,0,0,.45); text-decoration:none;
  transition:transform .18s ease;
}
.whatsapp-fab:hover{transform:translateY(-3px);}
.whatsapp-fab svg{width:26px; height:26px;}

.wa-widget{
  position:fixed; right:1.4rem; bottom:5.4rem; z-index:71; width:320px; max-width:calc(100vw - 2rem);
  background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:0 24px 48px -20px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.97); transform-origin:bottom right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.wa-widget.open{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.wa-widget-header{display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; background:#25D366; color:#fff;}
.wa-widget-avatar{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.wa-widget-avatar svg{width:20px; height:20px;}
.wa-widget-header b{display:block; font:700 .88rem/1.2 var(--font-body);}
.wa-widget-header span{display:block; font-size:.72rem; opacity:.85; margin-top:.15rem;}
.wa-widget-close{
  margin-left:auto; background:none; border:0; color:#fff; width:28px; height:28px; flex:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.85;
}
.wa-widget-close:hover{opacity:1;}
.wa-widget-close svg{width:16px; height:16px;}
.wa-widget-body{padding:1rem; display:flex; flex-direction:column; gap:.6rem; max-height:70vh; overflow-y:auto; background:#e9e3d8;}
.wa-bubble{
  background:#fff; padding:.6rem .8rem; border-radius:2px 10px 10px 10px; font-size:.86rem; line-height:1.4;
  max-width:88%; box-shadow:0 1px 1px rgba(0,0,0,.06); color:#111;
}
.wa-input{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:8px; background:#fff;
  color:var(--ink); font:inherit; font-size:.88rem;
}
.wa-input:focus{outline:2px solid var(--amber); outline-offset:1px;}
.wa-options{display:flex; flex-direction:column; gap:.4rem;}
.wa-option{
  display:flex; align-items:center; gap:.55rem; background:#fff; padding:.55rem .7rem; border-radius:8px;
  font-size:.86rem; color:#111; cursor:pointer; border:1.5px solid transparent;
}
.wa-option.checked{border-color:var(--amber);}
.wa-option input{accent-color:var(--amber);}
#waStartChat{margin-top:.3rem;}
#waStartChat:disabled{opacity:.45; cursor:not-allowed;}
@media (prefers-reduced-motion: reduce){ .wa-widget{transition:none;} }
@media (max-width: 420px){ .wa-widget{right:.7rem; bottom:5rem;} }

/* ---------- Project detail modal (lightweight lightbox) ---------- */
.project-modal{position:fixed; inset:0; z-index:100; display:none;}
.project-modal.open{display:block;}
.project-modal-backdrop{position:absolute; inset:0; background:rgba(20,19,18,.72); backdrop-filter:blur(2px);}
.project-modal-panel{
  position:relative; max-width:760px; margin:5vh auto; background:var(--paper); max-height:90vh; overflow-y:auto;
  clip-path:var(--chamfer-lg); display:grid; grid-template-columns:1fr; box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.project-modal-close{
  position:absolute; top:1rem; right:1rem; z-index:2; width:38px; height:38px; background:rgba(20,19,18,.55);
  color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; clip-path:var(--chamfer-sm);
}
.project-modal-close svg{width:16px; height:16px;}
.project-modal-media{position:relative; aspect-ratio:16/9; background:var(--stone);}
.project-modal-media img{width:100%; height:100%; object-fit:cover; display:block;}
.project-modal-body{padding:1.8rem 2rem 2.2rem;}
.project-modal-body .tag{position:static; display:inline-flex; margin-bottom:.9rem;}
.project-modal-body h3{font-size:1.5rem; font-weight:400;}
.project-modal-body .meta-row{margin-top:.6rem;}
.project-modal-body .specs{margin-top:.4rem;}
.modal-desc{margin-top:1.2rem; color:var(--ink-soft); max-width:60ch;}
.project-modal-body .hero-actions{margin-top:1.6rem;}

@media (max-width: 640px){
  .project-modal-panel{margin:0; max-height:100vh; height:100%; clip-path:none;}
}

/* ---------- Generic page template ---------- */
.generic-content{padding-top:calc(7.5rem + clamp(3.5rem,8vw,6.5rem));}
.page-title{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:400;}
.page-body{margin-top:1.5rem; color:var(--ink-soft); max-width:70ch;}