/* =========================================================
   FOUNDER / KURUCU PAGE
   ========================================================= */

/* Full-bleed Hakkımda hero (homepage-stage pattern, distinct photo) */
.hero--about .hero-photo {
  object-position: 72% center;
}

/* Breadcrumb overlays the photo band (same pattern as .page-hero) */
.hero--about .fp-hero-breadcrumb {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 0 var(--page-pad);
  pointer-events: auto;
}

.hero--about .fp-hero-breadcrumb nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.hero--about .fp-hero-breadcrumb a {
  color: var(--ink-soft);
}

.hero--about .fp-hero-breadcrumb a:hover {
  color: var(--ink);
}

.hero--about .fp-hero-breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.hero--about .fp-hero-breadcrumb .sep {
  color: var(--ink-soft);
  opacity: 0.55;
}

/* Mobile: the breadcrumb sits directly on the raw photo (no assisting card),
   so it needs light text + a legibility shadow instead of the dark ink
   above. This has to live here, after the unconditional rules above, and
   use the exact same selectors: critical.css already ships a
   (max-width:960px) override with these colors, but it ties in specificity
   with the rules above and founder.css loads after critical.css, so the
   dark ink was winning at every width, including mobile. Matching the
   selector here wins purely on source order, no specificity hack needed. */
@media (max-width: 960px) {
  .hero--about .fp-hero-breadcrumb nav,
  .hero--about .fp-hero-breadcrumb a {
    color: rgba(244, 241, 235, 0.9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }

  .hero--about .fp-hero-breadcrumb a:hover {
    color: #fff;
  }

  .hero--about .fp-hero-breadcrumb [aria-current="page"] {
    color: #fff;
  }

  .hero--about .fp-hero-breadcrumb .sep {
    color: rgba(244, 241, 235, 0.5);
    opacity: 1;
  }
}

.hero--about .fp-hero-copy .lead {
  margin-top: 14px;
  margin-bottom: 22px;
  max-width: 40ch;
}

.hero--about .fp-sign {
  margin-top: 4px;
}

.hero--about .hero-badge {
  max-width: min(280px, 34vw);
}

@media (max-width: 900px) {
  .hero--about .hero-ctas .btn-outline {
    display: flex;
  }
}

@media (max-width: 480px) {
  .hero--about .hero-visual {
    min-height: clamp(380px, 120vw, 480px);
    height: clamp(380px, 120vw, 480px);
  }

  .hero--about .hero-badge {
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
  }

  .hero--about .hero-content,
  .hero--about .hero-ui {
    margin-top: -44px;
    padding: 6px 16px 32px;
  }
}

.fp-sign {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-sign-name {
  font-family: "Caveat", cursive;
  font-size: clamp(1.75rem, 3vw, 1.5rem);
  font-weight: 400;
  color: var(--ochre);
  line-height: 1;
  letter-spacing: 0.02em;
}

.fp-sign-role {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* Highlights → shared .page-highlights / .page-hero-stats in main.css */

/* ----- Story ----- */
.fp-story {
  padding: 40px 0 72px;
}

.fp-story > .container.fp-story-grid {
  max-width: none;
  width: 100%;
  padding-inline: clamp(20px, 4vw, 56px);
}

.fp-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.fp-story-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #2a2a2a;
}

.fp-story-media--sticky {
  position: sticky;
  top: 104px;
  align-self: start;
}

.fp-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
  display: block;
}

.fp-story-copy {
  max-width: none;
}

.fp-story-copy h2 {
  margin: 0 0 18px;
  max-width: none;
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fp-story-copy > p:not(.sp-eyebrow),
.fp-story-body p {
  margin: 0 0 14px;
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.fp-story-copy > p:not(.sp-eyebrow):last-child,
.fp-story-body p:last-child {
  margin-bottom: 0;
}

.fp-story-body > *:first-child {
  margin-top: 0;
}

/* ----- Philosophy ----- */
.fp-philosophy {
  padding: 8px 0 24px;
}

.fp-philosophy-band {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(0, 2.15fr);
  gap: 0;
  align-items: start;
  padding: clamp(36px, 4.5vw, 52px) 0;
  border-top: 1px solid rgba(27, 36, 32, 0.12);
  border-bottom: 1px solid rgba(27, 36, 32, 0.12);
}

.fp-philosophy-copy {
  padding-right: clamp(22px, 2.8vw, 36px);
}

.fp-philosophy-copy h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.fp-philosophy-copy h2 em {
  font-style: italic;
  font-weight: 500;
  color: #3f6b58;
}

.fp-philosophy-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.fp-philosophy-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px clamp(14px, 1.5vw, 22px) 0;
  border-left: 1px solid rgba(27, 36, 32, 0.12);
}

.fp-philosophy-col:last-child {
  padding-right: 0;
}

.fp-philosophy-icon {
  width: 34px;
  height: 34px;
  color: var(--ink);
}

.fp-philosophy-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-philosophy-col h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.fp-philosophy-col p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ----- Timeline / horizontal rail ----- */
.fp-timeline {
  padding: 36px 0 72px;
}

.fp-timeline > .container > .sp-eyebrow {
  margin-bottom: 48px;
}

.fp-rail {
  --fp-rail-dot: 11px;
  --fp-rail-cols: 6;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--fp-rail-cols), minmax(0, 1fr));
  gap: 12px;
}

