@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --font-sans: "Noto Sans";
  --font-serif: "Playfair Display";
  --forest: #143326;
  --deep-forest: #0d3b2e;
  --moss: #85b59d;
  --sage: #c2dace;
  --cream: #f7f5ef;
  --black: #231f20;
  --footer: #143326;
  --page: 1152px;
}

* { box-sizing: border-box; }

/* Anillo de foco global. Solo :focus-visible, asi el raton no lo dispara.
   Sobre los fondos oscuros (--forest) el contorno verde es invisible, asi que
   ahi se invierte a --sage. Los componentes que ya definen su propio foco
   (.position-row, .desktop-nav, las pistas de slider) van despues en el
   archivo y siguen ganando. */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}
.header-bar.dark :focus-visible,
.job-hero :focus-visible,
.final-cta :focus-visible,
body > footer :focus-visible,
.slider-control.light :focus-visible,
.button-dark:focus-visible {
  outline-color: var(--sage);
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--black);
  background: #fff;
  font-family: var(--font-sans), Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-family: var(--font-serif), Georgia, serif;
  color: var(--forest);
  font-weight: 400;
}
h3 { font-weight: 600; }

.header-bar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  transition: transform .3s ease-out, opacity .3s ease-out, background-color .3s ease-out, box-shadow .3s ease-out;
}
.header-bar.is-down {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.header-bar.is-up,
.header-bar.is-down { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
/* Revealed mid-page the bar condenses so it doesn't eat the viewport. */
.header-bar.is-up .site-header,
.header-bar.is-down .site-header { height: 104px; }
.header-spacer { height: 192px; }
/* The fixed primary header needs a little breathing room before page content.
   A margin on the fixed bar would not affect the document flow, so the spacer
   carries the 30px separation instead. */
.header-bar.dark + .header-spacer { height: 222px; }

.site-header {
  transition: height .3s ease-out;
  height: 192px;
  max-width: 1280px;
  margin: auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { width: 183px; }
.desktop-nav { display: flex; align-items: center; gap: 50px; }
.desktop-nav a, .footer-main nav a {
  text-transform: uppercase;
  color: var(--forest);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
.desktop-nav .nav-cta {
  border: 1px solid var(--forest);
  border-radius: 6px;
  padding: 20px 22px;
  font-size: 16px;
}
.mobile-menu { display: none; }

/* Fixed heights are floors, not ceilings: every band that holds copy uses
   min-height so longer text grows the section instead of spilling out of it. */
.hero {
  /* Shares the same 1152px content limits used by the sections below, so the
     photo's outer edge lines up with the right-hand page margin. */
  max-width: var(--page);
  min-height: 446px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
}
/* La columna de texto se cierra a la misma altura que la foto para que la base
   the button aligns with the bottom edge of the image. */
.hero-copy { height: 446px; padding: 17px 32px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy .button { margin-top: auto; }
.hero h1 {
  max-width: 512px;
  margin-bottom: 23px;
  font-size: 64px;
  line-height: 70px;
  letter-spacing: -.025em;
}
/* max-width, not width: a fixed width forced this column wider than its 1fr
   share on mid-size screens and squeezed the photo beside it. */
.hero-copy p { max-width: 480px; margin-bottom: 35px; line-height: 20px; }
/* Altura fija (no min-height): la columna de texto es mas alta y estiraba la
   foto por debajo de su tope. */
/* height fijo (no min-height): la columna de texto es mas alta y estiraba la
   foto. align-self solo en el grid de escritorio: en el flex column de movil
   ese eje es el horizontal y colapsaria el ancho de la foto a 0. */
.hero-image { height: 446px; width: 100%; max-width: 640px; justify-self: end; }
@media (min-width: 901px) { .hero-image { align-self: start; } }
/* Photo half of every split band. The image is taken out of flow so it can
   never contribute its own intrinsic height to the row: the copy column and the
   band's min-height decide how tall the section is, and the photo fills that. */
.hero-image, .split-media { position: relative; overflow: hidden; }
.hero-image > img, .split-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.image-button {
  position: absolute;
  left: 53px;
  bottom: 52px;
  min-width: 240px;
  min-height: 60px;
  padding: 8px 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,.86);
  color: var(--forest);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}
.button {
  min-height: 54px;
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}
.button-dark { background: var(--forest); color: #fff; }
.button-outline { border: 1px solid var(--forest); color: var(--forest); }

/* min-height keeps the band's current proportions; the padding is what protects
   it once the heading or the labels wrap to more lines. */
.trusted {
  max-width: var(--page);
  min-height: 385px;
  margin: auto;
  padding-block: 84px 64px;
  display: grid;
  /* 300px was one line short: "the CRE Industry" didn't fit at 44px, so the
     heading broke into four lines and the 70px gutter pushed the marquee well
     clear of it. 360px holds the intended three lines and the tighter gap
     brings the first icon back toward the heading. */
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 48px;
}
.trusted h2 { font-size: 44px; line-height: 50px; }
/* Auto-rotating marquee: the viewport clips to a whole number of items and the
   track slides by one item at a time, so nothing is ever half-visible. */
/* overflow:hidden clips both axes, so the hover lift needs vertical room inside
   the clip; the negative margin keeps the row visually where it was. */
.trusted-viewport { overflow: hidden; margin-block: -12px; padding-block: 12px; }
.trusted-list {
  --visible: 4;
  --gap: 25px;
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
/* Fewer items than fit at once: the script leaves the row static, so the short
   run is centred rather than hanging off the left edge with a gap after it. */
.trusted-list.is-static { justify-content: center; }
/* Envoltorio que main.js pone alrededor del viewport para alojar el boton de
   pausa. Ocupa la celda que antes ocupaba el viewport, de modo que la reja de
   dos columnas de .trusted no cambia; el boton queda bajo los logos y no en una
   fila propia junto al heading. min-width:0 porque un item de grid no encoge por
   debajo de su contenido, y sin el la fila de logos ensancharia la columna. */
.marquee-shell { min-width: 0; }
/* Boton de pausa de la marquesina (WCAG 2.2.2). Lo inserta main.js solo cuando
   la fila se mueve de verdad. Comparte el disco --sage de los iconos de la fila
   que controla, asi que se lee como parte del bloque en lugar de como un glifo
   suelto; el icono en --forest da 9.28:1 sobre ese fondo. 44px de area de
   pulsacion (WCAG 2.5.8). Alineado a la derecha, bajo el final de la fila,
   donde no compite con el primer logo. */
.marquee-toggle {
  display: grid; place-items: center;
  /* El margen derecho lo separa del borde del viewport, donde quedaba pegado al
     ultimo logo. */
  margin: 14px 60px 0 auto;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  /* Mismo disco en reposo que los iconos de la fila (#dce9e2) y mismo --sage al
     pasar el raton: el control pertenece a esa familia visual, y usar --sage fijo
     lo dejaria mas oscuro que el propio contenido que acompana. */
  background: #dce9e2; color: var(--forest);
  cursor: pointer;
  /* Mismo gesto y misma curva que .trusted-list span, con el que comparte fila:
     asi el bloque entero responde al raton como una sola familia. */
  transition: transform .3s ease-out, background-color .3s ease-out;
  /* Entrada propia: main.js inserta el boton despues de que el observer de
     [data-reveal] haya recorrido el DOM, asi que no puede entrar por ese
     mecanismo. Misma curva que los reveals para que la llegada sea la del resto
     del bloque. Sin fill-mode a proposito: con "both" el estado final del
     keyframe queda aplicado y su "transform: none" ganaria al translateY del
     hover, dejando el boton sin gesto tras la entrada. */
  animation: marquee-toggle-in .6s cubic-bezier(.22, .61, .36, 1);
}
@keyframes marquee-toggle-in {
  from { opacity: 0; transform: translateY(8px); }
}
/* El fundido al alternar pausa/play lo hace main.js sobre el boton: innerHTML
   reemplaza el svg de golpe y una transicion CSS aqui no llegaria a correr. */
.marquee-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.marquee-toggle:hover { background: var(--sage); transform: translateY(-4px); }
/* El foco oscurece el disco entero ademas del anillo: un control de un solo
   icono no deberia depender solo del contorno para senalar donde esta. Lleva el
   mismo desplazamiento que el hover para que teclado y raton reciban la misma
   respuesta. */
.marquee-toggle:focus-visible { background: var(--forest); color: #fff; transform: translateY(-4px); }
.marquee-toggle:active { transform: translateY(-4px) scale(.94); }
.marquee-toggle[hidden] { display: none; }
/* En una columna el bloque ya no comparte fila con el heading, asi que el boton
   se centra bajo los logos. */
@media (max-width: 900px) {
  .marquee-toggle { margin-inline: auto; }
}
/* Sin movimiento: se van el desplazamiento y la entrada, pero los cambios de
   color se conservan — son el feedback de hover y foco, no decoracion. */
@media (prefers-reduced-motion: reduce) {
  .marquee-toggle { animation: none; transition: background-color .3s ease-out; }
  .marquee-toggle:hover,
  .marquee-toggle:focus-visible,
  .marquee-toggle:active { transform: none; }
}
@media (max-width: 1100px) { .trusted-list { --visible: 3; } }
.trusted-list div { text-align: center; color: var(--forest); }
.trusted-list span {
  width: 60px; height: 60px; margin: 0 auto 22px;
  border-radius: 50%; background: #dce9e2;
  display: grid; place-items: center;
}
.trusted-list span img { width: 28px; height: 28px; object-fit: contain; }
.trusted-list p {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 16px; line-height: 1.15; text-transform: uppercase;
}

.placements-section {
  min-height: 912px;
  background: linear-gradient(#0d3b2e, #0f4737);
  color: #fff;
}
.section-shell { width: var(--page); margin: auto; padding-top: 109px; }
/* Reserves the strip the positions card pulls up into (-207px) plus a gap, so a
   longer heading or taller cards can never leave the slider arrows underneath
   it. Below the 912px floor this padding is invisible. */
.placements-section .section-shell { padding-bottom: 232px; }
.placements-section h2 { margin-bottom: 39px; color: #fff; font-size: 44px; line-height: 50px; }
.placement-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 96px) / 4); gap: 32px;
  /* proximity, not mandatory: mandatory re-snaps the track on every scroll event,
     so scrolling the page vertically over it made the cards drift sideways.
     overflow-y must be stated explicitly — left alone it computes to auto, which
     turns this into a vertical scroll container that swallows the wheel instead
     of letting the page scroll. */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Vertical margin/padding pair is pure clip room for the hover lift. The
     inline 15px is not cancelled by a negative margin, so it reads as a real
     inset at both ends of the track. */
  margin: -16px 0 -28px; padding: 16px 15px 28px;
  /* Without this the card's scroll-snap-align:start pins it to the scrollport
     edge and the inset is swallowed as scroll offset. */
  scroll-padding-inline: 15px;
}
.placement-grid::-webkit-scrollbar { display: none; }
/* min-height, so a three-line title grows the card. Row items stretch to the
   tallest one, so the set stays flush. */
.placement-card {
  scroll-snap-align: start;
  min-height: 352px; padding: 31px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 12px; background: #fff; color: var(--black);
  /*box-shadow: 0 4px 16px rgba(0,0,0,.25);*/
  background-image: url("../img/capa-arbol.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out;
}
.placement-card:hover {
  background-color: #F7F5EF;
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.32);
}
@media (hover: none) {
  /* Touch devices resolve :hover on tap and leave the card stuck raised. */
  .placement-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
}
.tag {
  align-self: flex-start; border-radius: 20px; padding: 7px 12px;
  color: var(--forest); background: var(--moss);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.placement-card h3 {
  margin-bottom: 15px; color: var(--forest); font-size: 20px; line-height: 24px;
}
.placement-card p { margin: 0; }
.slider-control {
  margin: 38px auto 0; display: flex; align-items: center; justify-content: center; gap: 20px;
}
.arrow-button {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent;
  transition: box-shadow .2s ease;
}
.arrow-button svg { width: 17px; height: 17px; fill: currentColor; }
.arrow-next svg { transform: scaleX(-1); }
.slider-control.light .arrow-button { color: #fff; }
.slider-control.dark .arrow-button { color: var(--forest); }
/* The circle only exists on hover: an outline, no fill — the arrow keeps its colour. */
.arrow-button:not(:disabled):hover { box-shadow: inset 0 0 0 1px currentColor; }
.arrow-button:disabled { opacity: .35; cursor: default; }
.slider-control[hidden] { display: none; }

/* main.js makes the scrollable track a tab stop so keyboard users can pan it with
   the arrow keys; without a ring the focus would land somewhere invisible. Offset
   is negative so the outline sits inside the scrollport instead of being clipped. */
.placement-grid:focus, .team-grid:focus, .reason-grid:focus { outline: none; }
.placement-grid:focus-visible, .team-grid:focus-visible, .reason-grid:focus-visible {
  outline: 2px solid var(--forest); outline-offset: -2px;
}

.positions {
  width: var(--page); min-height: 391px; margin: -207px auto 120px;
  position: relative; z-index: 2; display: grid; grid-template-columns: 448px 1fr;
  overflow: hidden; border-radius: 20px; background: #fff;
  box-shadow: 0 4px 13px rgba(0,0,0,.25);
  scroll-margin-top: 100px;
}
.positions-copy { padding: 75px 32px 65px 64px; }
.eyebrow { color: var(--forest); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.positions h2 { margin: 24px 0 44px; font-size: 44px; line-height: 50px; }

.relationship {
  max-width: var(--page); margin: 0 auto; position: relative;
  /*background-image: radial-gradient(circle at 100% 10%, rgba(20,51,38,.06), transparent 18%);*/
}
.section-heading { 
  position: relative;
  margin-bottom: 40px; 
}
.relationship-decor {
    position: absolute;
    top: -117px;
    right: calc((100vw - var(--page)) / -2);
    width: 250px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    animation: decorFloatA 9s ease-in-out infinite;
}
.section-heading > *:not(.relationship-decor) { position: relative; z-index: 1; }
.relationship > *:not(.relationship-decor) { position: relative; z-index: 1; }
.section-heading h2, .why > h2 { margin-bottom: 20px; font-size: 44px; line-height: 50px; }
/* This margin collapses out of .section-heading and, against the grid's -10px
   top margin plus its matching 10px padding, is the whole visible gap. */
.section-heading p { max-width: 755px; margin-bottom: 35px; }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
  overflow: visible;
  scroll-snap-type: none; scroll-behavior: smooth;
  scrollbar-width: none;
  /* Vertical clip room for the portrait hover without creating inline overflow. */
  margin: -10px 0 -22px; padding: 10px 0 22px;
}
.team-grid::-webkit-scrollbar { display: none; }
/* A portrait tile carries no growing copy, so it keeps its fixed proportion —
   min-height only lets it match a taller sibling in the same row. */
.team-card {
  scroll-snap-align: start;
  display: block; color: inherit;
  min-height: 347px; position: relative; overflow: hidden; border-radius: 12px;
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
  transition: box-shadow .3s ease-out;
}
/* El anillo global se dibuja fuera del borde de la tarjeta, y en un track que
   scrollea las tarjetas de los extremos lo pierden contra el borde del
   scrollport. Offset negativo para que quede dentro, y radio a juego con la
   tarjeta. Solo aqui: las de placements no son enfocables. */
.team-card:focus-visible { outline-offset: -3px; border-radius: 12px; }
.team-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .45s ease-out;
}
/* The photo fills the card, so it zooms inside the existing clip rather than
   the whole card lifting like the placement cards do. */
.team-card:hover > img { transform: scale(1.05); }
.team-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,.3); }
.team-card:hover .team-overlay, .team-card:focus-visible .team-overlay {
  opacity: 1; transform: translateY(0);
}
.team-overlay {
  position: absolute; inset: auto 0 0; padding: 76px 31px 24px;
  color: #fff; background: linear-gradient(transparent, rgba(20,20,20,.92));
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  text-align: left !important;
}
.team-overlay h3 { margin-bottom: 5px; font-size: 16px; line-height: 20px; font-weight: bold; }
.team-overlay p { margin: 0; line-height: 20px; }
@media (hover: none) {
  .team-card:hover > img { transform: none; }
  .team-card:hover { box-shadow: 0 4px 4px rgba(0,0,0,.25); }
  /* No hover on touch, so the names stay visible rather than unreachable. */
  .team-overlay { opacity: 1; transform: none; }
}
.relationship .slider-control { margin-top: 36px; }

.why { max-width: var(--page); margin: 110px auto 0; }
.why > h2 { margin-bottom: 46px; }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* The grid only becomes a track at 575px, but the shared slider script counts
   pages at every width and would reveal the arrows over the desktop grid. */
.why .slider-control { display: none; }
.reason-card { min-height: 210px; padding: 25px 34px; border-radius: 10px; background: var(--sage); }
.reason-icon { display: flex; align-items: center; height: 37px; }
.reason-icon img { display: block; width: 28px; height: 35px; object-fit: contain; }
.reason-card h3 { 
  margin: 8px 0 9px; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; 
  font-weight: 700;
}
.reason-card p { margin: 0; line-height: 20px; }

.final-cta {
  min-height: 685px; padding: 102px 20px 80px;
  position: relative; overflow: hidden; text-align: center;
}
.final-cta-decor {
    position: absolute;
    left: 50%;
    bottom: -217px;
    transform: translateX(15%);
    width: 497px;
    max-width: none;
    height: auto;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
    animation: decorFloatCentered 11s ease-in-out infinite;
}
.final-cta > *:not(.final-cta-decor) { position: relative; z-index: 1; }
.final-cta .img { width: 93px; height: auto; margin: 0 auto 34px; }
.final-cta h2 { margin-bottom: 26px; font-size: 44px; line-height: 50px; color: var(--black); }
.final-cta p { margin-bottom: 36px; }
.final-cta .button { min-width: 255px; }

footer { 
  background: var(--footer);
  color: #fff;
  min-height: 410px;
 }
.footer-main, .footer-bottom {
  max-width: var(--page);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 240px;
  column-gap: 56px;
}
.footer-main {
  min-height: 272px;
  row-gap: 44px;
  padding-top: 86px;
  padding-bottom: 50px;
}
.footer-brand { width: 157px; }
.footer-brand img {
  display: block;
  width: 100%;
  aspect-ratio: 183 / 76.01;
  background: transparent;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.footer-main nav { display: flex; flex-direction: column; gap: 32px; }
.footer-bottom {
  min-height: 105px;
  border-top: 1px solid #9a9a9a;
  align-items: center;
  row-gap: 14px;
  padding: 34px 0;
}
.footer-bottom > :nth-child(1) { grid-row: 1; grid-column: 1; justify-self: start; }
.footer-bottom > :nth-child(2) { grid-row: 1; grid-column: 1; justify-self: start; margin-left: 45%; }
.footer-bottom > :nth-child(3) { grid-row: 1; grid-column: 2; }
.footer-bottom > :nth-child(4) { grid-row: 1; grid-column: 3; }
.footer-bottom a, .footer-bottom span { font-size: 16px; }
.footer-bottom a:nth-child(2) { text-transform: uppercase; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.footer-credit {
  max-width: var(--page);
  margin: auto;
  padding-bottom: 34px;
}
.footer-credit span { font-size: 15px; opacity: 0.8; }
@media (max-width: 1080px){
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { height: auto; padding: 42px var(--mobile-pad) 46px; }
  .hero-copy .button { margin-top: 0; }
  .hero h1 { font-size: clamp(43px, 12vw, 58px); line-height: 1.02; }
  .hero-copy p { width: auto; margin-bottom: 30px; }
  .hero-image { min-height: 330px; height: 330px; order: -1; max-width: none; justify-self: auto; }
  :root { --mobile-pad: 22px; }
}
@media (max-width: 900px) {
  .site-header { height: 94px; padding: 0 var(--mobile-pad); }
  .header-spacer { height: 94px; }
  .header-bar.dark + .header-spacer { height: 124px; }
  .header-bar.is-down { transform: none; opacity: 1; pointer-events: auto; }
  .header-bar.is-up .site-header,
  .header-bar.is-down .site-header { height: 94px; }
  .brand { width: 140px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 25px; height: 2px; background: var(--forest); }
  .mobile-menu nav {
    position: absolute; right: 0; top: 74px; z-index: 20; width: min(300px, calc(100vw - 44px));
    padding: 24px; display: flex; flex-direction: column; gap: 20px;
    border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  .mobile-menu nav a { color: var(--forest); font-weight: 700; text-transform: uppercase; font-size: 13px; }
  /* The desktop floors are taller than the stacked mobile content, so every one
     of them is released here and the section's own padding sets the rhythm. */
  .image-button { left: var(--mobile-pad); right: var(--mobile-pad); bottom: 22px; }
  /* Buttons inherit body size; 16px uppercase bold is oversized for a label at
     this width. The 54px min-height stays — that's the tap target, not the type. */
  .button, .image-button { font-size: 14px; }
  .button { width: 100%; }
  /* A ancho completo el min-width de escritorio desbordaria en pantallas angostas. */
  .final-cta .button { min-width: 0; }
  .trusted { min-height: 0; padding: 72px var(--mobile-pad); display: block; }
  .trusted h2 { font-size: 38px; line-height: 43px; margin-bottom: 45px; }
  .trusted-list { --visible: 2; --gap: 16px; }
  .placements-section { min-height: 0; }
  .section-shell { width: auto; padding: 70px var(--mobile-pad) 64px; }
  .placements-section .section-shell { padding-bottom: 64px; }
  /* Same specificity dance as the line above: the desktop 100px would otherwise
     outrank the generic .section-shell override here. */
  .process-section .section-shell { padding-top: 70px; }
  .placements-section h2 { font-size: 38px; line-height: 43px; }
  /* The track bleeds off the right edge here so the next card peeks, and the
     left keeps the section gutter — margin-left cancels the desktop inset,
     which would otherwise push the first card 15px past the heading. */
  .placement-grid {
    margin-right: calc(var(--mobile-pad) * -1); padding-right: var(--mobile-pad);
    margin-left: -15px;
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .placement-grid::-webkit-scrollbar, .team-grid::-webkit-scrollbar { display: none; }
  .placement-card { min-width: min(82vw, 310px); scroll-snap-align: start; }
  .positions { width: calc(100% - 44px); min-height: 0; margin: 44px auto 85px; display: flex; flex-direction: column; }
  .positions-copy { padding: 46px 28px; }
  .positions h2 { font-size: 38px; line-height: 43px; }
  .positions > .split-media { height: 270px; order: -1; }
  .relationship, .why { padding: 0 var(--mobile-pad); }
  .relationship-decor { top: 58px; right: -95px; width: 170px; opacity: .1; }
  .section-heading h2, .why > h2 { font-size: 38px; line-height: 43px; }
  /* Kept under the desktop value now that it's 35px. */
  .section-heading p { margin-bottom: 28px; }
  .team-grid { gap: 16px; }
  .why { margin-top: 85px; }
  .why > h2 { margin-bottom: 36px; }
  /* Two columns rather than one: a single card spanning the full 856px of this
     range is mostly empty next to three lines of copy. */
  .reason-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .reason-card { min-height: 188px; }
  .final-cta { min-height: auto; padding: 95px var(--mobile-pad); }
  .final-cta h2 { font-size: 38px; line-height: 43px; }
  .final-cta h2 br { display: none; }
  footer { padding: 0 var(--mobile-pad); }
  .footer-main {
    min-height: 0;
    padding: 64px 0 48px;
    grid-template-columns: 1fr 1fr;
    gap: 40px 28px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-main nav { max-width: none; gap: 24px; }
  .footer-bottom {
    min-height: 0;
    padding: 28px 0 34px;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    align-items: start;
  }
  .footer-bottom > :nth-child(n) { grid-row: auto; grid-column: auto; justify-self: start; margin-left: 0; }
}

@media (max-width: 767px) {
  .team-grid {
    margin-right: calc(var(--mobile-pad) * -1); padding-right: var(--mobile-pad);
    display: flex; gap: 16px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .team-card { min-width: min(82vw, 310px); scroll-snap-align: start; }
  footer { padding: 0 var(--mobile-pad); }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 56px 0 40px;
  }
  .footer-brand { grid-column: auto; }
  .footer-main nav { gap: 20px; }
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0 30px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  :root { --page: calc(100vw - 64px); }
  .site-header { padding: 0 32px; }
  .desktop-nav { gap: 25px; }
  /* Half-width columns here are ~470px, so the 64px display sizes and the 64px
     side padding both come down a step. */
  .hero h1, .about-hero h1, .positions-hero h1, .profile-copy h1, .job-hero h1 { font-size: 52px; line-height: 58px; }
  .about-hero > div, .about-team-callout > div, .profile-copy, .positions-hero > div { padding-inline: 32px; }
  .positions-copy { padding-left: 32px; }
  /* The fixed 256px button plus 42px gaps left the title column ~170px at the
     bottom of this range — five lines for a longer job title. Both come down so
     the text columns keep a usable measure. */
  .position-row { grid-template-columns: 1.05fr 1.6fr 190px; gap: 28px; }
  .position-row .button { width: 190px; }
  .network-card > div, .about-intro { padding-inline: 32px; }
  .job-hero-inner, .privacy-content { padding-inline: 32px; }
  .about-team-callout > div { padding-top: 90px; }
}

/* Shared interior pages */
/* The forest header is shared across the site. It remains solid while scrolling
   so navigation always has the same contrast and visual identity. */
.header-bar.dark { background: var(--forest); }
.header-bar.dark .desktop-nav a { color: #fff; }
.header-bar.dark .desktop-nav .nav-cta { border-color: #fff; }
.header-bar.dark .brand img { filter: brightness(0) invert(1); }
.page-eyebrow, .back-link {
  display: inline-block; color: var(--forest); font-size: 16px;
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.back-link{
  font-size: 12px !important;
}
.profile-copy .back-link { color: #000; }
/* About */
.about-hero { max-width: 1280px; min-height: 554px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; }
.about-hero > div { padding: 83px 64px 60px; }
.about-hero h1 { margin: 50px 0 24px; font-size: 64px; line-height: 70px; }
.about-hero p { max-width: 448px; line-height: 20px; }
/* Three auto-placed children put the copy column in row 1 and the button in
   row 2, so the tall paragraph block sized row 1 and pushed the button below
   the whole text column. Placing them explicitly keeps the button under its
   heading: the copy spans both rows, and because row 2 is flexible it stops
   contributing to row 1's intrinsic height, leaving that row sized by the h2. */
.about-intro {
  min-height: 446px; padding: 92px max(64px, calc((100vw - 1152px)/2));
  display: grid; grid-template-columns: calc(50% - 64px) 1fr; grid-template-rows: auto 1fr; gap: 64px;
  background: #f9f9f9;
}
/* margin-bottom: 0 — the UA default (0.83em ≈ 37px here) was inflating row 1 on
   top of the 64px row gap, so the gap alone sets the distance to the button. */
.about-intro h2 { grid-area: 1 / 1; margin-bottom: 0; font-size: 44px; line-height: 50px; }
.about-intro > div { grid-area: 1 / 2 / span 2 / 3; }
.about-intro p { max-width: 576px; }
.about-intro .button { grid-area: 2 / 1; width: 246px; align-self: start; margin-top: 40px; }
.process-section { min-height: 835px; color: #fff; background: var(--forest); }
.process-section .section-shell { padding-top: 100px; }
.process-section h2 { color: #fff; font-size: 44px; line-height: 50px; }
.process-grid { margin-top: 90px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; }
/* Flex rather than a border on the row itself: the rule has to start clear of
   the marker instead of running underneath it, and ::after gives the dotted
   stroke its own box to sit in. */
.process-line { height: 22px; display: flex; align-items: center; gap: 16px; }
.process-line span {
  flex: none;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cream); color: var(--forest); font-size: 8px;
}
.process-line::after {
  content: ""; flex: 1;
  border-top: 1px dotted var(--cream);
}
.process-grid h3 { margin: 25px 0 22px; font-size: 20px; text-transform: uppercase; }
.process-grid p { 
  line-height: 20px;
  max-width: 190px; 
}
/* Overhangs into the cream section below, the same way the home page's
   positions card overhangs the dark band. Without the negative margin the card
   sat flush on the seam and the 290px of clearance below read as dead space. */
.network-card {
  min-height: 391px; margin: 100px 0 -184px; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; border-radius: 20px; background: #fff; color: var(--black);
  box-shadow: 0 4px 13px rgba(0,0,0,.25);
}
/* The photo column drives the card past its 391px floor, so the copy has to
   centre itself in whatever height that leaves instead of sitting at the top.
   Harmless on .split-media, whose image is absolutely positioned. */
.network-card > div { padding: 68px 64px; display: flex; flex-direction: column; justify-content: center; }
/* The trailing UA margin would count as content and throw the centring off. */
.network-card > div > :last-child { margin-bottom: 0; }
.network-card h2 { color: var(--forest); }
.who-we-serve {
  min-height: 779px; padding: 290px 64px 70px;
  position: relative; overflow: hidden;
  text-align: center; background: var(--cream);
}
.who-we-serve-decor {
    position: absolute;
    top: 5px;
    left: 0;
    width: 243px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    transform: translateX(0);
}
.who-we-serve > *:not(.who-we-serve-decor) { position: relative; z-index: 1; }
/* The h2's UA margin collapsed against the grid's, so the gap was the larger of
   the two: 80px. Zeroing the UA margin makes the grid's the only one in play,
   halved to 40px. */
.who-we-serve h2 { margin-bottom: 0; font-size: 44px; line-height: 50px; }
.serve-grid { max-width: 900px; margin: 40px auto 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 70px; }
.serve-grid div { display: flex; align-items: center; gap: 25px; text-align: left; }
.serve-grid span { min-width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--forest); font-size: 25px; }
.serve-grid p { margin: 0; font-family: var(--font-serif); color: var(--forest); text-transform: uppercase; }
.who-we-serve .button { width: 246px; }
.about-team-callout { max-width: 1280px; min-height: 557px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; }
.about-team-callout > div { padding: 145px 64px 60px; }
.about-team-callout h2 { margin: 28px 0; font-size: 44px; line-height: 50px; max-width:500px; }
.about-team-list {
  min-height: 850px; padding: 83px max(64px, calc((100vw - 1152px)/2));
  position: relative; overflow: hidden;
  background: #f9f9f9; text-align: center;
}
.about-team-list-decor {
    position: absolute;
    top: -170px;
    right: 0;
    width: 290px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    animation: decorFloatB 10s ease-in-out infinite;
}
.about-team-list > *:not(.about-team-list-decor) { position: relative; z-index: 1; }
.about-team-list > h2 { color: var(--black); font-size: 44px; line-height: 50px; }
.about-team-list > p { max-width: 865px; margin: 28px auto 65px; }

/* Positions */
.positions-hero { min-height: 557px; display: grid; grid-template-columns: 1fr 1fr; background: var(--forest); color: #fff; }
/* Four values, like .profile-copy: the page gutter belongs on the outer edge
   only. As a three-value shorthand it was applied to both sides of a half-width
   column, leaving ~190px of measure at 1920px and breaking the h1 into four
   lines. The inner edge just needs a normal gap before the photo. */
.positions-hero > div { padding: 125px 64px 60px max(64px, calc((100vw - 1152px)/2)); }
.positions-hero .split-media { max-width: 640px; width: 100%; }
.positions-hero .page-eyebrow { color: var(--moss); }
.positions-hero h1 { margin: 50px 0 25px; color: #fff; font-size: 64px; line-height: 70px; }
/* max-width carries the padding so the rows keep a gutter below 1184px instead
   of running edge to edge; content still measures 1120px on wide screens. */
.position-list { max-width: 1184px; min-height: 835px; margin: auto; padding: 76px 32px 100px; }
.position-row {
  min-height: 124px; margin-bottom: 35px; padding: 32px;
  display: grid; grid-template-columns: 1.05fr 1.6fr 256px; gap: 42px; align-items: center;
  border-radius: 12px; background: #fff; box-shadow: 0 1px 11px rgba(0,0,0,.16);
}
/* display:grid above would otherwise beat the UA's [hidden] { display: none }. */
.position-row[hidden] { display: none; }
/* Newly loaded rows receive focus; suppress the default ring for pointer users
   but keep a branded one for keyboard navigation. */
.position-row[tabindex]:focus { outline: none; }
.position-row[tabindex]:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.position-row[data-extra-position]:not([hidden]) {
  animation: row-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(12px); }
}
.position-row h2 { margin-bottom: 8px; font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 700; }
.position-row p { margin: 0; line-height: 20px; }
.position-row .button { width: 256px; }
.load-more {
  margin: 85px auto 0; display: flex; width: fit-content; align-items: center; gap: 18px;
  border: 0; background: transparent; color: var(--forest);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
}
.open-positions-more-arrow {
  width: 17px; height: 17px; fill: currentColor;
  flex: 0 0 auto; color: var(--forest);
  transform: rotate(-90deg);
}

/* Position detail */
.job-hero {
  box-sizing: border-box;
  min-height: 545px;
  padding-top: 192px;
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: #fff;
}
.job-hero.header-primary { padding-top: 222px; }
.job-hero-tree {
    position: absolute;
    right: 115px;
    bottom: -30px;
    width: 430px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: .22;
}
.job-hero-inner {
  box-sizing: border-box;
  max-width: 1280px; min-height: calc(545px - 192px); margin: auto; padding: 35px 64px 60px;
  display: flex; flex-direction: column; gap: 78px;
  position: relative; z-index: 1;
  width: 100%;
}
.job-hero.header-primary .job-hero-inner { min-height: calc(545px - 222px); }
.job-hero .back-link { color: #fff; }
.job-hero-copy { display: grid; align-content: start; }
.job-hero h1 { margin: 0; color: #fff; font-size: 64px; line-height: 70px; }
.job-hero-location { margin: 0; font-family: var(--font-serif), Georgia, serif; font-weight: 400; color: var(--moss); font-size: 44px; line-height: 50px; }
/* minmax(0, 800px): the fixed 800px column overflowed the viewport horizontally
   between 900px and 1200px, where the page has less than 1152px to give. */
.job-body { padding: 56px max(64px, calc((100vw - 1152px)/2)) 105px; display: grid; grid-template-columns: minmax(0, 800px) 288px; gap: 64px; background: #f9f9f9; }
/* Estos h2 son encabezados de seccion del puesto: nivel semantico h2 bajo el h1
   del titulo, pero con la tipografia de componente (sans/600) del diseno. */
.job-content h2 { margin: 0 0 26px; padding-top: 34px; font-family: var(--font-sans), Arial, sans-serif; font-weight: 600; color: inherit; font-size: 20px; line-height: 24px; }
.job-content h2:first-child { padding-top: 0; }
.job-content p, .job-content li { line-height: 20px; }
.job-content ul { padding-left: 24px; }
.job-list-group { margin: 0 0 22px; }
.job-list-group strong { font-weight: 400; }
/* min-height: three contacts already overran the fixed 357px, and the list is
   per-search — a fourth name has to lengthen the card. */
.contact-card {
  padding: 28px 32px 30px 32px; border-radius: 12px; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  /* Follows the reader down the job description. align-self keeps the grid from
     stretching the card to the row height, which would leave it nothing to
     travel within; top clears the condensed sticky header. */
  position: sticky; top: 124px; align-self: start;
}
.contact-card h2 { font-family: var(--font-sans), Arial, sans-serif; font-weight: 600; color: inherit; font-size: 20px; margin-bottom: 0px; }
.contact-card > a:not(.button) { min-height: 65px; padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #aaa; color: var(--forest); }
/* The last contact row has no separator: it closes against the button (or the
   card border if there is no button). */
.contact-card > a:not(.button):last-of-type,
.contact-card > a:not(.button):has(+ .button) { border-bottom: 0; }
/* :not(.screen-reader-text) — el enlace lleva ademas una etiqueta solo para
   lectores de pantalla, que no debe recibir el circulo de la flecha. */
.contact-card > a span:not(.screen-reader-text) {
  flex: none;
  width: 29px; height: 29px; display: grid; place-items: center;
  border: 1px solid var(--forest); border-radius: 50%; color: var(--forest);
  transition: background-color .25s ease-out, color .25s ease-out;
}
.contact-card > a span:not(.screen-reader-text) svg { width: 12px; height: 12px; fill: currentColor; transform: scaleX(-1); }
.contact-card > a:hover span:not(.screen-reader-text) { background: var(--forest); color: #fff; }
.contact-card .button { width: 225px; margin-top: 10px; }

/* Profile: the photo keeps its original size, follows the reader while the
   biography scrolls, and stops at the end of the complete profile layout. */
.profile-layout { display: grid; grid-template-columns: 55% 45%; }
.profile-hero { display: contents; }
.profile-copy { grid-column: 1; min-height: 572px; background: var(--cream); }
/* .profile-hero uses display: contents, so the copy is the reliable desktop
   anchor for extending its cream band across the media column.  Keeping this
   decorative layer on the copy leaves .split-media's sticky positioning
   entirely untouched. */
@media (min-width: 901px) {
  .profile-copy { position: relative; z-index: 0; }
  .profile-copy::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 100%;
    width: 45vw;
    background: var(--cream);
  }
}
.profile-hero > .split-media {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  position: sticky; top: 124px; height: 572px; max-width: 575px; width: 100%;
}
/* Column flex so the contact block can be pushed to the bottom with an auto
   margin: the band keeps its 572px floor when the copy is short, and once the
   name or title wraps to another line the block stays put instead of leaving a
   gap that grows with the heading. */
.profile-copy { padding: 34px 64px 60px max(64px, calc((100vw - 1152px)/2)); display: flex; flex-direction: column; align-items: flex-start; }
.profile-copy h1 { margin: 48px 0 0; font-size: 64px; line-height: 70px; }
.profile-role { margin: 0; max-width: 585px; font-family: var(--font-serif), Georgia, serif; font-weight: 400; color: var(--forest); font-size: 44px; line-height: 50px; }
/* The bottom margin is the minimum gap above the contact rule; auto below only
   adds to it when there's slack left over. */
.profile-location { margin: 25px 0 60px; font-size: 20px; }
.profile-contact { width: 100%; max-width: 575px; margin-top: auto; padding-top: 31px; border-top: 1px solid #D1D1D1; display: grid; grid-template-columns: 1fr 1fr 30px 30px; gap: 18px; color: var(--forest); }
.profile-contact a { font-weight: 700; }
/* All four fields are optional: without anchoring, when a phone is missing the
   iconos se corren a las columnas de texto libres. */
.profile-contact > span:nth-of-type(1) { grid-column: 1; }
.profile-contact > span:nth-of-type(2) { grid-column: 2; }
.profile-contact > .profile-contact-icon { grid-column: 3; }
.profile-contact > .profile-contact-icon ~ .profile-contact-icon { grid-column: 4; }
.profile-contact-icon { display: grid; place-items: center; }
.profile-contact-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.profile-hero .split-media > img { object-position: center 15%; }
.profile-bio { grid-column: 1; max-width: 576px; margin-left: max(64px, calc((100vw - 1152px)/2)); padding: 64px 15px 75px 0;}
/* Also the_content(): same flat-markup contract as .privacy-content, but scaled
   for a 576px measure rather than the full page width. */
.profile-bio :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif), Georgia, serif;
  color: var(--forest);
  font-weight: 400;
}
.profile-bio h1 { margin: 40px 0 20px; font-size: 40px; line-height: 46px; }
.profile-bio h2 { margin: 36px 0 18px; font-size: 32px; line-height: 38px; }
.profile-bio h3 { margin: 32px 0 16px; font-size: 25px; line-height: 31px; }
.profile-bio h4 { margin: 28px 0 14px; font-size: 21px; line-height: 27px; }
.profile-bio h5 { margin: 24px 0 12px; font-size: 18px; line-height: 24px; }
.profile-bio h6 { margin: 24px 0 12px; font-size: 16px; line-height: 22px; }
.profile-bio > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.profile-bio p { margin-bottom: 22px; line-height: 20px; }
.profile-bio :is(ul, ol) { margin-bottom: 22px; padding-left: 24px; }
.profile-bio li { margin-bottom: 8px; line-height: 20px; }
.profile-bio ul { list-style: disc; }
.profile-bio ol { list-style: decimal; }
.profile-bio :is(ul, ol) :is(ul, ol) { margin: 8px 0 0; }
.profile-bio :is(strong, b) { font-weight: 600; }
.profile-bio a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.profile-bio a:hover { color: var(--deep-forest); text-decoration-thickness: 2px; }
.profile-bio :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
.profile-bio blockquote { margin: 28px 0; padding-left: 22px; border-left: 2px solid var(--sage); }
.profile-bio img { margin: 28px 0; border-radius: 10px; }
.profile-bio > :last-child { margin-bottom: 0; }

/* Privacy */
/* Same gutter treatment as the position list: padding inside a wider max-width. */
.privacy-content { max-width: 1280px; margin: auto; padding: 50px 64px 100px; }
/* Body is the_content(): no wrappers to hang spacing on, so headings own their
   own top margin. h2 keeps the old section rhythm (58px gap) minus the 20px the
   preceding paragraph already contributes. */
/* h3-h6 aren't covered by the global serif rule, so they'd fall back to the UA's
   bold sans. All six headings share the h1 treatment; only the scale changes. */
.privacy-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif), Georgia, serif;
  color: var(--forest);
  font-weight: 400;
}
.privacy-content h1 { margin: 65px 0; font-size: 64px; line-height: 70px; }
.privacy-content h2 { margin: 38px 0 20px; font-size: 44px; line-height: 50px; }
.privacy-content h3 { margin: 32px 0 16px; font-size: 32px; line-height: 38px; }
.privacy-content h4 { margin: 28px 0 14px; font-size: 26px; line-height: 32px; }
.privacy-content h5 { margin: 24px 0 12px; font-size: 22px; line-height: 28px; }
.privacy-content h6 { margin: 24px 0 12px; font-size: 18px; line-height: 24px; }
.privacy-content > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.privacy-content p { margin-bottom: 20px; line-height: 20px; }
.privacy-content :is(ul, ol) { margin-bottom: 20px; padding-left: 24px; }
.privacy-content li { margin-bottom: 8px; line-height: 20px; }
.privacy-content ul { list-style: disc; }
.privacy-content ol { list-style: decimal; }
.privacy-content :is(ul, ol) :is(ul, ol) { margin: 8px 0 0; }
.privacy-content :is(strong, b) { font-weight: 600; }
/* Links inherit body color, so underline is the only affordance carrying them. */
.privacy-content a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.privacy-content a:hover { color: var(--deep-forest); text-decoration-thickness: 2px; }
.privacy-content :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
.privacy-content > :last-child { margin-bottom: 0; }

/* 404 */
.error-page {
  min-height: 620px;
  padding: 96px 20px 104px;
  position: relative;
  overflow: hidden;
  background: var(--cream);
  text-align: center;
}
.error-decor {
  position: absolute;
  left: 50%;
  bottom: -230px;
  transform: translateX(12%);
  width: 470px;
  max-width: none;
  height: auto;
  opacity: .8;
  pointer-events: none;
  z-index: 0;
  animation: decorFloatCentered 11s ease-in-out infinite;
}
.error-page > *:not(.error-decor) { position: relative; z-index: 1; }
.error-page .eyebrow { display: block; margin-bottom: 14px; letter-spacing: .12em; }
.error-code {
  margin-bottom: 6px;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 150px;
  line-height: 1;
  color: var(--moss);
  letter-spacing: .02em;
}
.error-page h1 { margin-bottom: 22px; font-size: 44px; line-height: 50px; }
.error-lead { max-width: 540px; margin: 0 auto 36px; line-height: 24px; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.error-actions .button { width: 246px; }
.error-links {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  font-size: 14px;
  color: var(--forest);
}
.error-links a { text-decoration: underline; text-underline-offset: 3px; }
.error-links a:hover { color: var(--deep-forest); text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .error-page { min-height: auto; padding: 80px var(--mobile-pad) 88px; }
  .error-code { font-size: 118px; }
  .error-page h1 { font-size: 38px; line-height: 43px; }
  .error-decor { width: 330px; bottom: -150px; opacity: .55; }
}

@media (max-width: 575px) {
  .error-page { padding: 62px var(--mobile-pad) 70px; }
  .error-code { font-size: 92px; }
  .error-page h1 { font-size: 31px; line-height: 36px; }
  .error-page h1 br { display: none; }
  .error-lead { font-size: 15px; line-height: 22px; }
  .error-actions { width: 100%; }
  .error-actions .button { width: 100%; }
  .error-links { margin-top: 36px; gap: 10px 20px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .error-decor { animation: none; }
}

@media (max-width: 900px) {
  .header-bar.dark .mobile-menu summary span { background: #fff; }
  .about-hero, .about-team-callout, .positions-hero, .profile-hero { min-height: 0; display: flex; flex-direction: column; }
  .profile-layout { display: block; }
  .profile-hero > .split-media { position: relative; top: auto; height: 390px; }
  .about-hero > div, .about-team-callout > div, .positions-hero > div, .profile-copy { padding: 55px var(--mobile-pad); }
  .about-hero h1, .positions-hero h1, .profile-copy h1, .job-hero h1, .privacy-content h1 { font-size: 46px; line-height: 51px; }
  /* The 50px top margin was set against a 64px display size; under a 46px h1 it
     leaves the eyebrow stranded at the top of the band. */
  .about-hero h1, .positions-hero h1 { margin: 28px 0 20px; }
  .about-hero > .split-media, .about-team-callout .split-media,
  .positions-hero .split-media, .profile-hero > .split-media { height: 390px; order: -1; max-width: none; }
  .about-intro { padding: 70px var(--mobile-pad); grid-template-columns: 1fr; grid-template-rows: none; gap: 25px; }
  /* Single column: drop the explicit placement so the three children fall back
     to source order — heading, paragraphs, then the button. */
  .about-intro h2, .about-intro > div, .about-intro .button { grid-area: auto; }
  .about-intro .button { margin-top: 0; }
  .about-intro h2, .network-card h2, .who-we-serve h2, .about-team-callout h2, .about-team-list > h2, .profile-role, .privacy-content h2 { font-size: 38px; line-height: 43px; }
  /* The shell now carries the bottom padding for every dark band. */
  .process-section { min-height: auto; padding-bottom: 0; }
  /* Measures sized for the desktop split columns. Stacked full-width they cut
     the copy off well short of the gutter — 190px inside an 856px column. */
  .process-grid p, .about-hero p, .about-intro p { max-width: none; }
  /* 90px was set against a 64px heading; the h2 is 38px here. No margin reset on
     the heading: it's a sibling of the grid in normal flow, so the two margins
     collapse to this one anyway — and .process-section h2 would also have caught
     the network card's heading, which needs to keep its space above the copy. */
  .process-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 52px; }
  .process-grid article {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
  }
  .process-line {
    grid-row: 1 / span 2;
    align-self: stretch;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
  }
  .process-line::after {
    flex: 1;
    border-top: 0;
    border-left: 1px dotted var(--cream);
  }
  .process-grid p{
    margin-bottom: 0;
  }
  .process-grid article h3 { margin-top: 0; }
  /* No overhang when the card is full-bleed and stacked — it would just sit on
     top of the cream section's own heading. */
  .network-card { min-height: 0; margin: 85px 0 0; display: flex; flex-direction: column; }
  .network-card > div { padding: 42px 28px; }
  .network-card .split-media { height: 280px; }
  .who-we-serve { min-height: 0; padding: 75px var(--mobile-pad); }
  .who-we-serve-decor { top: 18px; left: -14px; width: 210px; }
  .serve-grid { grid-template-columns: 1fr; margin: 50px 0; }
  .about-team-list { min-height: 0; padding: 75px var(--mobile-pad); }
  .about-team-list-decor { top: 0; right: -34px; width: 170px; }
  .positions-hero > div { padding-top: 70px; }
  .position-list { min-height: 0; max-width: none; padding: 50px var(--mobile-pad) 80px; }
  /* Stacked the row always clears 124px on its own, so the desktop floor goes. */
  .position-row { min-height: 0; margin-bottom: 28px; padding: 28px; grid-template-columns: 1fr; gap: 18px; }
  /* 85px was sized against the desktop list's 100px bottom padding. */
  .load-more { margin-top: 60px; }
  /* Stretched to the full card width it read as a slab around a two-word label.
     It sizes to its text and sits at the start of the stacked row — unlike the
     page-level CTAs, this one is a per-row action, not a section's call. */
  .position-row .button { width: fit-content; justify-self: start; }
  /* padding-top clears the fixed bar, so it has to track the mobile header's
     94px — left at the desktop 192px it opened ~100px of dead space, and the
     inner box still carried the 353px desktop floor on top of that. */
  .job-hero { min-height: 0; padding-top: 94px; }
  .job-hero.header-primary { padding-top: 124px; }
  .job-hero-inner { max-width: none; min-height: 0; gap: 46px; padding: 36px var(--mobile-pad) 72px; }
  /* The gap already separates the back link from the title; the old margin
     stacked another 85px on top of it. */
  .job-hero h1 { margin-top: 0; }
  .job-hero-location { font-size: 38px; line-height: 43px; }
  .job-hero-tree { right: -60px; bottom: -20px; width: 300px; }
  /* The 64px gap was sized for the desktop column split. Stacked it needs to
     read as a section break between the description and the card, so it stays
     generous — just not the 104px the gap plus a margin was producing. */
  .job-body { padding: 56px var(--mobile-pad) 75px; display: flex; flex-direction: column; gap: 58px; }
  /* Stacked, the card follows the description it belongs to: no order override,
     so it keeps its DOM position at the end. position: static because sticky
     has nothing left to travel within once the grid column is gone. */
  .contact-card { width: 100%; min-height: 0; position: static; }
  .profile-copy { order: 2; min-height: auto;}
  /* Stacked, there's no row height to fill, so the block goes back to normal
     flow and the location's floor gap is no longer needed. */
  .profile-location { margin-bottom: 0; }
  /* The desktop 1fr 1fr 30px 30px collapsed to a single column, which stranded
     each icon centered on its own row. Flex wrap instead: the numbers sit side
     by side while they fit, and the icon pair stays together and left-aligned
     on whatever line it lands on. */
  .profile-contact {
    margin-top: 60px; max-width: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px;
  }
  .profile-contact-icon { place-items: center start; }
  .profile-bio { max-width: none; min-height: 0; margin: 0; padding: 60px var(--mobile-pad); }
  .privacy-content { max-width: none; padding: 55px var(--mobile-pad) 75px; }
  .privacy-content h1 { margin-bottom: 45px; }
  .privacy-content h3 { font-size: 28px; line-height: 34px; }
  .privacy-content h4 { font-size: 24px; line-height: 30px; }
  .privacy-content h5 { font-size: 20px; line-height: 26px; }
  .privacy-content h6 { font-size: 17px; line-height: 23px; }
}

@media (max-width: 767px) {
  .relationship-decor,
  .final-cta-decor,
  .who-we-serve-decor,
  .about-team-list-decor {
    display: none;
  }
  .about-team-list h2,
  .about-team-list p{
    text-align: left;
  }
}

/* The 900px scale still reads oversized on narrow phones — h1 at 46px and every
   h2 at 38px eat the viewport. One step down across the board, site-wide. */
@media (max-width: 575px) {
  /* Body copy comes down with the headings. The hard-coded 20px line-heights
     were already tight at 16px (1.25), so they open up as the size drops. */
  body { font-size: 15px; line-height: 1.45; }
  .hero-copy p, .about-hero p, .process-grid p, .position-row p,
  .job-content p, .job-content li, .profile-bio p, .profile-bio li,
  .privacy-content p, .privacy-content li,
  .team-overlay p, .reason-card p { line-height: 22px; }
  .trusted-list p { font-size: 15px; }

  /* The old clamp topped out at 46px here, leaving the home hero larger than
     every interior h1; 40px puts them back in the same family. */
  .hero h1 { font-size: clamp(32px, 9vw, 40px); }
  .about-hero h1, .positions-hero h1, .profile-copy h1, .job-hero h1, .privacy-content h1 { font-size: 37px; line-height: 42px; }
  .about-hero h1, .positions-hero h1 { margin: 22px 0 16px; }
  .trusted h2,
  .placements-section h2,
  .positions h2,
  .section-heading h2, .why > h2,
  .final-cta h2,
  .about-intro h2, .network-card h2, .who-we-serve h2, .about-team-callout h2, .about-team-list > h2,
  .profile-role, .job-hero-location, .privacy-content h2,
  /* Never had a mobile override at all — sat at the desktop 44px down to 320px. */
  .process-section h2 { font-size: 31px; line-height: 36px; }
  /* Component-level h3s and the 20px lead paragraphs. */
  .placement-card h3, .process-grid h3, .position-row h2,
  .job-content h2, .contact-card h2, .profile-location { font-size: 18px; line-height: 22px; }
  .team-overlay h3, .reason-card h3 { font-size: 15px; }
  .tag, .eyebrow { font-size: 11px; }
  .privacy-content h3 { font-size: 25px; line-height: 31px; }
  .privacy-content h4 { font-size: 21px; line-height: 27px; }
  .privacy-content h5 { font-size: 19px; line-height: 25px; }
  .privacy-content h6 { font-size: 16px; line-height: 22px; }
  .privacy-content h1 { margin-bottom: 36px; }
  .process-line span{
      width: 15px;
      height: 15px;
  }
  .process-grid h3{
    font-size: 16px;
  }
  .process-grid p{
    font-size: 14px;
  }
  /* Gutter tightens with the viewport so copy isn't squeezed into a narrow column. */
  :root { --mobile-pad: 18px; }

  /* Vertical rhythm: every band loses roughly a quarter of its mobile padding. */
  .hero-copy { padding: 32px var(--mobile-pad) 36px; }
  .hero-image { min-height: 260px; height: 260px; }
  .hero-copy p { margin-bottom: 24px; }
  .trusted { padding: 54px var(--mobile-pad); }
  .trusted h2 { margin-bottom: 32px; }
  .section-shell { padding: 54px var(--mobile-pad) 48px; }
  .placements-section .section-shell { padding-bottom: 48px; }
  .process-section .section-shell { padding-top: 54px; }
  .placements-section h2 { margin-bottom: 28px; }
  .about-hero > div, .about-team-callout > div, .positions-hero > div, .profile-copy { padding: 42px var(--mobile-pad); }
  .positions-hero > div { padding-top: 54px; }
  .about-intro { padding: 54px var(--mobile-pad); gap: 20px; }
  .who-we-serve, .about-team-list { padding: 56px var(--mobile-pad); }
  .serve-grid { margin: 36px 0; }
  .position-list { padding: 38px var(--mobile-pad) 60px; }
  .positions-hero .split-media { height: 300px; }
  /* Tracks the 90px bar this breakpoint sets. */
  .job-hero { padding-top: 90px; }
  .job-hero.header-primary { padding-top: 120px; }
  .job-hero-inner { gap: 38px; padding: 30px var(--mobile-pad) 60px; }
  .job-hero-tree { right: -70px; bottom: -14px; width: 240px; }
  .job-body { padding: 46px var(--mobile-pad) 56px; gap: 48px; }
  .profile-bio { padding: 46px var(--mobile-pad); }
  /* Bio headings step down with the rest of the site's 575px scale. */
  .profile-bio h1 { font-size: 32px; line-height: 38px; margin-top: 32px; }
  .profile-bio h2 { font-size: 27px; line-height: 33px; margin-top: 30px; }
  .profile-bio h3 { font-size: 22px; line-height: 28px; }
  .profile-bio h4 { font-size: 19px; line-height: 25px; }
  .profile-bio h5 { font-size: 17px; line-height: 23px; }
  .profile-bio h6 { font-size: 15px; line-height: 21px; }
  .profile-contact { margin-top: 44px; }
  .profile-hero > .split-media { height: 320px; }
  .privacy-content { padding: 42px var(--mobile-pad) 58px; }
  .final-cta { padding: 70px var(--mobile-pad); }
  .final-cta .img { width: 74px; margin-bottom: 26px; }
  .final-cta h2 { margin-bottom: 20px; }

  /* Cards keep their radius; only the inner padding and floors come down. */
  .positions { width: calc(100% - 36px); margin: 34px auto 64px; }
  .positions-copy { padding: 36px 22px; }
  .positions > .split-media { height: 220px; }
  .network-card { margin-top: 64px; }
  .network-card > div { padding: 32px 22px; }
  .network-card .split-media { height: 225px; }
  .placement-card { min-height: 300px; padding: 24px; }
  .reason-card { min-height: 0; padding: 22px 24px; }
  .position-row { min-height: 0; margin-bottom: 24px; padding: 22px; }
  .contact-card { padding: 22px 24px; }
  .why { margin-top: 64px; }
  .why > h2 { margin-bottom: 26px; }

  /* Six stacked cards is a long scroll on a phone, so the grid becomes a swipe
     track here — same mechanics as the placements and team sliders, and the
     shared script drives its arrows once the control is visible. */
  .reason-grid {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Bleeds off the right gutter so the next card peeks. */
    margin-right: calc(var(--mobile-pad) * -1); padding-right: var(--mobile-pad);
  }
  .reason-grid::-webkit-scrollbar { display: none; }
  .reason-card { flex: 0 0 min(78vw, 290px); scroll-snap-align: start; }
  /* !important because the reveal script writes the stagger as an inline style.
     Staggering siblings reads well in the grid, but here the cards arrive one
     swipe at a time and the sixth card's 400ms delay just reads as lag. */
  .reason-card { transition-delay: 0s !important; }
  .why .slider-control:not([hidden]) { display: flex; }

  /* Sliders: one card at a time, but the next one still peeks so the swipe
     affordance survives. The track's negative margin must keep matching the
     gutter or the row loses its right-edge bleed. */
  .placement-card, .team-card { min-width: min(84vw, 300px); }
  .placement-grid, .team-grid { gap: 12px; }
  .trusted-list { --visible: 2; --gap: 12px; }
  .trusted-list span { width: 50px; height: 50px; margin-bottom: 16px; }
  .trusted-list span img { width: 24px; height: 24px; }
  .team-card { min-height: 300px; }
  .slider-control { margin-top: 26px; gap: 14px; }
  .image-button { min-width: 0; min-height: 52px; bottom: 16px; }
  .button, .image-button { font-size: 13px; }

  /* Fixed pixel widths wider than the 575px viewport minus gutters. */
  .about-intro .button, .who-we-serve .button, .contact-card .button { width: 100%; }
  .load-more { margin-top: 56px; }
  .process-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .process-grid h3 { margin: 18px 0 14px; }
  .serve-grid { grid-template-columns: 1fr; gap: 26px; }
  .serve-grid span { min-width: 48px; height: 48px; font-size: 20px; }
  .serve-grid div { gap: 18px; }
  .profile-contact { gap: 14px 26px; padding-top: 24px; }
  .contact-card > a:not(.button) { min-height: 56px; }

  /* The logo is a 183x76 two-line lockup (~2.4:1), so at 118px it stands ~49px
     tall. A 90px bar leaves ~20px of breathing room above and below it while the
     44px hamburger still clears the edges. */
  .site-header { height: 90px; padding-inline: var(--mobile-pad); }
  .header-spacer { height: 90px; }
  .header-bar.dark + .header-spacer { height: 120px; }
  .header-bar.is-up .site-header { height: 90px; }
  .brand { width: 118px; display: flex; }
  /* "ADVISORS" sits on the lockup's baseline, which drags the block's optical
     center below the geometric one; a hair of top padding pulls it back level
     with the hamburger. */
  .brand img { padding-top: 3px; }
  /* top is relative to the 44px summary, so 44 + 8 clears the button and lands
     just past the bar's bottom edge (the button has 23px of slack below it). */
  .mobile-menu nav { top: 64px; padding: 20px; gap: 16px; width: min(280px, calc(100vw - var(--mobile-pad) * 2)); }

  /* Footer: two columns no longer fit, so the nav stacks in a single column. */
  .footer-main { padding: 46px 0 36px; grid-template-columns: 1fr; gap: 30px; }
  .footer-main nav { gap: 18px; }
  .footer-brand { width: 130px; }
  .footer-main nav a { font-size: 14px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 14px; padding: 22px 0 28px; }
  .footer-bottom a, .footer-bottom span,
  .footer-bottom a:nth-child(2) { font-size: 14px; }
  .footer-credit span { font-size: 14px; }
}

/* Opening sequence */
html.loader-active, html.loader-active body { overflow: hidden; }
.site-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; overflow: hidden;
  background: #143326;
  isolation: isolate;
  /* La segunda animacion es la red de seguridad definida mas abajo: si el JS no
     llega a retirar la cortina, se desvanece sola a los 6s en vez de dejar la
     pagina tapada de forma permanente. */
  animation: loader-arrive .35s ease-out both,
             loader-failsafe .01s linear 6s forwards;
}
.loader-tree {
  position: absolute; left: 50%; bottom: -17%; z-index: -2;
  width: min(82vw, 1050px); height: 112%; object-fit: contain;
  transform: translateX(-50%) scale(.91);
  transform-origin: center bottom;
  opacity: .18;
  animation: tree-bloom 2.45s cubic-bezier(.22,.65,.25,1) both;
}
.loader-glow {
  position: absolute; width: min(72vw, 860px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194,218,206,.09), rgba(20,51,38,0) 66%);
  transform: scale(.35);
  animation: glow-open 2.15s cubic-bezier(.2,.7,.2,1) .15s both;
}
.loader-mark-wrap {
  position: relative; width: clamp(150px, 18vw, 231px); aspect-ratio: 231 / 340;
  clip-path: inset(100% 0 0);
  filter: drop-shadow(0 10px 35px rgba(0,0,0,.18));
  animation: mark-reveal 1.25s cubic-bezier(.76,0,.24,1) .65s forwards;
}
.loader-mark { width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.loader-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
  background-size: 280% 100%;
  background-position: 145% 0;
  -webkit-mask: url("../img/loader-monogram.svg") center / contain no-repeat;
  mask: url("../img/loader-monogram.svg") center / contain no-repeat;
  animation: mark-sheen .72s ease-out 1.6s both;
}
.loader-rings { position: absolute; width: clamp(220px, 28vw, 360px); aspect-ratio: 1; }
.loader-rings i {
  position: absolute; inset: 0; border: 1px solid rgba(247,245,239,.2); border-radius: 50%;
  opacity: 0; transform: scale(.45);
  animation: ring-pulse 1.35s cubic-bezier(.2,.65,.2,1) forwards;
}
.loader-rings i:nth-child(2) { animation-delay: .18s; }
.loader-rings i:nth-child(3) { animation-delay: .36s; }
.loader-line {
  position: absolute; left: 50%; bottom: 10%; height: 1px; width: 0;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(247,245,239,.8), transparent);
  animation: line-draw 1.35s cubic-bezier(.65,0,.35,1) .75s both;
}
.site-loader.is-leaving { pointer-events: none; animation: loader-leave .72s cubic-bezier(.76,0,.24,1) forwards; }
.site-loader.is-leaving .loader-mark-wrap { animation: mark-finish .62s cubic-bezier(.4,0,.2,1) both; }

@keyframes loader-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes tree-bloom {
  0% { opacity: .08; transform: translateX(-50%) scale(.88); filter: blur(3px); }
  55% { opacity: .4; }
  100% { opacity: .25; transform: translateX(-50%) scale(1); filter: blur(0); }
}
@keyframes glow-open { to { transform: scale(1); opacity: 1; } }
@keyframes mark-reveal {
  0% { clip-path: inset(100% 0 0); transform: translateY(20px) scale(.94); }
  100% { clip-path: inset(0 0 0); transform: translateY(0) scale(1); }
}
@keyframes mark-sheen {
  from { background-position: 145% 0; }
  to { background-position: -45% 0; }
}
@keyframes ring-pulse {
  0% { opacity: 0; transform: scale(.45); }
  35% { opacity: .35; }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes line-draw { 0% { width: 0; opacity: 0; } 45% { opacity: 1; } 100% { width: min(54vw, 560px); opacity: 0; } }
@keyframes mark-finish { to { transform: scale(1.04); opacity: 0; filter: blur(4px); } }
@keyframes loader-leave {
  0% { opacity: 1; clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(0 0 100%); }
}

/* main.js retira el loader por completo cuando la preferencia esta activa, asi
   que estas reglas solo cubren el hueco entre el pintado y la ejecucion del
   script: si el marcado llega desde una cache de pagina, la cortina no debe
   animarse ni un fotograma antes de desaparecer. */
@media (prefers-reduced-motion: reduce) {
  .site-loader, .loader-tree, .loader-glow, .loader-mark-wrap, .loader-mark,
  .loader-rings i, .loader-line, .site-loader.is-leaving {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
  .loader-mark-wrap { clip-path: inset(0); }
  html.loader-active, html.loader-active body { overflow: auto; }
}

/* Red de seguridad: si el JS falla despues de pintar (error, bloqueado a mitad),
   la cortina se desvanece sola y deja de interceptar el puntero en lugar de
   dejar la pagina tapada. El camino normal termina en 3.15s, asi que a los 6s
   esta animacion solo llega a verse cuando algo ha ido mal.
   Se declara como segunda animacion sobre la misma propiedad para no perder
   loader-arrive; el orden importa, asi que va junto a la regla original. */
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Sin JS nadie retira la cortina ni libera el scroll: la clase .js-reveal la
   pone un script inline del <head>, asi que su ausencia significa "no hay JS" y
   el loader no debe ni aparecer. */
html:not(.js-reveal) .site-loader { display: none; }

/* ============================================================
   Scroll reveal + interaction states
   ============================================================ */

/* The hidden state is gated behind .js-reveal (set by an inline script in the
   head) so that with JS disabled every section stays visible. */
/* Uses `translate` rather than `transform` so that elements which both reveal and
   lift on hover (reason cards, the CTA button) keep `transform` free — otherwise
   the reveal's higher specificity cancels the hover. */
/* data-reveal marks one element; data-reveal-children reveals whatever direct
   children a container happens to hold — long-form bodies mix headings, lists,
   tables and images, so their markup can change without touching this. */
[data-reveal], [data-reveal-children] > * {
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), translate .7s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal [data-reveal],
.js-reveal [data-reveal-children] > * { opacity: 0; translate: 0 24px; }
.js-reveal [data-reveal].is-revealed,
.js-reveal [data-reveal-children] > .is-revealed { opacity: 1; translate: none; }

/* --- Reveal accents --- */
/* Photography settles out of a slight push-in as its container arrives. The
   image is the only thing that moves: the hero's floating button and the
   overlays sit outside this selector and stay put. */
.hero-image[data-reveal] > img,
.split-media[data-reveal] > img { transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.js-reveal .hero-image[data-reveal] > img,
.js-reveal .split-media[data-reveal] > img { transform: scale(1.07); }
.js-reveal .hero-image[data-reveal].is-revealed > img,
.js-reveal .split-media[data-reveal].is-revealed > img { transform: none; }

/* The process band is a timeline, so its rule draws itself in from the marker
   outward and the marker lands with a small overshoot. */
.process-line::after { transition: transform .9s cubic-bezier(.22, .61, .36, 1) .12s; transform-origin: left; }
.process-line span { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .05s; }
.js-reveal .process-grid [data-reveal] .process-line::after { transform: scaleX(0); }
.js-reveal .process-grid [data-reveal] .process-line span { transform: scale(0); }
.js-reveal .process-grid [data-reveal].is-revealed .process-line::after { transform: scaleX(1); }
.js-reveal .process-grid [data-reveal].is-revealed .process-line span { transform: none; }

/* --- Buttons --- */
.button, .image-button {
  transition: transform .25s ease-out, background-color .25s ease-out,
              color .25s ease-out, box-shadow .25s ease-out;
}
.button-dark:hover {
  background: var(--deep-forest);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 51, 38, .3);
}
.button-outline:hover {
  background: var(--forest); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 51, 38, .22);
}
.image-button:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}
.button:active, .image-button:active { transform: translateY(0); }

/* --- Header nav --- */
.brand img { transition: opacity .25s ease-out, filter .3s ease-out; }
.brand:hover img { opacity: .72; }
.desktop-nav a:not(.nav-cta) { position: relative; }
/* Underline wipes in from the left and back out to the right. */
.desktop-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.desktop-nav a:not(.nav-cta):hover::after,
.desktop-nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1); transform-origin: left;
}
.desktop-nav .nav-cta { transition: background-color .25s ease-out, color .25s ease-out; }
.desktop-nav .nav-cta:hover { background: var(--forest); color: #fff; }
/* On the transparent dark header the fill inverts to stay legible. */
.header-bar.dark .desktop-nav .nav-cta:hover { background: #fff; color: var(--forest); }

/* --- Mobile menu --- */
/* background-color included so the dark header's white-to-forest swap fades in
   step with the bar behind it instead of snapping. */
.mobile-menu summary span { transition: transform .3s ease-out, opacity .2s ease-out, background-color .3s ease-out; }
.mobile-menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu[open] summary span:nth-child(2) { opacity: 0; }
.mobile-menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu[open] nav { animation: menu-in .28s cubic-bezier(.22, .61, .36, 1); }
.mobile-menu nav a { transition: transform .2s ease-out, opacity .2s ease-out; }
.mobile-menu nav a:hover { transform: translateX(4px); opacity: .7; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-10px); }
}

/* --- Cards & links --- */
/* These cards are flat pastel with no resting shadow, so a lift + drop shadow
   read as detached. The surface deepens and the icon nudges instead. */
.reason-card { transition: background-color .3s ease-out; }
.reason-icon { transition: transform .3s ease-out; }
.reason-card:hover { background: #b0d0bf; }
.reason-card:hover .reason-icon { transform: translateY(-3px); }

.trusted-list span { transition: transform .3s ease-out, background-color .3s ease-out; }
.trusted-list div:hover span { transform: translateY(-4px); background: var(--sage); }

/* Same treatment as the trusted marquee — these read as one family of icon +
   label pairs, so they answer the pointer the same way. */
.serve-grid span { transition: transform .3s ease-out, background-color .3s ease-out; }
.serve-grid div:hover span { transform: translateY(-4px); background: #b0d0bf; }

/* The row isn't a link (its button is), so it deepens in place rather than
   lifting — a lift would promise the whole card is clickable. */
.position-row { transition: box-shadow .3s ease-out; }
.position-row:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .17); }

/* Arrows lean the way they travel. */
.arrow-button { transition: box-shadow .2s ease, transform .25s ease-out; }
.slider-control .arrow-button:not(:disabled):hover { transform: translateX(-3px); }
.slider-control .arrow-next:not(:disabled):hover { transform: translateX(3px); }

/* `translate` rather than `transform`: the arrow is already rotated -90deg to
   point down, and translate applies before rotate so this stays vertical. */
.load-more .open-positions-more-arrow { transition: translate .25s ease-out; }
.load-more:hover .open-positions-more-arrow { translate: 0 4px; }

/* Same underline wipe as the header nav. width:fit-content keeps the rule on the
   text — flex/grid would otherwise stretch these anchors to the full column. */
.footer-main nav a, .footer-bottom a { 
  position: relative; 
  width: fit-content;
  color: #fff;
}
.footer-main nav a::after, .footer-bottom a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.footer-main nav a:hover::after, .footer-main nav a:focus-visible::after,
.footer-bottom a:hover::after, .footer-bottom a:focus-visible::after {
  transform: scaleX(1); transform-origin: left;
}

@media (hover: none) {
  /* Touch resolves :hover on tap and would leave these states stuck on. */
  .button-dark:hover, .button-outline:hover, .image-button:hover {
    transform: none; box-shadow: none;
  }
  .reason-card:hover { background: var(--sage); }
  .reason-card:hover .reason-icon { transform: none; }
  .trusted-list div:hover span { transform: none; }
  .serve-grid div:hover span { transform: none; background: var(--sage); }
  .position-row:hover { box-shadow: 0 1px 11px rgba(0, 0, 0, .16); }
  .slider-control .arrow-button:not(:disabled):hover,
  .slider-control .arrow-next:not(:disabled):hover { transform: none; }
  .load-more:hover .open-positions-more-arrow { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* El desplazamiento suave es movimiento igual que una transicion: afecta al
     salto del skip link, a los anclas y al paginado de los sliders, que llaman
     a scrollTo({ behavior: "smooth" }). Con "auto" el salto es instantaneo y
     scroll-behavior gana sobre el argumento del script. */
  html, .placement-grid, .team-grid, .reason-grid { scroll-behavior: auto; }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-children] > * { opacity: 1; translate: none; }
  .position-row[data-extra-position]:not([hidden]) { animation: none; }
  /* The reveal accents key off .is-revealed too, so their resting state has to
     be neutralised here as well or the images and timeline stay mid-animation. */
  .js-reveal .hero-image[data-reveal] > img,
  .js-reveal .split-media[data-reveal] > img { transform: none; }
  .js-reveal .process-grid [data-reveal] .process-line::after { transform: scaleX(1); }
  .js-reveal .process-grid [data-reveal] .process-line span { transform: none; }
  [data-reveal], [data-reveal-children] > *,
  .button, .image-button, .reason-card, .reason-icon,
  .trusted-list span, .serve-grid span, .position-row, .arrow-button,
  .hero-image[data-reveal] > img, .split-media[data-reveal] > img,
  .process-line::after, .process-line span,
  .load-more .open-positions-more-arrow, .mobile-menu summary span,
  .desktop-nav a::after, .footer-main nav a::after, .footer-bottom a::after { transition: none; }
  .slider-control .arrow-button:not(:disabled):hover,
  .slider-control .arrow-next:not(:disabled):hover { transform: none; }
  .load-more:hover .open-positions-more-arrow { translate: none; }
  .serve-grid div:hover span { transform: none; }
  .mobile-menu[open] nav { animation: none; }
  .relationship-decor, .final-cta-decor, .who-we-serve-decor, .about-team-list-decor { animation: none; }
  .button-dark:hover, .button-outline:hover, .image-button:hover { transform: none; }
  .reason-card:hover .reason-icon { transform: none; }
}
/* =WordPress Core ------ */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.color-verde{
  color: var(--forest) !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Enlace de salto. Reutiliza .screen-reader-text (oculto pero tabulable) y
   solo ajusta lo propio: color de marca y quedar por encima del loader.
   Va despues de .screen-reader-text:focus para ganar en el cascade. */
.skip-link:focus {
	background-color: var(--forest);
	color: #fff;
	font-weight: 600;
	z-index: 100001;
}
/* El foco programatico en <main> no debe pintar un contorno alrededor de
   toda la pagina. */
#main:focus { outline: none; }
@media (max-width: 575px){
    .page-eyebrow{
        font-size: 14px;
    }
}