/* =========================================================
   KHIZAR HAYAT — Brand Identity & Packaging Designer
   Shared design system. Brand colour rule (~75/20/5):
   75% white / near-black text (base backgrounds & text)
   20% muted green — --color-accent #1E7A4C (CTAs, links, active states, badge dot)
   5%  pale green tint — --color-accent-light #E7F2EC (hover/highlight fills)
   Dark sections (footer, CTA band, marquee) use --color-dark #0B1F17.
   ========================================================= */

:root{
  /* Brand palette (exact, as specified) */
  --color-bg:#FFFFFF;
  --color-bg-alt:#F4F6F5;
  --color-dark:#0B1F17;
  --color-accent:#1E7A4C;
  --color-accent-light:#E7F2EC;
  --color-text:#12100D;
  --color-text-muted:#6B7069;

  /* Themeable roles (overwritten per-theme by render.js / dark-mode block) */
  --white:#FFFFFF;
  --white-rgb:255,255,255;
  --paper:#F4F6F5;
  --ink:#12100D;
  --ink-2:#0B1F17;
  --accent:#1E7A4C;    /* primary — muted green */
  --accent-2:#1E7A4C;  /* secondary — same muted green (single-accent palette) */
  --highlight:#1E7A4C; /* sparing accent — same muted green */
  /* Fixed white-on-accent since the muted green is dark enough for
     reliable WCAG AA contrast with white text. */
  --on-accent:#FFFFFF;

  /* Derived supporting neutrals */
  --text-soft:#6B7069;
  --muted-on-ink:#A8A8A8; /* muted text sitting on the always-inverted ink sections (contact/footer) */
  --border:#E4E4E2;
  --border-dark:rgba(255,255,255,0.12);

  --shadow-sm:0 4px 16px rgba(15,15,15,.06);
  --shadow-md:0 12px 40px rgba(15,15,15,.10);
  --shadow-lg:0 24px 64px rgba(15,15,15,.16);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  background:var(--white);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  opacity:0;
  transition:opacity .5s ease;
}
body.page-ready{opacity:1;}
body.custom-cursor-active, body.custom-cursor-active a, body.custom-cursor-active button, body.custom-cursor-active input, body.custom-cursor-active textarea{
  cursor:none;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'Inter', sans-serif; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); font-weight:500;
}
h1,h2,h3{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; line-height:1.08; letter-spacing:-0.02em; color:var(--ink);}
p{color:var(--text-soft);}

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed; top:0; left:0; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  pointer-events:none !important; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s var(--ease), height .2s var(--ease), background-color .2s var(--ease);
}
.cursor::after{
  content:''; position:absolute; top:50%; left:50%;
  width:34px; height:34px; border:1.5px solid var(--accent); border-radius:50%;
  transform:translate(-50%,-50%) scale(1); opacity:.5;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.cursor.click::after{
  transform:translate(-50%,-50%) scale(1.9); opacity:0;
}
.cursor.hoverable{width:16px; height:16px; background:var(--accent);}
.cursor.hoverable::after{width:48px; height:48px; opacity:.3;}
.cursor.hidden{opacity:0;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:14.5px;
  padding:15px 28px; border-radius:var(--r-sm);
  border:1.5px solid var(--accent); color:var(--ink); background:transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.btn.solid{background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:var(--shadow-sm);}
.btn.solid:hover{background:var(--ink-2); border-color:var(--ink-2); color:var(--white); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.btn.on-dark{border-color:var(--paper); color:var(--paper);}
.btn.on-dark:hover{background:var(--paper); color:var(--ink);}
.btn .arrow{transition:transform .2s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--white-rgb),0.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:82px;}
.logo{position:relative; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); display:inline-flex; align-items:center; gap:10px;}
.logo span{color:var(--accent);}
.logo-img{height:28px; width:auto; color:var(--accent-2); transition:transform .22s var(--ease);}
.logo:hover .logo-img{transform:rotate(-8deg) scale(1.06);}
.logo-reveal{
  position:absolute; left:100%; top:50%; margin-left:10px;
  transform:translateY(-50%) translateX(-6px); opacity:0; pointer-events:none;
  white-space:nowrap; font-family:'Inter', sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.logo:hover .logo-reveal{opacity:1; transform:translateY(-50%) translateX(0);}
.navlinks{display:flex; align-items:center; gap:40px;}
.navlinks a{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:500; font-size:14px;
  position:relative; padding-bottom:3px; color:var(--text-soft);
  transition:color .18s var(--ease);
}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent-2); border-radius:2px;
  transition:width .2s var(--ease);
}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after{width:100%;}
.navlinks a.active{color:var(--ink);}
.navlinks a.active::after{width:100%;}
.navlinks a.cta{border-radius:var(--r-sm); border:1.5px solid var(--accent); color:var(--ink); padding:10px 18px; font-weight:600;}
.navlinks a.cta::after{display:none;}
.navlinks a.cta:hover{background:var(--accent); color:var(--on-accent);}
.navtoggle{display:none;}

