/* ==========================================================================
   Faris Azam Shaikh — personal site
   Tokens
   ========================================================================== */
:root{
  --ink:#10151F;
  --ink-soft:#2B3140;
  --paper:#EFEEE5;
  --paper-deep:#E7E3D6;
  --paper-light:#F8F7F2;
  --brass:#9C7A33;
  --brass-light:#C7A967;
  --slate:#33475B;
  --line:#D7D2C2;
  --line-dark:rgba(239,238,229,0.16);
  --text-muted:rgba(16,21,31,0.62);
  --text-muted-inv:rgba(239,238,229,0.64);

  --font-display:'Spectral', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --max:1240px;
  --gutter:clamp(24px, 6vw, 96px);
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

section{padding:clamp(64px,10vw,140px) var(--gutter);max-width:var(--max);margin:0 auto;}

::selection{background:var(--brass);color:var(--paper-light);}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   Shared type utilities
   ========================================================================== */
.section-label{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.02em;
  color:var(--brass);
  margin:0 0 14px;
}
.section-heading{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.15;
  max-width:16ch;
  margin-bottom:clamp(36px,5vw,64px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:500;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper-light);
}
.btn-primary:hover{background:var(--slate);}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-ghost:hover{
  background:var(--ink);
  color:var(--paper-light);
}

/* ==========================================================================
   Floating navigation
   ========================================================================== */
.nav-trigger{
  position:fixed;
  top:24px;
  right:28px;
  z-index:60;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid var(--ink);
  background:var(--paper-light);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px;
  transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-trigger-mark{
  width:100%;
  height:100%;
  object-fit:contain;
}
.nav-trigger:hover{
  border-color:var(--brass);
  transform:scale(1.06);
  box-shadow:0 2px 14px rgba(16,21,31,0.14);
}

.nav-overlay{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--ink);
  color:var(--paper-light);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--gutter);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.nav-overlay.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-close{
  position:absolute;
  top:28px;
  right:28px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  background:transparent;
  color:var(--paper-light);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color 0.25s ease;
}
.nav-close:hover{border-color:var(--brass-light);}

.nav-list{
  max-width:var(--max);
  margin:0 auto;
  width:100%;
}
.nav-list li{border-top:1px solid var(--line-dark);}
.nav-list li:last-child{border-bottom:1px solid var(--line-dark);}
.nav-link{
  display:flex;
  align-items:baseline;
  gap:20px;
  padding:18px 4px;
  font-family:var(--font-display);
  font-size:clamp(26px,4.2vw,44px);
  text-decoration:none;
  color:var(--paper-light);
  transition:color 0.25s ease, padding-left 0.25s ease;
}
.nav-link::before{
  content:attr(data-index);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted-inv);
}
.nav-link:hover{color:var(--brass-light);padding-left:14px;}

.nav-footer{
  max-width:var(--max);
  margin:36px auto 0;
  width:100%;
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted-inv);
}
.nav-footer a{text-decoration:none;}
.nav-footer a:hover{color:var(--brass-light);}

/* Back to top */
.back-to-top{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:50;
  width:44px;
  height:44px;
  border:1px solid var(--ink);
  background:var(--paper-light);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--ink);color:var(--paper-light);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  padding-bottom:60px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.25fr 0.9fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
.hero-mark-wrap{
  width:fit-content;
}
.hero-mark{
  display:block;
  width:clamp(52px,5.5vw,76px);
  height:auto;
  margin:0 auto 38px;
  opacity:0;
  animation:riseIn 0.7s ease 0s forwards;
}
.hero-kicker{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--brass);
  margin-bottom:22px;
  opacity:0;
  animation:riseIn 0.7s ease 0.1s forwards;
}
.hero-name{
  font-size:clamp(44px,6.8vw,84px);
  line-height:0.98;
  letter-spacing:-0.01em;
  margin-bottom:22px;
  opacity:0;
  animation:riseIn 0.8s ease 0.22s forwards;
}
.hero-role{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(19px,2.1vw,24px);
  color:var(--slate);
  max-width:34ch;
  margin-bottom:24px;
  opacity:0;
  animation:riseIn 0.8s ease 0.34s forwards;
}
.hero-lede{
  max-width:46ch;
  color:var(--text-muted);
  font-size:16.5px;
  margin-bottom:36px;
  opacity:0;
  animation:riseIn 0.8s ease 0.46s forwards;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  opacity:0;
  animation:riseIn 0.8s ease 0.58s forwards;
}

@keyframes riseIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.hero-photo{
  opacity:0;
  animation:riseIn 0.9s ease 0.4s forwards;
}
.hero-photo-frame{
  border:1px solid var(--ink);
  padding:10px;
  background:var(--paper-light);
}
.hero-photo-frame img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(14%) contrast(1.03);
}
.hero-photo-caption{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
  margin-top:14px;
  line-height:1.5;
}

.hero-scroll-cue{
  display:flex;
  justify-content:center;
  margin-top:40px;
}
.hero-scroll-cue span{
  width:1px;
  height:44px;
  background:linear-gradient(var(--brass), transparent);
  display:block;
}

