/* ============================================================================
   OUR PROCESS PAGE
   Page-specific styles only. Layout, spacing and color tokens all reference
   the site's existing CSS variables (see variables.css) via var(--token, …)
   with a literal fallback matching the FarOverseas brand values. The
   fallback is only ever used if a given token isn't already defined
   globally — it never overrides an existing value.
   ============================================================================ */

.process-hero,
.process-commitment,
.process-timeline,
.process-certifications,
.process-cta {
  --pp-ink:        var(--color-ink-teal, #0A2E2F);
  --pp-ink-2:      var(--color-ink-teal-2, #0F3D3E);
  --pp-harbor:     var(--color-harbor-teal, #0E7C7B);
  --pp-signal:     var(--color-signal-teal, #14B8A6);
  --pp-sand:       var(--color-sand, #F7F5F0);
  --pp-sand-2:     var(--color-sand-2, #F0EDE5);
  --pp-gold:       var(--color-gold, #C9922E);
  --pp-body:       var(--color-body, #5C6664);

  --pp-font-display: var(--font-display, 'Manrope', sans-serif);
  --pp-font-body:    var(--font-body, 'Inter', sans-serif);
  --pp-font-mono:    var(--font-mono, 'IBM Plex Mono', monospace);
  --pp-font-serif:   'Playfair Display', Georgia, serif;
  --pp-font-hand:    'Caveat', cursive;

  --pp-space-xs:  var(--space-xs, 0.5rem);
  --pp-space-sm:  var(--space-sm, 1rem);
  --pp-space-md:  var(--space-md, 1.5rem);
  --pp-space-lg:  var(--space-lg, 2.5rem);
  --pp-space-xl:  var(--space-xl, 4rem);
  --pp-space-2xl: var(--space-2xl, 5.5rem);
  --pp-space-3xl: var(--space-3xl, 7rem);

  --pp-radius-sm: var(--radius-sm, 10px);
  --pp-radius-md: var(--radius-md, 18px);
  --pp-radius-lg: var(--radius-lg, 28px);

  --pp-shadow-md: var(--shadow-md, 0 12px 30px rgba(10, 46, 47, 0.12));
  --pp-shadow-lg: var(--shadow-lg, 0 24px 60px rgba(10, 46, 47, 0.18));

  --pp-dur-fast: var(--dur-fast, 0.25s);
  --pp-dur-med:  var(--dur-med, 0.5s);
  --pp-ease:     var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

.process-hero h1,
.process-hero h2,
.process-commitment h2,
.process-timeline h2,
.process-certifications h2,
.process-cta h2 {
  font-family: var(--pp-font-serif);
  font-weight: 600;
  color: var(--pp-ink);
  line-height: 1.12;
  margin: 0;
}

.process-hero h3,
.process-commitment h3,
.process-timeline h3 {
  font-family: var(--pp-font-display);
  font-weight: 700;
  color: var(--pp-ink);
  margin: 0;
}

.process-hero p,
.process-commitment p,
.process-timeline p,
.process-certifications p,
.process-cta p {
  font-family: var(--pp-font-body);
  color: var(--pp-body);
  line-height: 1.7;
}


/* ============================================================================
   HERO — FULL BLEED IMAGE
   ============================================================================ */

.process-hero {
  position: relative;
  overflow: hidden;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);

  min-height: 695px;

  display: flex;
  align-items: stretch;

  padding: 0;
  background: var(--pp-sand);
}

/* ============================================================================
   FULL-BLEED HERO IMAGE
   ============================================================================ */

.process-hero__media {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
  pointer-events: none;
}

.process-hero__frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border-radius: 0;
  overflow: hidden;
  box-shadow: none;

  aspect-ratio: auto;
}

.process-hero__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
}

/* No artificial white/cream overlay */
.process-hero__media::after {
  content: none;
}

.process-hero::after {
  content: none;
}

/* ============================================================================
   DECORATIVE LEAF
   ============================================================================ */

.process-hero__leaf {
  position: absolute;
  top: -40px;
  left: -60px;

  width: 220px;
  height: auto;

  fill: none;
  stroke: var(--pp-harbor);
  stroke-width: 1;

  opacity: 0.12;
  pointer-events: none;

  z-index: 2;
}

/* ============================================================================
   HERO CONTENT
   ============================================================================ */
 .process-hero .eyebrow {
  position: relative;
  transform: translateY(-25px);
}  

.process-hero__inner {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: none;

  min-height: 695px;

  display: flex;
  align-items: center;
  
}

.process-hero__content {
  position: relative;
  z-index: 4;

  width: min(100%, 580px);

  padding-top: clamp(5rem, 10vh, 8rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  
}

/* ============================================================================
   HEADLINE
   ============================================================================ */

.process-hero__headline {
  font-size: clamp(3rem, 5vw, 4.6rem);

  margin-top: var(--pp-space-sm);

  letter-spacing: -0.025em;
  transform: translateY(-25px);
}

.process-hero__headline span {
  color: var(--pp-harbor);
  font-style: bold;
  transform: translateY(-25px);
}
.process-hero p.process-hero__subline {
  max-width: 47ch;
  margin: var(--pp-space-md) 0 var(--pp-space-lg);
  font-size: 1.25rem;
  font-style: extra bold;
  font-weight: 400;
  color: #000000;
  transform: translateY(-50px);
}


/* ============================================================================
   CTA
   ============================================================================ */

.process-hero__cta {
  display: inline-flex;
}

/* ============================================================================
   PROCESS LABELS
   ============================================================================ */

.process-hero__steps {
  display: flex;
  align-items: center;

  gap: var(--pp-space-sm);

  list-style: none;

  margin: var(--pp-space-xl) 0 0;
  padding: 0;

  font-family: var(--pp-font-mono);
  font-size: 0.72rem;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--pp-body);

  flex-wrap: wrap;
}

.process-hero__steps li {
  position: relative;
  padding-right: var(--pp-space-lg);
}

.process-hero__steps li::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 0.4rem;

  width: 1.4rem;
  height: 1px;

  background: var(--pp-harbor);

  opacity: 0.5;

  transform: translateY(-50%);
}

.process-hero__steps li:last-child {
  padding-right: 0;
}

.process-hero__steps li:last-child::after {
  display: none;
}

/* ============================================================================
   HANDWRITTEN NOTE
   ============================================================================ */

.process-hero__scribble {
  position: absolute;

  top: 28%;
  right: 6%;

  z-index: 5;

  margin: 0;

  font-family: 'Caveat', cursive;

  font-size: clamp(1.8rem, 2.5vw, 2.4rem);

  line-height: 1.05;

  color: #272525 !important;

  text-shadow: 0 2px 10px rgba(10, 46, 47, 0.32);
}

.process-hero__scribble-leaf {
display: none !important;
}

/* ============================================================================
   COMMITMENT
   ============================================================================ */

.process-commitment {
   padding: 3.2rem 0 3.5rem;
  background: var(--pp-sand-2);
}

.process-commitment__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(10, 46, 47, 0.08);
}

.process-commitment__heading h2 {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  margin-top: 0.35rem;
  line-height: 1.08;
}

.process-commitment__divider {
  width: 1px;
  height: 100%;
  min-height: 60px;
  background: rgba(10, 46, 47, 0.12);
}

.process-commitment__text {
  font-size: 1rem;
  max-width: 46ch;
}

.process-commitment__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}

.process-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  transform: translateX(100px);
  transition: transform 0.35s ease;
}

.process-value__icon {
  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;
   transform: translateX(100px);
  border: 1px solid rgba(10, 46, 47, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.42);

  position: relative;
  color: var(--pp-harbor);

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.process-value__icon svg {
  width: 34px;
  height: 34px;

  position: relative;
  z-index: 2;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Individual icon tones */
.process-value__icon--green {
  color: #4F8A5B;
  background: rgba(79, 138, 91, 0.06);
  border-color: rgba(79, 138, 91, 0.22);
}

.process-value__icon--teal {
  color: #168F8B;
  background: rgba(22, 143, 139, 0.06);
  border-color: rgba(22, 143, 139, 0.22);
}

.process-value__icon--blue {
  color: #4288A8;
  background: rgba(66, 136, 168, 0.06);
  border-color: rgba(66, 136, 168, 0.22);
}

.process-value__icon--gold {
  color: #B28A3B;
  background: rgba(178, 138, 59, 0.06);
  border-color: rgba(178, 138, 59, 0.22);
}

.process-value h3 {
  font-size: 0.92rem;
  line-height: 1.50;
  font-weight: 1000;
  margin-left: 85px;
}
.process-value:nth-child(1) h3 {
   padding-top: 5px;
}
.process-value:nth-child(2) h3 {
   padding-top: 5px;
}
.process-value:nth-child(3) h3 {
  transform: translateX(-24px);
  padding-top: 5px;
}
.process-value:nth-child(4) h3 {
  transform: translateX(-24px);
   padding-top: 5px;
}
.process-value:hover .process-value__icon {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 10px 24px rgba(10, 46, 47, 0.10),
    0 0 0 5px rgba(255, 255, 255, 0.45),
    0 0 28px currentColor;
    transform: translate(100px, -5px);
}

.process-value:hover .process-value__icon svg {
  transform: scale(1.08);
  
}
.process-value__icon--green {
  color: #4F8A5B;
  background: rgba(79, 138, 91, 0.06);
  border-color: rgba(79, 138, 91, 0.22);
  box-shadow: 0 0 0 rgba(79, 138, 91, 0);
}

.process-value__icon--teal {
  color: #168F8B;
  background: rgba(22, 143, 139, 0.06);
  border-color: rgba(22, 143, 139, 0.22);
  box-shadow: 0 0 0 rgba(22, 143, 139, 0);
}

.process-value__icon--blue {
  color: #4288A8;
  background: rgba(66, 136, 168, 0.06);
  border-color: rgba(66, 136, 168, 0.22);
  box-shadow: 0 0 0 rgba(66, 136, 168, 0);
}

.process-value__icon--gold {
  color: #B28A3B;
  background: rgba(178, 138, 59, 0.06);
  border-color: rgba(178, 138, 59, 0.22);
  box-shadow: 0 0 0 rgba(178, 138, 59, 0);
}

/* ============================================================================
   TIMELINE
   ============================================================================ */

.process-timeline {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0 2rem;

  background-color: var(--pp-sand);

  background-image:
    linear-gradient(
      rgba(247, 245, 240, 0.35),
      rgba(247, 245, 240, 0.35)
    ),
    url("../assets/images/process/process-background2.png");

  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}


.process-timeline__leaf {
  position: absolute;
  bottom: -30px;
  left: -70px;
  width: 200px;
  fill: none;
  stroke: var(--pp-harbor);
  stroke-width: 1;
  opacity: 0.1;
  pointer-events: none;
}

/* ============================================================================
   TIMELINE ATMOSPHERE — subtle animated background
   Purely decorative and inert: one wrapper, absolutely positioned to fill
   the section, sitting at the very start of the section's markup so it
   paints behind every in-flow child (the same stacking approach already
   used by .process-timeline__leaf / .process-timeline__path above). It
   never changes the section's height, never scrolls horizontally, and
   never sits above the step images, text or the existing central curve.
   All colors reuse the palette tokens defined at the top of this file.
   Kept deliberately faint — this is atmosphere, not a graphic.
   ============================================================================ */

.process-timeline__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Soft organic waves + a whisper of a longitude/grid texture, combined into
   one layer so only a single element needs to animate. */
.process-timeline__waves {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(ellipse 55% 40% at 18% 22%, rgba(14, 124, 123, 0.05), transparent 70%),
    radial-gradient(ellipse 50% 38% at 82% 70%, rgba(201, 146, 46, 0.035), transparent 70%),
    radial-gradient(ellipse 60% 45% at 55% 95%, rgba(10, 46, 47, 0.04), transparent 70%),
    repeating-linear-gradient(100deg, rgba(10, 46, 47, 0.012) 0px, rgba(10, 46, 47, 0.012) 1px, transparent 1px, transparent 120px);
  animation: pp-atmosphere-drift 100s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes pp-atmosphere-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.02); }
}

/* Faint topographic / contour linework, echoing the existing central path */
.process-timeline__contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  animation: pp-contour-breathe 46s ease-in-out infinite;
}

.process-timeline__contours path {
  fill: none;
  stroke: var(--pp-harbor);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@keyframes pp-contour-breathe {
  0%, 100% { opacity: 0.24; }
  50%      { opacity: 0.4; }
}

/* Two additional botanical silhouettes — the existing bottom-left leaf
   above is untouched. These drift and rotate almost imperceptibly and
   are pinned to the outer edges, well clear of the step content. */
.process-timeline__leaf-drift {
  position: absolute;
  fill: none;
  stroke: var(--pp-harbor);
  stroke-width: 1;
  opacity: 0.06;
  pointer-events: none;
}

.process-timeline__leaf-drift--a {
  top: -20px;
  right: -50px;
  width: 190px;
  animation: pp-leaf-drift-a 85s ease-in-out infinite alternate;
}

.process-timeline__leaf-drift--b {
  bottom: 8%;
  right: 4%;
  width: 130px;
  opacity: 0.045;
  animation: pp-leaf-drift-b 95s ease-in-out infinite alternate;
}

@keyframes pp-leaf-drift-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-10px, 8px) rotate(2deg); }
}