/* ============ HERO ============ */
.hero{
  padding:112px 0 64px; position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(30,122,76,0.04), transparent 60%),
    var(--white);
}
/* display:flex + width:fit-content lets margin:0 auto actually
   center this pill — inline-flex (the previous value) generates an
   inline-level box, and inline-level boxes ignore auto margins, which
   is why this was drifting left instead of centering with the rest
   of the hero content. */
.hero-badge{
  display:flex; width:fit-content; align-items:center; gap:10px; margin:0 auto 30px; padding:10px 19px 10px 14px;
  background:var(--white); border:1px solid var(--border); border-radius:999px;
  font-size:15.5px; color:var(--ink); box-shadow:var(--shadow-sm);
}
.hero-badge .pulse{width:9px; height:9px; border-radius:50%; background:var(--highlight); animation:pulse 2s infinite; flex-shrink:0;}
.hero-grid{display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; max-width:1400px; margin:0 auto;}
.hero h1{font-size:clamp(46px, 6.7vw, 82px); line-height:1.08; max-width:1400px;}
.hero h1 em{font-style:normal;}
.hero-side{padding-bottom:6px; display:flex; flex-direction:column; align-items:center;}
.hero-side p{font-size:20.5px; color:var(--text-soft); max-width:900px; margin-top:2px; margin-bottom:36px;}
.hero-side p strong{color:var(--ink); font-weight:600;}

.hero-cta.solid{
  display:inline-flex; align-items:center; gap:16px; padding:10px 10px 10px 36px; border-radius:999px;
  font-size:17.5px; font-weight:600;
  box-shadow:0 0 0 8px rgba(30,122,76,0.08), 0 18px 34px -14px rgba(30,122,76,0.55);
  animation:ctaGlow 3s ease-in-out infinite;
}
.hero-cta .arrow-circle{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.16); transition:transform .2s var(--ease), background .2s var(--ease);
}
.hero-cta:hover .arrow-circle{transform:translateX(3px); background:rgba(255,255,255,0.28);}
@keyframes ctaGlow{
  0%, 100%{box-shadow:0 0 0 8px rgba(30,122,76,0.08), 0 18px 34px -14px rgba(30,122,76,0.55);}
  50%{box-shadow:0 0 0 12px rgba(30,122,76,0.12), 0 18px 34px -14px rgba(30,122,76,0.65);}
}

.hero-chips{display:flex; gap:34px; margin-top:56px; flex-wrap:wrap; justify-content:center;}
.hero-chip{display:inline-flex; align-items:center; gap:11px; font-size:16px; color:var(--text-soft); font-weight:500;}
.hero-chip .chip-icon{
  display:inline-flex; align-items:center; justify-content:center; width:41px; height:41px; border-radius:12px;
  border:1px solid var(--border); color:var(--accent-2); background:var(--white); flex-shrink:0;
}
.hero-chip .chip-icon svg{width:20px; height:20px;}

