/* Chede: storytelling sections (pinned scroll), ported from BYQ references and rebuilt on the site tokens */

.ch-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--typography-font-body); font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.ch-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ showreel: the family photo grows to full screen */
.ch-reel { position: relative; background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }
.ch-reel__track { position: relative; height: 300vh; }
.ch-reel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ch-reel__thumb { position: absolute; z-index: 1; width: var(--w); height: var(--h); border-radius: 12px; overflow: hidden; will-change: transform, filter, opacity; }
.ch-reel__thumb img, .ch-reel__hero img, .ch-reel__hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ch-reel__hero { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 16px; transform: scale(.26); will-change: transform; }
.ch-reel__hero img, .ch-reel__hero video { filter: grayscale(1); }
.ch-reel__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0D213700 55%, #0D213799); opacity: var(--shade, 0); }
.ch-reel__center { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: max(15vh, 6.5rem) 2rem 0; }
.ch-reel__center-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 56rem; }
.ch-reel__title { margin: 0; max-width: 11em; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(2.125rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; color: var(--color-base-base-dark-100); }
.ch-reel__sub { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; color: var(--color-base-base-dark-100); }
.ch-reel__end { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--grid--page-padding, 2rem) 2.5rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; opacity: 0; pointer-events: none; }
.ch-reel__end p { margin: 0; max-width: 34rem; font-size: 1.25rem; line-height: 1.35; color: var(--color-base-base-light-100); text-wrap: pretty; }
@media (max-width: 991px) {
  .ch-reel__thumb:nth-child(1) { --w: 20vw; --h: 27vw; }
  .ch-reel__thumb:nth-child(2) { --w: 27vw; --h: 16vw; }
  .ch-reel__thumb:nth-child(3) { --w: 22vw; --h: 14vw; }
  .ch-reel__thumb:nth-child(4) { --w: 27vw; --h: 17vw; }
}
@media (max-width: 767px) {
  .ch-reel__track { height: 220vh; }
  .ch-reel__thumb { display: none; }
  .ch-reel__end p { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ stacked reveal: the three areas */
.ch-stack { position: relative; background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }
.ch-stack__outer { position: relative; height: 340vh; }
.ch-stack__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ch-stack__head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 6.5rem var(--grid--page-padding, 2rem) 0; }
.ch-stack__link { color: inherit; font-size: 14px; font-weight: 500; }
.ch-stack__step { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ch-stack__frame { position: relative; overflow: hidden; width: min(40%, 560px); aspect-ratio: 4 / 3; border-radius: 16px; background: var(--color-base-colors-color3); will-change: transform, opacity; }
.ch-stack__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-stack__copy { position: absolute; top: 0; bottom: 0; z-index: 4; width: min(26%, 360px); display: flex; flex-direction: column; justify-content: center; gap: 1rem; will-change: transform, opacity; }
.ch-stack__copy.is-right { right: 5%; }
.ch-stack__copy.is-left { left: 5%; }
.ch-stack__copy h3 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.ch-stack__copy p { margin: 0; font-size: 1.125rem; line-height: 1.5; max-width: 22em; text-wrap: pretty; }
.ch-stack__copy .ch-eyebrow { color: var(--color-base-base-dark-100); }
@media (max-width: 991px) {
  .ch-stack__outer { height: auto; }
  .ch-stack__pin { position: static; height: auto; overflow: visible; padding: 5rem 0 2rem; }
  .ch-stack__head { position: static; padding: 0 1.5rem 1rem; }
  .ch-stack__step { position: static; flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 2rem 1.5rem; }
  .ch-stack__frame { width: 100%; }
  .ch-stack__copy { position: static; width: 100%; }
  .ch-stack__copy h3 { font-size: 2rem; }
}

/* ------------------------------------------------------------------ process: sticky photo, four steps */
.ch-steps { position: relative; background: var(--color-base-colors-color3); color: var(--color-base-base-dark-100); padding: 7.5rem 0; }
.ch-steps__wrap { width: 100%; max-width: var(--container--large, 1800px); margin: 0 auto; padding: 0 var(--grid--page-padding, 2rem); }
.ch-steps__head { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-bottom: 4rem; }
.ch-steps__head h2 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; max-width: 14em; text-wrap: balance; }
.ch-steps__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ch-steps__media { grid-column: 1 / span 6; position: sticky; top: 6rem; display: flex; flex-direction: column; }
.ch-steps__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; }
.ch-steps__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s cubic-bezier(.22, 1, .36, 1); }
.ch-steps__frame img.is-active { opacity: 1; }
.ch-steps__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; border-top: 1px solid #0D21371f; margin-top: 1rem; padding: 1rem 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.ch-steps__list { grid-column: 8 / 13; display: flex; flex-direction: column; }
.ch-steps__step { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-height: 60vh; padding: 2rem 0; border-top: 1px solid #0D21371f; opacity: .32; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.ch-steps__step:last-child { border-bottom: 1px solid #0D21371f; }
.ch-steps__step.is-active { opacity: 1; }
.ch-steps__step h3 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.ch-steps__step p { margin: 0; max-width: 26rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.ch-steps__cta { display: flex; gap: 1.5rem; align-items: center; margin-top: 3rem; }
@media (max-width: 991px) { .ch-steps__list { grid-column: 7 / 13; } }
@media (max-width: 767px) {
  .ch-steps { padding: 6rem 0; }
  .ch-steps__media, .ch-steps__list { grid-column: 1 / -1; }
  .ch-steps__media { position: static; }
  .ch-steps__step { min-height: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-reel__track { height: auto; }
  .ch-reel__stage { position: relative; }
  .ch-reel__hero { transform: none; border-radius: 0; }
  .ch-reel__hero img, .ch-reel__hero video { filter: none; }
  .ch-reel__thumb { display: none; }
}

.ch-eyebrow__gap { width: .35rem; }

.section_hero-home-a .paragraph { text-wrap: balance; }

/* ------------------------------------------------------------------ areas page: full list of subjects */
.ch-areas { background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); padding: 7.5rem 0; }
.ch-areas__wrap { max-width: var(--container--large, 1800px); margin: 0 auto; padding: 0 var(--grid--page-padding, 2rem); display: flex; flex-direction: column; gap: 7.5rem; }
.ch-areas__block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; scroll-margin-top: 6rem; }
.ch-areas__side { grid-column: 1 / span 5; position: sticky; top: 6rem; align-self: start; display: flex; flex-direction: column; gap: 1rem; }
.ch-areas__side h2 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.ch-areas__photo { margin-top: 1.5rem; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.ch-areas__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-areas__list { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
.ch-areas__item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid #0D21371f; }
.ch-areas__item:last-child { border-bottom: 1px solid #0D21371f; }
.ch-areas__item h3 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.02em; }
.ch-areas__item p { margin: 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 991px) { .ch-areas__side { grid-column: 1 / -1; position: static; } .ch-areas__list { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ch-areas__item { grid-template-columns: 1fr; gap: .5rem; } }

/* ------------------------------------------------------------------ contact form (opens WhatsApp) */
.ch-check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.ch-check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--color-base-base-dark-100); }
.ch-check a, .link_contact-card { color: inherit; }
.link_contact-card { text-decoration: none; }
.ch-form__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ch-form__submit { appearance: none; border: 0; cursor: pointer; background: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); font: inherit; font-weight: 500; font-size: 1rem; padding: .95rem 1.5rem; border-radius: var(--radius-ui-button-base, 8px); transition: background-color .3s cubic-bezier(.22, 1, .36, 1); }
.ch-form__submit:hover { background-color: #1F3145; }
.video_about-a.is-photo, .video_service.is-photo { position: relative; }
.video_about-a.is-photo > img, .video_service.is-photo > img { position: absolute; inset: 0; }
[class*="video_"].is-photo { isolation: isolate; }
[class*="video_"].is-photo > img { z-index: -1; }
.circle_divider { border-radius: 2px; }

.section_video-testimonial-b .video_bg-testimonial { background-image: none; background-color: var(--color-base-base-light-100); }

/* ------------------------------------------------------------------ when to call: animated icons */
.ch-when { justify-content: space-between; gap: 2.5rem; }
.ch-anim { position: relative; width: 3.5rem; height: 3.5rem; color: var(--color-base-base-light-100); flex: none; }
.ch-anim span { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.ch-anim__b { opacity: 0; }
.ch-when__text { display: flex; flex-direction: column; gap: .5rem; }
.ch-when__text h3 { margin: 0; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-base-base-light-100); text-wrap: balance; }
.ch-when__text p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--color-base-base-light-100); text-wrap: pretty; }