@keyframes pp-leaf-drift-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(6px, -10px) rotate(-2deg); }
}

/* A sparse handful of drifting seed-like particles */
.process-timeline__seed {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pp-gold);
  opacity: 0;
  animation: pp-seed-float 22s ease-in-out infinite;
}

.process-timeline__seed:nth-child(6)  { top: 12%; left: 8%;  animation-delay: 0s;   animation-duration: 24s; }
.process-timeline__seed:nth-child(7)  { top: 30%; left: 92%; animation-delay: -6s;  animation-duration: 27s; background: var(--pp-harbor); }
.process-timeline__seed:nth-child(8)  { top: 55%; left: 6%;  animation-delay: -12s; animation-duration: 21s; }
.process-timeline__seed:nth-child(9)  { top: 70%; left: 88%; animation-delay: -3s;  animation-duration: 25s; background: var(--pp-harbor); }
.process-timeline__seed:nth-child(10) { top: 90%; left: 14%; animation-delay: -9s;  animation-duration: 23s; }

@keyframes pp-seed-float {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.12; }
  50%  { transform: translate(4px, -16px); opacity: 0.14; }
  85%  { opacity: 0.05; }
  100% { transform: translate(-4px, -30px); opacity: 0; }
}

/* Extremely subtle radial glow, breathing behind the timeline */
.process-timeline__aura {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(20, 184, 166, 0.04), transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(247, 245, 240, 0.5), transparent 55%);
  animation: pp-aura-breathe 50s ease-in-out infinite;
}