/* page-header for subpages (work/services/about) */
.page-header{padding:120px 0 72px; background:var(--paper); text-align:center;}
.page-header .wrap{max-width:720px;}
.page-header .eyebrow{margin-bottom:18px; display:block;}
.page-header h1{font-size:clamp(36px, 5vw, 60px); max-width:760px; margin:0 auto;}
.page-header p.lede{font-size:17px; color:var(--text-soft); max-width:520px; margin:22px auto 0;}

/* ============ MARQUEE ============ */
.marquee-strip{background:var(--ink-2); color:var(--white); overflow:hidden; white-space:nowrap; padding:18px 0;}
.marquee-track{display:inline-flex; animation:scroll 14s linear infinite;}
.marquee-track span{
  font-family:'Inter', sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:0 28px; display:inline-flex; align-items:center; gap:28px; color:var(--paper);
}
.marquee-track span.dot::before{content:'●'; color:var(--accent-2); font-size:8px; filter:brightness(1.8);}
.marquee-strip:hover .marquee-track{animation-play-state:paused;}
@keyframes scroll{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ---- client / brand logo marquee ---- */
.brand-marquee-strip{
  background:var(--ink-2); border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark);
  overflow:hidden; white-space:nowrap; padding:26px 0;
}
.brand-marquee-track{display:inline-flex; align-items:center; animation:scroll 22s linear infinite;}
.brand-marquee-strip:hover .brand-marquee-track{animation-play-state:paused;}
.brand-chip{
  display:inline-flex; align-items:center; margin:0 14px;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--text-soft); padding:10px 22px;
  border:1px solid transparent; border-radius:999px; background:var(--white);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.brand-chip:hover{color:var(--ink); border-color:var(--accent); transform:translateY(-2px);}
@media (max-width: 860px){
  .brand-chip{font-size:14.5px; padding:8px 16px; margin:0 8px;}
}

section{padding:132px 0;}
.section-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin:0 auto 80px; max-width:640px;}
.section-head h2{font-size:clamp(30px, 3.6vw, 44px);}
.section-head p{color:var(--text-soft); max-width:420px; font-size:15.5px;}
.section-alt{background:var(--paper);}

/* ============ WORK GRID ============ */
.work-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;}
.work-grid.full{grid-template-columns:repeat(2, 1fr);}
.work-card{
  background:var(--white); position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm); border:1px solid var(--border);
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.work-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-6px);}
.work-card.feature{grid-column:span 2; aspect-ratio:16/8;}
.work-card img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .2s var(--ease);}
.work-card:hover img{transform:scale(1.08);}
.work-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,15,0) 40%, rgba(15,15,15,0.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
  opacity:0; transition:opacity .22s var(--ease);
}
.work-card:hover .work-overlay{opacity:1;}
.work-overlay .cat{font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin-bottom:6px;}
.work-overlay h3{color:var(--white); font-size:23px; font-weight:700;}
.work-overlay .go{margin-top:10px; font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:12.5px; color:var(--white); display:inline-flex; align-items:center; gap:6px;}
.work-tag{
  position:absolute; top:20px; left:20px; z-index:2;
  font-family:'Inter', sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); color:var(--ink); padding:6px 12px; border-radius:var(--r-sm);
}
.work-more{text-align:center; margin-top:56px;}

/* ---- before/after expandable (work.html only, opt-in per project) ---- */
.work-card-wrap{display:flex; flex-direction:column;}
.before-after-toggle{
  margin-top:14px; align-self:flex-start; background:none; border:none; padding:0;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:13px;
  color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.before-after-toggle::after{content:"↕"; font-size:12px;}
.before-after-toggle:hover{text-decoration:underline;}
.before-after-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;
}
.ba-pane{position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--paper); border:1px solid var(--border);}
.ba-pane img{width:100%; height:100%; object-fit:cover; display:block;}
.ba-pane .ba-placeholder{
  display:flex; align-items:center; justify-content:center; height:100%; width:100%;
  font-family:'Inter', sans-serif; font-size:12px; color:var(--text-soft); text-align:center; padding:16px;
}
.ba-label{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--ink-2); color:var(--white); padding:5px 10px; border-radius:999px;
}
@media (max-width: 860px){
  .before-after-panel{grid-template-columns:1fr;}
}

