/* =========================================================================
   Yazan Management Consultancy — Direction A Design System
   Matches prototype typography, colors, layouts, spacing, and micro-interactions.
   Self-hosted fonts: Newsreader & Public Sans.
   Breakpoints: desktop >=1024px · tablet 640–1023px · mobile <640px · narrow phone <=480px
   ========================================================================= */

:root {
  /* Colour Palette */
  --yz-navy: #0F172A;          /* headings, primary buttons, dark sections */
  --yz-navy-2: #1E293B;        /* primary button hover, dark surface */
  --yz-text: #334155;          /* body copy — 10.4:1 on white */
  --yz-muted: #475569;         /* secondary text, meta — 7.6:1 on white, 6.9:1 on warm */
  --yz-gold: #FECD06;          /* accent: rules, markers, buttons on navy */
  --yz-gold-hover: #E6B800;
  --yz-gold-soft: #FFF7D6;     /* "The Lesson" callout ground */
  --yz-white: #FFFFFF;
  --yz-warm: #F6F5F2;          /* alternate section ground */
  --yz-warm-2: #EFEDE7;        /* portrait ground, hover tint */
  --yz-line: #E3E0D9;          /* hairlines on white/warm */
  --yz-on-dark: #CBD5E1;       /* body text on navy — 12.0:1 */
  --yz-on-dark-muted: #94A3B8; /* meta text on navy — 6.9:1 */
  --yz-line-dark: #26324A;
  --yz-error: #B42318;         /* 6.6:1 on white */
  --yz-success: #0B6B47;       /* 6.6:1 on white */

  /* Typography */
  --yz-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --yz-sans: 'Public Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --yz-fs-display: clamp(42px, 5.2vw, 76px);
  --yz-fs-h1: clamp(36px, 4.6vw, 65px);
  --yz-fs-h2: clamp(28px, 3.1vw, 42px);
  --yz-fs-h3: clamp(20px, 1.8vw, 26px);
  --yz-fs-h4: 20px;
  --yz-fs-lead: clamp(18px, 1.45vw, 20px);
  --yz-fs-body: 18px;
  --yz-fs-small: 16px;
  --yz-fs-meta: 15px;
  --yz-fs-eyebrow: 13px;

  /* Space (8px base) */
  --yz-s1: 4px; --yz-s2: 8px; --yz-s3: 12px; --yz-s4: 16px; --yz-s5: 24px;
  --yz-s6: 32px; --yz-s7: 48px; --yz-s8: 64px; --yz-s9: 96px; --yz-s10: 128px;
  --yz-gutter: clamp(20px, 4vw, 48px);
  --yz-section: clamp(72px, 9vw, 128px);
  --yz-max: 1280px;
  --yz-measure: 680px;

  --yz-radius: 4px;
  --yz-ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Base & Reset ---------- */
html {
  scroll-behavior: smooth;
}

body.yz {
  margin: 0;
  font-family: var(--yz-sans);
  font-size: var(--yz-fs-body);
  line-height: 1.65;
  color: var(--yz-text);
  background: var(--yz-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.yz *, .yz *::before, .yz *::after {
  box-sizing: border-box;
}

.yz img {
  max-width: 100%;
  height: auto;
  display: block;
}

.yz h1, .yz h2, .yz h3, .yz h4 {
  color: var(--yz-navy);
  margin: 0;
  text-wrap: balance;
}

.yz p {
  margin: 0;
  text-wrap: pretty;
}

.yz ul, .yz ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yz a {
  color: var(--yz-navy);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.yz a:hover {
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
}

.yz :focus-visible {
  outline: 3px solid var(--yz-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.yz .yz-dark :focus-visible {
  outline-color: var(--yz-gold);
}

.yz-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--yz-navy);
  color: #fff !important;
  padding: 10px 16px;
  z-index: 999;
  font-weight: 600;
  transition: top .2s ease;
}

.yz-skip:focus {
  top: 12px;
}

.yz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Admin bar accommodation */
body.admin-bar .yz-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .yz-header {
    top: 46px;
  }
}

/* ---------- Layout Containers ---------- */
.yz-container,
.container,
.wp-block-group.container {
  max-width: var(--yz-max);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--yz-gutter);
  box-sizing: border-box;
}

.yz-section,
.section {
  padding-block: var(--yz-section);
  box-sizing: border-box;
}

.yz-section--tight {
  padding-block: clamp(56px, 6vw, 88px);
}

.yz-warm,
.section.section-alt {
  background: var(--yz-warm);
}

.yz-dark {
  background: var(--yz-navy);
  color: var(--yz-on-dark);
}

.yz-dark h1, .yz-dark h2, .yz-dark h3 {
  color: #fff;
}

.yz-dark a {
  color: #fff;
}

.yz-rule {
  border-top: 1px solid var(--yz-line);
}

.yz-rule-strong {
  border-top: 1px solid var(--yz-navy);
}

.yz-stack {
  display: flex;
  flex-direction: column;
}

.yz-gap-2 { gap: var(--yz-s2); }
.yz-gap-3 { gap: var(--yz-s3); }
.yz-gap-4 { gap: var(--yz-s4); }
.yz-gap-5 { gap: var(--yz-s5); }
.yz-gap-6 { gap: var(--yz-s6); }
.yz-gap-7 { gap: var(--yz-s7); }
.yz-gap-8 { gap: var(--yz-s8); }

.yz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yz-s4);
}

