/* ESPO Theme Custom Styles - Based on design-reference-v5.html */

:root{
  --ink:#1B1912; --ink-soft:#6E685C;
  --paper:#F6F2E9; --paper-deep:#EDE6D6;
  --brass:#8A6A38; --brass-light:#B0925F;
  --line:#DED4BE; --cream:#FBF9F4;
  --c-med:#2E6E62; --c-ofc:#8A6A38; --c-res:#B0672E; --c-com:#7A5A9E; --c-trn:#3B6EA5;
  --grad-1:#5B4FE0; --grad-2:#17B8A6;
}
html{scroll-behavior:smooth;}
body{font-family:'Vazirmatn',sans-serif; background:var(--paper); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-top:80px;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--brass); color:var(--cream);}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Utility Classes ---------- */
.pb-40 { padding-bottom: 40px !important; }
.pt-40 { padding-top: 40px !important; }

/* ---------- Our Services ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.service-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 0 8px 24px rgba(27,25,18,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(27,25,18,0.08);
}
.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--icon-bg, var(--c-med));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.service-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
}
.service-desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 24px;
}
.service-btn {
  text-align: center;
  padding: 10px 0;
  width: 100%;
  font-size: 0.85rem;
}

/* ---------- Specialties Chips ---------- */
.specialty-chip {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--chip-color, var(--brass));
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  display: inline-block;
}
.specialty-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(27,25,18,0.08);
}