/* ============ SERVICES ============ */
.service-list{display:flex; flex-direction:column; gap:16px;}
.service-row{
  display:grid; grid-template-columns:60px 1.2fr 1.6fr 160px; align-items:center; gap:24px;
  padding:32px 28px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.service-row:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--accent-2);}
.service-num{font-family:'Inter', sans-serif; color:var(--ink); font-size:13px; font-weight:500;}
.service-row h3{font-size:22px; font-weight:700;}
.service-row p{color:var(--text-soft); font-size:14.5px; max-width:420px;}
.service-tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;}
.service-tags span{
  font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:6px 12px; color:var(--text-soft);
}

/* service detail cards (services.html) */
.service-detail{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:44px; box-shadow:var(--shadow-sm); transition:box-shadow .22s var(--ease), transform .22s var(--ease);
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
}
.service-detail:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.service-detail + .service-detail{margin-top:24px;}
.service-detail .n{font-family:'Bricolage Grotesque'; font-weight:800; font-size:32px; color:var(--accent-2); margin-bottom:14px;}
.service-detail h3{font-size:28px; margin-bottom:14px;}
.service-detail p{font-size:15.5px; margin-bottom:18px;}
.deliverables{list-style:none; display:flex; flex-direction:column; gap:10px;}
.deliverables li{
  font-size:14.5px; color:var(--ink); display:flex; align-items:flex-start; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.deliverables li::before{content:'—'; color:var(--accent-2); font-weight:700;}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; align-items:start;}
.about-grid h2{font-size:clamp(30px, 3.6vw, 42px); max-width:440px;}
.about-copy p{font-size:17px; color:var(--text-soft); margin-bottom:20px; max-width:520px;}
.about-copy p strong{color:var(--ink); font-weight:700;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px;}
.stat-row div{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 20px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stat-row div:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.stat-row div strong{display:block; font-family:'Bricolage Grotesque'; font-size:32px; font-weight:800; color:var(--accent-2);}
.stat-row div span{font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft);}
.avail-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter', sans-serif; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  background:var(--white); border:1px solid var(--border); border-radius:999px; padding:9px 16px; margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.avail-badge .pulse{width:7px; height:7px; border-radius:50%; background:var(--highlight); box-shadow:0 0 0 0 rgba(30,122,76,.5); animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,122,76,.45);} 70%{box-shadow:0 0 0 8px rgba(30,122,76,0);} 100%{box-shadow:0 0 0 0 rgba(30,122,76,0);}}

/* timeline (about.html) */
.timeline{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.timeline-row{
  display:grid; grid-template-columns:140px 1fr 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--border);
  align-items:center;
}
.timeline-row .yr{font-family:'Inter', sans-serif; font-size:12.5px; color:var(--ink);}
.timeline-row h3{font-size:19px; font-weight:700;}
.timeline-row p{font-size:14px; color:var(--text-soft);}

/* values grid (about.html) */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.value-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 26px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.value-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.value-card h3{font-size:19px; margin-bottom:10px;}
.value-card p{font-size:14px;}

