/* Resume Match 001
   Visual system derived from the supplied resume:
   white document surface, deep green rail, IRANYekan typography,
   compact headings, muted sage rules, restrained borders and shadows. */

:root {
  --yellow: #8ea199;
  --yellow-deep: #536a62;
  --ink: #505b58;
  --ink-strong: #1d2523;
  --muted: #707a77;
  --line: #d9e0dd;
  --tone-a: #ffffff;
  --tone-b: #f6f8f7;
  --white: #ffffff;
  --text-soft: #65706d;
  --text-role: #65706d;
  --text-muted: #707a77;
  --text-faint: #8b9692;
  --text-body: #505b58;
  --text-link: #536a62;
  --text-date: #707a77;
  --heading-alt: #1d2523;
  --role-alt: #65706d;
  --timeline-text: #505b58;
  --track: #e3e8e6;
  --timeline-line: #d9e0dd;
  --client: #7b8784;
  --copyright: #a2b3ad;
  --quick-bg: rgb(255 255 255 / 94%);
  --quick-color: #536a62;
  --quick-shadow: 0 8px 24px rgb(36 53 50 / 10%);
  --button-border: #cfd8d5;
  --button-dark: #243532;
  --field-bg: #ffffff;
  --field-border: #d5ddda;
  --field-text: #34413e;
  --field-placeholder: #9ba5a1;
  --form-shadow: 0 14px 42px rgb(36 53 50 / 7%);
  --max: 1240px;
  --resume-green: #243532;
  --resume-green-2: #1d2b28;
  --resume-sage: #a2b3ad;
}

html[data-theme="dark"] {
  --yellow: #a2b3ad;
  --yellow-deep: #c7cfcc;
  --ink: #c7cfcc;
  --ink-strong: #f1f3f2;
  --muted: #aeb9b5;
  --line: #354741;
  --tone-a: #14201d;
  --tone-b: #192824;
  --text-soft: #c7cfcc;
  --text-role: #aeb9b5;
  --text-muted: #aeb9b5;
  --text-faint: #8fa09a;
  --text-body: #c0cac6;
  --text-link: #d8dfdc;
  --text-date: #95a59f;
  --heading-alt: #f1f3f2;
  --role-alt: #aeb9b5;
  --timeline-text: #b9c4c0;
  --track: #31423d;
  --timeline-line: #3c4e48;
  --client: #91a19b;
  --copyright: #7f918a;
  --button-border: #40534c;
  --button-dark: #a2b3ad;
  --field-bg: #17231f;
  --field-border: #3b4d47;
  --field-text: #edf0ef;
  --field-placeholder: #81918b;
  --form-shadow: 0 16px 48px rgb(0 0 0 / 24%);
}

body,
html[lang="en"] body,
html[lang="fa"] body {
  font-family: IRANYekan, Tahoma, Arial, sans-serif;
  color: var(--text-body);
  background: var(--tone-a);
  letter-spacing: 0;
}

/* Header */
.site-header {
  min-height: 72px;
  border-bottom-color: var(--line);
}
.site-brand > span {
  color: #fff;
  background: var(--resume-green);
  border-radius: 9px;
  box-shadow: none;
}
.site-brand strong { color: var(--ink-strong); }
.site-brand small { color: var(--text-faint); }
.site-links a { color: var(--text-soft); }
.site-links a:hover { color: var(--resume-green); }
.site-nav-actions a,
.site-nav-actions button,
.site-nav-actions .site-utility-group .site-util-btn {
  border-color: var(--button-border) !important;
  color: var(--text-soft) !important;
  background: var(--field-bg) !important;
  box-shadow: none !important;
}
.site-nav-actions .site-utility-group .site-util-btn:hover {
  color: #fff !important;
  border-color: var(--resume-green) !important;
  background: var(--resume-green) !important;
}
.site-nav-actions .nav-cta {
  color: #fff !important;
  border-color: var(--resume-green) !important;
  background: var(--resume-green) !important;
  box-shadow: none;
}