@keyframes pp-aura-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .process-timeline__waves,
  .process-timeline__contours,
  .process-timeline__leaf-drift,
  .process-timeline__seed,
  .process-timeline__aura {
    animation: none;
  }

  .process-timeline__seed {
    opacity: 0.08;
  }
}

.process-timeline__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.process-timeline__header h2 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-top: var(--pp-space-xs);
  white-space: nowrap;
}

.process-timeline__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-sm);
  margin-top: var(--pp-space-md);
}

.process-timeline__flourish span {
  width: 34px;
  height: 1px;
  background: var(--pp-harbor);
  opacity: 0.5;
}

.process-timeline__flourish svg {
  width: 16px;
  height: 16px;
  fill: var(--pp-harbor);
  opacity: 0.8;
}

.process-timeline__list {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1220px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.process-timeline__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.process-timeline__path path {
  fill: none;
  stroke: var(--pp-harbor);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

/* Compact alternating step layout matching the supplied reference */
.process-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  min-height: 300px;
  margin: 0;
}

.process-step__media {
  position: relative;
  grid-column: 1;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

.process-step--reverse .process-step__media {
  grid-column: 3;
  justify-self: start;
}

.process-step__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.process-step__content {
  grid-column: 3;
  justify-self: start;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 520px;
  text-align: left;
}

.process-step--reverse .process-step__content {
  grid-column: 1;
  justify-self: end;   /* Forces the even content box to mirror the odd side perfectly */
  text-align: left;
}

.process-step__number {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  margin: 0;
  font-family: var(--pp-font-serif);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pp-gold);
}

.process-step__content h3 {
  grid-column: 2;
  margin: 1px 0 4px;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pp-ink);
}