/* ==========================================================================
   Executive summary
   ========================================================================== */
.summary{
  border-top:1px solid var(--line);
}
.summary-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(32px,6vw,80px);
}
.summary-statement{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,32px);
  line-height:1.3;
}
.summary-body p{
  color:var(--text-muted);
  max-width:60ch;
  margin-bottom:18px;
}
.summary-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.fact{display:flex;flex-direction:column;gap:6px;}
.fact-figure{
  font-family:var(--font-mono);
  font-size:clamp(26px,3vw,34px);
  color:var(--brass);
}
.fact-label{
  font-size:13.5px;
  color:var(--text-muted);
  max-width:18ch;
}

/* ==========================================================================
   Journey / timeline
   ========================================================================== */
.journey{border-top:1px solid var(--line);}
.timeline-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:clamp(20px,4vw,56px);
  padding:32px 0;
  border-top:1px solid var(--line);
}
.timeline-row:last-child{border-bottom:1px solid var(--line);}
.timeline-year{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  line-height:1.6;
}
.timeline-year span{
  font-size:11px;
  color:var(--text-muted);
  margin:2px 0;
}
.timeline-row-present .timeline-year{color:var(--brass);}
.timeline-content h3{
  font-size:clamp(20px,2.2vw,26px);
  margin-bottom:4px;
}
.timeline-title{
  font-size:14px;
  color:var(--slate);
  margin-bottom:12px;
  font-weight:500;
}
.timeline-content p:not(.timeline-title):not(.timeline-cert){
  max-width:60ch;
  color:var(--text-muted);
  margin-bottom:10px;
}
.timeline-cert{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--brass);
  margin-top:8px;
}

/* ==========================================================================
   What I do
   ========================================================================== */
.capabilities{border-top:1px solid var(--line);}
.capability-row{
  display:grid;
  grid-template-columns:0.7fr 1.3fr;
  gap:clamp(16px,4vw,56px);
  padding:26px 0;
  border-top:1px solid var(--line);
  transition:padding-left 0.3s ease;
}
.capability-row:last-child{border-bottom:1px solid var(--line);}
.capability-row:hover{padding-left:12px;}
.capability-row h3{font-size:20px;}
.capability-row p{color:var(--text-muted);max-width:56ch;}

/* ==========================================================================
   Achievements
   ========================================================================== */
.achievements{border-top:1px solid var(--line);}
.case-study{
  padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--line);
}
.case-study:last-child{border-bottom:1px solid var(--line);}
.case-study-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.case-study-header h3{font-size:clamp(22px,2.6vw,28px);}
.case-study-org{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--brass);
}
.case-study-body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
}
.case-label{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.case-col p, .case-col li{
  color:var(--ink-soft);
  font-size:15px;
}
.case-col ul li{
  padding-left:16px;
  position:relative;
  margin-bottom:8px;
}
.case-col ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:5px;
  height:1px;
  background:var(--brass);
}
.case-stat{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
}
.case-stat span{
  font-size:36px;
  color:var(--brass);
  line-height:1.1;
}
.case-outcome-text{color:var(--ink-soft) !important;}

/* ==========================================================================
   Core competencies
   ========================================================================== */
.competencies{border-top:1px solid var(--line);}
.matrix{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.matrix-group{
  padding:28px 24px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.matrix-group h3{
  font-size:15px;
  font-family:var(--font-mono);
  font-weight:500;
  color:var(--brass);
  margin-bottom:18px;
}
.matrix-group li{
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:14.5px;
}
.matrix-group li:first-child{border-top:none;}
.credentials-note{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.9;
}

/* ==========================================================================
   Philosophy
   ========================================================================== */
.philosophy{
  border-top:1px solid var(--line);
  background:var(--ink);
  color:var(--paper-light);
  max-width:none;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.philosophy .section-label{color:var(--brass-light);}
.philosophy-list{
  max-width:var(--max);
  margin:0 auto;
}
.philosophy-item{
  padding:36px 0;
  border-top:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(16px,4vw,56px);
}
.philosophy-list .philosophy-item:last-child{border-bottom:1px solid var(--line-dark);}
.philosophy-item-alt{grid-template-columns:1.4fr 1fr;}
.philosophy-item-alt h3{order:2;}
.philosophy-item h3{
  font-size:clamp(22px,2.4vw,28px);
}
.philosophy-item p{
  color:var(--text-muted-inv);
  max-width:52ch;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{border-top:1px solid var(--line);}
.testimonials-empty{
  border:1px dashed var(--line);
  padding:clamp(36px,5vw,64px);
  text-align:center;
}
.testimonials-empty p{
  max-width:52ch;
  margin:0 auto 28px;
  color:var(--text-muted);
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:24px;
}
.testimonial-card{
  border:1px solid var(--line);
  padding:28px;
}
.testimonial-card p{color:var(--ink-soft);margin-bottom:16px;}
.testimonial-card .who{font-family:var(--font-mono);font-size:12.5px;color:var(--brass);}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{border-top:1px solid var(--line);}
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(32px,6vw,80px);
}
.contact-copy p{color:var(--text-muted);max-width:44ch;margin:18px 0 32px;}
.contact-details{display:flex;flex-direction:column;gap:10px;font-family:var(--font-mono);font-size:14px;}
.contact-details a{text-decoration:none;}
.contact-details a:hover{color:var(--brass);}

.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:13px;font-family:var(--font-mono);color:var(--text-muted);}
.form-row input,.form-row textarea{
  font-family:var(--font-body);
  font-size:15px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--paper-light);
  color:var(--ink);
  border-radius:var(--radius);
  resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--brass);outline:none;}
