/* Corridor Connect Consulting — site stylesheet
   Shared by index.html (EN) and fr.html (FR) */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Karla:wght@400;500;600&display=swap');

:root{
  --navy:#1B3A5C;
  --navy-deep:#152F4B;
  --red:#D6252B;
  --coral:#F0A99C;
  --gray-bg:#F1F3F5;
  --border:#E3E6E9;
  --text-body:#3D4852;
  --text-meta:#9EA3A8;
  --white:#FFFFFF;
  --max:1240px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  background:var(--white);
  color:var(--text-body);
}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif; color:var(--navy); margin:0; font-weight:600;}
p,span,div,a,li,input,textarea,button{font-family:'Karla',system-ui,-apple-system,sans-serif;}
a{color:var(--red); text-decoration:none;}
a:hover{color:var(--navy);}
img{max-width:100%; display:block;}

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

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--border);
  max-width:var(--max); margin:0 auto;
}
.logo img{height:44px; width:auto;}
.main-nav{display:flex; align-items:center; gap:32px;}
.main-nav a.nav-link{color:var(--navy); font-weight:500; font-size:14.5px; white-space:nowrap;}
.lang-toggle{
  color:var(--text-meta); font-weight:600; font-size:12.5px;
  border:1px solid var(--border); padding:4px 9px; border-radius:2px;
}
.nav-icon{display:flex; align-items:center;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle svg{display:block;}

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:72px 0 0 0; background:var(--white);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 24px 24px 24px; overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:40;
  }
  .main-nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .main-nav a.nav-link{padding:14px 0; width:100%; border-bottom:1px solid var(--border); font-size:16px;}
  .main-nav .lang-toggle, .main-nav .nav-icon{margin-top:16px;}
  .main-nav .btn-primary{margin-top:20px; text-align:center;}
  .menu-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-block; background:var(--red); color:var(--white);
  font-weight:600; font-size:15px; padding:14px 28px; border-radius:2px; border:none; cursor:pointer;
}
.btn-primary:hover{background:var(--navy); color:var(--white);}
.btn-outline{
  display:inline-block; background:transparent; color:var(--navy);
  font-weight:600; font-size:15px; padding:13px 27px; border:1.5px solid var(--navy); border-radius:2px;
}
.btn-outline:hover{background:var(--navy); color:var(--white);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Section basics ---------- */
section{padding:72px 0;}
.section-head{max-width:640px; margin:0 auto 44px auto; padding:0 24px;}
.section-head h2{font-size:30px; line-height:1.25;}
.section-inner{max-width:var(--max); margin:0 auto; padding:0 24px;}
.eyebrow{color:var(--red); font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 12px 0;}
.eyebrow-coral{color:var(--coral);}
.rule{width:64px; height:3px; background:var(--red); border:none; margin:0 0 24px 0;}
.body-lg{font-size:16px; color:var(--text-body); line-height:1.65;}

@media (max-width:600px){
  section{padding:52px 0;}
  .section-head h2{font-size:25px;}
}

/* ---------- Legal pages ---------- */
.legal-wrap{max-width:760px; margin:0 auto; padding:0 24px;}
.legal-header h1{font-size:34px; line-height:1.2; margin-bottom:8px;}
.legal-updated{font-size:13px; color:var(--text-meta); margin:0 0 36px 0;}
.legal-body h2{font-size:19px; margin:32px 0 10px 0;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{font-size:15px; color:var(--text-body); line-height:1.7; margin:0 0 14px 0;}
.legal-body ul{margin:0 0 14px 0; padding-left:20px;}
.legal-body li{font-size:15px; color:var(--text-body); line-height:1.7; margin-bottom:6px;}

/* ---------- Hero ---------- */
.hero{padding-top:64px; padding-bottom:64px;}
.hero-inner{max-width:640px; margin:0 auto;}
.hero h1{font-size:44px; line-height:1.18; margin-bottom:22px;}
@media (max-width:600px){
  .hero h1{font-size:30px;}
}

/* ---------- Cards / grids ---------- */
.card{background:var(--gray-bg); border-top:3px solid var(--red); padding:24px 22px;}
.card h3{font-size:17px; margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--text-body); line-height:1.55; margin:0;}
.card-navy{background:var(--navy); border-top:3px solid var(--coral);}
.card-navy h3{color:var(--white);}
.card-navy p{color:#C3CEDA;}

.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;}
.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;}
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2, minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:600px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
}