/* ============ PROCESS ============ */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.process-step{
  background:var(--white); padding:36px 28px; min-height:220px; display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.process-step:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.process-step .n{font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:28px; color:var(--accent-2);}
.process-step h3{font-size:19px; font-weight:700; margin-top:20px;}
.process-step p{font-size:13.5px; color:var(--text-soft); margin-top:10px;}

/* ============ CLIENTS STRIP ============ */
.clients{padding:88px 0;}
.clients .wrap{text-align:center;}
.clients .eyebrow{margin-bottom:28px; display:block;}
.client-marks{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.client-marks span{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:13px;
  background:var(--white); border:1px solid var(--border); border-radius:999px; padding:11px 18px; color:var(--text-soft);
  box-shadow:var(--shadow-sm);
}

/* ============ CONTACT ============ */
.contact{background:var(--ink-2); color:var(--white);}
.contact > .wrap > .eyebrow{color:var(--paper); text-align:center; display:block;}
.contact > .wrap > h2{color:var(--white); font-size:clamp(34px,4.6vw,58px); max-width:680px; margin:16px auto 0; text-align:center;}
.contact > .wrap > h2 em{font-style:normal; color:var(--paper);}
.contact > .wrap > .cta-center{display:flex; justify-content:center;}
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:64px; margin-top:56px;}
.contact form{display:flex; flex-direction:column; gap:16px;}
.field{background:rgba(255,255,255,0.06); border:1.5px solid var(--border-dark); border-radius:var(--r-md); padding:16px 18px; transition:border-color .18s var(--ease), background .18s var(--ease);}
.field:focus-within{border-color:var(--paper); background:rgba(255,255,255,0.1);}
.field label{font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-on-ink);}
.field input, .field textarea{width:100%; background:transparent; border:none; outline:none; color:var(--white); font-family:'Inter'; font-size:16px; padding-top:8px; resize:none;}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-on-ink);}
.contact .btn{margin-top:14px; border-color:var(--paper); background:var(--paper); color:var(--ink); align-self:flex-start; font-weight:700;}
.contact .btn:hover{background:var(--white); border-color:var(--white); color:var(--ink);}
.contact-side{display:flex; flex-direction:column; gap:32px;}
.contact-side .block{background:rgba(255,255,255,0.05); border:1px solid var(--border-dark); border-radius:var(--r-lg); padding:20px 22px;}
.contact-side .block span{display:block; font-family:'Inter', sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-on-ink); margin-bottom:10px;}
.contact-side .block a, .contact-side .block p{font-size:16.5px; color:var(--white);}
.contact-side .socials{display:flex; gap:10px; flex-wrap:wrap;}
.contact-side .socials a.social-icon{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--border-dark); border-radius:50%; color:var(--white);
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.contact-side .socials a.social-icon svg{width:17px; height:17px;}
.contact-side .socials a.social-icon:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);}