.yz-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--yz-s5);
}

/* Split Columns */
.yz-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--yz-s8);
  align-items: start;
}

.yz-split--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.yz-split--main {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--yz-s9);
}

/* ---------- Typography ---------- */
.yz-display {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: var(--yz-fs-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.yz-h1 {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: var(--yz-fs-h1);
  line-height: 1.04;
  letter-spacing: -0.018em;
}

.yz-h2 {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: var(--yz-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.yz-h3 {
  font-family: var(--yz-serif);
  font-weight: 500;
  font-size: var(--yz-fs-h3);
  line-height: 1.22;
}

.yz-h4 {
  font-family: var(--yz-sans);
  font-weight: 600;
  font-size: var(--yz-fs-h4);
  line-height: 1.35;
}

.yz-lead {
  font-size: var(--yz-fs-lead);
  line-height: 1.55;
  color: var(--yz-text);
}

.yz-small {
  font-size: var(--yz-fs-small);
}

.yz-meta {
  font-size: var(--yz-fs-meta);
  color: var(--yz-muted);
}

.yz-muted {
  color: var(--yz-muted);
}

.yz-eyebrow {
  font-size: var(--yz-fs-eyebrow);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--yz-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.yz-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--yz-gold);
  flex: none;
}

.yz-dark .yz-eyebrow {
  color: var(--yz-on-dark);
}

.yz-gold-bar {
  width: 56px;
  height: 4px;
  background: var(--yz-gold);
}

.yz-caps {
  font-size: 0.82em;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--yz-navy);
}

/* ---------- Buttons & Links ---------- */
.yz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--yz-radius);
  font-family: var(--yz-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .18s var(--yz-ease), color .18s var(--yz-ease), border-color .18s var(--yz-ease);
}

.yz-btn svg {
  flex: none;
  transition: transform .18s var(--yz-ease);
}

.yz-btn:hover svg {
  transform: translateX(3px);
}

.yz-btn--primary {
  background: var(--yz-navy);
  color: #fff !important;
}

.yz-btn--primary:hover {
  background: var(--yz-navy-2);
}

.yz-btn--secondary {
  background: transparent;
  color: var(--yz-navy) !important;
  border-color: var(--yz-navy);
}

.yz-btn--secondary:hover {
  background: var(--yz-warm-2);
}

.yz-btn--gold {
  background: var(--yz-gold);
  color: var(--yz-navy) !important;
}

.yz-btn--gold:hover {
  background: var(--yz-gold-hover);
}

.yz-btn--on-dark {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
}

.yz-btn--on-dark:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
}

.yz-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--yz-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.yz-link svg {
  flex: none;
  transition: transform .18s var(--yz-ease);
}

.yz-link:hover svg {
  transform: translateX(3px);
}

.yz-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--yz-navy);
  text-decoration: none !important;
}

.yz-back:hover span {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Header ---------- */
.yz-header {
  background: #fff;
  border-bottom: 1px solid var(--yz-line);
  position: relative;
  z-index: 100;
}

.yz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yz-s6);
  min-height: 104px;
}

.yz-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.yz-logo img {
  height: 72px;
  width: auto;
}

.yz-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 16px;
  font-weight: 500;
}

.yz-nav a:not(.yz-btn) {
  text-decoration: none;
  padding: 10px 0;
  color: var(--yz-navy);
  border-bottom: 2px solid transparent;
}

.yz-nav a:not(.yz-btn):hover {
  border-bottom-color: var(--yz-gold);
}

.yz-nav a[aria-current="page"] {
  border-bottom-color: var(--yz-gold);
  font-weight: 600;
}

.yz-nav .yz-btn {
  min-height: 46px;
  padding: 11px 22px;
}

.yz-menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--yz-navy);
  border-radius: var(--yz-radius);
  background: #fff;
  color: var(--yz-navy);
  font: 600 15px var(--yz-sans);
  cursor: pointer;
}

