/* =========================================================================
   GETU Shopping — "Nossa equipe" (team overview + member profiles)
   -------------------------------------------------------------------------
   GENERATED by build-team-wp.mjs from assets/css/team.css. Do not edit here:
   edit team.css (local source of truth), rebuild, and upload again.

   Loaded only on /nossa-equipe/ and its child pages (getu-team.php).
   Everything is scoped under .tm. The local names team.css uses are mapped
   onto the site's Bricks design tokens (--getu-*), whose values equal the
   local style.css tokens (verified 2026-10-25); no colour is duplicated.
   .wine-atmos, .grain, .btn and .btn-gold come from the live getu-chrome.css.
   ========================================================================= */

/* Token aliases: the names the approved markup and team.css ask for. */
.tm {
  --wine-900: var(--getu-color-wine-900);
  --wine-600: var(--getu-color-wine-600);
  --wine-500: var(--getu-color-wine-500);
  --gold: var(--getu-color-gold);
  --cream: var(--getu-color-cream);
  --ink: var(--getu-color-ink);
  --shadow-raised: var(--getu-shadow-raised);
  --shadow-float: var(--getu-shadow-float);
  --shadow-deep: var(--getu-shadow-deep);
  --ease-spring: var(--getu-ease-spring);
  --ease-out: var(--getu-ease-out);
}

/* WordPress parity layer. The approved pages render on top of Tailwind's
   preflight; the live site has no preflight here, and Bricks' own (layered)
   base CSS styles a bare <blockquote> (Georgia, 1.3em, 30px indent, 4px left
   border). These zero-specificity, unlayered rules restore exactly the
   computed values of the approved pages (compared element by element with
   check-team-wp.mjs --preview); every team.css class rule still wins. */
:where(.tm), :where(.tm) *, :where(.tm) ::before, :where(.tm) ::after { border-width: 0; border-style: solid; }
:where(.tm) svg { display: block; vertical-align: middle; }
:where(.tm) blockquote { position: static; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; }


.tm {
  --wine-800: var(--getu-color-wine-800);
  --gold-soft: var(--getu-color-gold-soft);
  --sand: var(--getu-color-sand);
  --on-wine: rgba(246, 241, 234, .86);
  --on-cream: rgba(36, 16, 21, .78);
  --hairline: rgba(42, 14, 20, .12);

  /* spacing tokens (8pt rhythm) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;

  /* radius tokens: photo inside card < card < feature photo < CTA panel */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Resets are wrapped in :where() (zero specificity) so every component class
   below — and the shared .btn / .btn-gold from style.css — always wins. */
:where(.tm) *, :where(.tm) *::before, :where(.tm) *::after { box-sizing: border-box; }
:where(.tm) img { display: block; max-width: 100%; }
:where(.tm) :where(h1, h2, h3, p, figure, blockquote, ol, ul) { margin: 0; }
:where(.tm) :where(ol, ul) { padding: 0; list-style: none; }
:where(.tm) a { color: inherit; text-decoration: none; }
:where(.tm) svg { flex-shrink: 0; }

.tm-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sp-5); }
.tm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Shared type ---------- */
.tm-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .3em; text-transform: uppercase; color: var(--wine-500);
}
.tm-eyebrow--gold { color: var(--gold); }

.tm-h2 {
  font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.04;
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}

