/* =========================================================
   BACT SRL — Design, Architecture & Construction
   Stylesheet
   ========================================================= */

:root{
  --navy:#12293f;
  --navy-2:#1b3a57;
  --brand:#336699;
  --brand-2:#4a80b4;
  --brand-soft:#e9f0f7;
  --sand:#f5f3ef;
  --line:#e3dfd8;
  --line-2:#d3cec5;
  --ink:#16202b;
  --muted:#5f6d7c;
  --white:#fff;

  --wrap:1180px;
  --radius:3px;
  --shadow:0 1px 2px rgba(18,41,63,.05), 0 8px 28px rgba(18,41,63,.07);

  --ff:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--ff);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%; height:auto; display:block}

a{color:var(--brand); text-decoration:none}
a:hover{color:var(--navy)}

h1,h2,h3,h4{
  margin:0 0 .5em;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--navy);
}

h1{font-size:clamp(2.4rem,5.2vw,3.9rem); letter-spacing:-.032em}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem); letter-spacing:-.028em}
h3{font-size:clamp(1.15rem,1.7vw,1.35rem); letter-spacing:-.016em}
h4{font-size:1.02rem; letter-spacing:-.01em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

ul{margin:0 0 1.1em; padding-left:1.1em}
li{margin-bottom:.4em}

strong{font-weight:600; color:var(--navy)}

::selection{background:var(--brand); color:#fff}

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

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap-narrow{max-width:820px; margin-inline:auto; padding-inline:24px}

.section{padding:clamp(60px,8.5vw,114px) 0}
.section--sand{background:var(--sand)}
.section--tight{padding-block:clamp(48px,6vw,80px)}

.eyebrow{
  display:block;
  font-size:.735rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:1.1rem;
}

.lead{
  font-size:clamp(1.06rem,1.55vw,1.2rem);
  color:var(--muted);
  max-width:64ch;
}

.section-head{max-width:70ch; margin-bottom:clamp(36px,4.5vw,58px)}
.section-head .lead{margin-top:.2em}

.rule{height:1px; background:var(--line); border:0; margin:0}

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

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:-.005em;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}

.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--navy); color:#fff}

.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--navy); color:var(--navy); background:rgba(18,41,63,.03)}

.btn--light{background:#fff; color:var(--navy)}
.btn--light:hover{background:var(--brand-soft); color:var(--navy)}

.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.34)}
.btn--outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}

.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem}

.arrow-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.95rem; color:var(--brand);
}
.arrow-link svg{transition:transform .18s ease}
.arrow-link:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:78px;
}

.logo{display:flex; align-items:center; gap:14px; color:var(--navy)}
.logo:hover{color:var(--navy)}
.logo-img{width:54px; height:54px; flex:none; display:block}
.logo-text{display:flex; flex-direction:column; line-height:1}
.logo-sub{
  font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  padding:.55em .85em; border-radius:var(--radius);
  font-size:.93rem; font-weight:500; color:var(--ink);
}
.nav a:hover{color:var(--brand); background:var(--brand-soft)}
.nav a.is-active{color:var(--brand); font-weight:600}

/* The in-drawer CTA is only used on small screens */
.nav .btn{display:none}

.header-cta{margin-left:10px}

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; background:var(--navy); position:relative;
  transition:background .15s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--navy);
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

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

.hero{
  position:relative; overflow:hidden;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 30%, #000 0%, transparent 70%);
  mask-image:radial-gradient(120% 90% at 78% 30%, #000 0%, transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
  padding-block:clamp(56px,8vw,104px);
}

.hero h1{margin-bottom:.38em}
.hero .lead{font-size:clamp(1.1rem,1.65vw,1.26rem); color:var(--muted)}

.hero-art{position:relative}
.hero-art svg{width:100%; height:auto; color:var(--brand)}

.hero--page{padding-block:0}
.hero--page .hero-inner{
  grid-template-columns:1fr;
  padding-block:clamp(48px,6.5vw,86px);
}
.hero--page h1{max-width:20ch}
.hero--page .lead{max-width:62ch}

/* ---------- Stats ---------- */

.stats{
  border-top:1px solid var(--line);
  background:var(--sand);
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:clamp(28px,3.4vw,42px) clamp(18px,2.2vw,28px);
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:0}
.stat-value{
  font-size:clamp(1.7rem,2.9vw,2.35rem); font-weight:600;
  letter-spacing:-.03em; color:var(--navy); line-height:1.05;
}
.stat-label{
  margin-top:.55em; font-size:.87rem; color:var(--muted); line-height:1.45;
}

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

.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,3.5vw,54px)}

