/* =====================================================
   MASHARL CONSULTING — DESIGN SYSTEM v2
   5-page site: index, services, about, work, contact
   ===================================================== */

:root {
  --cream:   #FAFAF8;
  --warm:    #F3EFE8;
  --dark:    #0F0F0F;
  --card:    #181818;
  --mid:     #242424;
  --coral:   #E0583A;
  --coral-h: #C8472B;
  --purple:  #7B52E8;
  --blue:    #2563EB;
  --green:   #059669;
  --amber:   #D97706;
  --red:     #DC2626;

  --t-dark:  #0F0F0F;
  --t-mid:   #3D3D3D;
  --t-light: #7A7A7A;
  --t-white: #FFFFFF;
  --border:  rgba(15,15,15,.09);
  --bd-dark: rgba(255,255,255,.07);

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Outfit', -apple-system, sans-serif;
  --ease:  cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans);
  background:var(--cream);
  color:var(--t-dark);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:var(--coral); color:#fff; }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:0 5vw;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled {
  background:rgba(250,250,248,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border);
}
.nav__inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem 0;
}
.nav__logo {
  font-family:var(--serif); font-size:1.55rem; font-weight:500;
  text-decoration:none; color:#fff;
  display:flex; align-items:center; gap:.65rem;
  transition:color .3s;
}
.nav.scrolled .nav__logo { color:var(--t-dark); }
.nav__mark {
  width:36px; height:36px; border-radius:8px;
  background:var(--coral);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.95rem;
  transition:transform .3s;
  flex-shrink:0;
}
.nav__logo:hover .nav__mark { transform:rotate(-6deg) scale(1.07); }
.nav__links {
  display:flex; gap:2.5rem; list-style:none;
}
.nav__links a {
  text-decoration:none; font-size:.9rem; font-weight:500;
  color:rgba(255,255,255,.72);
  position:relative; padding-bottom:2px;
  transition:color .3s;
}
.nav.scrolled .nav__links a { color:var(--t-mid); }
.nav__links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1.5px; background:var(--coral);
  transition:width .3s;
}
.nav__links a:hover::after,
.nav__links a.active::after { width:100%; }
.nav__cta {
  font-size:.87rem; font-weight:500;
  text-decoration:none; padding:.7rem 1.5rem;
  border-radius:100px;
  background:rgba(255,255,255,.11);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  transition:all .3s;
}
.nav.scrolled .nav__cta { background:var(--dark); border-color:var(--dark); }
.nav__cta:hover { background:var(--coral)!important; border-color:var(--coral)!important; transform:translateY(-1px); }

