/* =========================================================
   Amber Construction — SINGLE STYLESHEET (MOBILE-FIRST)
   - All layouts start at 1 column on phones (incl. big phones)
   - Expand at tablet and above
   - Brand-dominant header, black hamburger
   - Larger WhatsApp FAB
   - Transparent carousel controls; no CTA blocking
   - Strong containment; no horizontal overflow
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --clr-bg:#ffffff; --clr-text:#0f1012; --clr-muted:#6b7078; --clr-line:#e5e7eb;
  --primary:#C27A0E; --primary-ink:#ffffff; --primary-dark:#935B0A;

  --surface:#ffffff; --surface-alt:#f8f9fb;

  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Oswald","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem;
  --fs-24:1.5rem; --fs-28:1.75rem; --fs-32:2rem; --fs-40:2.5rem; --fs-52:3.25rem;

  --sp-4:.25rem; --sp-8:.5rem; --sp-12:.75rem; --sp-16:1rem; --sp-20:1.25rem;
  --sp-24:1.5rem; --sp-32:2rem; --sp-40:2.5rem; --sp-48:3rem; --sp-64:4rem;

  --radius:6px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 16px rgba(0,0,0,.08);
  --shadow-lg:0 20px 40px rgba(0,0,0,.12);
  --focus:2px solid var(--primary);
  --header-h:88px;
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-ui);color:var(--clr-text);background:var(--clr-bg);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
:focus-visible{outline:var(--focus);outline-offset:2px}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:6px 10px;background:#000;color:#fff;z-index:1000}

/* Typography wrapping */
h1,h2,h3,h4,h5,h6,p,li,blockquote{overflow-wrap:anywhere;word-break:break-word;text-wrap:pretty}

/* ---------- Layout Helpers ---------- */
.container{width:min(1200px,100% - 32px);margin-inline:auto}
.section{padding:var(--sp-64) 0;background:var(--surface)}
.section + .section{border-top:1px solid var(--clr-line)}
.section-title{display:flex;align-items:center;gap:var(--sp-12);margin:0 0 var(--sp-24)}
.section-intro{max-width:68ch;color:var(--clr-muted)}
.brand{color:var(--primary)}
.mt-12{margin-top:var(--sp-12)}.mt-16{margin-top:var(--sp-16)}.mt-32{margin-top:var(--sp-32)}

/* Mobile-first grids: start at 1 column */
.grid-2,.grid-3,.grid-4,.grid-5{display:grid;gap:var(--sp-24);grid-template-columns:minmax(0,1fr)}
/* Expand at tablet and up */
@media (min-width:768px){
  .grid-2{grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr)}
  .grid-3{grid-template-columns: repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns: repeat(4,minmax(0,1fr))}
  .grid-5{grid-template-columns: repeat(5,minmax(0,1fr))}
}

.display{font-family:var(--font-display);font-size:clamp(2rem,3.5vw + 1rem,var(--fs-52));line-height:1.06}
.h2{font-family:var(--font-display);font-size:var(--fs-32);line-height:1.15}