.contact-form .h-captcha{margin-top:-4px;}
.contact-form .btn{align-self:flex-start;margin-top:6px;}
.form-status{font-size:13.5px;color:var(--slate);min-height:1em;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  max-width:var(--max);
  margin:0 auto;
  padding:32px var(--gutter) 60px;
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
  border-top:1px solid var(--line);
}

/* ==========================================================================
   Cookie consent
   ========================================================================== */
.footer-link{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:color 0.25s ease;
}
.footer-link:hover{color:var(--brass);}
/* keep the footer's right edge clear of the fixed back to top arrow */
@media (min-width:901px) and (max-width:1400px){
  .site-footer{padding-right:calc(var(--gutter) + 56px);}
}

.consent{
  position:fixed;
  left:28px;
  bottom:28px;
  z-index:65;
  width:min(420px, calc(100vw - 56px));
  padding:22px 24px 24px;
  background:var(--ink);
  color:var(--paper-light);
  border:1px solid var(--line-dark);
  display:none;
}
.consent.is-open{
  display:block;
  animation:consentIn 0.5s cubic-bezier(0.16,0.8,0.24,1) both;
}
@keyframes consentIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.consent-title{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.25;
  margin-bottom:6px;
}
.consent-text{
  font-size:14px;
  line-height:1.55;
  color:var(--text-muted-inv);
  max-width:46ch;
  margin-bottom:18px;
}
.consent-actions{display:flex;gap:10px;}
.consent-btn{flex:1;padding:12px 16px;}
.consent-accept{
  background:var(--paper-light);
  color:var(--ink);
  border-color:var(--paper-light);
}
.consent-accept:hover{background:var(--brass-light);border-color:var(--brass-light);}
.consent-decline{
  background:transparent;
  color:var(--paper-light);
  border-color:rgba(239,238,229,0.5);
}
.consent-decline:hover{background:transparent;border-color:var(--paper-light);}
.consent :focus-visible{outline-color:var(--brass-light);}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s;
}
.modal.is-open{opacity:1;visibility:visible;}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(16,21,31,0.72);
}
.modal-panel{
  position:relative;
  background:var(--paper-light);
  padding:clamp(28px,5vw,48px);
  max-width:520px;
  width:100%;
  border:1px solid var(--ink);
  transform:translateY(10px);
  transition:transform 0.3s ease;
}
.modal.is-open .modal-panel{transform:translateY(0);}
.modal-panel h3{font-size:24px;margin-bottom:8px;}
.modal-note{color:var(--text-muted);font-size:14px;margin-bottom:24px;}
.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover{border-color:var(--brass);color:var(--brass);}
#testimonialForm{display:flex;flex-direction:column;gap:16px;}
#testimonialForm .h-captcha{margin-top:-6px;}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.8s cubic-bezier(0.16,0.8,0.24,1), transform 0.8s cubic-bezier(0.16,0.8,0.24,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.section-heading.reveal{transition-delay:0.08s;}

.matrix-group.reveal:nth-child(1){transition-delay:0s;}
.matrix-group.reveal:nth-child(2){transition-delay:0.09s;}
.matrix-group.reveal:nth-child(3){transition-delay:0.18s;}
.matrix-group.reveal:nth-child(4){transition-delay:0.27s;}

.philosophy-item.reveal:nth-child(2){transition-delay:0.06s;}
.philosophy-item.reveal:nth-child(3){transition-delay:0.06s;}
.philosophy-item.reveal:nth-child(4){transition-delay:0.06s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1;max-width:320px;}
  .summary-grid,.contact-grid{grid-template-columns:1fr;}
  .summary-facts{grid-template-columns:1fr 1fr;}
  .timeline-row,.capability-row{grid-template-columns:1fr;}
  .timeline-year{flex-direction:row;gap:8px;}
  .case-study-body{grid-template-columns:1fr;}
  .matrix{grid-template-columns:1fr 1fr;}
  .philosophy-item,.philosophy-item-alt{grid-template-columns:1fr;}
  .philosophy-item-alt h3{order:0;}
  .testimonial-grid{grid-template-columns:1fr;}
  .site-footer{flex-direction:column;gap:6px;}
  .site-footer .footer-link{align-self:flex-start;}
}
@media (max-width:560px){
  .matrix{grid-template-columns:1fr;}
  .nav-trigger,.nav-close{width:46px;height:46px;}
  .nav-trigger{padding:11px;}
  .back-to-top{width:40px;height:40px;}
  .consent{left:16px;right:16px;bottom:16px;width:auto;}
  body.consent-open .back-to-top{opacity:0;visibility:hidden;}
}