/* Mobile */
.nav__tog {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:none; z-index:901;
}
.nav__tog span { width:22px; height:2px; background:#fff; display:block; transition:all .3s; }
.nav.scrolled .nav__tog span { background:var(--t-dark); }
body.nav-open .nav__tog span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
body.nav-open .nav__tog span:nth-child(2) { opacity:0; }
body.nav-open .nav__tog span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.nav__drawer {
  display:none; position:fixed; inset:0; z-index:800;
  background:var(--cream); padding:5.5rem 5vw 2rem;
  flex-direction:column; opacity:0; visibility:hidden; transition:all .3s;
}
body.nav-open .nav__drawer { display:flex; opacity:1; visibility:visible; }
body.nav-open { overflow:hidden; }
.nav__drawer ul { list-style:none; }
.nav__drawer li { border-bottom:1px solid var(--border); }
.nav__drawer a {
  display:block; padding:1rem 0;
  font-family:var(--serif); font-size:1.4rem;
  color:var(--t-dark); text-decoration:none; transition:color .2s;
}
.nav__drawer a:hover { color:var(--coral); }
.nav__drawer-cta {
  margin-top:2rem; display:inline-block;
  background:var(--coral); color:#fff;
  padding:.85rem 2rem; border-radius:100px;
  text-decoration:none; font-weight:500;
}

/* ── LAYOUT ── */
.wrap { max-width:1200px; margin:0 auto; padding:0 5vw; }
.section { padding:6rem 5vw; }
.section--dark    { background:var(--dark);  color:#fff; }
.section--warm    { background:var(--warm); }
.section--charcoal{ background:var(--mid); color:#fff; }

.sh { text-align:center; margin-bottom:3.5rem; }
.sh h2 {
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.5vw,2.55rem);
  font-weight:400; line-height:1.15; margin-bottom:.7rem;
}
.sh h2 em { font-style:italic; color:var(--coral); }
.sh p {
  font-size:1.02rem; color:var(--t-light);
  max-width:540px; margin:0 auto; line-height:1.75;
}
.section--dark .sh p,
.section--charcoal .sh p { color:rgba(255,255,255,.48); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.8rem; border-radius:100px;
  font-size:.91rem; font-weight:500; text-decoration:none;
  transition:all .3s var(--ease); border:2px solid transparent; cursor:pointer;
  font-family:var(--sans);
}
.btn--primary { background:var(--coral); color:#fff; border-color:var(--coral); }
.btn--primary:hover { background:var(--coral-h); border-color:var(--coral-h); transform:translateY(-2px); box-shadow:0 12px 28px rgba(224,88,58,.28); }
.btn--dark { background:var(--dark); color:#fff; border-color:var(--dark); }
.btn--dark:hover { background:var(--coral); border-color:var(--coral); transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--t-dark); border-color:var(--border); }
.btn--outline:hover { border-color:var(--t-dark); }
.btn--ghost { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.btn--ghost:hover { background:rgba(255,255,255,.18); }

/* ── TAGS ── */
.tag {
  display:inline-block; font-size:.71rem; font-weight:500;
  padding:.28rem .65rem; border-radius:100px;
  background:var(--warm); color:var(--t-mid);
}
.tag--coral  { background:rgba(224,88,58,.1); color:var(--coral); border:1px solid rgba(224,88,58,.2); }
.tag--purple { background:rgba(123,82,232,.1); color:var(--purple); border:1px solid rgba(123,82,232,.2); }
.tag--blue   { background:rgba(37,99,235,.1);  color:var(--blue);   border:1px solid rgba(37,99,235,.2); }
.tag--green  { background:rgba(5,150,105,.1);  color:var(--green);  border:1px solid rgba(5,150,105,.2); }

/* ── PAGE HERO (inner pages) ── */
.phero {
  padding:9rem 5vw 5.5rem;
  background:var(--dark); position:relative; overflow:hidden;
  text-align:center;
}
.phero::before {
  content:''; position:absolute;
  top:-40%; right:-10%; width:65%; height:160%;
  background:radial-gradient(ellipse, rgba(224,88,58,.12) 0%, transparent 62%);
  pointer-events:none;
}
.phero__in { max-width:740px; margin:0 auto; position:relative; }
.crumb {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.8rem; color:var(--t-light); margin-bottom:1.5rem;
}
.crumb a { color:var(--coral); text-decoration:none; }
.crumb span { opacity:.45; }
.phero h1 {
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:400; line-height:1.1; color:#fff; margin-bottom:1rem;
}
.phero h1 em { font-style:italic; color:var(--coral); }
.phero .lead {
  font-size:1.08rem; color:rgba(255,255,255,.58);
  max-width:580px; margin:0 auto; line-height:1.78;
}

/* ── CTA BLOCK ── */
.cta-block {
  background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 100%);
  padding:6.5rem 5vw; text-align:center;
  position:relative; overflow:hidden;
}
.cta-block::before {
  content:''; position:absolute;
  top:-50%; right:-20%; width:80%; height:200%;
  background:radial-gradient(ellipse,rgba(224,88,58,.12) 0%,transparent 60%);
}
.cta-block::after {
  content:''; position:absolute;
  bottom:-50%; left:-20%; width:60%; height:150%;
  background:radial-gradient(ellipse,rgba(123,82,232,.07) 0%,transparent 60%);
}
.cta-block__in { max-width:680px; margin:0 auto; position:relative; z-index:2; }
.cta-block h2 {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.8rem);
  color:#fff; line-height:1.15; margin-bottom:.85rem;
}
.cta-block h2 em { font-style:italic; color:var(--coral); }
.cta-block p { font-size:1.02rem; color:rgba(255,255,255,.58); margin-bottom:.7rem; }
.cta-block__pill {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(224,88,58,.12); border:1px solid rgba(224,88,58,.22);
  color:var(--coral); padding:.4rem .95rem; border-radius:100px;
  font-size:.8rem; font-weight:500; margin-bottom:2.25rem;
}
.cta-block__btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER ── */
footer {
  background:var(--dark); color:rgba(255,255,255,.7);
  padding:4.5rem 5vw 2rem;
}
.ft {
  max-width:1200px; margin:0 auto 3rem;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem;
}
.ft__brand .nav__logo { color:#fff; margin-bottom:1rem; }
.ft__brand p { font-size:.86rem; color:rgba(255,255,255,.38); max-width:240px; margin-bottom:1.5rem; line-height:1.7; }
.ft__soc { display:flex; gap:.5rem; }
.ft__soc a {
  width:34px; height:34px; border-radius:7px;
  background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); text-decoration:none;
  font-size:.82rem; transition:all .3s;
}
.ft__soc a:hover { background:var(--coral); color:#fff; }
.ft__col h5 {
  font-size:.73rem; text-transform:uppercase; letter-spacing:.12em;
  color:rgba(255,255,255,.28); margin-bottom:1.2rem;
}
.ft__col ul { list-style:none; }
.ft__col li { margin-bottom:.5rem; }
.ft__col a { color:rgba(255,255,255,.58); text-decoration:none; font-size:.86rem; transition:color .2s; }
.ft__col a:hover { color:var(--coral); }
.ft__bot {
  max-width:1200px; margin:0 auto;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; align-items:center;
}
.ft__bot p { font-size:.78rem; color:rgba(255,255,255,.28); }
.ft__leg { display:flex; gap:1.5rem; }
.ft__leg a { font-size:.78rem; color:rgba(255,255,255,.28); text-decoration:none; }
.ft__leg a:hover { color:var(--coral); }

/* ── SCROLL REVEAL ── */
.r { opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.r.on { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .ft{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .nav__links,.nav__cta{ display:none; }
  .nav__tog{ display:flex; }
  .section{ padding:4rem 5vw; }
  .sh{ margin-bottom:2.5rem; }
  .ft{ grid-template-columns:1fr; }
  .ft__bot{ flex-direction:column; gap:1rem; text-align:center; }
  .ft__leg{ justify-content:center; }
  .cta-block__btns{ flex-direction:column; align-items:center; }
  .cta-block__btns .btn{ width:100%; max-width:280px; justify-content:center; }
}
@media(max-width:480px){
  .section{ padding:3rem 1.25rem; }
  .phero{ padding:7rem 1.25rem 3.5rem; }
  .cta-block{ padding:4rem 1.25rem; }
}