.process-step__content p {
  grid-column: 2;
  margin: 0;
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--pp-body);
}

.process-step--reverse .process-step__content p {
  margin-left: 0;
}
.process-step__node {
  grid-column: 2;
  justify-self: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pp-ink);
  border-radius: 50%;
  background: var(--pp-sand);
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}

.process-step__node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-ink);
  transform: translate(-50%, -50%);
}

.process-step__scribble {
  position: absolute;
  right: 12px;
  bottom: 10px;
  margin: 0;
  font-family: var(--pp-font-hand);
  font-size: 1rem;
  line-height: 1.05;
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 8px rgba(10, 46, 47, 0.45);
  transform: rotate(-3deg);
}

.process-step__scribble--top {
  top: 10px;
  bottom: auto;
  transform: rotate(2deg);
}

.process-step:nth-of-type(even) .process-step__scribble {
  transform: rotate(3deg);
}

.process-step__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(247, 245, 240, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-ink);
}

.process-step__badge svg {
  width: 14px;
  height: 14px;
}

/* ============================================================================
   CERTIFICATIONS
   ============================================================================ */

.process-certifications {
  padding: 2.5rem 0;
  background: var(--pp-sand-2);
}

.process-certifications__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 3rem;
}

.process-certifications__header h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: var(--pp-space-xs);
}