/* Make on-page anchor targets account for fixed header */
section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;background:transparent;
  transition:background .2s ease,box-shadow .2s ease,backdrop-filter .2s ease;overflow-x:clip
}
.scrolled{background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);backdrop-filter:saturate(1.1) blur(6px)}
.header-inner{height:var(--header-h);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--sp-16)}
.brand-unit{display:flex;align-items:center;gap:12px;min-width:0}
.brand-unit img{display:block;max-width:150px;height:auto;flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-size:clamp(1.1rem,1.3vw + .9rem,1.8rem);letter-spacing:.5px}
.brand-name span{color:var(--primary)}
.primary-nav .nav-list{list-style:none;display:flex;gap:var(--sp-20);margin:0;padding:0}
.primary-nav .nav-list>li>a{padding:8px 12px;border-radius:4px}
.primary-nav .nav-list>li>a:hover{background:#f5f5f5}
.has-sub{position:relative}
.has-sub .dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;border:1px solid var(--clr-line);border-radius:6px;box-shadow:var(--shadow-md);list-style:none;padding:8px;display:none}
.has-sub:hover .dropdown{display:block}
.hamburger{display:none;background:transparent;border:1px solid transparent;padding:8px 12px;border-radius:6px;color:#111}
.hamburger i{font-size:20px}
@media (max-width:1024px){.hamburger{display:block}.desktop{display:none}}

.mobile-panel{position:absolute;left:0;right:0;top:var(--header-h);background:#fff;border-top:1px solid var(--clr-line);box-shadow:var(--shadow-md);z-index:49}
.mobile-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--clr-line)}
.mobile-close{background:transparent;border:0;font-size:22px;cursor:pointer}
.m-list{list-style:none;margin:0;padding:8px 0}
.m-list>li>a,.m-list button{display:block;width:100%;text-align:left;padding:12px 16px;background:transparent;border:0}
.m-list>li>a:hover,.m-list .m-toggle:hover{background:#f5f5f5}
.m-toggle{display:flex;align-items:center;justify-content:space-between}
.m-sub{list-style:none;padding:0 0 8px 28px}
.chev{transition:transform .2s ease}.rotated{transform:rotate(180deg)}
main{padding-top:calc(var(--header-h) + 12px)}

/* ---------- Hero / Carousel ---------- */
.hero{position:relative}
.carousel{position:relative;overflow:hidden}
.slide{position:relative;display:none;height:clamp(420px,60vw,720px)}
.slide.is-active{display:block}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));pointer-events:none;z-index:1}
.slide-content{position:absolute;left:0;right:0;bottom:10%;color:#fff;z-index:2}
.slide .display{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.slide .lead{color:#f0f0f0;max-width:68ch}
.carousel-prev,.carousel-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:6px;background:transparent;color:#fff;box-shadow:none;cursor:pointer;z-index:3;display:grid;place-items:center}
.carousel-prev{left:16px}.carousel-next{right:16px}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;z-index:3}
.carousel-dots button{width:10px;height:10px;border:0;border-radius:2px;background:rgba(255,255,255,.6);cursor:pointer}
.carousel-dots button[aria-selected="true"]{background:#fff;width:20px}

/* ---------- Cards / Tiles / Utilities ---------- */
.card{background:var(--surface);border:1px solid var(--clr-line);box-shadow:var(--shadow-sm);padding:var(--sp-16);border-radius:0}
.cards img,.sectors-grid img,.map{border:1px solid var(--clr-line)}
.icon-list{list-style:none;padding:0;margin:var(--sp-12) 0 0}
.icon-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.kpis{display:flex;gap:var(--sp-24);margin-top:var(--sp-12);flex-wrap:wrap}
.kpi .num{font-family:var(--font-display);font-size:var(--fs-40)}.kpi .label{color:var(--clr-muted)}
.step{border:1px solid var(--clr-line);padding:var(--sp-16);background:var(--surface)}
.cat-grid .cat-card{display:grid;gap:var(--sp-8);border:1px solid var(--clr-line);padding:var(--sp-16);box-shadow:var(--shadow-sm);border-radius:0}
.cat-card i{color:var(--primary);font-size:var(--fs-24)}
.cat-card:hover,.sector-tile:hover,.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);transition:all .16s ease}

/* ---------- Project gallery (start 1 col) ---------- */
.project-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.project-grid img{border:1px solid var(--clr-line);box-shadow:var(--shadow-sm);width:100%;height:auto}
@media (min-width:600px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.teaser-4{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.teaser-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.teaser-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Buttons / Forms ---------- */
.form-row{display:grid;gap:8px;margin-bottom:12px}
input,select,textarea{padding:10px 12px;border:1px solid var(--clr-line);border-radius:0;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none}
.error{color:#b42318;font-size:var(--fs-14)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--clr-line);border-radius:0;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-outline{background:#fff;color:var(--clr-text)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-invert{background:#fff;color:#000;border-color:#fff}
.btn-sm{padding:8px 12px;font-size:var(--fs-14)}
.link{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,var(--primary-dark),var(--primary));color:var(--primary-ink)}
.footer-grid{display:grid;gap:var(--sp-24);grid-template-columns:minmax(0,1fr);padding:var(--sp-32) 0}
.f-col h4{margin:0 0 8px;font-family:var(--font-display)}
.f-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-links a{color:#fff}.legal a{color:#fff;text-decoration:underline}
.socials{display:flex;gap:10px;margin-top:10px}
.subscribe-row{display:flex;gap:8px}
.subscribe-row input{flex:1;background:#fff;color:#000}
@media (min-width:900px){.footer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- WhatsApp Compose (bigger FAB) ---------- */
.floating-wa{
  position:fixed;right:18px;bottom:18px;z-index:60;width:72px;height:72px;
  border-radius:50%;border:0;cursor:pointer;background:var(--primary);color:var(--primary-ink);
  box-shadow:var(--shadow-lg);display:grid;place-items:center;font-size:28px;
}
.wa-panel[hidden]{display:none}
.wa-panel{position:fixed;right:18px;bottom:100px;z-index:60;width:min(420px,92vw);background:#fff;border:1px solid var(--clr-line);box-shadow:var(--shadow-lg);border-radius:8px}
.wa-inner{padding:12px;display:grid;gap:10px}
.wa-head{display:flex;align-items:center;justify-content:space-between}
.wa-close{background:transparent;border:0;cursor:pointer;font-size:20px}
#waMsg{width:100%;resize:vertical}
.wa-note{font-size:var(--fs-14);color:var(--clr-muted)}

/* ---------- Reveal animations ---------- */
/* Progressive enhancement: visible by default */
.reveal{
  opacity:1;
  transform:none;
  transition:opacity .5s ease, transform .5s ease;
}

/* JS turns on this class to animate reveals */
.use-reveal .reveal{
  opacity:0;
  transform:translateY(12px);
}
.use-reveal .reveal.is-visible{
  opacity:1;
  transform:none;
}


/* ---------- Small-phone fine-tuning ---------- */
@media (max-width:599px){
  .display{font-size:clamp(1.8rem,6vw,2.4rem)}
  .header-inner{grid-template-columns:1fr auto auto}
  .brand-unit img{max-width:138px}
  .brand-name{font-size:clamp(1rem,1.8vw + .9rem,1.35rem)}
}



/* =========================================================
   APPENDIX — ABOUT & PROJECTS PAGES
   Add this block at the end of your existing /css/styles.css
   Mobile-first; inherits variables and helpers
   ========================================================= */

/* ---------- Page Hero tweaks ---------- */
.page-hero .slide{height:clamp(360px,58vw,640px)}
.page-hero .slide .lead{max-width:62ch}

/* ---------- About: Values, Leadership, Timeline, Partners ---------- */
.values-grid{
  display:grid;gap:var(--sp-24);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:768px){.values-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.leadership-grid{
  display:grid;gap:var(--sp-24);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:768px){.leadership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.leadership-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.person-card{display:grid;gap:12px;border:1px solid var(--clr-line);background:var(--surface);box-shadow:var(--shadow-sm);padding:var(--sp-16)}
.person-card img{width:100%;height:auto;border:1px solid var(--clr-line)}
.person-meta h3{margin:0 0 4px}
.person-meta .role{color:var(--clr-muted);margin:0 0 8px}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--clr-line);display:grid;gap:var(--sp-24)}
.timeline li{position:relative;padding-left:18px}
.t-dot{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary)}
.t-content h3{margin:0 0 4px}

.partners-grid{
  display:grid;gap:var(--sp-24);align-items:center;justify-items:center;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.partners-grid img{filter:grayscale(100%);opacity:.85;transition:opacity .15s ease,filter .15s ease}
.partners-grid img:hover{opacity:1;filter:none}
@media (min-width:768px){.partners-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- Projects: Gallery spacing ---------- */
.project-grid{margin-top:var(--sp-16)}
.project-grid img{border-radius:0;display:block}

/* ---------- Utility headers within cards ---------- */
.card .h3, .card h3{font-size:var(--fs-20);margin:0 0 6px}

/* ---------- Minor footer polish on inner pages ---------- */
.site-footer .f-col p, .site-footer .f-col li{font-size:var(--fs-14)}