.yz-mobile-nav {
  border-top: 1px solid var(--yz-line);
  padding: 8px var(--yz-gutter) 28px;
  background: #fff;
}

.yz-mobile-nav a:not(.yz-btn) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--yz-line);
  font-family: var(--yz-serif);
  font-size: 24px;
  text-decoration: none;
  color: var(--yz-navy);
}

.yz-mobile-nav a[aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--yz-gold);
  padding-left: 16px;
}

.yz-mobile-nav .yz-btn {
  margin-top: 24px;
  width: 100%;
}

/* ---------- Home Hero ---------- */
.yz-hero {
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.yz-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--yz-s8);
  align-items: end;
}

.yz-tagline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yz-muted);
}

.yz-tagline i {
  width: 1px;
  height: 14px;
  background: var(--yz-gold);
  display: inline-block;
}

.yz .yz-hero__media {
  margin: clamp(40px, 5vw, 72px) 0 0;
}

.yz-hero__media img {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: 50% 62%;
}

.yz-hero__index {
  padding: 20px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-hero__index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--yz-navy);
}

.yz-hero__index li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.yz-hero__index li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--yz-gold);
  border-radius: 50%;
}

/* ---------- Services: Home List ---------- */
.yz-svc-list {
  border-top: 1px solid var(--yz-navy);
}

.yz-svc-row {
  display: grid;
  grid-template-columns: 52px 40px minmax(0, 1fr);
  gap: var(--yz-s5);
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-svc-row__num {
  font-family: var(--yz-serif);
  font-size: 18px;
  color: var(--yz-muted);
  padding-top: 4px;
}

.yz-svc-row__title {
  font-family: var(--yz-serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--yz-navy);
}

.yz-svc-row__desc {
  color: var(--yz-text);
  font-size: 17px;
  max-width: 600px;
  margin-top: 6px;
}

.yz-icon {
  width: 34px;
  height: 34px;
  stroke: var(--yz-navy);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Services: Listing Grid ---------- */
.yz-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--yz-navy);
}

.yz-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 40px 44px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-svc-card:nth-child(even) {
  padding-left: 40px;
  padding-right: 0;
  border-left: 1px solid var(--yz-line);
}

.yz-svc-card__title {
  font-family: var(--yz-serif);
  font-size: clamp(22px, 2.0vw, 27px);
  line-height: 1.2;
  color: var(--yz-navy);
  font-weight: 400;
}

.yz-svc-card__desc {
  font-size: 17px;
}

.yz-svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--yz-navy);
  margin-top: 6px;
}

.yz-svc-card--link a.yz-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.yz-svc-card--link:hover {
  background: linear-gradient(var(--yz-warm), var(--yz-warm));
}

.yz-svc-card--link:hover .yz-svc-card__more {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Stages & Approach ---------- */
.yz-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--yz-s7);
  counter-reset: stage;
}

.yz-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--yz-navy);
  padding-top: 28px;
}

.yz-stage__num {
  font-family: var(--yz-serif);
  font-size: 64px;
  line-height: 1;
  color: var(--yz-navy);
}

.yz-stage__num::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--yz-gold);
  margin-top: 14px;
}

/* Approach Timeline */
.yz-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}

.yz-timeline__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--yz-s7);
  padding: 48px 0;
  border-top: 1px solid var(--yz-line);
}

.yz-timeline__item:last-child {
  border-bottom: 1px solid var(--yz-line);
}

.yz-timeline__num {
  font-family: var(--yz-serif);
  font-size: clamp(64px, 7vw, 104px);
  line-height: .9;
  color: var(--yz-navy);
}

.yz-timeline__label {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--yz-muted);
  margin-bottom: 10px;
}

/* ---------- Team ---------- */
.yz-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 32px;
}

.yz-team-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 28px;
}

.yz-team-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none !important;
  color: inherit;
}

.yz-portrait {
  position: relative;
  overflow: hidden;
  background: var(--yz-warm-2);
  aspect-ratio: 4 / 5;
  display: block;
}

.yz-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .5s var(--yz-ease);
}

.yz-team-card:hover .yz-portrait img {
  transform: scale(1.025);
}

.yz-team-card__name {
  font-family: var(--yz-serif);
  font-size: 23px;
  line-height: 1.2;
  color: var(--yz-navy);
  font-weight: 500;
}

.yz-team-card:hover .yz-team-card__name {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.yz-team-card__role {
  font-size: 16px;
  line-height: 1.5;
  color: var(--yz-muted);
  margin-top: 4px;
}

.yz-team-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--yz-navy);
  margin-top: 10px;
}

/* Preserve Native Proportions for Low-Res Portraits */
.yz-portrait--max310 {
  max-width: 310px;
}

.yz-portrait--max362 {
  max-width: 362px;
}