.process-certifications__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pp-space-xl) clamp(1.5rem, 4vw, 3rem);
}

.process-certifications__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-sm);
  min-width: 96px;
}

.process-certifications__grid img {
  height: 80px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}

.process-certifications__grid span {
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--pp-body);
  text-align: center;
}


/* ============================================================================
   GLOBAL CTA
   ============================================================================ */

.process-cta {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.process-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.process-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.process-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(6, 35, 36, 0.74) 0%,
    rgba(6, 35, 36, 0.42) 40%,
    rgba(6, 35, 36, 0.08) 70%
  );
}

.process-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-left: 10px;
}

.process-cta h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-top: var(--pp-space-xs);
}

.process-cta .eyebrow {
  color: var(--pp-signal);
}

.process-cta__text {
  color: #fffefc !important;
  margin: var(--pp-space-md) 0 var(--pp-space-lg);
  max-width: 42ch;
  transform: translateY(-5px);
}

.process-cta__scribble {
  position: absolute;
  z-index: 2;
  right: var(--pp-space-xl);
  bottom: var(--pp-space-xl);
  margin: 0;
  font-family: var(--pp-font-hand);
  font-size: 1.6rem;
  line-height: 1.15;
  color: #fff;
  text-align: right;
}

.process-cta__scribble svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  margin-left: 4px;
  vertical-align: middle;
}