/* ---------- Stat rows ---------- */
.stat-num{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:32px; line-height:1;}
.stat-num.on-navy{color:var(--white);}
.stat-label{font-size:13.5px; color:var(--text-body); margin-top:6px; line-height:1.4;}
.stat-label.on-navy{color:#C3CEDA;}

/* ---------- Who We Are two-column list ---------- */
.col-head{
  font-size:12px; color:var(--text-meta); letter-spacing:0.1em; text-transform:uppercase;
  font-weight:700; margin:0 0 18px 0;
}
.item-list{display:flex; flex-direction:column; gap:13px;}
.item{border-left:3px solid var(--red); padding-left:16px;}
.item.alt{border-left-color:var(--navy);}
.item h3{font-size:16px; margin-bottom:5px;}
.item p{font-size:14.5px; color:var(--text-body); line-height:1.5; margin:0;}

.two-col{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; margin-bottom:28px;}
@media (max-width:700px){
  .two-col{grid-template-columns:1fr; gap:32px;}
}

/* ---------- How We Deliver (phase strip) ---------- */
.phase-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0;}
.phase-label{text-align:center; padding:0 10px; color:var(--red); font-weight:700; font-size:11.5px; letter-spacing:0.1em; margin:0 0 12px 0;}
.phase-track{display:flex; align-items:center; margin:0 0 24px 0;}
.phase-track-line{flex:1; height:2px; background:var(--navy);}
.phase-dots{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); margin-top:-13px; margin-bottom:12px;}
.phase-dot-wrap{display:flex; justify-content:center;}
.phase-dot{width:12px; height:12px; border-radius:50%; background:var(--red);}
.phase-body{text-align:center; padding:0 12px;}
.phase-body h3{font-size:15.5px; margin-bottom:6px;}
.phase-body p{font-size:13px; color:var(--text-body); line-height:1.55; margin:0;}
.phase-footnote{font-size:14px; color:var(--text-meta); margin-top:40px; padding-top:22px; border-top:1px solid var(--border);}

@media (max-width:900px){
  .phase-grid, .phase-dots{grid-template-columns:repeat(5, minmax(0,1fr));}
}
@media (max-width:700px){
  .phase-grid{display:none;}
  .phase-dots{display:none;}
  .phase-track{display:none;}
  .phase-list{display:flex; flex-direction:column; gap:22px;}
  .phase-list .phase-item{border-left:3px solid var(--red); padding-left:16px;}
  .phase-list .phase-item h3{font-size:15px; margin:0 0 4px 0; color:var(--navy);}
  .phase-list .phase-item .tag{color:var(--red); font-weight:700; font-size:11.5px; letter-spacing:0.08em; display:block; margin-bottom:6px;}
  .phase-list .phase-item p{font-size:13.5px; margin:0; color:var(--text-body); line-height:1.5;}
}
.phase-list{display:none;}
@media (max-width:700px){ .phase-list{display:flex;} }