/* Homepage hero: resume-like white document + dark green side rail. */
.hero,
html[dir="ltr"] .hero {
  background: var(--tone-a);
}
.hero-shell {
  min-height: min(100svh, 920px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 33%);
  background: var(--tone-a);
}
.hero-aside {
  background: var(--resume-green);
  padding: 58px 34px;
}
.portrait {
  width: min(230px, 76%);
  background: #4b5c57;
  border: 6px solid rgb(162 179 173 / 20%);
  box-shadow: none;
}
.portrait-photo {
  filter: none;
  transform: scale(1.015);
}
.portrait--photo:hover .portrait-photo {
  filter: none;
  transform: scale(1.035);
}
.portrait-ring {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgb(241 243 242 / 20%);
}
.hero-content {
  padding: clamp(64px, 7vw, 92px) clamp(44px, 7vw, 84px);
  background: var(--tone-a);
}
.identity {
  margin: auto 0 72px;
}
.identity h1 {
  display: block;
  color: var(--ink-strong);
  font-size: clamp(42px, 5.3vw, 66px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.identity h1 .first-name,
.identity h1 .last-name {
  display: inline;
  margin: 0;
  color: var(--ink-strong);
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
  letter-spacing: inherit;
}
html[dir="ltr"] .identity h1 .first-name::after { content: " "; }
html[dir="rtl"] .identity h1 .first-name::after { content: " "; }
.hero-role {
  margin-top: 13px;
  color: var(--text-role);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 400;
}
.hero-meta {
  gap: 22px;
  padding-top: 28px;
  border-top-color: var(--line);
}
.hero-meta strong,
.footer-meta strong {
  color: var(--ink-strong);
  font-size: 11px;
  font-weight: 800;
}
.hero-meta span,
.footer-meta span,
.footer-meta a {
  color: var(--text-muted);
  font-size: 11px;
}

/* Resume sections: restrained vertical document rhythm. */
.resume-section.tone-a { background: var(--tone-a); }
.resume-section.tone-b { background: var(--tone-b); }
.section-shell,
.compact-shell {
  width: min(calc(100% - 48px), 1100px);
  padding: 64px 0;
  display: block;
}
.section-title {
  margin: 0 0 32px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--line);
}
.section-title::after {
  content: "";
  width: 70px;
  height: 2px;
  display: block;
  margin-top: 12px;
  background: var(--yellow);
}
.section-title h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
html[lang="en"] .section-title h2 {
  text-transform: uppercase;
  letter-spacing: .01em;
}
.section-title p {
  max-width: 560px;
  margin: 5px 0 0;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.7;
}
.intro-copy {
  max-width: 820px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.85;
}
.intro-copy p { margin: 0 0 12px; }

.expertise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}
.expertise-item {
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.expertise-item > span {
  color: var(--yellow-deep);
  font-family: IRANYekan, Arial, sans-serif;
}
.expertise-item h3 { color: var(--ink-strong); font-size: 14px; }
.expertise-item p { color: var(--text-muted); font-size: 11px; line-height: 1.8; }

.skills-grid { gap: 30px 54px; }
.skill h3 { font-family: IRANYekan, Arial, sans-serif; color: var(--ink-strong); }
.skill-head span { color: var(--yellow-deep); font-family: IRANYekan, Arial, sans-serif; }
.skill-track { height: 3px; }
.skill-track span { background: var(--yellow); }

/* Work experience and education: no decorative timeline, closer to resume entries. */
.timeline::before { display: none; }
.timeline-item {
  grid-template-columns: minmax(230px, .78fr) minmax(0, 1.4fr);
  gap: 32px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
}
.timeline-item + .timeline-item { margin-top: 26px; }
.timeline-marker { display: none; }
.timeline-meta { grid-column: 1; }
.timeline-item > p { grid-column: 2; color: var(--text-body); font-size: 11px; line-height: 1.85; }
.timeline-item > p:empty { display: none; }
.timeline-meta time {
  margin-bottom: 5px;
  color: var(--text-date);
  font-family: IRANYekan, Arial, sans-serif;
  font-size: 10.5px;
}
.timeline-meta h3 { color: var(--ink-strong); font-size: 15px; }
.timeline-meta h4 { color: var(--text-soft); font-size: 11px; font-weight: 500; }

.language-grid { gap: 18px; }
.language {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.language > strong {
  color: var(--yellow-deep);
  font-family: IRANYekan, Arial, sans-serif;
  font-size: 22px;
}
.language h3 { color: var(--ink-strong); }

.value-grid { gap: 28px; }
.value {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.value i { width: 52px; height: 2px; background: var(--yellow); }
.value h3 { color: var(--ink-strong); }
.value p { color: var(--text-muted); }

/* Portfolio directory: image-on-top cards, like the PDF directory pages. */
.portfolio-shell { padding-block: 64px 76px; }
.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.project-card {
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--field-bg);
  box-shadow: none !important;
}
.project-card-link {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.project-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.58 / 1;
  position: relative;
  inset: auto;
  object-fit: cover;
  object-position: center 16%;
  filter: none;
  transform: none;
  border-bottom: 1px solid var(--line);
}
.project-card:hover .project-card-image {
  filter: none;
  transform: scale(1.012);
}
.project-overlay {
  position: relative;
  inset: auto;
  padding: 18px 20px 21px;
  display: block;
  color: var(--text-body);
  background: var(--field-bg);
}
.project-card:hover .project-overlay { background: var(--field-bg); }
.project-overlay > span,
.project-card--next span {
  color: var(--text-date);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}
.project-overlay h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 16px;
}
.project-overlay p {
  max-width: none;
  margin: 6px 0 0;
  color: var(--text-body);
  font-size: 10.5px;
  line-height: 1.75;
}
.project-card--next {
  min-height: 220px;
  border-color: var(--resume-green);
  color: #f1f3f2;
  background: var(--resume-green);
}
.project-card--next span { color: var(--resume-sage); }
.project-card--next h3 { color: #fff; }
.project-card--next p { color: #d7dfdc; }

/* Generic content pages */
.content-page { background: var(--tone-a); }
.content-hero,
.case-hero {
  padding-top: 58px;
  padding-bottom: 70px;
  border-bottom-color: var(--line);
  background: var(--tone-a);
}
.content-eyebrow,
.footer-kicker {
  color: var(--yellow-deep);
  letter-spacing: .12em;
}
.content-eyebrow::before { background: var(--yellow); }
.content-hero h1,
.case-hero h1 {
  margin-top: 12px;
  color: var(--ink-strong);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.content-hero-copy > p,
.case-hero-copy > p {
  color: var(--text-body);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.75;
}
.content-section { padding: 70px 0; }

.work-card,
.case-scope,
.service-intro-card,
.service-deliverables li {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--field-bg);
  box-shadow: none;
}
.work-card-copy > span,
.case-story article > span { color: var(--yellow-deep); }
.work-card h2,
.case-story h2,
.case-scope h2,
.service-deliverables h2,
.related-work h2,
.about-grid h2 { color: var(--ink-strong); }
.work-card p,
.case-story p { color: var(--text-body); }
.case-visual img,
.about-hero-grid > img {
  border-radius: 12px;
  box-shadow: 0 12px 38px rgb(36 53 50 / 10%);
}
.tag-list span,
.about-contact a,
.hero-buttons a {
  border-color: var(--line);
  border-radius: 999px;
  background: var(--field-bg);
}
.hero-buttons a:first-child {
  color: #fff;
  border-color: var(--resume-green);
  background: var(--resume-green);
}
.case-hero-copy .archive-note { border-inline-start-color: var(--yellow); }

/* Forms/calculators: reduce visual noise and use resume green for primary panels. */
.estimator-card,
.consultation-card,
.request-layout {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: var(--form-shadow);
}
.estimator-heading > span,
.consultation-heading > span {
  color: #fff;
  background: var(--resume-green);
  border-radius: 8px;
}
.estimator-projects button.is-selected,
.estimator-designs button.is-selected,
.consultation-days button.is-selected,
.consultation-times button.is-selected {
  color: #fff;
  border-color: var(--resume-green);
  background: var(--resume-green);
  box-shadow: none;
}
.estimator-projects .is-selected small,
.estimator-designs .is-selected small,
.consultation-days .is-selected span { color: #c7cfcc; }
.estimate-apply,
.request-actions .request-submit,
.consultation-actions button[type="submit"] {
  color: #fff !important;
  border-color: var(--resume-green) !important;
  background: var(--resume-green) !important;
}
.request-intro {
  color: #f1f3f2;
  background: var(--resume-green);
}
.request-intro h3,
.request-intro li span { color: #fff; }
.request-intro > p,
.request-intro li b,
.request-kicker { color: #c7cfcc; }
.request-intro li { border-color: rgb(241 243 242 / 15%); }

/* Footer as a deliberate echo of the resume's dark right rail. */
.footer { background: var(--resume-green); }
.footer .footer-meta { border-bottom-color: rgb(241 243 242 / 18%); }
.footer .footer-meta strong,
.footer .footer-brand h2 { color: #fff; }
.footer .footer-meta span,
.footer .footer-meta a,
.footer .footer-brand > p { color: #c7cfcc; }
.footer .footer-meta .available { color: #d7dfdc; }
.footer .footer-meta .available::before { background: var(--resume-sage); }
.footer-actions button,
.footer-actions a {
  color: var(--resume-green);
  border-color: #fff;
  background: #fff;
}
.footer-actions .button-light {
  color: #f1f3f2;
  border-color: rgb(241 243 242 / 40%);
  background: transparent;
}
.footer-actions button:hover,
.footer-actions a:hover {
  color: #fff;
  border-color: var(--resume-sage);
  background: transparent;
}
.copyright {
  color: #a2b3ad;
  background: var(--resume-green);
}

/* First-visit guide follows the same palette. */
.site-tour-icon,
.site-tour-next {
  color: #fff;
  border-color: var(--resume-green);
  background: var(--resume-green);
}
.site-tour-ring { border-color: var(--resume-sage); box-shadow: 0 0 0 5px rgb(162 179 173 / 16%); }

@media (max-width: 1000px) {
  .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(270px, 32%); }
  .hero-content { padding-inline: 48px; }
}

@media (max-width: 800px) {
  .hero-shell { display: flex; }
  .hero-aside {
    min-height: 330px;
    padding: 62px 24px 34px;
    background: var(--resume-green);
  }
  .portrait { width: 205px; }
  .hero-content {
    min-height: 0;
    padding: 48px 28px 44px;
    text-align: left;
  }
  html[dir="rtl"] .hero-content { text-align: right; }
  .identity { margin: 0 0 48px; }
  .section-shell,
  .compact-shell { width: min(calc(100% - 42px), 1100px); padding: 52px 0; }
  .timeline-item { grid-template-columns: 1fr; gap: 10px; }
  .timeline-meta,
  .timeline-item > p { grid-column: 1; }
  .project-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .identity h1 { font-size: clamp(38px, 12vw, 52px); }
  .hero-role { font-size: 15px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta div { display: block; }
  .hero-meta strong { display: block; margin-bottom: 2px; }
  .expertise-grid,
  .skills-grid,
  .language-grid,
  .value-grid,
  .project-grid { grid-template-columns: 1fr; }
  .project-card-image { aspect-ratio: 1.48 / 1; }
  .content-hero h1,
  .case-hero h1 { font-size: clamp(34px, 11vw, 52px); }
}