/* ---------- Breadcrumb (on wine) ---------- */
.tm-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; font-size: 14px; color: var(--on-wine); }
.tm-crumbs li { display: inline-flex; align-items: center; }
.tm-crumbs li + li::before { content: "/"; content: "/" / ""; margin-inline: 10px; color: rgba(246, 241, 234, .5); }
/* 44px tall hit area without changing the visual line height */
.tm-crumbs a { display: inline-block; padding-block: 11px; margin-block: -11px; border-radius: 4px; transition: opacity .25s var(--ease-out); }
.tm-crumbs a:hover { opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.tm-crumbs a:active { opacity: .6; }
.tm-crumbs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tm-crumbs [aria-current="page"] { color: var(--cream); }

/* ---------- Text link with gold underline segment ---------- */
.tm-link {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 6px 0 var(--sp-3); font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--wine-600);
  transition: opacity .25s var(--ease-out);
}
.tm-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gold);
  transform: scaleX(.22); transform-origin: left; transition: transform .5s var(--ease-out);
}
.tm-link svg { transition: transform .4s var(--ease-spring); }
.tm-link:focus-visible { outline: 2px solid var(--wine-600); outline-offset: 4px; border-radius: 4px; }
.tm-link:focus-visible::after { transform: scaleX(1); }
.tm-link:active { opacity: .7; }
.tm-link--light { color: var(--cream); }
.tm-link--light:focus-visible { outline-color: var(--gold); }
@media (hover: hover) {
  .tm-link:hover::after { transform: scaleX(1); }
  .tm-link:hover svg { transform: translateX(4px); }
  .tm-link--back:hover svg { transform: translateX(-4px); }
}

/* ---------- Wine surfaces (hero + CTA) reuse .wine-atmos / .grain ---------- */
.tm-hero, .tm-profile { position: relative; overflow: hidden; color: var(--cream); }
.tm-hero > .tm-wrap, .tm-profile > .tm-wrap { position: relative; z-index: 2; }

/* =========================================================================
   Team overview
   ========================================================================= */
.tm-hero__inner { padding-top: var(--sp-7); padding-bottom: var(--sp-12); }
.tm-hero .tm-eyebrow { margin-top: var(--sp-8); }
.tm-hero__title {
  margin-top: var(--sp-4); max-width: 13ch;
  font-family: var(--serif); font-weight: 600; font-size: clamp(42px, 12.8vw, 50px); line-height: 1.02;
  letter-spacing: -.02em; color: var(--cream);
}
.tm-hero__title em { display: block; font-style: italic; font-weight: 500; color: var(--gold); }
.tm-hero__lead { margin-top: var(--sp-5); max-width: 34ch; font-size: 18px; line-height: 1.6; color: var(--on-wine); }
/* Decorative wordmark watermark (desktop only, as in the approved mockup) */
.tm-hero__mark { display: none; }

/* Leadership */
.tm-leaders { padding: var(--sp-5) 0 var(--sp-12); }
.tm-leaders__grid { display: grid; gap: var(--sp-6); align-items: center; }
.tm-leaders__photo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; background: var(--wine-900); box-shadow: var(--shadow-float);
}
.tm-leaders__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); }
.tm-leaders__name {
  margin-top: var(--sp-3); font-family: var(--serif); font-weight: 600; font-size: 46px;
  line-height: 1.02; letter-spacing: -.02em; color: var(--ink);
}
.tm-leaders__role { margin-top: var(--sp-2); font-size: 23px; font-weight: 600; line-height: 1.3; color: var(--wine-600); }
.tm-leaders__text { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--on-cream); }
.tm-leaders .tm-link { margin-top: var(--sp-5); font-size: 18px; }

/* Team grid */
.tm-team { padding: var(--sp-12) 0 var(--sp-6); background: linear-gradient(180deg, rgba(239, 231, 219, .45) 0%, rgba(239, 231, 219, .85) 100%); }
.tm-team__head { text-align: center; }
.tm-team__head .tm-h2 { margin-top: var(--sp-3); }
.tm-team__lead { margin-top: var(--sp-3); font-size: 15px; line-height: 1.5; color: var(--on-cream); text-wrap: balance; }
.tm-team .tm-wrap.tm-grid-wrap { padding-inline: var(--sp-3); }
.tm-grid { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.tm-card {
  position: relative; flex: 0 0 calc((100% - 10px) / 2); min-width: 0;
  display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-2) var(--sp-4);
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-raised);
}
.tm-card__photo { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 20 / 21; background: var(--sand); }
.tm-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
.tm-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--sp-3) 6px 0; }
.tm-card__name { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.1; letter-spacing: -.01em; color: var(--wine-600); }
.tm-card__role { margin-top: var(--sp-1); font-size: 13.5px; line-height: 1.35; color: var(--on-cream); overflow-wrap: anywhere; hyphens: auto; }