/* ============================================================================
   ANIMATION HOOKS
   Respects the site's existing [data-reveal] / [data-reveal-group] reveal
   system driven by js/reveal.js — no page-specific JS or extra library.
   ============================================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--pp-dur-med) var(--pp-ease), transform var(--pp-dur-med) var(--pp-ease);
}

[data-reveal].is-revealed,
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

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


/* ============================================================================
   DESKTOP SCALE — two process steps per viewport rhythm
   ============================================================================ */

@media (min-width: 1081px) {
  .process-timeline__list {
    max-width: 1220px;
  }

  .process-step {
    min-height: 300px;
  }

  .process-step__media {
    height: 220px;
  }

  .process-step__content {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 16px;
  }

  .process-step__number {
    font-size: 3rem;
  }

  .process-step__content h3 {
    font-size: 1.25rem;
  }

  .process-step__content p {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .process-step__node {
    width: 20px;
    height: 20px;
  }

  .process-step__node::after {
    width: 6px;
    height: 6px;
  }
}

/* ============================================================================
   TABLET — matches the 1080px breakpoint already used in navbar.css
   ============================================================================ */

@media (max-width: 1080px) {

  .process-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
  }

  .process-hero__inner {
    width: 100%;
    min-height: clamp(620px, 90vh, 800px);
    display: flex;
    align-items: center;
  }

  .process-hero__content {
    width: min(100%, 600px);
  }

  .process-commitment__top {
    grid-template-columns: 1fr;
  }

  .process-commitment__divider {
    display: none;
  }

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

  .process-cta__inner {
    max-width: 100%;
  }

}



/* ============================================================================
   MOBILE — matches the 960px breakpoint already used in navbar.css
   ============================================================================ */

@media (max-width: 960px) {

  .process-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    min-height: 700px;
  }

  .process-hero__inner {
    width: 100%;
    min-height: 700px;
    align-items: flex-end;
    padding-bottom: 2rem;
  }

  .process-hero__content {
    width: 100%;
    padding-top: calc(var(--nav-height-scrolled, 64px) + 2rem);
    padding-bottom: 1rem;
  }

  .process-hero__media::after {
    content: none;
  }

  .process-hero__scribble {
    display: none;
  }

  .process-commitment__grid {
    grid-template-columns: 1fr;
    gap: var(--pp-space-md);
  }
    .process-value {
    align-items: center;
    transform: none;
  }

  .process-value__icon {
    transform: none;
  }

  .process-value h3,
  .process-value:nth-child(1) h3,
  .process-value:nth-child(2) h3,
  .process-value:nth-child(3) h3,
  .process-value:nth-child(4) h3 {
    margin-left: 0;
    transform: none;
    padding-top: 0;
    text-align: center;
  }

  .process-value:hover .process-value__icon {
    transform: translateY(-4px);
  }
  .process-timeline {
    padding-top: 1.5rem;
  }

  .process-timeline__header {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .process-timeline__header h2 {
    font-size: clamp(1.5rem, 6vw, 2.3rem);
    white-space: normal;
  }

  .process-timeline__path {
    display: none;
  }

  .process-timeline__list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    width: 1.5px;
    background: var(--pp-harbor);
    opacity: 0.3;
    z-index: 0;
  }

  .process-step,
  .process-step--reverse {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 10px;
    min-height: 0;
    padding: 12px 0;
  }

  .process-step__node {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    margin-left: 1px;
    margin-top: 4px;
  }

  .process-step__media,
  .process-step--reverse .process-step__media {
    grid-column: 2;
    grid-row: 1;
    height: 150px;
  }

  .process-step__content,
  .process-step--reverse .process-step__content {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
    text-align: left;
  }

  .process-step__content h3 {
    font-size: 0.95rem;
  }

  .process-step__content p {
    font-size: 0.78rem;
  }

  .process-step__scribble {
    font-size: 1rem;
  }

  .process-step__number {
    font-size: 1.55rem;
  }

  .process-cta {
    min-height: 0;
    text-align: center;
  }

  .process-cta__inner {
    margin: 0 auto;
    text-align: center;
  }

  .process-cta .btn {
    margin: 0 auto;
  }

  .process-cta__scribble {
    display: none;
  }

  .process-certifications__grid img {
    height: 42px;
    max-width: 78px;
  }

  /* On small screens the drifting leaves and seed particles add nothing
     visible at this scale and aren't worth the extra paint work, so they
     are simply switched off; the waves/contours/aura layers stay since
     they're single low-cost gradient elements. */
  .process-timeline__leaf-drift,
  .process-timeline__seed {
    display: none;
  }
  

}