footer{background:var(--ink-2); color:var(--muted-on-ink); border-top:1px solid var(--border-dark); padding:28px 0; font-family:'Inter', sans-serif; font-size:11.5px; letter-spacing:.04em;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer a{color:var(--muted-on-ink); transition:color .18s var(--ease);}
footer a:hover{color:var(--white);}
.footer-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--white);
}
.footer-logo{height:16px; width:auto;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .22s var(--ease), transform .22s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width: 860px){
  .navlinks{position:fixed; inset:82px 0 0 0; background:var(--white); flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:40px 32px; gap:28px; transform:translateX(100%); transition:transform .4s var(--ease); border-top:1px solid var(--border);}
  .navlinks.open{transform:translateX(0);}
  .navtoggle{display:block; font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:13px; border:1.5px solid var(--accent); border-radius:var(--r-sm); padding:8px 16px; background:none; color:var(--ink);}
  .hero{padding-top:96px;} .page-header{padding-top:96px;}
  .hero h1{font-size:clamp(38px, 9.6vw, 53px);}
  .hero-chips{gap:18px 26px;}
  .hero-cta.solid{padding:10px 10px 10px 27px; font-size:16px;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .work-grid{grid-template-columns:1fr;} .work-card.feature{grid-column:span 1; aspect-ratio:4/3;}
  .service-row{grid-template-columns:1fr; gap:10px;} .service-tags{justify-content:flex-start;}
  .service-detail{grid-template-columns:1fr; gap:20px; padding:30px;}
  .process-grid{grid-template-columns:1fr 1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:1fr;}
  .timeline-row{grid-template-columns:1fr; gap:6px;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  #contactForm button[type="submit"]{width:100%; justify-content:center;}
  section{padding:80px 0;}
}

/* =========================================================
   NEW: architecture bonus features
   (dark mode, scroll progress, back-to-top, filters, testimonials)
   Added during config-driven refactor — does not alter the
   original visual design in its default (light) state.
   ========================================================= */

/* ---- dark mode: near-black base, white text — the muted green
   accent stays constant across both themes (set once via config-theme-vars) ---- */
html[data-theme="dark"]{
  --white:#0B1F17;
  --white-rgb:11,31,23;
  --paper:#161616;
  --ink:#FFFFFF;
  --ink-2:#FFFFFF;
  --text-soft:#B5B5B5;
  --border:#2A2A2A;
  --border-dark:rgba(255,255,255,0.14);
  --muted-on-ink:#6E6E6E;
}
html[data-theme="dark"] .marquee-strip,
html[data-theme="dark"] .brand-marquee-strip{background:#050505;}
html[data-theme="dark"] .cursor{background:var(--accent);}
html[data-theme="dark"] .work-overlay .cat{color:var(--ink-2);}

.theme-toggle{
  background:none; border:1.5px solid var(--border); border-radius:50%;
  width:36px; height:36px; cursor:pointer; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.theme-toggle:hover{border-color:var(--accent-2); transform:scale(1.06);}

/* ---- scroll progress bar ---- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--accent); z-index:10000; transition:width .1s linear;
}

/* ---- back to top button ---- */
#backToTop{
  position:fixed; right:24px; bottom:24px; z-index:9998;
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--accent); color:var(--on-accent); font-size:16px;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow:var(--shadow-md);
}
#backToTop.visible{opacity:1; pointer-events:auto; transform:translateY(0);}
#backToTop:hover{filter:brightness(1.1);}

/* ---- WhatsApp CTA — large, prominent, primary-CTA styled button.
   Keeps WhatsApp's own brand green for instant recognizability, with
   dark (onyx) text/icon rather than white — #25D366 is too bright for
   white text to clear WCAG AA at this size, dark text clears it easily. ---- */
.whatsapp-cta{
  position:fixed; left:24px; bottom:24px; z-index:9998;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px 15px 18px; border-radius:999px;
  background:#25D366; color:var(--on-accent);
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:14.5px;
  box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  animation:waPulse 2.4s ease-in-out infinite;
}
.whatsapp-cta svg{width:22px; height:22px; flex-shrink:0;}
.whatsapp-cta:hover{transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow-lg); background:#22C15E;}
@keyframes waPulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(37,211,102,0.35), var(--shadow-md);}
  50%{box-shadow:0 0 0 10px rgba(37,211,102,0), var(--shadow-md);}
}
@media (max-width: 860px){
  .whatsapp-cta{left:16px; bottom:16px; padding:13px 20px 13px 16px; font-size:13.5px;}
  .whatsapp-cta span{display:none;}
  .whatsapp-cta{padding:14px; border-radius:50%;}
  #backToTop{right:16px; bottom:16px;}
}

/* ---- FAQ accordion ---- */
.faq-list{max-width:720px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; margin:0 -4px; border-radius:var(--r-sm);
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Bricolage Grotesque', sans-serif; font-size:17px; font-weight:600; color:var(--ink);
  transition:background .18s var(--ease);
}
.faq-question:hover{background:var(--color-accent-light, #E7F2EC);}
.faq-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--accent-2);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg); background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .22s var(--ease);}
.faq-answer p{color:var(--text-soft); padding:0 4px 24px; max-width:600px;}