/* ------------------------------------------------------------------ link underline: the stroke crosses the word
   The same underline as Discircle, Glass and Collab. At rest it does not exist; on hover it comes in from the
   left and on leave it goes out through the right, so it reads as a stroke drawn and undrawn instead of a blink.
   0.62s easeOutQuint: it arrives almost stopped, which is where the smoothness comes from.
   The template's tertiary buttons had a Webflow interaction (js/main.js, timeline t-9dccdbdc) that pushed the
   line out with x:100% and left the link bare while hovered. It also writes translate/rotate/scale inline, so
   transform and translate are pinned and scale is !important: the interaction renders nothing and the gesture
   lives on the independent scale property. */
.cta_fill-line { transform: none !important; translate: none !important; }
.ch-link { position: relative; display: inline-block; text-decoration: none; }
.ch-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; }
.cta_fill-line, .ch-link::after { scale: 0 1 !important; transform-origin: right center; transition: scale .62s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .cta_tertiary:hover .cta_fill-line, .ch-link:hover::after { scale: 1 1 !important; transform-origin: left center; }
}
/* the keyboard has to reveal it on any device */
.cta_tertiary:focus-visible .cta_fill-line, .ch-link:focus-visible::after { scale: 1 1 !important; transform-origin: left center; }
/* without a fine pointer there is no in-between state: the stroke is permanent, the only way a link announces itself on a phone */
@media (hover: none), (pointer: coarse) {
  .cta_fill-line, .ch-link::after { scale: 1 1 !important; transform-origin: left center; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cta_fill-line, .ch-link::after { transition: none; }
}

/* the quote signature: the firm's name and the city line never break inside; they stack when they don't fit side by side */
.testimonial-video_author { flex-wrap: wrap; }
.testimonial-video_author > * { white-space: nowrap; }

/* "Quando procurar" in the brand's 02 (bordô). The whole section is the ground, so the bordô never sits on the navy
   (01 and 02 never meet as figure and ground); text and icons stay creme, and the cards keep the template's 6% creme
   lift, which turns into a lighter bordô on its own. Creme on 02 is about 8.4:1. */
.section_impact { --color-tokens-background-base: var(--color-base-colors-accent); }

/* hero on the application photo (Figma 10:38): the approved piece darkens it with a 40% black veil, which keeps the
   warm light; the navy gradients on the left and at the bottom stay for the type (the "blue gradient" of the
   application system). On a phone the crop keeps the mother and the boy in frame. */
.video_home-a.is-photo > img { object-position: 60% 40%; }
.video_home-a.is-photo ~ .overlay_home-a.is-overlay, .wrap_overlay_hero-home-a .overlay_home-a.is-overlay { background-color: #00000066; }

/* closing call to action on Leo's Pexels clip (6597520): the clip fills the whole card under the brand navy at 75%,
   and the card takes the hero's dark tokens: creme type (the secondary line full creme too, no opacity emphasis),
   creme button with navy text, the monogram tile inverted; no wordmark watermark */
.master_cta.has-media {
  position: relative; overflow: hidden; isolation: isolate; color: var(--color-base-base-light-100);
  --color-tokens-tone-strong: var(--color-base-base-light-100);
  --color-tokens-tone-medium: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-default-border: var(--color-base-base-dark-8);
  --color-tokens-button-primary-default-background: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-border: var(--color-base-base-light-0);
  --color-tokens-button-primary-hover-background: var(--color-tokens-color-blue-wash);
}
.master_cta.has-media > .ch-cta-media { position: absolute; inset: 0; z-index: -1; background: var(--color-base-base-dark-100); }
.master_cta.has-media > .ch-cta-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.master_cta.has-media > .ch-cta-media::after { content: ""; position: absolute; inset: 0; background: #0D2137bf; }
.master_cta.has-media .support_avatar.is-mark { background-color: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }

/* marquee words: the band hides overflow to cut the words sliding in and out, and the display size had a line height
   equal to the font size, so every descender (the j of Despejo, the g and ç of Regularização) was cut. Inter Tight
   needs about 1.21em from ascender to descender; 1.24 gives them room at every size. */
.marquee [class*="heading-style-h"] { line-height: 1.24; }

/* ------------------------------------------------------------------ articles: listing (artigos.html) and article pages
   The template's article grid keyed each block to a Webflow node id; the pages are generated now, so every block of
   the text column takes the middle track by class. The rich text had no styles of its own (h2 at 52 px, bullets
   drawn for a dark page): it reads at 18 px here, subheads in the display face, and the bullet is the eyebrow square. */
a.image_blog-b-featured { display: block; }
.ch-title-link { color: inherit; text-decoration: none; }
.author_blog-b.is-mark { display: flex; align-items: center; justify-content: center; background-color: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); }
.headline_article-info { gap: 2.5rem; flex-wrap: wrap; }
.info-tile_article .text_body-bold { white-space: nowrap; }
.ch-article .grid_6-columns > *, .ch-article .grid_8-columns > * { grid-area: 1 / 2 / 2 / 3; }
.ch-article .body_case { font-size: 1.125rem; line-height: 1.6; }
.ch-article .body_case > :first-child { margin-top: 0; }
.ch-article .body_case > :last-child { margin-bottom: 0; }
.ch-article .body_case h2 { margin: 0 0 1rem; font-family: var(--typography-font-heading-main); font-weight: 400; font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.ch-article .body_case p { margin: 0 0 1rem; font-size: inherit; line-height: inherit; text-wrap: pretty; }
.ch-article .body_case ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.ch-article .body_case li { position: relative; margin: 0 0 .75rem; padding-left: 1.5rem; background: none; }
.ch-article .body_case li:last-child { margin-bottom: 0; }
.ch-article .body_case li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.ch-article .body_case strong { font-weight: 600; }
.ch-article .body_case .ch-lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.4; }
.ch-article .body_case .ch-note { font-size: .9375rem; line-height: 1.5; }
@media (max-width: 767px) { .headline_article-info { gap: 1.5rem; justify-content: flex-start; } .info-tile_article { align-items: flex-start; } }
/* the back link of an article: the template drew a permanent underline; it takes the house underline instead,
   drawn when the pointer is anywhere on the link (arrow included) */
.text_back-button { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .button_back:hover .ch-link::after { scale: 1 1 !important; transform-origin: left center; }
}
.button_back:focus-visible .ch-link::after { scale: 1 1 !important; transform-origin: left center; }

/* five menu items since Artigos joined: between the collapse point and 1200 px the left half only just held them and
   Contato ran into the centred wordmark at 1024; a tighter gap keeps a clear margin down to 992 */
@media (min-width: 992px) and (max-width: 1199px) { .nav-menu_inner { gap: 16px; column-gap: 16px; } }

/* phones: the footer kept the template's three columns, but Contato holds the e-mail and the WhatsApp number, which
   cannot break: the three minimums add up to about 412 px, so on a 390 px phone the grid ran off the left edge and cut
   Navegação. Two columns, with Contato taking the whole second row. The four article tabs share the row the same way
   (they grow to fill it, so the underline stays continuous) instead of scrolling Inventário out of view. */
@media (max-width: 479px) {
  .right-footer { grid-template-columns: 1fr 1fr; }
  .right-footer > .coumn_footer:last-child { grid-column: 1 / -1; }
  .link_tab.is-blog-a { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
}

/* team (escritório): a slider. Native horizontal scroll with snap, one card per arrow press (js/chede.js); the track runs
   past the container to the right edge of the screen, so the next card always peeks in. Three cards per view on a
   desktop, two on a tablet, one and a bit on a phone. Until the portraits exist, each card holds the monogram on the
   brand navy in the photo's place. */
.ch-team { overflow-x: clip; }
.ch-team__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: var(--spacing--space-large); }
.ch-team__title { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.ch-team__nav { display: flex; gap: .5rem; flex: none; }
.ch-team__btn { appearance: none; margin: 0; padding: 0; font: inherit; display: inline-flex; cursor: pointer; transition: opacity .4s cubic-bezier(.22, 1, .36, 1), background-color .3s, border-color .3s; }
.ch-team__btn .icon_slider-button svg { width: 100%; height: 100%; }
.ch-team__btn:disabled { opacity: .3; cursor: default; }
.ch-team.is-static .ch-team__nav { visibility: hidden; }
.ch-team__track { --per: 3; display: flex; gap: var(--grid--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); cursor: grab; }
.ch-team__track::-webkit-scrollbar { display: none; }
.ch-team__track:focus-visible { outline: 2px solid var(--color-base-base-dark-100); outline-offset: 4px; }
.ch-team__track > .card_team { flex: 0 0 calc((100% - (var(--per) - 1) * var(--grid--gutter)) / var(--per)); scroll-snap-align: start; }
.ch-team__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.ch-team__track img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ch-team .bottom-tile_team { flex-direction: column; align-items: flex-start; gap: .35rem; }
.ch-team .bottom-tile_team .label-large { white-space: nowrap; }
@media (max-width: 991px) { .ch-team__track { --per: 2; } .ch-team__head { gap: 1.25rem; } }
@media (max-width: 479px) { .ch-team__track { --per: 1.18; } }

/* hero of the escritório: the numbers left, the two actions follow the paragraph at the rhythm of the headline block
   (the template kept a 120 px gap there for the stats row) */
.ch-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.section_hero-about-a .left_about-a { row-gap: var(--spacing--space-medium); }
.card_team.is-placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); }
.ch-team-mark { display: flex; width: 26%; aspect-ratio: 1; margin-bottom: 22%; }
.ch-team-mark svg { width: 100%; height: 100%; }

/* FAQ: the answer is not a toggle (only the question row is), so it keeps the text cursor */
.expandable-bottom { cursor: auto; }
.expandable-top:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* ------------------------------------------------------------------ every text link takes the house underline
   Menu, footer, contact links, the e-mail of the closing block and the inline privacy link: nothing at rest, the stroke
   comes in from the left on hover and leaves through the right (same values as .ch-link above). The current page keeps
   its stroke in the menu. The template's footer hover dimmed the other links to 50%; that interaction writes inline
   opacity, pinned back to 1 here (no emphasis by opacity). On touch screens the content links keep the stroke for good,
   the way .ch-link does; menu and footer lists read as links by position and stay clean. */
.link_nav > div:first-child, .link_footer, .link_cta-mail, .link_contact-card, .ch-check a, .footer_bottom-halves a { position: relative; display: inline-block; text-decoration: none; }
.link_footer { width: fit-content; opacity: 1 !important; }
.link_nav > div:first-child::after, .link_footer::after, .link_cta-mail::after, .link_contact-card::after, .ch-check a::after, .footer_bottom-halves a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  scale: 0 1; transform-origin: right center; transition: scale .62s cubic-bezier(.22, 1, .36, 1);
}
.link_nav.w--current > div:first-child::after { scale: 1 1; transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .link_nav:hover > div:first-child::after, .link_footer:hover::after, .link_cta-mail:hover::after, .link_contact-card:hover::after,
  .ch-check a:hover::after, .footer_bottom-halves a:hover::after { scale: 1 1; transform-origin: left center; }
}
.link_nav:focus-visible > div:first-child::after, .link_footer:focus-visible::after, .link_cta-mail:focus-visible::after,
.link_contact-card:focus-visible::after, .ch-check a:focus-visible::after, .footer_bottom-halves a:focus-visible::after { scale: 1 1; transform-origin: left center; }
@media (hover: none), (pointer: coarse) {
  .link_cta-mail::after, .link_contact-card::after, .ch-check a::after { scale: 1 1; transform-origin: left center; transition: none; }
}
/* article cards keep only the template's image zoom on hover: no underline on their titles (Leo, 2026-09-29) */
@media (prefers-reduced-motion: reduce) {
  .link_nav > div:first-child::after, .link_footer::after, .link_cta-mail::after, .link_contact-card::after, .ch-check a::after,
  .footer_bottom-halves a::after { transition: none; }
}