.pillar{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:var(--radius);
  padding:clamp(28px,3.2vw,42px);
}
.pillar-num{
  font-size:.76rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); margin-bottom:1rem; display:block;
}
.pillar h3{margin-bottom:.6em}
.pillar > p{color:var(--muted); font-size:.98rem}

.tick-list{list-style:none; padding:0; margin:1.4em 0 0}
.tick-list li{
  position:relative; padding-left:1.7em; margin-bottom:.62em;
  font-size:.96rem; color:var(--ink);
}
.tick-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:1px;
  background:var(--brand-2);
}

/* ---------- Cards ---------- */

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px)}
.cards--2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,2.8vw,34px);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px)}
.card-icon{
  width:40px; height:40px; margin-bottom:1.1rem;
  color:var(--brand);
}
.card h3{margin-bottom:.45em; font-size:1.1rem}
.card p{color:var(--muted); font-size:.95rem; margin:0}

/* ---------- Grid list (scope of works) ---------- */

.grid-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3.2vw,48px);
  list-style:none; padding:0; margin:0;
  border-top:1px solid var(--line);
}
.grid-list li{
  display:flex; align-items:baseline; gap:.75em;
  padding:15px 0; margin:0;
  border-bottom:1px solid var(--line);
  font-size:.97rem; color:var(--ink);
}
.grid-list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:1px;
  background:var(--brand-2); transform:translateY(-1px);
}

/* ---------- Sector / reference index ---------- */

.sector{margin-bottom:clamp(40px,5vw,66px)}
.sector:last-child{margin-bottom:0}