/* ---- project filter chips (work page) ---- */
#work-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.filter-chip{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:12.5px;
  border:1.5px solid var(--border); border-radius:999px; padding:8px 16px;
  background:none; color:var(--text-soft); cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.filter-chip:hover{border-color:var(--accent); color:var(--ink); background:var(--color-accent-light, #E7F2EC);}
.filter-chip.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}

/* ---- copy email button ---- */
.copy-btn{
  font-family:'Inter', sans-serif; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; background:none; border:1px solid var(--border-dark);
  color:var(--muted-on-ink); border-radius:999px; padding:4px 10px; margin-left:8px; cursor:pointer;
  transition:background .2s var(--ease);
}
.copy-btn:hover{background:rgba(255,255,255,0.1);}

/* ---- testimonials ---- */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testimonial-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-sm);
}
.testimonial-card img{width:40px; height:40px; border-radius:50%; margin-bottom:14px; object-fit:cover;}
.testimonial-card .avatar-fallback{
  width:40px; height:40px; border-radius:50%; margin-bottom:14px; display:flex; align-items:center;
  justify-content:center; background:var(--paper); font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700; font-size:14px; color:var(--accent);
}
.testimonial-card p{font-style:italic; margin-bottom:14px;}
.testimonial-card strong{display:block; font-family:'Bricolage Grotesque', sans-serif;}
.testimonial-card span{font-size:13px; color:var(--text-soft);}

/* every 4th card (4, 8, 12...) breaks visual monotony with an
   inverted accent-filled style instead of the plain white card */