/* office map (escritório "atendimento" block): the map fills the photo frame; until it is ready (or if it cannot load)
   the frame shows the monogram, the address and the Google Maps link. The pin is the monogram tile with a pointer. */
.image_features .ch-map { width: 100%; height: 100%; background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }
.ch-map.maplibregl-map { font-family: inherit; }
.ch-map__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.ch-map__fallback p { margin: 0; font-size: 1rem; line-height: 1.5; }
.ch-map.is-ready .ch-map__fallback { visibility: hidden; }
.ch-map > .maplibregl-canvas-container, .ch-map > .maplibregl-control-container { opacity: 0; transition: opacity .8s cubic-bezier(.22, 1, .36, 1); }
.ch-map.is-ready > .maplibregl-canvas-container, .ch-map.is-ready > .maplibregl-control-container { opacity: 1; }
.ch-map__tile { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: .6rem; border-radius: var(--radius-general-small, 8px); background: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); }
.ch-map__tile svg { width: 100%; height: 100%; }
.ch-map__pin { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 6px 12px #0D213740); }
.ch-map__pin::after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--color-base-base-dark-100); }
.ch-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 .75rem .75rem 0; }
.ch-map .maplibregl-ctrl-group { background: var(--color-base-base-light-100); border-radius: 8px; box-shadow: 0 0 0 1px #0D21371f; }
.ch-map .maplibregl-ctrl-group button + button { border-top-color: #0D21371f; }
.ch-map .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }
.ch-map .maplibregl-cooperative-gesture-screen { background: #0D2137b8; color: var(--color-base-base-light-100); font-family: inherit; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .ch-map > .maplibregl-canvas-container, .ch-map > .maplibregl-control-container { transition: none; } }

/* floating WhatsApp button (every page). Creme with the navy icon: it floats over navy, bordô and creme sections, and a
   navy button would sit on the bordô of "Quando procurar" (01 and 02 never touch). Hidden on the hero, it comes in
   from below once the hero is gone (js/chede.js); on a desktop the label opens to the left on hover. */
.ch-wa { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50; display: flex; align-items: center; gap: .625rem; text-decoration: none;
  color: var(--color-base-base-dark-100); opacity: 0; translate: 0 1rem; pointer-events: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.22, 1, .36, 1); }
.ch-wa.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.ch-wa__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--color-base-base-light-100); box-shadow: 0 0 0 1px #0D21371f, 0 10px 28px #0D213738;
  transition: translate .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s cubic-bezier(.22, 1, .36, 1); }