.sector-head{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:14px; margin-bottom:8px;
  border-bottom:2px solid var(--navy);
}
.sector-head h3{
  margin:0; font-size:clamp(1.25rem,2vw,1.6rem); letter-spacing:-.022em;
}
.sector-count{
  margin-left:auto; font-size:.76rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

.ref-row{
  display:grid; grid-template-columns:minmax(180px,.34fr) 1fr; gap:10px 32px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.ref-row:last-child{border-bottom:0}
.ref-client{font-weight:600; color:var(--navy); font-size:1rem; letter-spacing:-.012em}
.ref-client small{display:block; font-weight:500; color:var(--muted); font-size:.82rem; letter-spacing:0; margin-top:3px}
.ref-desc{color:var(--muted); font-size:.97rem}
.ref-desc strong{color:var(--ink); font-weight:600}

/* ---------- Method ---------- */

.steps{counter-reset:step; display:grid; gap:0}
.step{
  counter-increment:step;
  display:grid; grid-template-columns:78px 1fr; gap:clamp(18px,2.4vw,34px);
  padding:clamp(24px,2.8vw,34px) 0;
  border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:"0" counter(step);
  font-size:1.25rem; font-weight:600; color:var(--brand);
  letter-spacing:-.02em; line-height:1.3;
}
.step h3{margin-bottom:.35em}
.step p{color:var(--muted); font-size:.97rem; margin:0}

/* ---------- CTA band ---------- */

.band{
  background:var(--navy);
  color:rgba(255,255,255,.78);
  position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(100% 80% at 85% 20%, #000, transparent 72%);
  mask-image:radial-gradient(100% 80% at 85% 20%, #000, transparent 72%);
}
.band > *{position:relative}
.band h2{color:#fff; max-width:22ch}
.band .lead{color:rgba(255,255,255,.72)}
.band .eyebrow{color:var(--brand-2)}

.quote{
  font-size:clamp(1.3rem,2.5vw,1.95rem);
  line-height:1.38; letter-spacing:-.024em;
  font-weight:500; color:#fff; max-width:26ch; margin:0;
}

/* ---------- Prose ---------- */

.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em; color:var(--navy)}
.prose p{color:#33404e}
.prose ul{margin-bottom:1.3em}
.prose li{color:#33404e}

.callout{
  background:var(--brand-soft);
  border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  margin:2em 0;
}
.callout p{margin:0; color:var(--navy); font-size:1rem}

/* ---------- Founder ---------- */

.founder{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,38px);
  align-items:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);
}
.founder-mark{
  width:88px; height:88px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; border-radius:var(--radius);
  font-size:1.6rem; font-weight:600; letter-spacing:.02em;
}
.founder h3{margin-bottom:.2em}
.founder-role{
  font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand); margin-bottom:1em;
}

/* ---------- Contact ---------- */

.contact-grid{
  display:grid; grid-template-columns:1fr .85fr; gap:clamp(34px,5vw,72px);
  align-items:start;
}

.field{margin-bottom:18px}
.field label{
  display:block; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--navy); margin-bottom:.45em;
}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:.78em .9em;
  background:var(--white);
  border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(51,102,153,.14);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-note{font-size:.84rem; color:var(--muted); margin-top:1em}

.form-msg{
  padding:.9em 1.1em; border-radius:var(--radius); margin-bottom:22px;
  font-size:.94rem; border:1px solid;
}
.form-msg--ok{background:#edf7f0; border-color:#bfe0c9; color:#1d5b31}
.form-msg--err{background:#fdf0ee; border-color:#f0c9c2; color:#8c2f1e}

.contact-details{
  background:var(--sand); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,2.8vw,34px);
}
.detail{padding:18px 0; border-bottom:1px solid var(--line)}
.detail:first-child{padding-top:0}
.detail:last-child{border-bottom:0; padding-bottom:0}
.detail-label{
  font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5em;
}
.detail-value{font-size:1rem; color:var(--navy); font-weight:500; line-height:1.55}
.detail-value a{color:var(--navy)}
.detail-value a:hover{color:var(--brand)}

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

.site-footer{
  background:var(--navy); color:rgba(255,255,255,.66);
  padding-top:clamp(50px,6vw,78px);
  font-size:.93rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1.25fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(38px,4.5vw,56px);
}
.site-footer h4{
  color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:1.2em;
}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:#fff}
.site-footer p{color:rgba(255,255,255,.62); line-height:1.6}

.footer-logo{
  display:flex; align-items:center; gap:14px; margin-bottom:1.4em;
}
.footer-logo .logo-img{
  width:58px; height:58px;
  background:#fff; padding:5px; border-radius:5px;
}
.footer-logo .logo-sub{color:rgba(255,255,255,.62); white-space:normal; max-width:13em; line-height:1.5}

.footer-nav{list-style:none; padding:0; margin:0}
.footer-nav li{margin-bottom:.6em}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0 28px;
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  font-size:.84rem; color:rgba(255,255,255,.5);
}
.footer-bottom p{margin:0; color:rgba(255,255,255,.5); font-size:.84rem}

/* ---------- Responsive ---------- */

@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; gap:40px}
  .hero-art{max-width:480px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .pillars{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .grid-list{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}

  .nav-toggle{display:flex}

  .nav{
    position:fixed; inset:78px 0 auto; z-index:55;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px 24px 22px;
    box-shadow:0 14px 30px rgba(18,41,63,.09);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85em .2em; border-bottom:1px solid var(--line); border-radius:0}
  .nav a:hover{background:transparent}
  .nav .btn{display:inline-flex; margin-top:16px; justify-content:center; border-bottom:0}

  .header-cta{display:none}

  .cards,.cards--2{grid-template-columns:1fr}
  .grid-list{grid-template-columns:1fr}
  .ref-row{grid-template-columns:1fr; gap:6px}
  .step{grid-template-columns:1fr; gap:10px}
  .step::before{font-size:1.05rem}
  .founder{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:34px}
  .sector-count{display:none}
}

@media (max-width:540px){
  .logo{gap:10px}
  .logo-img{width:44px; height:44px}
  .logo-sub{
    font-size:.54rem; letter-spacing:.1em;
    white-space:normal; max-width:9.5em; line-height:1.45;
  }
  .header-inner{min-height:70px}
  .nav{inset-block-start:70px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}