.yz-portrait--max480 {
  max-width: 480px;
}

/* ---------- Founder Message ---------- */
.yz-founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--yz-s9);
  align-items: center;
}

.yz-founder__photo {
  max-width: 310px;
  width: 100%;
}

.yz-quote {
  font-family: var(--yz-serif);
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--yz-navy);
  margin: 0;
  text-wrap: balance;
}

.yz-attrib {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 4px solid var(--yz-gold);
  padding-left: 20px;
}

.yz-attrib strong {
  color: var(--yz-navy);
  font-weight: 600;
}

.yz-quote-mark {
  font-family: var(--yz-serif);
  font-size: 120px;
  line-height: .6;
  color: var(--yz-gold);
  height: 48px;
}

/* ---------- Industries ---------- */
.yz-industries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--yz-s7);
}

.yz-industries li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--yz-line);
  font-size: 18px;
  color: var(--yz-navy);
}

.yz-industries li:nth-child(-n+2) {
  border-top: 1px solid var(--yz-line);
}

.yz-industries li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--yz-gold);
  flex: none;
}

.yz-industries li img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
  filter: brightness(0) saturate(100%) invert(8%) sepia(26%) saturate(2421%) hue-rotate(185deg) brightness(96%) contrast(96%);
}

/* ---------- Life Lessons ---------- */
.yz-lesson-list {
  border-top: 1px solid var(--yz-navy);
}

.yz-cover,
a.yz-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.yz-lesson-row {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 24px;
  gap: var(--yz-s6);
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-lesson-row__go {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
  transition: transform .18s var(--yz-ease);
}

.yz-lesson-row:hover .yz-lesson-row__go {
  transform: translateX(4px);
}

.yz-lesson-row img, .yz-lesson-row__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.yz-lesson-row h3 a {
  text-decoration: none;
  color: var(--yz-navy);
}

.yz-lesson-row h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.yz-lesson-row:hover h3 a {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
}

.yz-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 15px;
  color: var(--yz-muted);
}

.yz-post-meta span + span::before {
  content: "·";
  margin-right: 14px;
  color: var(--yz-muted);
}

/* Article listing page */
.yz-article-list {
  list-style: none;
  padding: 0;
}

.yz-article-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--yz-s8);
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-article-card:first-child {
  border-top: 1px solid var(--yz-navy);
}

.yz-article-card img, .yz-article-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.yz-article-card h2 a {
  text-decoration: none;
  color: var(--yz-navy);
}

.yz-article-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.yz-article-card:hover h2 a {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.yz-article-card .yz-link {
  position: relative;
  z-index: 1;
}

/* ---------- Single Article & Prose ---------- */
.yz-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  color: var(--yz-muted);
  list-style: none;
  padding: 0;
}

.yz-crumbs a {
  color: var(--yz-muted);
  text-decoration: none;
}

.yz-crumbs a:hover {
  text-decoration: underline;
}

.yz-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
}

.yz-prose {
  max-width: var(--yz-measure);
  font-size: 19px;
  line-height: 1.75;
  color: var(--yz-text);
}

.yz .yz-prose > * + * {
  margin-top: 1.25em;
}

.yz-prose strong {
  color: var(--yz-navy);
}

.yz-prose h2 {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  margin-top: 1.6em;
}

.yz-prose h3 {
  font-family: var(--yz-serif);
  font-weight: 500;
  font-size: 24px;
  margin-top: 1.4em;
}

.yz-prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.yz-prose li + li {
  margin-top: .4em;
}

.yz-prose blockquote {
  margin: 0;
  padding-left: 24px;
  border-left: 4px solid var(--yz-gold);
  font-family: var(--yz-serif);
  font-size: 26px;
  line-height: 1.35;
  color: var(--yz-navy);
}

.yz-lesson {
  background: var(--yz-gold-soft);
  padding: clamp(28px, 4vw, 44px);
  border-top: 4px solid var(--yz-gold);
}

.yz-lesson__label {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yz-navy);
}

.yz-lesson p, .yz-lesson__text {
  font-family: var(--yz-serif);
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.4;
  color: var(--yz-navy);
  margin-top: 14px;
}

.yz-author {
  display: flex;
  gap: 20px;
  align-items: center;
}

.yz-author img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  flex: none;
}

.yz-feature-img img {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Definition Rows & Why Choose Us ---------- */
.yz-defs {
  border-top: 1px solid var(--yz-navy);
}

.yz-def {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--yz-s7);
  padding: 36px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-def__body {
  font-family: var(--yz-serif);
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.45;
  color: var(--yz-navy);
}

.yz-why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--yz-s8);
}