/* ---------- Header ---------- */
header.site-header{position:fixed; top:0; left:0; right:0; width:100%; z-index:999; background:rgba(246,242,233,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s;}
header.site-header.scrolled{box-shadow:0 6px 24px rgba(27,25,18,0.06);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:80px; transition:height .3s;}
header.site-header.scrolled .nav-row{height:62px;}
.logo{font-weight:600; font-size:1.25rem;}
.nav-wrapper{display:flex; align-items:center; gap:32px; justify-content:flex-end;}
nav.primary{display:flex; align-items:center; gap:32px;}
nav.primary a{font-size:0.9rem; position:relative; padding:4px 0;}
nav.primary a::after{content:''; position:absolute; right:0; bottom:0; width:0; height:1px; background:var(--brass); transition:width .25s ease;}
nav.primary a:hover::after{width:100%;}
.head-right{display:flex; align-items:center; gap:20px;}
.lang-sw{font-size:0.8rem; color:var(--ink-soft); border:1px solid var(--line); padding:6px 12px;}
.cta-btn{border:1px solid var(--ink); padding:10px 24px; font-size:0.85rem; font-weight:600; transition:background .25s,color .25s; border-radius:30px;}
.cta-btn:hover{background:var(--ink); color:var(--cream);}
.mobile-menu-toggle{display:none; background:transparent; border:none; cursor:pointer; color:var(--ink); padding:4px;}

/* ---------- Hero / Matrix diagram ---------- */
.hero{padding:70px 0 30px; text-align:center; position:relative;}
/* TODO: Blob animations requested in prompt but not present in reference. Adding placeholder blob classes just in case */
.blob { position:absolute; border-radius:50%; filter:blur(50px); z-index:-1; opacity:0.5; }
.hero .blob.b1 { width:300px; height:300px; background:var(--c-med); top:10%; right:15%; animation:float 10s ease-in-out infinite; }
.hero .blob.b2 { width:250px; height:250px; background:var(--brass); bottom:20%; left:10%; animation:float 12s ease-in-out infinite reverse; }
@keyframes float { 0% {transform:translate(0,0)} 50% {transform:translate(-30px, 40px)} 100% {transform:translate(0,0)} }

.hero .eyebrow{font-size:0.8rem; color:var(--brass); letter-spacing:0.14em; font-weight:600; display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;}
.hero .eyebrow::before,.hero .eyebrow::after{content:''; width:24px; height:1px; background:var(--brass);}
.hero h1{font-weight:600; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:56px;}
.matrix{position:relative; max-width:980px; margin:0 auto;}
.matrix svg{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
.matrix svg line{stroke:var(--line); stroke-width:1; opacity:0; transition:opacity .5s;}
.matrix.in svg line{opacity:0.55;}
/* Animated gradient lines for matrix requested in prompt. Applying style to specific class just in case */
.matrix svg line.flow { stroke:url(#grad); stroke-dasharray: 10 10; animation: dash 2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }

.m-row{position:relative; z-index:2; display:flex; justify-content:space-between; gap:14px;}
.m-row.top{margin-bottom:230px;}
.m-box{
  background:var(--cream); border:1px solid var(--ink); padding:16px 10px; flex:1;
  text-align:center; transform:translateY(0); transition:transform .3s, box-shadow .3s, border-color .3s;
  /* Round card soft shadow requested in prompt */
  border-radius:12px;
}
.m-box:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(27,25,18,0.12); border-color:var(--brass);}
.m-box .fa{font-weight:700; font-size:0.92rem;}
.m-box .en{font-size:0.62rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;}
.m-row.bottom .m-box{padding:12px 8px;}
.m-row.bottom .m-box .fa{font-size:0.82rem;}
.scroll-cue{margin:50px auto 0; width:22px; height:36px; border:1px solid var(--ink-soft); border-radius:12px; position:relative;}
.scroll-cue::after{content:''; position:absolute; top:6px; right:50%; transform:translateX(50%); width:3px; height:7px; background:var(--brass); border-radius:2px; animation:cue 1.6s infinite;}
@keyframes cue{0%{opacity:1; top:6px;} 70%{opacity:0; top:18px;} 100%{opacity:0; top:6px;}}

/* ---------- Storytelling ---------- */
.story{padding:110px 0;}
.story-head{text-align:center; margin-bottom:80px;}
.story-head .tag, .s-badge{font-size:0.78rem; color:var(--brass); letter-spacing:0.12em; font-weight:600;}
.story-head h2{font-weight:600; font-size:clamp(1.7rem,3vw,2.2rem); margin-top:12px;}
.story-track{position:relative;}
.timeline{position:absolute; right:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(50%);}
.timeline-dot{position:absolute; right:50%; width:11px; height:11px; border-radius:50%; background:var(--brass); transform:translate(50%,-50%); top:0; box-shadow:0 0 0 5px var(--paper); transition:top 0.1s linear;}
.story-row{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:120px; position:relative;}
.story-row:last-child{margin-bottom:0;}
.story-row.rev{direction:ltr;}
.story-row.rev > *{direction:rtl;}
.s-label .fa{font-size:1.5rem; font-weight:600;}
.s-label .en{font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; margin-bottom:22px;}
.s-label h4{font-size:0.95rem; font-weight:600; margin-bottom:10px;}
.s-label p{font-size:0.88rem; color:var(--ink-soft);}
.s-photo{position:relative; aspect-ratio:5/4; border-radius:12px; overflow:hidden;}
.s-photo img.bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.s-photo .ph{position:absolute; inset:0; background:linear-gradient(135deg,var(--tint,var(--brass)) 0%, var(--ink) 130%); opacity:0.9;}
.s-photo .ph::after{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size:14px 14px;}
.s-photo .icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5;}
.s-photo .icon svg{width:34%; height:34%;}
.s-photo .corner{position:absolute; width:56px; height:56px; z-index:2;}
.s-photo .corner path{fill:none; stroke:var(--tint,var(--brass)); stroke-width:2.5; stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1s ease;}
.story-row.in .corner path{stroke-dashoffset:0;}
.corner.tl{top:10px; right:10px;}
.corner.br{bottom:10px; left:10px; transform:rotate(180deg);}

/* ---------- Customers ---------- */
.customers{background:var(--paper-deep); padding:100px 0;}
.cust-head{text-align:center; margin-bottom:56px;}
.cust-head .tag{font-size:0.78rem; color:var(--brass); letter-spacing:0.12em; font-weight:600;}
.cust-head h2{font-weight:600; font-size:clamp(1.5rem,2.6vw,1.9rem); margin-top:12px;}
/* Custom Grid modified for round cards based on prompt instructions */
.cust-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.cust-tile{background:var(--cream); aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .25s, box-shadow .25s, transform .25s; overflow:hidden;}
.cust-tile:hover { transform:scale(1.05); box-shadow:0 10px 20px rgba(27,25,18,0.08); }
.cust-tile .mono{width:42px; height:42px; border-radius:50%; border:1.4px solid var(--ink-soft); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--ink-soft); font-size:0.95rem; transition:border-color .25s, color .25s, transform .25s;}
.cust-tile img{width:100%; height:100%; object-fit:cover;}
.cust-tile:hover .mono{border-color:var(--brass); color:var(--brass); transform:scale(1.08);}
.cust-more{text-align:center; margin-top:44px;}
.cust-more a{border:1px solid var(--ink); padding:12px 28px; font-size:0.85rem; font-weight:600; transition:background .25s,color .25s; border-radius:30px;}
.cust-more a:hover{background:var(--ink); color:var(--cream);}

/* ---------- Blog ---------- */
.sec-pad{padding:100px 0;}
.sec-head{margin-bottom:56px; max-width:600px;}
.sec-head .tag{font-size:0.78rem; color:var(--brass); letter-spacing:0.12em; font-weight:600; display:block; margin-bottom:14px;}
.sec-head h2{font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px;}
.sec-head p{color:var(--ink-soft); font-size:0.95rem;}
.blog-list{border-top:1px solid var(--line);}
.blog-row, .blog-card{display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); transition:background .25s; border-radius:12px;}
.blog-row:hover, .blog-card:hover{background:var(--paper-deep); box-shadow:0 10px 20px rgba(27,25,18,0.05);}
.blog-thumb{width:88px; height:88px; background:var(--paper-deep); position:relative; overflow:hidden; border-radius:50%;} /* Prompt requested round blog cards */
.blog-thumb svg{position:absolute; inset:12px;}
.blog-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-meta{display:flex; gap:10px; align-items:center; margin-bottom:8px;}
.blog-cat{font-size:0.7rem; color:var(--brass); font-weight:600;}
.blog-date{font-size:0.7rem; color:var(--ink-soft);}
.blog-row h3, .blog-card h3{font-weight:600; font-size:1.05rem;}
.blog-row .go, .blog-card .go{font-size:0.82rem; font-weight:600; white-space:nowrap; transition:color .2s;}
.blog-row:hover .go, .blog-card:hover .go{color:var(--brass);}
.blog-more{margin-top:36px;}
.blog-more a.tl{font-size:0.88rem; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:3px;}