/* Only members with a published profile get a link; the whole card is the hit area. */
.tm-card__link {
  margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--wine-600);
}
.tm-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
.tm-card__link svg { transition: transform .4s var(--ease-spring); }
.tm-card__link:focus-visible { outline: none; }
.tm-card__link:focus-visible::before { outline: 2px solid var(--wine-600); outline-offset: 3px; }
.tm-card--linked { transition: transform .4s var(--ease-spring); }
.tm-card--linked::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-float); opacity: 0; transition: opacity .4s var(--ease-out);
}
.tm-card--linked:active { transform: translateY(0) scale(.99); }
@media (hover: hover) {
  .tm-card--linked:hover { transform: translateY(-4px); }
  .tm-card--linked:hover::after { opacity: 1; }
  .tm-card--linked:hover .tm-card__link { text-decoration: underline; text-underline-offset: 3px; }
  .tm-card--linked:hover .tm-card__link svg { transform: translateX(4px); }
}

/* ---------- Contact CTA panel ---------- */
.tm-cta-wrap { padding: var(--sp-6) 0; background: rgba(239, 231, 219, .85); }
.tm-cta {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-6); border-radius: var(--r-xl); color: var(--cream); box-shadow: var(--shadow-float);
}
.tm-cta > * { position: relative; z-index: 2; }
.tm-cta__title {
  margin-top: var(--sp-3); font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 10.3vw, 40px);
  line-height: 1.06; letter-spacing: -.02em; color: var(--cream); text-wrap: balance;
}
.tm-cta__lead { margin-top: var(--sp-3); font-size: 19px; line-height: 1.5; color: var(--on-wine); }
.tm-cta .btn { width: 100%; min-height: 56px; padding: var(--sp-4) var(--sp-7); font-size: 18px; text-decoration: none; }
.tm-cta .btn svg { transition: transform .4s var(--ease-spring); }
@media (hover: hover) { .tm-cta .btn:hover svg { transform: translateX(4px); } }

/* =========================================================================
   Member profile
   ========================================================================= */
.tm-profile__inner { padding-top: var(--sp-6); padding-bottom: var(--sp-12); }
.tm-profile__grid { margin-top: var(--sp-6); display: grid; gap: var(--sp-8); align-items: center; }
.tm-profile__photo {
  overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 6 / 7;
  background: #6fa3e6; box-shadow: var(--shadow-deep);
}
.tm-profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); }
.tm-profile__name {
  margin-top: var(--sp-3); font-family: var(--serif); font-weight: 600; font-size: clamp(72px, 23.5vw, 92px);
  line-height: .95; letter-spacing: -.03em; color: var(--cream);
}
.tm-profile__role {
  margin-top: var(--sp-1); font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(44px, 13.8vw, 54px); line-height: 1.05; letter-spacing: -.01em; color: var(--gold);
}
.tm-profile__rule { display: block; width: 80px; height: 2px; margin: var(--sp-7) 0; background: var(--gold); }
.tm-profile__quote p {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 12.8vw, 50px);
  line-height: 1.04; letter-spacing: -.01em; color: var(--cream); text-wrap: balance;
}
.tm-profile__summary { margin-top: var(--sp-4); max-width: 32ch; font-size: 20px; line-height: 1.5; color: var(--on-wine); }
.tm-profile .tm-link { margin-top: var(--sp-6); font-size: 18px; }
/* Length modifiers (set by build-team.mjs from the text length, never per person).
   Long names/roles/quotes step down like in the approved mockups and still wrap
   naturally; they are never squeezed to match Mauricio's hero height. */
.tm-profile--name-long .tm-profile__name { font-size: clamp(56px, 20.5vw, 80px); line-height: .98; }
.tm-profile--role-long .tm-profile__role { font-size: clamp(32px, 10.2vw, 40px); }
.tm-profile--quote-long .tm-profile__quote p { font-size: clamp(32px, 10.3vw, 41px); line-height: 1.08; }
.tm-profile--quote-xlong .tm-profile__quote p { font-size: clamp(30px, 9.8vw, 38px); line-height: 1.1; }