.yz-why li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 28px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-why li:nth-child(-n+2) {
  border-top: 1px solid var(--yz-navy);
}

.yz-why__num {
  font-family: var(--yz-serif);
  font-size: 18px;
  color: var(--yz-muted);
  padding-top: 2px;
}

.yz-partner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--yz-s8);
}

.yz-partner li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-partner li:nth-child(-n+2) {
  border-top: 1px solid var(--yz-line);
}

.yz-check {
  width: 24px;
  height: 24px;
  stroke: var(--yz-navy);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 3px;
  flex: none;
}

/* ---------- Page Hero (Inner Pages) ---------- */
.yz-page-hero {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--yz-line);
}

.yz-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--yz-s8);
  align-items: end;
}

.yz-service-hero {
  max-width: 1040px;
}

.yz-service-hero .yz-h1 {
  max-width: 1040px;
}

.yz-service-hero .yz-lead {
  max-width: 820px;
  color: var(--yz-muted);
  margin-top: 4px;
}

/* ---------- Profile Page ---------- */
.yz-profile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--yz-s9);
  align-items: start;
}

.yz-profile__aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 440px;
}

.yz-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--yz-navy);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--yz-navy);
}

.team-profile-credentials-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.team-profile-credentials-badge .credentials-badge-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yz-muted, #64748B);
  font-weight: 600;
}

.team-profile-credentials-badge .credentials-badge-value {
  color: var(--yz-navy, #0F172A);
  font-weight: 700;
}

@media (max-width: 899px) {
  .team-profile-sidebar {
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
}

.yz-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--yz-navy);
  text-decoration: none;
}

.yz-linkedin:hover {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
}

/* ---------- Contact Page & Form ---------- */
.yz-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--yz-s9);
  align-items: start;
}

.yz-contact-list {
  border-top: 1px solid var(--yz-navy);
}

.yz-contact-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--yz-line);
}

.yz-form {
  background: var(--yz-warm);
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.yz-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.yz-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yz-field label {
  font-size: 16px;
  font-weight: 600;
  color: var(--yz-navy);
}

.yz-field .yz-req {
  color: var(--yz-error);
  margin-left: 2px;
}

.yz-field .yz-opt {
  font-weight: 400;
  color: var(--yz-muted);
  font-size: 15px;
}

.yz-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid #8A94A6;
  border-radius: var(--yz-radius);
  background: #fff;
  font: 400 17px/1.5 var(--yz-sans);
  color: var(--yz-navy);
}

.yz-input:hover {
  border-color: var(--yz-navy);
}

.yz-input:focus {
  outline: 3px solid var(--yz-gold);
  outline-offset: 0;
  border-color: var(--yz-navy);
}

textarea.yz-input {
  min-height: 160px;
  resize: vertical;
}

.yz-field--error .yz-input {
  border-color: var(--yz-error);
}

.yz-field__error {
  font-size: 15px;
  color: var(--yz-error);
  display: flex;
  gap: 6px;
  align-items: center;
}

.yz-alert {
  padding: 16px 20px;
  border-left: 4px solid var(--yz-success);
  background: #EAF5EF;
  color: var(--yz-success);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.yz-alert--error {
  border-left-color: var(--yz-error);
  background: #FCEEEC;
  color: var(--yz-error);
}

.yz-hp {
  position: absolute;
  left: -9999px;
}

/* Staging Form Notice & Feedback */
.staging-form-notice {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-left: 4px solid var(--yz-gold, #FECC00);
  padding: 1rem 1.25rem;
  border-radius: var(--yz-radius, 4px);
  margin-bottom: 0.5rem;
}

.staging-form-notice-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: #854d0e;
}

.staging-notice-tag {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #854d0e;
}

.staging-notice-text {
  font-size: 0.875rem;
  color: #713f12;
  margin: 0;
  line-height: 1.5;
}

.form-feedback {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--yz-radius, 4px);
  display: none;
  font-size: 0.95rem;
}

.form-feedback.is-success {
  display: block;
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-feedback.is-error {
  display: block;
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ---------- Pre-Footer CTA + Footer ---------- */
.yz-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--yz-s7);
  padding-block: clamp(72px, 8vw, 112px);
  border-bottom: 1px solid var(--yz-line-dark);
}

.yz-cta h2 {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
}

.yz-footer {
  padding-block: 64px 36px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.yz-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--yz-s7);
}

.yz-footer__logo img {
  height: 112px;
  width: auto;
}

.yz-footer h2 {
  font-family: var(--yz-sans);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--yz-on-dark-muted) !important;
  margin-bottom: 18px;
}

.yz-footer nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.yz-footer__desc {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--yz-on-dark);
}

.yz-footer nav a, .yz-footer address a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  min-height: 36px;
  padding-block: 4px;
  display: inline-flex;
  align-items: center;
}

