/* ============================================================
   Samroush Consulting — Corporate Design System v2
   Enterprise B2B consulting style: white surfaces, SAP blue,
   icon-led cards, stat counters, badge rows, FAQ accordion.
   ============================================================ */

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

:root{
  --blue:        #0A5FB4;
  --blue-dark:   #073E78;
  --blue-tint:   #EAF2FB;
  --navy:        #0B2545;
  --ink:         #101820;
  --charcoal:    #1C2733;
  --slate:       #5B6B7A;
  --line:        #E1E7EE;
  --paper:       #FFFFFF;
  --paper-alt:   #F6F9FC;
  --gold:        #C9922E;

  --font: 'Inter', sans-serif;
  --container: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:700;
  color:var(--navy);
  line-height:1.15;
  margin:0;
  letter-spacing:-0.015em;
}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:800;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.2rem; font-weight:700;}

.eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-block;
  margin-bottom:14px;
}

p{margin:0 0 1em; color:var(--slate); max-width:62ch;}
.lede{font-size:1.14rem; color:var(--slate);}

.container{max-width:var(--container); margin:0 auto; padding:0 32px;}
@media (max-width:640px){.container{padding:0 20px;}}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  max-width:var(--container); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:11px;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font-weight:800; font-size:1.05rem; color:var(--navy);}
.brand-tag{font-size:0.66rem; letter-spacing:0.06em; color:var(--slate); text-transform:uppercase; font-weight:600;}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{
  font-size:0.88rem; font-weight:600;
  color:var(--charcoal); padding:6px 0; position:relative;
}
nav.links a.active,nav.links a:hover{color:var(--blue);}
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--blue);
}
.btn{
  font-size:0.85rem; font-weight:700;
  padding:12px 22px; border-radius:6px;
  border:1.5px solid var(--blue); color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{background:var(--blue-tint);}
.btn-solid{background:var(--blue); color:#fff; border:1.5px solid var(--blue);}
.btn-solid:hover{background:var(--blue-dark); border-color:var(--blue-dark);}
.btn-ghost-light{border-color:rgba(255,255,255,0.5); color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,0.12);}
.nav-cta{display:none;}
@media (min-width:900px){.nav-cta{display:inline-flex;}}
.mobile-toggle{display:none; font-size:0.85rem; font-weight:700; background:none; border:1.5px solid var(--blue); border-radius:6px; padding:8px 14px; color:var(--blue);}
@media (max-width:899px){
  nav.links{display:none;}
  .mobile-toggle{display:block;}
  nav.links.open{
    display:flex; flex-direction:column; position:absolute; top:62px; left:0; right:0;
    background:var(--paper); padding:20px 32px; border-bottom:1px solid var(--line); gap:18px; box-shadow:0 8px 16px rgba(11,37,69,0.08);
  }
}

/* ---------- section rhythm ---------- */
section{padding:88px 0;}
@media (max-width:640px){section{padding:56px 0;}}
.section-alt{background:var(--paper-alt);}
.section-navy{background:var(--navy); color:#fff;}
.section-navy p{color:rgba(255,255,255,0.72);}
.section-navy h2,.section-navy h3{color:#fff;}
.section-tight{padding-top:52px;padding-bottom:52px;}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head p{max-width:44ch; margin:0;}
.section-head.center{flex-direction:column; align-items:center; text-align:center;}
.section-head.center p{max-width:56ch;}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg, rgba(11,37,69,0.90) 0%, rgba(15,46,88,0.94) 100%), url('https://images.unsplash.com/photo-1758518729463-0bb73ed899ac?auto=format&fit=crop&w=2000&q=80') center 30% / cover no-repeat;
  color:#fff;
  padding:76px 0 0;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  padding:7px 14px; border-radius:20px; font-size:0.76rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--gold); margin-bottom:22px;
}
.hero h1{color:#fff; margin-bottom:20px;}
.hero .lede{color:rgba(255,255,255,0.78); max-width:52ch; font-size:1.18rem;}
.hero-ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
.hero-inner{padding-bottom:56px;}

.badge-row{
  border-top:1px solid rgba(255,255,255,0.14);
  padding:26px 0;
}
.badge-row .container{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.badge{
  display:flex; align-items:center; gap:9px;
  font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.75);
  padding:8px 4px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* ---------- stat counters ---------- */
.stats-band{background:var(--paper); border-bottom:1px solid var(--line);}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.stat-cell{background:var(--paper); padding:32px 24px; text-align:center;}
.stat-cell b{display:block; font-size:2.1rem; font-weight:800; color:var(--blue); margin-bottom:4px;}
.stat-cell span{font-size:0.82rem; color:var(--slate); font-weight:600;}

/* ---------- icon ---------- */
.icon-wrap{
  width:52px; height:52px; border-radius:10px;
  background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.icon-wrap svg{width:26px;height:26px;}

/* ---------- cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:32px 28px;
}
.card:hover{border-color:var(--blue);}
.card h3{margin-bottom:10px;}
.card p{margin-bottom:0; font-size:0.95rem;}
.card-list{margin-top:16px; display:grid; gap:8px;}
.card-list li{list-style:none; font-size:0.88rem; color:var(--slate); padding-left:20px; position:relative;}
.card-list li::before{content:"";position:absolute;left:0;top:0.55em;width:7px;height:7px;background:var(--blue);border-radius:2px;}

/* ---------- process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding:28px 24px 24px; border:1px solid var(--line); border-radius:12px; background:var(--paper);}
.step .step-num{
  font-size:0.78rem; font-weight:800; color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--blue-tint); margin-bottom:16px;
}
.section-navy .step h3{color:var(--navy);}
.section-navy .step p{color:var(--slate);}

/* ---------- CTA strip mid-page ---------- */
.cta-strip{
  background:var(--blue-tint); border:1px solid #D3E3F5; border-radius:14px;
  padding:36px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-strip h3{margin-bottom:4px;}
.cta-strip p{margin:0;}

/* ---------- big CTA band ---------- */
.cta-band{background:var(--navy); color:#fff; padding:72px 0; text-align:center;}
.cta-band h2{color:#fff; margin-bottom:18px;}
.cta-band p{color:rgba(255,255,255,0.72); margin:0 auto 30px; text-align:center;}
.cta-band .btn-solid{background:var(--gold); border-color:var(--gold); color:var(--navy);}
.cta-band .btn-solid:hover{background:#DDA648; border-color:#DDA648;}

/* ---------- FAQ accordion ---------- */
.faq{max-width:840px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font); font-size:1.02rem; font-weight:700; color:var(--navy);
}
.faq-q .chev{flex-shrink:0; width:20px; height:20px; transition:transform 0.2s ease; color:var(--blue);}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding-bottom:22px;}
.faq-a-inner p{margin:0; font-size:0.95rem;}

/* ---------- credentials/why-us list ---------- */
.cred-list{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.cred{flex:1 1 220px; padding:24px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.cred .num{font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:8px;}
.cred p{margin:0; font-size:0.95rem;}

/* ---------- photo band / banner ---------- */
.photo-band{position:relative; height:340px; overflow:hidden;}
.photo-band img{width:100%; height:100%; object-fit:cover; object-position:center;}
.photo-band .photo-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,37,69,0.55) 0%, rgba(11,37,69,0.78) 100%);
  display:flex; align-items:center;
}
.photo-band .photo-overlay .container{color:#fff;}
.photo-band h2{color:#fff; max-width:20ch;}
.photo-band p{color:rgba(255,255,255,0.8); max-width:52ch;}
@media (max-width:640px){.photo-band{height:260px;}}

.service-photo{border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.service-photo img{width:100%; height:220px; object-fit:cover; display:block;}

.photo-card{border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.photo-card img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- page intro ---------- */
.page-intro{
  background:linear-gradient(180deg, rgba(11,37,69,0.90) 0%, rgba(15,46,88,0.94) 100%), url('https://images.unsplash.com/photo-1745015446589-7ee6f702d8c1?auto=format&fit=crop&w=2000&q=80') center / cover no-repeat;
  color:#fff; padding:60px 0 52px;
}
.page-intro h1{color:#fff; font-size:clamp(2rem,4vw,2.8rem); margin-top:6px;}
.page-intro p{color:rgba(255,255,255,0.72); max-width:62ch; margin-top:16px;}
.breadcrumb{font-size:0.82rem; color:rgba(255,255,255,0.55); font-weight:600;}
.breadcrumb a:hover{color:#fff;}

/* ---------- services page blocks ---------- */
.service-block{padding:60px 0; border-bottom:1px solid var(--line);}
.service-block:last-child{border-bottom:none;}
.service-inner{display:grid; grid-template-columns:0.85fr 1.4fr; gap:52px;}
@media (max-width:860px){.service-inner{grid-template-columns:1fr; gap:24px;}}
.service-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px;}
.service-list li{
  font-size:0.95rem; color:var(--charcoal); padding-left:24px; position:relative;
}
.service-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--blue); font-weight:800; font-size:0.9rem;
}

/* ---------- about / bio ---------- */
.bio-card{background:var(--paper); padding:36px; border:1px solid var(--line); border-radius:12px;}
.bio-role{font-size:0.85rem; font-weight:700; color:var(--blue); margin-bottom:4px;}
.avatar-mono{
  width:64px; height:64px; border-radius:10px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; margin-bottom:20px;
}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr; gap:36px;}}
.field{margin-bottom:20px;}
.field label{display:block; font-size:0.8rem; font-weight:700; color:var(--navy); margin-bottom:8px;}
.field input,.field textarea{
  width:100%; background:var(--paper); border:1.5px solid var(--line); border-radius:8px;
  padding:12px 14px; font-family:var(--font); font-size:0.95rem; color:var(--charcoal);
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);}
.field textarea{resize:vertical; min-height:120px;}
.contact-info{background:var(--paper-alt); border:1px solid var(--line); border-radius:12px; padding:32px;}
.contact-info .info-row{padding:16px 0; border-top:1px solid var(--line);}
.contact-info .info-row:first-child{border-top:none; padding-top:0;}
.contact-info .info-row span{display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--slate); margin-bottom:6px;}
.contact-info .info-row a,.contact-info .info-row div{font-size:1.02rem; color:var(--navy); font-weight:700;}

/* ---------- footer ---------- */
footer.site{background:var(--ink); color:rgba(255,255,255,0.6); padding:56px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
footer.site h4{color:#fff; font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px;}
footer.site a{display:block; margin-bottom:10px; font-size:0.9rem; color:rgba(255,255,255,0.65);}
footer.site a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:0.78rem; flex-wrap:wrap; gap:12px;}

/* focus visibility */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

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