/* ==========================================================
   PROCESS BACKGROUND — RESPONSIVE
   ========================================================== */

@media (max-width: 1080px) {
  .process-timeline {
    background-size: 110% auto;
    background-position: center top;
  }
}

@media (max-width: 768px) {
  .process-timeline {
    background-size: 150% auto;
    background-position: center top;
  }
}

@media (max-width: 480px) {
  .process-timeline {
    background-size: 190% auto;
    background-position: center top;
  }
}
@media (max-width: 640px) {
  .process-hero__image {
    object-position: 20% center;
  }
}
/* ==========================================================
   TABLET ONLY — 961px to 1080px
   ========================================================== */

@media (min-width: 961px) and (max-width: 1080px) {

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

  .process-value {
    align-items: center;
    transform: none;
    text-align: center;
  }

  .process-value__icon {
    transform: none;
  }

  .process-value h3,
  .process-value:nth-child(1) h3,
  .process-value:nth-child(2) h3,
  .process-value:nth-child(3) h3,
  .process-value:nth-child(4) h3 {
    margin-left: 0;
    transform: none;
    padding-top: 5px;
    width: 100%;
    text-align: center;
  }

  .process-value:hover .process-value__icon {
    transform: translateY(-4px);
  }
}
@media (max-width: 640px) {

  .process-value:nth-child(4) h3 {
    font-size: 0;
    margin-left: 0 !important;
    transform: none !important;
    text-align: center;
    width: 100%;
  }

  .process-value:nth-child(4) h3::before,
  .process-value:nth-child(4) h3::after {
    display: block;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 1000;
    line-height: 1.5;
    text-align: center;
  }

  .process-value:nth-child(4) h3::before {
    content: "Delivering Goodness";
  }

  .process-value:nth-child(4) h3::after {
    content: "Worldwide";
  }
.process-value:nth-child(1) h3 {
    font-size: 0;
    margin-left: 0 !important;
    transform: none !important;
    text-align: center;
    width: 100%;
  }

  .process-value:nth-child(1) h3::before,
  .process-value:nth-child(1) h3::after {
    display: block;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 1000;
    line-height: 1.5;
    text-align: center;
  }

  .process-value:nth-child(1) h3::before {
    content: "Responsibly"; ;
  }

  .process-value:nth-child(1) h3::after {
    content: " Sourced";
  }
}

  @media (min-width: 641px) and (max-width: 1080px) {

  .process-value:nth-child(4) h3 {
    font-size: 0;
    margin-left: 0 !important;
    transform: none !important;
    text-align: center;
    width: 100%;
  }

  .process-value:nth-child(4) h3::before,
  .process-value:nth-child(4) h3::after {
    display: block;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 1000;
    line-height: 1.5;
    text-align: center;
  }

  .process-value:nth-child(4) h3::before {
    content: "Delivering Goodness";
  }

  .process-value:nth-child(4) h3::after {
    content: "Worldwide";
  }
  .process-value:nth-child(1) h3 {
    font-size: 0;
    margin-left: 0 !important;
    transform: none !important;
    text-align: center;
    width: 100%;
  }

  .process-value:nth-child(1) h3::before,
  .process-value:nth-child(1) h3::after {
    display: block;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 1000;
    line-height: 1.5;
    text-align: center;
  }

  .process-value:nth-child(1) h3::before {
    content: "Responsibly"; ;
  }

  .process-value:nth-child(1) h3::after {
    content: " Sourced";
  }

}