.yz-footer nav a:hover, .yz-footer address a:hover {
  text-decoration: underline;
  text-decoration-color: var(--yz-gold);
}

.yz-footer address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--yz-on-dark);
}

.yz-footer-address {
  margin-top: 6px;
  display: block;
  max-width: 100%;
  line-height: 1.6;
}

.yz-footer-cr {
  margin-top: 4px;
  font-size: 13px;
  color: var(--yz-on-dark-muted, #94A3B8);
  display: block;
}

.yz-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--yz-line-dark);
  font-size: 14px;
  color: var(--yz-on-dark-muted);
}

/* =========================================================================
   Gutenberg Blocks & Theme Element Compatibility
   ========================================================================= */
.section {
  padding-block: var(--yz-section);
}

.section.section-alt {
  background: var(--yz-warm);
}

.section-header {
  margin-bottom: var(--yz-s7);
}

.section-tag {
  font-size: var(--yz-fs-eyebrow);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--yz-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-tag::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--yz-gold);
  flex: none;
}

.section-title {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: var(--yz-fs-h2);
  line-height: 1.12;
  color: var(--yz-navy);
}

.section-header {
  margin-bottom: var(--yz-s7);
}

.section-tag {
  font-family: var(--yz-sans);
  font-size: var(--yz-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yz-muted);
  margin-bottom: 8px;
}

.section-title, .section-header .wp-block-heading {
  font-family: var(--yz-serif);
  font-weight: 400;
  font-size: var(--yz-fs-h2);
  line-height: 1.12;
  color: var(--yz-navy);
  margin: 0;
}

.section-subtitle {
  font-size: var(--yz-fs-lead);
  line-height: 1.55;
  color: var(--yz-text);
  margin-top: 12px;
  max-width: var(--yz-measure);
}

/* Two-column header layout on desktop for Services & Approach trigger sections */
@media (min-width: 1024px) {
  .services-page-blocks .section-header > .wp-block-group__inner-container,
  .services-page-blocks .section-header:not(:has(> .wp-block-group__inner-container)),
  .approach-page-blocks .section-alt .section-header > .wp-block-group__inner-container,
  .approach-page-blocks .section-alt .section-header:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "tag subtitle"
      "title subtitle" !important;
    column-gap: var(--yz-s8) !important;
    row-gap: 8px !important;
    align-items: end !important;
    margin-bottom: var(--yz-s8) !important;
    max-width: none !important;
  }

  .services-page-blocks .section-header .section-tag,
  .approach-page-blocks .section-alt .section-header .section-tag {
    grid-area: tag !important;
    margin: 0 !important;
  }

  .services-page-blocks .section-header .section-title,
  .approach-page-blocks .section-alt .section-header .section-title {
    grid-area: title !important;
    margin: 0 !important;
  }

  .services-page-blocks .section-header .section-subtitle,
  .approach-page-blocks .section-alt .section-header .section-subtitle {
    grid-area: subtitle !important;
    margin: 0 !important;
    max-width: 560px !important;
    justify-self: end !important;
  }
}

/* Gutenberg partner-grid & inner-container handling */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--yz-s8);
}

.partner-grid > .wp-block-group__inner-container,
.steps-flow > .wp-block-group__inner-container {
  display: contents;
}

.partner-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--yz-line);
}

.partner-card:nth-child(-n+2) {
  border-top: 1px solid var(--yz-line);
}

.partner-card::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--yz-navy);
  border-radius: 50%;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 12px;
}

.partner-card-title, .partner-card .wp-block-heading {
  font-family: var(--yz-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  color: var(--yz-navy);
  margin-bottom: 6px;
}

.partner-card-desc {
  font-size: 16px;
  color: var(--yz-text);
  line-height: 1.6;
}

/* Services Page: "Why Choose Us" 01-07 counter numbering, serif titles, and navy top border */
.services-page-blocks .partner-grid {
  counter-reset: why-item-counter;
}

.services-page-blocks .partner-card {
  counter-increment: why-item-counter;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--yz-line);
}

.services-page-blocks .partner-card:nth-child(-n+2) {
  border-top: 1px solid var(--yz-navy);
}

.services-page-blocks .partner-card::before {
  content: counter(why-item-counter, decimal-leading-zero);
  font-family: var(--yz-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--yz-muted);
  padding-top: 4px;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
}

.services-page-blocks .partner-card-title,
.services-page-blocks .partner-card .wp-block-heading {
  font-family: var(--yz-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--yz-navy);
  margin-bottom: 8px;
}