.ch-wa__icon svg { width: 1.625rem; height: 1.625rem; }
.ch-wa__label { padding: .625rem .875rem; border-radius: 8px; background: var(--color-base-base-light-100); box-shadow: 0 0 0 1px #0D21371f, 0 10px 28px #0D213726;
  font-size: .9375rem; line-height: 1.2; font-weight: 500; white-space: nowrap; opacity: 0; translate: .5rem 0; pointer-events: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .ch-wa:hover .ch-wa__label { opacity: 1; translate: 0 0; }
  .ch-wa:hover .ch-wa__icon { translate: 0 -2px; box-shadow: 0 0 0 1px #0D21371f, 0 14px 32px #0D213747; }
}
.ch-wa:focus-visible { outline: none; }
.ch-wa:focus-visible .ch-wa__icon { box-shadow: 0 0 0 2px var(--color-base-base-dark-100), 0 10px 28px #0D213738; }
.ch-wa:focus-visible .ch-wa__label { opacity: 1; translate: 0 0; }
body:has(.w-nav-button.w--open) .ch-wa { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .ch-wa { right: 1rem; bottom: 1rem; } .ch-wa__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .ch-wa, .ch-wa__icon, .ch-wa__label { transition: none; } }

/* intro: the full stacked lockup (chede.py preloader()), first page of a visit only. Slow on purpose: each line takes
   1.6 s to rise through its own baseline, 0.32 s after the one above (CHEDE at 0.25 s, ASSOCIADOS done by 2.5 s),
   the lockup holds for a breath and the screen dissolves from 3.3 s to 4.3 s (ease in and out, so it never drops). */
.ch-intro-screen { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center;
  background: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); }
html.ch-intro .ch-intro-screen { display: flex; animation: ch-intro-out 1s cubic-bezier(.65, 0, .35, 1) 3.3s both; }
html.ch-seen .ch-intro-screen { display: none !important; }
.ch-intro-screen .ch-pre { width: min(15rem, 62vw); }
.ch-pre { display: block; height: auto; overflow: visible; }
.ch-pre__line { animation: ch-rise 1.6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ch-rise { from { transform: translateY(172px); } to { transform: translateY(0); } }
@keyframes ch-intro-out { to { opacity: 0; visibility: hidden; } }

/* page transitions: the browser's own cross-document view transition. The old page fades out quickly and the new one
   fades in over it, so a click never waits for an animation; browsers without support simply navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ch-vt-out .32s cubic-bezier(.22, 1, .36, 1) both; }
  ::view-transition-new(root) { animation: ch-vt-in .6s cubic-bezier(.22, 1, .36, 1) .1s both; }
}
@keyframes ch-vt-out { to { opacity: 0; } }
@keyframes ch-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.ch-intro .ch-intro-screen { display: none; } }

/* escritório manifesto: three paragraphs in the display size, a line of air between them, wrapped for long text */
.ch-manifesto > * { text-wrap: pretty; }
.ch-manifesto > * + * { margin-top: .9em; }

/* the wordmark's frame is tight to the ink: never clip it at the svg box (the C lost its outer edge) */
svg[aria-label="Chede Advogados"], .ch-pre { overflow: visible; }

/* closing block on a phone: the card is all centred, but the "Prefere conversar?" row kept its left-aligned text next
   to the monogram, and the long phone line under a short first line pulled it visually to the left. On narrow screens
   the monogram sits above and both lines are centred, like the title and the button. */
@media (max-width: 479px) {
  .support_left { flex-direction: column; text-align: center; }
  .text_support { align-items: center; text-align: center; }
}

/* closing card below 768 px: the template kept 128 px under the content (room for the stripes that were cut) against
   48 px above, so the text sat high in the box. Same space above and below, as on the desktop. */
@media (max-width: 767px) { .master_cta { padding-bottom: var(--spacing--space-large); } }