/* ---------- Representative Work ---------- */
.work-section{background:var(--navy); padding-top:72px; padding-bottom:72px;}
.work-card{background:var(--navy-deep); padding:22px; border-top:3px solid var(--coral);}
.work-card h3{color:var(--white); font-size:16px; margin-bottom:8px;}
.work-card p.desc{color:#C3CEDA; font-size:13.5px; line-height:1.55; margin:0;}
.work-summary{background:var(--navy-deep); border-top:3px solid var(--coral); padding:28px 30px; margin-top:22px;}
.aggregate-row{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid #2C4A6E;
}
.aggregate-row .stat-num{font-size:36px;}
.aggregate-row p{color:#C3CEDA; font-size:14.5px; line-height:1.5; margin:0; max-width:560px;}
.work-points{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 36px;}
.work-points p{font-size:14px; color:#C3CEDA; line-height:1.65; margin:0;}
.work-points p.full{grid-column:1/-1;}
@media (max-width:700px){
  .work-points{grid-template-columns:1fr;}
}

/* ---------- Perspectives ---------- */
.press-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:760px; flex-wrap:wrap;
}
.press-card .meta{font-size:12px; color:var(--text-meta); letter-spacing:0.08em; text-transform:uppercase; margin:0 0 8px 0;}
.press-card h3{font-size:17px; margin-bottom:6px;}
.press-card .byline{font-size:14px; color:var(--text-body); margin:0;}

/* ---------- Founder ---------- */
.founder-grid{display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start;}
.founder-photo{width:100%; aspect-ratio:1/1; border-top:3px solid var(--red); overflow:hidden;}
.founder-photo img{width:100%; height:100%; object-fit:cover;}
.founder-name{font-size:26px; margin-bottom:6px;}
.founder-role{font-size:15px; color:var(--red); font-weight:600; margin:0 0 18px 0;}
@media (max-width:700px){
  .founder-grid{grid-template-columns:160px 1fr; gap:24px;}
}
@media (max-width:520px){
  .founder-grid{grid-template-columns:1fr;}
  .founder-photo{width:160px;}
}
.delivery-team{grid-column:1/-1; margin-top:8px; padding-top:32px; border-top:1px solid var(--border);}
.delivery-team-label{font-size:12px; color:var(--red); letter-spacing:0.1em; text-transform:uppercase; font-weight:700; margin:0 0 20px 0;}
.delivery-team-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px;}
.delivery-team-grid > div{border-left:1px solid var(--border); padding-left:32px;}
.delivery-team-grid > div:first-child{border-left:none; padding-left:0;}
.delivery-team-grid h3{font-size:16px; margin-bottom:6px;}
.delivery-team-grid p{font-size:14px; color:var(--text-body); line-height:1.55; margin:0;}
.delivery-team-grid p + p{margin-top:10px;}
@media (max-width:700px){
  .delivery-team-grid{grid-template-columns:1fr; gap:20px;}
  .delivery-team-grid > div{border-left:none; padding-left:0;}
}

/* ---------- Contact / CTA ---------- */
.cta-section{background:var(--navy); text-align:center; padding:72px 0;}
.cta-section h2{color:var(--white); font-size:32px; line-height:1.3; max-width:640px; margin:0 auto 36px auto;}
.steps-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
  max-width:860px; margin:0 auto 36px auto; text-align:left;
}
.step-card{background:var(--navy-deep); padding:20px; border-top:3px solid var(--coral);}
.step-card .num{color:var(--coral); font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; margin:0 0 8px 0;}
.step-card p{color:var(--white); font-size:14px; line-height:1.55; margin:0;}
@media (max-width:700px){ .steps-grid{grid-template-columns:1fr;} }

.contact-line{color:#C3CEDA; font-size:14.5px;}
.contact-form{
  max-width:520px; margin:48px auto 0 auto; text-align:left;
  background:var(--navy-deep); padding:28px; border-top:3px solid var(--coral);
}
.contact-form p.label{color:var(--white); font-weight:600; font-size:15px; margin:0 0 16px 0;}
.contact-form form{display:flex; flex-direction:column; gap:14px;}
.contact-form input, .contact-form textarea{
  background:var(--navy); border:1px solid #35507A; color:var(--white);
  padding:12px 14px; font-size:14px; width:100%;
}
.contact-form textarea{resize:vertical;}
.contact-form ::placeholder{color:#8FA0B3;}
.contact-form button{align-self:flex-start;}

/* ---------- Footer ---------- */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:28px 24px; border-top:1px solid var(--border);
  max-width:var(--max); margin:0 auto;
}
.footer-brand{display:flex; align-items:center; gap:14px;}
.footer-brand img{height:27px; width:auto;}
.footer-brand span{font-size:12.5px; color:var(--text-meta);}
.footer-nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.footer-nav a{color:var(--text-meta); font-size:12.5px;}

@media (max-width:700px){
  .footer-nav{gap:14px 18px;}
}