/* Our Approach Page: 2-column desktop layout (Methodology on left, 3 stages on right) */
@media (min-width: 1024px) {
  .approach-page-blocks .section:not(.section-alt) .container > .wp-block-group__inner-container,
  .approach-page-blocks .section:not(.section-alt) > .container:not(:has(> .wp-block-group__inner-container)),
  .approach-page-blocks > .wp-block-group:first-child .container > .wp-block-group__inner-container,
  .approach-page-blocks > .wp-block-group:first-child > .container:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr) !important;
    gap: var(--yz-s8) !important;
    align-items: start !important;
    max-width: none !important;
  }

  .approach-page-blocks .section:not(.section-alt) .container > .wp-block-group__inner-container > *,
  .approach-page-blocks .section:not(.section-alt) > .container:not(:has(> .wp-block-group__inner-container)) > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  .approach-page-blocks .section:not(.section-alt) .section-header,
  .approach-page-blocks > .wp-block-group:first-child .section-header {
    position: sticky !important;
    top: 100px !important;
    margin-bottom: 0 !important;
    max-width: 480px !important;
  }

  .approach-page-blocks .section:not(.section-alt) .section-title,
  .approach-page-blocks > .wp-block-group:first-child .section-title {
    font-size: clamp(30px, 2.4vw, 34px) !important;
    max-width: 480px !important;
    text-wrap: wrap !important;
  }
}

/* Approach 3 stages timeline styling */
.steps-flow {
  display: flex;
  flex-direction: column;
  counter-reset: flow-step;
}

.step-card {
  counter-increment: flow-step;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--yz-s6);
  padding: 48px 0;
  border-top: 1px solid var(--yz-line);
}

.step-card:last-child {
  border-bottom: 1px solid var(--yz-line);
}

.step-card::before {
  content: counter(flow-step);
  font-family: var(--yz-serif);
  font-size: clamp(64px, 7vw, 104px);
  line-height: .9;
  color: var(--yz-navy);
}

.step-title::before,
.step-card .wp-block-heading::before {
  content: "Stage " counter(flow-step);
  display: block;
  font-family: var(--yz-sans);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--yz-muted);
  margin-bottom: 10px;
}

.step-title, .step-card .wp-block-heading {
  font-family: var(--yz-serif);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 500;
  color: var(--yz-navy);
  margin-bottom: 12px;
}

.step-desc {
  font-size: 18px;
  line-height: 1.65;
  color: var(--yz-text);
  max-width: 560px;
}

@media (max-width: 1023px) {
  .step-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--yz-s5);
    padding: 36px 0;
  }
}

@media (max-width: 639px) {
  .step-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 28px 0;
  }

  .step-card::before {
    font-size: 56px;
  }
}

/* Left-aligned CTA button with arrow in Gutenberg sections */
.services-page-blocks .wp-block-buttons,
.approach-page-blocks .wp-block-buttons {
  justify-content: flex-start !important;
  margin-top: var(--yz-s8) !important;
}

.services-page-blocks .wp-block-button__link,
.approach-page-blocks .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.services-page-blocks .wp-block-button__link::after,
.approach-page-blocks .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  transition: transform .18s var(--yz-ease);
}

.services-page-blocks .wp-block-button__link:hover::after,
.approach-page-blocks .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* Button & Button block standardisation */
.wp-block-button__link, .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--yz-radius);
  font-family: var(--yz-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--yz-navy);
  color: #fff !important;
  transition: background-color .18s var(--yz-ease);
}

.wp-block-button__link:hover, .btn.btn-primary:hover {
  background: var(--yz-navy-2);
}

/* Pagination */
.pagination, .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--yz-s8);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--yz-line);
  border-radius: var(--yz-radius);
  color: var(--yz-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.page-numbers.current {
  background: var(--yz-navy);
  color: #fff;
  border-color: var(--yz-navy);
}

.page-numbers:hover:not(.current) {
  border-color: var(--yz-navy);
}

/* =========================================================================
   Tablet Breakpoint (640–1023px)
   ========================================================================= */
@media (max-width: 1023px) {
  .yz-nav { display: none; }
  .yz-menu-btn { display: inline-flex; }
  .yz-header__inner { min-height: 84px; }
  .yz-logo img { height: 58px; }
  .yz-hero__grid, .yz-page-hero__grid, .yz-split, .yz-split--main, .yz-founder, .yz-profile, .yz-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yz-s6);
  }
  .yz-stages { grid-template-columns: minmax(0, 1fr); gap: var(--yz-s6); }
  .yz-stage { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; }
  .yz-stage__num { grid-row: span 2; font-size: 52px; }
  .yz-team-grid, .yz-team-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .yz-team-card__name { font-size: 21px; }
  .yz-team-card__role { font-size: 15px; }
  .yz-founder__photo { max-width: 280px; }
  .yz-profile__aside { position: static; max-width: 300px; }
  .yz-article-card { grid-template-columns: minmax(0, 1fr); gap: var(--yz-s5); }
  .yz-def { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .yz-timeline__item, .step-card { grid-template-columns: 96px minmax(0, 1fr); gap: var(--yz-s5); }
  .yz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yz-footer__brand { grid-column: 1 / -1; }
}