.fp-rail::before {
  content: "";
  position: absolute;
  top: calc(var(--fp-rail-dot) / 2);
  left: calc(100% / (var(--fp-rail-cols) * 2));
  right: calc(100% / (var(--fp-rail-cols) * 2));
  height: 1px;
  background: #3a4f43;
  transform: translateY(-50%);
}

.fp-rail li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--fp-rail-dot) + 18px);
  min-width: 0;
}

.fp-rail-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--fp-rail-dot);
  height: var(--fp-rail-dot);
  border-radius: 50%;
  background: #2a3a31;
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 0 0 0 6px var(--paper, #f4f1eb);
}

.fp-rail strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.fp-rail p {
  margin: 0;
  max-width: 18ch;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ----- Certificates ----- */
.fp-certs {
  padding: 28px 0 72px;
}

.fp-certs-head {
  margin-bottom: 28px;
}

.fp-certs-slider {
  position: relative;
  padding: 0 28px;
}

.fp-certs-viewport {
  overflow: hidden;
  margin: 0;
  padding: 4px 0;
}

.fp-certs-track {
  display: flex;
  gap: 28px;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

.fp-cert {
  flex: 0 0 calc((100% - 84px) / 4);
  min-width: 0;
}

.fp-cert-frame {
  position: relative;
  padding: 10px;
  border-radius: 2px;
  background:
    linear-gradient(145deg, #b8956c 0%, #7a5a32 48%, #c4a574 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 24px -16px rgba(27, 36, 32, 0.4);
}

.fp-cert-frame > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #f7f2e8;
}

.fp-cert-paper {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 18px 14px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(180deg, #f7f2e8 0%, #efe6d6 100%);
  border: 1px solid rgba(140, 110, 70, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #3a3228;
}

.fp-cert-seal {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border: 1.5px solid rgba(140, 110, 70, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--ochre);
}

.fp-cert-paper strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Newsreader", serif;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 500;
  line-height: 1.25;
}

.fp-cert-paper small {
  display: block;
  margin-top: auto;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 50, 40, 0.7);
}

.fp-cert-paper em {
  display: block;
  margin-top: 10px;
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  font-style: normal;
  color: var(--ochre);
}

.fp-cert figcaption {
  margin-top: 14px;
  text-align: center;
}

.fp-cert figcaption strong {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.fp-cert figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.fp-cert figcaption em {
  display: block;
  margin-top: 3px;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-style: normal;
  color: rgba(58, 69, 62, 0.62);
}

.fp-certs-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-certs-nav button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(27, 36, 32, 0.16);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.fp-certs-nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(27, 36, 32, 0.28);
}

.fp-certs-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.fp-certs-nav button svg {
  width: 18px;
  height: 18px;
}

.fp-certs-nav [data-cert-prev] {
  transform: translateX(-6px);
}

.fp-certs-nav [data-cert-next] {
  transform: translateX(6px);
  margin-left: auto;
}

/* ----- Practice areas ----- */
.fp-areas {
  padding: 8px 0 48px;
  background: transparent;
  color: #f4f1eb;
}

.fp-areas-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 28%);
  gap: 0;
  align-items: stretch;
  width: min(var(--page-max), calc(100% - (var(--page-pad) * 2)));
  margin: 0 auto;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #1a1f1c;
  isolation: isolate;
}