/* Personal message */
.tm-message { padding: var(--sp-12) 0 var(--sp-10); }
.tm-message .tm-h2 { margin-top: var(--sp-3); font-size: clamp(44px, 14vw, 54px); }
/* Preferred line breaks from the data (messageTitle as an array): stacked on phones */
.tm-title-line { display: block; }
.tm-message__text { margin-top: var(--sp-5); display: grid; gap: var(--sp-5); font-size: 20px; line-height: 1.65; color: var(--on-cream); }

/* Three pillars */
.tm-pillars-band { background: linear-gradient(180deg, rgba(239, 231, 219, .95) 0%, rgba(239, 231, 219, .85) 100%); }
.tm-pillar { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-6) 0; }
.tm-pillar + .tm-pillar { border-top: 1px solid var(--hairline); }
.tm-pillar__icon { width: 68px; height: 68px; color: var(--gold); }
.tm-pillar__icon svg { width: 100%; height: 100%; }
.tm-pillar__title { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; color: var(--wine-600); }

/* =========================================================================
   Breakpoints (mobile-first; same steps as Tailwind: 640 / 768 / 1024)
   ========================================================================= */
@media (min-width: 640px) {
  .tm-team .tm-wrap.tm-grid-wrap { padding-inline: var(--sp-5); }
  .tm-hero__title { font-size: 54px; max-width: none; }
  .tm-cta { padding: var(--sp-10) var(--sp-10); }
  .tm-cta .btn { width: auto; align-self: flex-start; }
}

@media (min-width: 768px) {
  .tm-grid { gap: var(--sp-4); }
  .tm-card { flex-basis: calc((100% - 3 * var(--sp-4)) / 4); }
  .tm-card__photo { aspect-ratio: 7 / 8; }

  .tm-profile__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-10); }
  .tm-profile__photo { aspect-ratio: 1 / 1; }
  /* With a long quote the text column outgrows the square portrait: the portrait
     then stretches to the column height (min. square), as in the approved mockups.
     Short quotes (e.g. Mauricio, Cleo) keep the centred square portrait. */
  :is(.tm-profile--quote-long, .tm-profile--quote-xlong) .tm-profile__grid { align-items: stretch; }
  :is(.tm-profile--quote-long, .tm-profile--quote-xlong) .tm-profile__photo { position: relative; aspect-ratio: auto; }
  :is(.tm-profile--quote-long, .tm-profile--quote-xlong) .tm-profile__photo::before { content: ""; display: block; padding-top: 100%; }
  :is(.tm-profile--quote-long, .tm-profile--quote-xlong) .tm-profile__photo img { position: absolute; inset: 0; }
  :is(.tm-profile--quote-long, .tm-profile--quote-xlong) .tm-profile__body { align-self: center; }
  .tm-profile__name { font-size: 72px; }
  .tm-profile__role { font-size: 40px; }
  .tm-profile__quote p { font-size: 38px; }
  .tm-profile--name-long .tm-profile__name { font-size: 58px; }
  .tm-profile--role-long .tm-profile__role { font-size: 32px; }
  .tm-profile--quote-long .tm-profile__quote p { font-size: 32px; }
  .tm-profile--quote-xlong .tm-profile__quote p { font-size: 28px; }

  /* tablet: three columns, icon above the title so the two-line titles keep their breaks */
  .tm-title-line { display: inline; }
  .tm-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-6) 0; }
  .tm-pillar { flex-direction: column; justify-content: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); text-align: center; }
  .tm-pillar + .tm-pillar { border-top: 0; border-left: 1px solid var(--hairline); }
  .tm-pillar__icon { width: 56px; height: 56px; }
  .tm-pillar__title { font-size: 24px; }
}