/* =========================================================================
   Mobile Breakpoint (<640px)
   ========================================================================= */
@media (max-width: 639px) {
  :root {
    --yz-section: clamp(48px, 8vw, 72px);
    --yz-gutter: 20px;
  }
  .yz { font-size: 17px; }
  .yz-header__inner { min-height: 72px; }
  .yz-logo img { height: 50px; }
  .yz-btn, .wp-block-button__link { width: 100%; }
  .yz-hero__media img { aspect-ratio: 4 / 3; }
  .yz-hero__index { display: none; }
  .yz-svc-row { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .yz-svc-row__num { display: none; }
  .yz-svc-row__title { font-size: 23px; }
  .yz-svc-row__desc { font-size: 16px; }
  .yz-icon { width: 30px; height: 30px; }
  .yz-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .yz-svc-card, .yz-svc-card:nth-child(even) { padding: 32px 0; border-left: 0; }
  .yz-team-grid, .yz-team-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .yz-team-card { gap: 12px; }
  .yz-team-card__name { font-size: 19px; }
  .yz-team-card__role { font-size: 14px; }
  .yz-team-card__cue { display: none; }
  .yz-industries, .yz-why, .yz-partner, .partner-grid { grid-template-columns: minmax(0, 1fr); }
  .yz-industries li:nth-child(2), .yz-why li:nth-child(2), .yz-partner li:nth-child(2), .partner-card:nth-child(2) { border-top: 0; }
  .yz-industries li { font-size: 17px; padding: 16px 0; }
  .yz-lesson-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .yz-lesson-row .yz-lesson-row__go { display: none; }
  .yz-lesson-row h3 { font-size: 20px; }
  .yz-profile__aside { max-width: 362px; }
  .yz-form__row { grid-template-columns: minmax(0, 1fr); }
  .yz-timeline__item, .step-card { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 36px 0; }
  .yz-timeline__num, .step-card::before { font-size: 56px; }
  .yz-prose { font-size: 18px; }
  .yz-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .yz-footer__logo img { height: 96px; }
  .yz-cta .yz-btn { width: 100%; }
}

/* =========================================================================
   Narrow Phone Breakpoint (<=480px)
   Single-column layout for Team Cards ensures readable names and titles
   ========================================================================= */
@media (max-width: 480px) {
  .yz-team-grid, .yz-team-grid--4 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin-inline: auto;
  }
  .yz-team-card {
    gap: 16px;
  }
  .yz-team-card__name {
    font-size: 22px;
  }
  .yz-team-card__role {
    font-size: 15px;
  }
}

/* =========================================================================
   Accessibility: Reduced Motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .yz *, .yz *::before, .yz *::after {
    transition: none !important;
    animation: none !important;
  }
  .yz-team-card:hover .yz-portrait img {
    transform: none;
  }
}

/* =========================================================================
   Floating WhatsApp Button
   ========================================================================= */
.yz-floating-action,
.site-wrapper .yz-floating-action {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  z-index: 999;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.yz a.yz-whatsapp-btn,
.yz-whatsapp-btn,
.site-wrapper .yz-whatsapp-btn {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  text-decoration: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.yz a.yz-whatsapp-btn:hover,
.yz-whatsapp-btn:hover {
  background-color: #20ba5a;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.yz-whatsapp-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.yz-whatsapp-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}

.yz-whatsapp-icon {
  width: 30px;
  height: 30px;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  flex-shrink: 0;
}

.yz-whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  background-color: #0F172A;
  color: #FFFFFF;
  font-family: var(--yz-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.yz-whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #0F172A;
}

.yz-whatsapp-btn:hover .yz-whatsapp-tooltip,
.yz-whatsapp-btn:focus-visible .yz-whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (hover: none) {
  .yz-whatsapp-tooltip {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .yz-floating-action {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
  .yz-whatsapp-btn {
    width: 52px;
    height: 52px;
  }
  .yz-whatsapp-icon {
    width: 28px;
    height: 28px;
  }
}

body.yz-nav-open .yz-floating-action,
body:has(#yz-menu-btn[aria-expanded="true"]) .yz-floating-action {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.9);
  transition: opacity 0.15s ease, visibility 0.15s, transform 0.15s ease;
}

@media print {
  .yz-floating-action {
    display: none !important;
  }
}