.testimonial-card:nth-child(4n){
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.testimonial-card:nth-child(4n) p{color:var(--on-accent);}
.testimonial-card:nth-child(4n) strong{color:var(--on-accent);}
.testimonial-card:nth-child(4n) span{color:rgba(255,255,255,0.78);}
.testimonial-card:nth-child(4n) .avatar-fallback{background:rgba(255,255,255,0.16); color:var(--on-accent);}

@media (max-width: 860px){
  .testimonials-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Gradients, richer motion, staggered reveals, photo section.
   Uses only the brand palette (onyx / white / coral / denim / yellow).
   ========================================================= */

/* ---- staggered reveal for grid/list children ---- */
.work-grid .work-card:nth-child(1),
.service-list .service-row:nth-child(1),
.process-grid .process-step:nth-child(1),
.values-grid .value-card:nth-child(1),
.testimonials-grid .testimonial-card:nth-child(1),
.timeline .timeline-row:nth-child(1),
#services-detail-list .service-detail:nth-child(1){transition-delay:.02s;}
.work-grid .work-card:nth-child(2),
.service-list .service-row:nth-child(2),
.process-grid .process-step:nth-child(2),
.values-grid .value-card:nth-child(2),
.testimonials-grid .testimonial-card:nth-child(2),
.timeline .timeline-row:nth-child(2),
#services-detail-list .service-detail:nth-child(2){transition-delay:.09s;}
.work-grid .work-card:nth-child(3),
.service-list .service-row:nth-child(3),
.process-grid .process-step:nth-child(3),
.values-grid .value-card:nth-child(3),
.testimonials-grid .testimonial-card:nth-child(3),
.timeline .timeline-row:nth-child(3),
#services-detail-list .service-detail:nth-child(3){transition-delay:.16s;}
.work-grid .work-card:nth-child(4),
.service-list .service-row:nth-child(4),
.process-grid .process-step:nth-child(4),
#services-detail-list .service-detail:nth-child(4){transition-delay:.23s;}
.work-grid .work-card:nth-child(5){transition-delay:.30s;}
.work-grid .work-card:nth-child(6){transition-delay:.37s;}
.work-grid .work-card:nth-child(7){transition-delay:.44s;}

/* ---- gradient buttons with a soft shine sweep on hover ---- */
.btn.solid{
  background:linear-gradient(135deg, var(--accent) 0%, #155C39 55%, var(--accent) 100%);
  position:relative; overflow:hidden;
}
.btn.solid::before{
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transition:translate .4s var(--ease);
}
.btn.solid:hover::before{translate:120% 0;}
.btn.solid:hover{background:linear-gradient(135deg, var(--ink-2) 0%, var(--accent) 60%, var(--ink-2) 100%);}

.navlinks a.cta{position:relative; overflow:hidden; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);}
.navlinks a.cta:hover{background:linear-gradient(135deg, var(--accent), #155C39); border-color:var(--accent); transform:translateY(-1px);}

/* ---- gradient headline accent word ---- */
.hero h1 em{
  background:linear-gradient(100deg, var(--accent) 20%, #4CAE82 50%, var(--accent) 80%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shineText 1.4s linear infinite;
}
@keyframes shineText{
  0%{background-position:0% center;}
  100%{background-position:200% center;}
}

/* ---- hero heading entrance — more prominent + snappier than the
   generic page fade-in every other element uses ---- */
.hero h1{animation:heroHeadingIn .55s cubic-bezier(.17,.84,.44,1) both;}
@keyframes heroHeadingIn{
  0%{opacity:0; transform:translateY(26px) scale(.97);}
  60%{opacity:1;}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* ---- hero blob removed per brand refresh: replaced with the faint
   4%-opacity radial glow set directly on .hero's background above ---- */
.hero{--parallax-y:0px;}
.hero .wrap{position:relative; z-index:1;}

/* ---- gradient glow on card hover (adds to existing shadow, doesn't replace card design) ---- */
.work-card:hover{
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(30,122,76,0.15), 0 18px 40px -18px rgba(30,122,76,0.35);
}
.service-detail, .value-card, .testimonial-card{transition:transform .22s var(--ease), box-shadow .22s var(--ease);}
.service-detail:hover, .value-card:hover, .testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md), 0 14px 30px -16px rgba(30,122,76,0.3);
}

/* ---- animated underline sweep for nav links (denim — secondary/link accent) ---- */
.navlinks > a:not(.cta){position:relative;}
.navlinks > a:not(.cta)::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:0;
  background:linear-gradient(90deg, var(--accent-2), #9DB6D3);
  transition:width .2s var(--ease);
}
.navlinks > a:not(.cta):hover::after,
.navlinks > a.active::after{width:100%;}

/* ---- section-alt subtle gradient wash (uses existing paper/white only) ---- */
.section-alt{
  background:linear-gradient(180deg, var(--paper) 0%, var(--white) 100%), var(--paper);
  background-blend-mode:normal;
}

/* ---- homepage "person behind the brand" split section ----
   Dark section (--ink-2 / color-dark), large-format portrait left,
   copy + stat chips + social row right. Portrait gets a duotone/B&W
   treatment via CSS filter so it reads intentional even before a
   real photo is dropped in. ---- */
.person-section{background:var(--ink-2); color:var(--white);}
.photo-about{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
}
.photo-about .photo-wrap{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/5; min-height:500px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow:var(--shadow-lg);
}
.photo-about .photo-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(100%) contrast(1.08) brightness(0.96);
  transition:transform .22s var(--ease);
}
.photo-about .photo-wrap:hover img{transform:scale(1.04);}
.photo-about .photo-wrap::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
}
.photo-about .photo-placeholder{
  display:flex; align-items:center; justify-content:center; height:100%; width:100%;
  font-family:'Inter', sans-serif; font-size:12px; color:var(--muted-on-ink); text-align:center; padding:32px;
}
.photo-about h2{font-size:clamp(28px,3.2vw,40px); margin-bottom:16px; color:var(--white);}
.photo-about p{color:var(--muted-on-ink); margin-bottom:16px; max-width:480px;}
.photo-about .eyebrow{color:var(--muted-on-ink);}

/* single-row stat chips (moved out of the light about-teaser block) */
.photo-about .stat-row{
  display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 32px; grid-template-columns:none;
}
.photo-about .stat-row div{
  background:rgba(255,255,255,0.06); border:1px solid var(--border-dark); border-radius:var(--r-md);
  padding:14px 18px; box-shadow:none; flex:1 1 auto; min-width:110px;
}
.photo-about .stat-row div strong{color:var(--white); font-size:24px;}
.photo-about .stat-row div span{color:var(--muted-on-ink);}

/* social pill row */
.photo-about .socials-row{display:flex; flex-wrap:wrap; gap:10px;}
.photo-about .socials-row a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid var(--border-dark);
  color:var(--white); font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:13px;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.photo-about .socials-row a svg{width:15px; height:15px;}
.photo-about .socials-row a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);}

@media (max-width: 860px){
  .photo-about{grid-template-columns:1fr; gap:32px;}
  .photo-about .photo-wrap{min-height:340px;}
}