/* ============================================================
   Morley Management Group — Inner page components

   Shared by every page that is not the homepage. Built generic on
   purpose: About uses all of it, and Services, Learning Lab and Contact
   will reuse the same pieces rather than growing their own.
   ============================================================ */

/* ---- Page hero ---------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 120% at 82% -20%, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  /* Pulled up behind the transparent header in home.css, so the top
     padding has to clear it. */
  padding-block: calc(clamp(3rem, 2rem + 4vw, 5.5rem) + var(--header-h))
                 clamp(3rem, 2rem + 4vw, 5.5rem);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-hero .shell { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: var(--step-5);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.page-hero__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 60ch;
  margin: 0;
}

/* ---- Biography ---------------------------------------------- */
.bio {
  display: grid;
  /* Portrait gives ground as the viewport narrows so the role line
     keeps its single line for as long as possible. */
  grid-template-columns: minmax(0, clamp(240px, 25vw, 320px)) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.bio + .bio {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-subtle);
}
.bio__portrait { position: relative; }

/* Headshots get their own treatment rather than the site's duotone.
   The duotone grades navy into the shadows, which is right for a
   scene and wrong for a face: people should look like themselves.
   Clean and unframed, so the person is the subject. */
.portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* 5:6 rather than 4:5. The source images are landscape, so a
     narrower crop would cut into the shoulders. */
  aspect-ratio: 5 / 6;
  background: var(--sand-100);
  box-shadow: var(--shadow-md);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* faces sit high in a headshot, so bias the crop upward a little */
  object-position: 50% 28%;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 900ms var(--ease-out);
}
.portrait:hover img { transform: scale(1.03); }

/* Name and role sit beside the portrait rather than above the whole
   section, so each person reads as one unit. */
.bio__body .eyebrow { margin-bottom: var(--space-4); }
.bio__title {
  /* One notch under --step-4 (tops out at 36px rather than 40px).
     The longest role line, "Project Management Professional," needs
     to clear the body column on its own; at 40px it overran by ~30px
     and broke into three lines. The low end is pulled down too so
     "Morley Management Group" survives as one line on a 375px phone,
     where it was overrunning by a few pixels. */
  font-size: clamp(1.35rem, 1.05rem + 1.45vw, 2.25rem);
  font-weight: var(--weight-extra);
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--navy-800);
  /* Wide enough for the longest role line. Both titles carry an
     explicit <br> before "Morley Management Group", so the break is
     deliberate rather than left to the measure. */
  max-width: 34ch;
  /* base.css balances every heading, which evens the line lengths and
     splits the role across two lines even when it fits on one. The
     breaks here are authored, so opt out. The keyword is `wrap`, not
     `normal`: `normal` is invalid here and gets dropped silently. */
  text-wrap: wrap;
  margin: 0 0 var(--space-6);
}

/* Stands in until a real headshot exists. Reads as a deliberate
   brand panel rather than a broken image, and swapping it for a
   photo is a one-element change. */
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(241, 157, 106, 0.35);
  background:
    radial-gradient(120% 100% at 70% 0%, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  overflow: hidden;
  position: relative;
}
.monogram::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.monogram img {
  width: 46%;
  height: auto;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.bio__name {
  font-size: var(--step-3);
  font-weight: var(--weight-extra);
  color: var(--navy-800);
  margin: 0 0 var(--space-2);
}
.bio__role {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--copper-600);
  margin: 0 0 var(--space-5);
}
.bio__body p {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}
.bio__body p:last-child { margin-bottom: 0; }

/* ---- Credential chips --------------------------------------- */
.creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-6) 0 0;
}
.creds li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--navy-900);
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 7px 15px 7px 12px;
}
.creds .tick { margin-top: 0; }

/* ---- Belief cards -------------------------------------------- */
.beliefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.belief-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.belief-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.belief-card h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-extra);
  color: var(--navy-800);
  margin: 0 0 var(--space-3);
}
.belief-card h3 em { font-style: normal; color: var(--copper-600); }
.belief-card p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

/* ---- Audience list ------------------------------------------- */
.audience {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.audience__item { border-left: 2px solid var(--copper-500); padding-left: var(--space-5); }
.audience__item h3 {
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--navy-800);
  margin: 0 0 var(--space-3);
}
.audience__item p { font-size: var(--step--1); line-height: 1.6; margin: 0; }

/* ---- Service index, a jump list at the top of Services -------- */
.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.service-index a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.service-index a i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--copper-300);
}
.service-index a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(241, 157, 106, 0.45);
  transform: translateY(-2px);
}

/* ---- A single service ---------------------------------------- */
.service {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: calc(var(--header-h-scrolled) + 24px);
}
.service + .service { margin-top: var(--space-6); }
.service h2 {
  font-size: var(--step-3);
  font-weight: var(--weight-extra);
  letter-spacing: 0.01em;
  color: var(--navy-800);
  margin: var(--space-4) 0 var(--space-4);
  text-transform: none;
}
.service__body p {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}
.service__lead { font-size: var(--step-1) !important; color: var(--navy-800) !important; font-weight: var(--weight-medium); }

/* Inverse variant, used for the signature engagement */
.service--inverse {
  background: var(--navy-900);
  border-color: rgba(255, 255, 255, 0.14);
  /* The shorthand above flattens all four sides, which wiped out the
     copper top bar every other card on the page carries. Put it back
     after, not before, or the shorthand wins. */
  border-top-color: var(--copper-500);
  color: rgba(255, 255, 255, 0.82);
}
.service--inverse h2 { color: #fff; }
.service--inverse .service__body p { color: rgba(255, 255, 255, 0.82); }
.service--inverse .service__lead { color: #fff !important; }
.service--inverse .creds li {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.service--inverse .creds .tick { background: var(--copper-300); }

/* ---- PMO phases ---------------------------------------------- */
.phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.phase {
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
/* Alternating accents, as the prototype had them */
.phase:nth-child(even) { border-top-color: var(--copper-500); }
.phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.phase__n {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--navy-700);
  margin: 0 0 var(--space-3);
}
.phase:nth-child(even) .phase__n { color: var(--copper-500); }
.phase h3 {
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  color: var(--navy-900);
  margin: 0 0 var(--space-2);
}
.phase > p {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}
.phase ul { display: flex; flex-direction: column; gap: 6px; }
.phase li {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.phase li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  margin-top: 0.62em;
  transform: rotate(45deg);
  background: var(--copper-400);
}

/* ---- Closing call to action ---------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 3.6vw, 5rem);
  text-align: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-band .shell { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: var(--step-4);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto var(--space-5);
  max-width: 20ch;
}
.cta-band p {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.8);
  max-width: 54ch;
  margin: 0 auto var(--space-7);
}
.cta-band .btn-row { justify-content: center; }

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The bio stacks earlier than its neighbours. Below this the body
   column is too narrow to hold "Project Management Professional," on
   one line, and a full-width stacked bio reads better than a cramped
   two-column one. */
@media (max-width: 1100px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio__portrait { max-width: 300px; }
}
@media (max-width: 900px) {
  .beliefs { grid-template-columns: minmax(0, 1fr); }
  .audience { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
  .phases { grid-template-columns: minmax(0, 1fr); }
  .service-index a { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .belief-card { padding: var(--space-6); }
  .cta-band .btn-row .btn { flex: 1 1 100%; }
}