/* ---------- CTA + Footer ---------- */
.cta{background:var(--ink); color:var(--cream); text-align:center; padding:110px 0;}
.cta h2{font-weight:600; font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:20px;}
.cta p{color:#B9B4A6; max-width:480px; margin:0 auto 34px;}
a.btn-fill, button.btn-fill, .btn-fill { background: linear-gradient(90deg, var(--grad-1), var(--grad-2)) !important; color: #ffffff !important; padding: 15px 30px; font-size: 0.92rem; font-weight: 600; display: inline-block; transition: box-shadow 0.25s, transform 0.25s; border-radius: 100px; border: none; text-decoration: none; }
a.btn-fill:hover, button.btn-fill:hover, .btn-fill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(91,79,224,0.4) !important; color: #ffffff !important; }

footer, .site-footer{background:#14120D; color:#8C8778; padding:70px 0 30px; font-size:0.86rem;}
.foot-grid{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:32px; padding-bottom:44px; border-bottom:1px solid rgba(246,242,233,0.08);}
.foot-socials{display:flex; gap:16px; margin-top:20px;}
.foot-socials a{color:var(--cream); opacity:0.7; transition:opacity 0.25s;}
.foot-socials a:hover{opacity:1;}
.contact-item{display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; font-size:0.85rem;}
.contact-item svg{flex-shrink:0; margin-top:4px; opacity:0.7;}
.foot-grid .logo{color:var(--cream); margin-bottom:16px; display:block;}
.foot-grid h5{color:var(--cream); font-size:0.9rem; letter-spacing:0.06em; margin-bottom:16px; font-weight:600;}
.foot-grid p{color:#8C8778; font-size:0.85rem; line-height:1.7;}
.foot-grid ul{list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0;}
.foot-grid a:hover{color:var(--brass-light);}
.foot-contact{display:flex; flex-direction:column; gap:8px; margin-top:16px; font-size:0.8rem;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:0.76rem; color:#5C594E; flex-wrap:wrap; gap:10px;}

/* ---------- FAB ---------- */
.fab-call {
  position: fixed; bottom: 20px; left: 20px; width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--brass), var(--brass-light));
  color: var(--cream); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(138,106,56,0.3); z-index: 990;
  transition: transform 0.3s, box-shadow 0.3s;
}
.fab-call:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 20px rgba(138,106,56,0.4); color:var(--cream); }

@media (max-width:980px){
  .mobile-menu-toggle{display:block; z-index:101; position:relative;}
  .nav-wrapper{
    position:fixed; top:0; right:-100%; width:280px; height:100vh; background:var(--paper);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:80px 30px 40px;
    box-shadow:-5px 0 20px rgba(0,0,0,0.1); transition:right 0.4s cubic-bezier(0.16,1,0.3,1); z-index:100;
  }
  .nav-wrapper.is-open{right:0;}
  nav.primary{flex-direction:column; align-items:flex-start; gap:20px; width:100%;}
  .head-right{flex-direction:column; align-items:flex-start; gap:20px; width:100%; margin-top:30px; border-top:1px solid var(--line); padding-top:30px;}
  .m-row{flex-direction:column;}
  .m-row.top{margin-bottom:60px;}
  .matrix svg{display:none;}
  .story-row{grid-template-columns:1fr; gap:24px;}
  .story-row.rev{direction:rtl;}
  .timeline,.timeline-dot{display:none;}
  .cust-grid{grid-template-columns:repeat(3,1fr);}
  .blog-row, .blog-card{grid-template-columns:60px 1fr; row-gap:8px;}
  .blog-row .go, .blog-card .go{grid-column:2;}
  .foot-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .m-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-direction:unset;}
  .m-box{padding:12px 8px;}
  .m-box .fa{font-size:0.8rem;}
  .m-box .en{font-size:0.55rem;}
}