.fp-areas-main {
  padding: clamp(28px, 3.4vw, 40px) clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.fp-areas-label {
  margin: 0 0 26px;
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, 0.55);
}

.fp-areas-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}

.fp-areas-list--expertise {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fp-areas-list article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border-left: 1px solid rgba(244, 241, 235, 0.12);
  min-width: 0;
}

.fp-areas-list article:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

/* Divider between row 1 and row 2 lives on row 1's own border-bottom, not
   row 2's border-top — row 1 is always a full 3 columns, so the line always
   spans edge to edge. Anchoring it on row 2 instead breaks visually when the
   last row is short (e.g. 5 items → row 2 only fills 2 of 3 columns and the
   line stops dead partway across). */
.fp-areas-list article:nth-child(-n + 3) {
  padding-top: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(244, 241, 235, 0.12);
}

.fp-areas-list--expertise article {
  gap: 12px;
  padding: 20px 18px;
}

.fp-areas-list--expertise article:nth-child(-n + 3) {
  padding-top: 0;
}

.fp-areas-list .fp-icon {
  width: 30px;
  height: 30px;
  color: var(--ochre-soft);
  flex: none;
}

.fp-areas-list .fp-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-areas-list h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: #f4f1eb;
}

.fp-areas-list--expertise h3 {
  font-size: 0.98rem;
}

.fp-areas-list p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 241, 235, 0.62);
}

.fp-areas-list--expertise p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(244, 241, 235, 0.7);
}

.fp-areas-media {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #1a1f1c;
  line-height: 0;
}

.fp-areas-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  vertical-align: middle;
}

/* ----- Manifesto ----- */
.fp-manifesto {
  padding: 72px 0 56px;
}

.fp-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.fp-manifesto-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.fp-manifesto-copy > p:not(.sp-eyebrow) {
  margin: 0 0 28px;
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.fp-video {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-ink);
  isolation: isolate;
}

.fp-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  filter: saturate(0.92);
}

.fp-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 24, 0.12), rgba(20, 28, 24, 0.58));
  z-index: 1;
}

.fp-video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.fp-video-play span {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s var(--ease);
}

.fp-video-play:hover span {
  transform: scale(1.06);
}

.fp-video-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.fp-video-meta {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}

.fp-video-meta span:last-child {
  font-weight: 500;
  opacity: 0.78;
}

/* ----- Testimonials ----- */
.fp-reviews {
  padding: 24px 0 88px;
}

.fp-reviews-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1.60fr);
  gap: clamp(24px, 4vw, 36px);
  align-items: start;
}

.fp-reviews-side h2 {
  margin: 0 0 22px;
  max-width: 10ch;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.fp-reviews-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(27, 36, 32, 0.16);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.fp-reviews-all svg {
  width: 15px;
  height: 15px;
}

.fp-reviews-all:hover {
  background: #fff;
  border-color: rgba(27, 36, 32, 0.28);
}

.fp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fp-review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(27, 36, 32, 0.12);
  min-height: 100%;
}

.fp-review-stars {
  color: var(--ochre);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  line-height: 1;
}

.fp-review > p {
  margin: 0;
  flex: 1;
  font-family: "Newsreader", serif;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}

.fp-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.fp-review-author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd6cb;
}