@media (min-width: 1024px) {
  .tm-h2 { font-size: 54px; }

  .tm-hero__inner { padding: var(--sp-10) var(--sp-12) var(--sp-14); }
  .tm-hero .tm-eyebrow { margin-top: var(--sp-6); }
  .tm-hero__title { font-size: 64px; }
  .tm-hero__lead { margin-top: var(--sp-5); max-width: none; font-size: 18px; }
  .tm-hero__mark {
    position: absolute; z-index: 1; top: 50%; right: max(var(--sp-10), calc((100% - 1280px) / 2 + var(--sp-10)));
    display: flex; flex-direction: column; align-items: center; transform: translateY(-46%);
    color: rgba(246, 241, 234, .055); pointer-events: none; user-select: none;
  }
  .tm-hero__mark .wm { font-family: var(--serif); font-weight: 500; font-size: 150px; line-height: .9; letter-spacing: .22em; margin-right: -.22em; }
  .tm-hero__mark .wm-sub { margin-top: var(--sp-4); font-family: var(--sans); font-weight: 500; font-size: 22px; letter-spacing: .9em; margin-right: -.9em; }

  .tm-leaders { padding: var(--sp-12) 0; }
  .tm-leaders__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-14); }
  .tm-leaders__photo { aspect-ratio: 3 / 2; }
  .tm-leaders__name { font-size: 58px; }
  .tm-leaders__role { font-size: 24px; }
  .tm-leaders__text { margin-top: var(--sp-7); font-size: 19px; line-height: 1.65; }
  .tm-leaders .tm-link { margin-top: var(--sp-6); font-size: 19px; }

  .tm-team { padding-top: var(--sp-14); padding-bottom: var(--sp-3); }
  .tm-team__lead { font-size: 19px; }
  .tm-grid { margin-top: var(--sp-10); }
  .tm-card { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
  .tm-card__body { padding: var(--sp-4) var(--sp-2) 0; }
  .tm-card__name { font-size: 26px; }
  .tm-card__role { margin-top: 6px; font-size: 16px; }
  .tm-card__link { font-size: 14px; }

  .tm-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-10) var(--sp-14); }
  .tm-cta__title { font-size: 52px; }
  .tm-cta__lead { font-size: 19px; }
  .tm-cta .btn { align-self: center; min-height: 60px; padding: var(--sp-4) var(--sp-10); font-size: 18px; white-space: nowrap; }

  .tm-profile__inner { padding: var(--sp-8) var(--sp-12) var(--sp-10); }
  .tm-profile__grid { margin-top: var(--sp-6); grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: var(--sp-16); }
  .tm-profile__name { font-size: 112px; }
  .tm-profile__role { font-size: 60px; }
  .tm-profile__quote p { font-size: 68px; line-height: 1.02; }
  .tm-profile__summary { max-width: none; font-size: 23px; }
  .tm-profile--name-long .tm-profile__name { font-size: 102px; }
  .tm-profile--role-long .tm-profile__role { font-size: 58px; }
  .tm-profile--quote-long .tm-profile__quote p { font-size: 58px; line-height: 1.04; }
  .tm-profile--quote-xlong .tm-profile__quote p { font-size: 56px; line-height: 1.04; }
  .tm-profile .tm-link { margin-top: var(--sp-8); }

  .tm-message { padding: var(--sp-12) 0 var(--sp-12); text-align: center; }
  .tm-message .tm-h2 { font-size: 56px; }
  .tm-message__text { max-width: 1040px; margin: var(--sp-6) auto 0; text-align: left; font-size: 22px; line-height: 1.6; }

  .tm-pillar { flex-direction: row; gap: var(--sp-5); padding: var(--sp-2) var(--sp-5); text-align: left; }
  .tm-pillar__icon { width: 72px; height: 72px; }
  .tm-pillar__title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm *, .tm *::before, .tm *::after { transition-duration: .01ms !important; }
}

/* Parity with the local style.css: there the .grain noise layer sits at
   z-index 1; the live .grain omits it. Scoped to .tm, so nothing else moves. */
.tm .grain::before { z-index: 1; }