.fp-review-author strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.fp-review-author span {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .fp-cert {
    flex-basis: calc((100% - 56px) / 3);
  }

  .fp-areas-panel {
    grid-template-columns: 1fr;
  }

  .fp-areas-main {
    padding: 28px 22px 20px;
  }

  /* Portrait-friendly frame — 16/9 was cropping the founder photo mid-torso. */
  .fp-areas-media {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .fp-areas-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
  }

  .fp-areas-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fp-areas-list article {
    padding: 16px 14px;
  }

  .fp-areas-list article:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .fp-areas-list article:nth-child(-n + 3) {
    padding-top: 0;
    border-top: 0;
  }

  .fp-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fp-story-media--sticky {
    position: relative;
    top: auto;
  }

  .fp-story-grid,
  .fp-manifesto-grid,
  .fp-reviews-layout {
    grid-template-columns: 1fr;
  }

  .fp-story-copy h2,
  .fp-manifesto-copy h2,
  .fp-reviews-side h2 {
    max-width: none;
  }

  .fp-philosophy-band {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fp-philosophy-copy {
    padding-right: 0;
  }

  .fp-philosophy-copy h2 {
    max-width: 16ch;
  }

  .fp-philosophy-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-philosophy-col {
    padding: 20px 18px 4px;
  }

  .fp-philosophy-col:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .fp-philosophy-col:nth-child(n + 3) {
    border-top: 1px solid rgba(27, 36, 32, 0.12);
  }

  .fp-philosophy-col:last-child {
    padding-right: 18px;
  }

  .fp-cert {
    flex-basis: calc((100% - 28px) / 2);
	scroll-snap-align: start;
  }

	.fp-certs-viewport {
	  overflow-x: auto;
	  overflow-y: hidden;
	  scroll-snap-type: x mandatory;
	  scroll-padding-inline: 4px;
	  -webkit-overflow-scrolling: touch;
	  overscroll-behavior-x: contain;
	  touch-action: pan-x pan-y pinch-zoom;
	  scrollbar-width: none;
	}

	.fp-certs-viewport::-webkit-scrollbar {
	  display: none;
	}

	.fp-certs-track {
	  transform: none !important;
	  transition: none;
	}

  .fp-areas-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-areas-list article,
  .fp-areas-list article:nth-child(3n + 1),
  .fp-areas-list article:nth-child(-n + 3) {
    padding: 16px 14px;
    border-left: 1px solid rgba(244, 241, 235, 0.12);
  }

  .fp-areas-list article:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  /* Row divider lives on the row-above's border-bottom (5 items in 2
     columns → rows 1-2 are always full, row 3 is a lone last item; a
     border-top on row 3 would only span its one filled column). */
  .fp-areas-list article:nth-child(-n + 4) {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(244, 241, 235, 0.12);
  }

  .fp-rail {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y pinch-zoom;
  }

  .fp-rail::before {
    left: 80px;
    right: auto;
    width: calc(160px * (var(--fp-rail-cols) - 1));
  }

  .fp-rail li {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .fp-philosophy-cols {
    grid-template-columns: 1fr;
  }

  .fp-philosophy-col,
  .fp-philosophy-col:nth-child(odd),
  .fp-philosophy-col:last-child {
    padding: 20px 0 4px;
    border-left: 0;
  }

  .fp-philosophy-col:nth-child(n + 2) {
    border-top: 1px solid rgba(27, 36, 32, 0.12);
  }

  .fp-certs-slider {
    padding: 0;
  }

  .fp-cert {
    flex-basis: 78%;
  }

  .fp-certs-nav {
    display: none;
  }

  .fp-areas-list {
    grid-template-columns: 1fr;
  }

  .fp-areas-list article,
  .fp-areas-list article:nth-child(n) {
    padding: 16px 0 0;
    border-left: 0;
  }

  .fp-areas-list article:first-child {
    padding-top: 0;
  }

  .fp-areas-list article:nth-child(n + 2) {
    border-top: 1px solid rgba(244, 241, 235, 0.12);
  }

  /* Stacked single-column layout has no bottom padding on the article
     itself (only the next item's border-top separates cards), so the
     divider sat flush against the description text. */
  .fp-areas-list--expertise p {
    padding-bottom: 18px;
  }

  .fp-areas-media img {
    object-position: 50% 12%;
  }

  .fp-reviews-grid {
    grid-template-columns: 1fr;
  }

  .fp-manifesto {
    padding: 56px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-certs-track {
    transition: none;
  }

  .fp-video-play:hover span {
    transform: none;
  }
}