/* Approved landing: office scenes and narrative sections. */
.office-study {
  --cover-height: clamp(650px, 56.28vw, 960px);
  --story-surface: #F3F2EE;
  --story-card: #FFFFFF;
  --story-accent: #EEE8DC;
  --story-soft-gold: #DDD0B9;
  background-image: none;
  overflow-x: clip;
}
.office-study .header,
.office-study .hero {
  --ink: #293034;
  --muted: #46545D;
  --gold: #805B2D;
  --button-bg: #293034;
  --button-ink: #FFFFFF;
  --button-hover: #435565;
  color: var(--ink);
}
.office-study .header { position: relative; z-index: 2; }
.office-study .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(var(--cover-height) - 126px);
  padding-block: 20px 55px;
}
.office-study .hero-copy { width: 42%; max-width: 520px; }
.office-study h1 { font-size: clamp(36px, 4.2vw, 64px); }
.office-study .claim-conjunction,
.office-study .claim-punctuation { color: var(--ink); }
.office-study .hero-description { width: 500px; max-width: none; text-wrap: balance; }
.office-study .hero-description strong { font-weight: 500; }
.office-study .hero-visual {
  position: absolute;
  z-index: -1;
  top: -126px;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
}
.office-study .hero-art {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  animation: none;
}
.hero-picture { display: block; height: 100%; }
/* Looping cover video. Its first frame is the still underneath, so it fades in only once it plays. */
.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video, .platform-video, .process-video { display: none; }
}

/* The cover dissolves into the page instead of ending on a hard edge. */
@media (min-width: 801px) {
  .office-study .hero-visual {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
  }
}

/* Client logos: white-on-transparent marks used as alpha masks, so they take the theme's colors. */
.clients { position: relative; padding-block: 36px 56px; }
.clients-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.clients-title::before,
.clients-title::after { content: ""; width: 25px; height: 1px; background: var(--gold); }
.clients-marquee {
  --logo-scale: 1.1;
  --logo-gap: clamp(44px, 4.5vw, 72px);
  display: grid;
  gap: 28px;
}
.clients-row { display: flex; overflow: hidden; }
/* Static, complete lists are the default, including when JavaScript is unavailable. */
.clients-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px var(--logo-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clients-track > li { flex-shrink: 0; }
.clients-track[aria-hidden="true"] { display: none; }
.client-logo {
  display: block;
  width: calc(var(--w) * var(--logo-scale) * 1px);
  background-color: var(--muted);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color .2s;
}
.client-logo:hover { background-color: var(--ink); }
/* Each mark's mask and proportions live here: the live CSP forbids inline style attributes. */
.client-logo--schipper { --logo: url("assets/clientes/schipper.webp"); --w: 109; aspect-ratio: 400 / 90; }
.client-logo--copelman { --logo: url("assets/clientes/copelman.webp"); --w: 126; aspect-ratio: 400 / 76; }
.client-logo--lima-feigelson { --logo: url("assets/clientes/lima-feigelson.webp"); --w: 148; aspect-ratio: 400 / 49; }
.client-logo--awds { --logo: url("assets/clientes/awds.webp"); --w: 92; aspect-ratio: 326 / 160; }
.client-logo--fonotrade { --logo: url("assets/clientes/fonotrade.webp"); --w: 125; aspect-ratio: 400 / 77; }
.client-logo--homelab { --logo: url("assets/clientes/homelab.webp"); --w: 98; aspect-ratio: 400 / 125; }
.client-logo--ago { --logo: url("assets/clientes/ago.webp"); --w: 101; aspect-ratio: 400 / 100; }
.client-logo--nibel { --logo: url("assets/clientes/nibel.webp"); --w: 99; aspect-ratio: 400 / 156; }
.client-logo--nigri { --logo: url("assets/clientes/nigri.webp"); --w: 138; aspect-ratio: 400 / 57; }
.client-logo--fundacao-francisco-clara-de-assis { --logo: url("assets/clientes/fundacao-francisco-clara-de-assis.webp"); --w: 104; aspect-ratio: 400 / 123; }
.client-logo--mirae-corretora { --logo: url("assets/clientes/mirae-corretora.webp"); --w: 146; aspect-ratio: 400 / 129; }
.client-logo--bt-xp { --logo: url("assets/clientes/bt-xp.webp"); --w: 110; aspect-ratio: 400 / 122; }
.client-logo--verso-investimentos { --logo: url("assets/clientes/verso-investimentos.webp"); --w: 166; aspect-ratio: 400 / 82; }
.client-logo--rk2-seguros { --logo: url("assets/clientes/rk2-seguros.webp"); --w: 180; aspect-ratio: 400 / 72; }
.client-logo--demarco { --logo: url("assets/clientes/demarco.webp"); --w: 30; aspect-ratio: 356 / 400; }
@keyframes clients-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: no-preference) {
  .clients.is-enhanced .clients-row {
    min-height: 56px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .clients.is-enhanced .clients-track {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: var(--logo-gap);
    width: max-content;
    min-width: 100%;
    padding-right: var(--logo-gap);
    animation: clients-scroll 60s linear infinite;
  }
  .clients.is-enhanced .clients-row--reverse .clients-track { animation-direction: reverse; }
}
@media (hover: hover) and (pointer: fine) {
  .clients.is-enhanced .clients-marquee:hover .clients-track { animation-play-state: paused; }
}
@media (max-width: 800px) {
  .clients { padding-block: 24px 40px; }
  .clients-title { margin-bottom: 24px; font-size: 11px; }
  .clients-marquee { --logo-scale: .82; }
  .clients.is-enhanced .clients-row { min-height: 42px; }
}

/* The three narrative sections share the existing serif, Poppins and gold. */
.story-section {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding-block: 100px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 36px;
}
.story-copy { max-width: 490px; }
.story-section h2,
.process-section h2,
.contact-invitation h2 {
  margin: 22px 0 27px;
  font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(36px, 3.35vw, 52px);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -.045em;
}
.story-section h2 em,
.process-section h2 em,
.contact-invitation em { color: var(--gold); font-weight: 400; }
.story-copy > p:not(.eyebrow) { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.story-copy > .story-lead { color: var(--ink); font-size: 15px; line-height: 1.8; }
.story-copy > .story-takeaway { padding-left: 18px; margin-top: 27px; border-left: 2px solid var(--story-soft-gold); color: var(--ink); font-weight: 500; font-size: 12px; }
.foundation {
  --foundation-space: clamp(16px, 2.5vh, 28px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px);
}
.story-section.foundation { padding-block: var(--foundation-space); scroll-margin-top: 0; }
.platform-illustration { min-width: 0; margin: 0; }
.platform-illustration picture { display: block; }
/* The frame is sized like the illustration so the looping video sits exactly on it.
   It multiplies onto the page as a whole: blending the still and the video
   separately would darken the scene wherever they overlap. */
.platform-frame, .process-frame { position: relative; margin-inline: auto; border-radius: 12px; overflow: hidden; mix-blend-mode: multiply; }
.platform-art { display: block; width: 100%; height: auto; }
.platform-video, .process-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.platform-video.is-playing, .process-video.is-playing { opacity: 1; }
@media (min-width: 801px) {
  /* Fit the whole illustration in one screen height: the width follows from its 1004:918 shape. */
  .foundation .platform-frame {
    width: min(100%, calc((100svh - var(--foundation-space) - var(--foundation-space) - 1px) * 1004 / 918));
  }
}
/* Cases: real projects as photo cards on a horizontal rail. Photos are dark enough
   at the top and bottom for white text in both themes. */
.cases-section { padding-block: 72px 56px; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.cases-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.cases-section h2 {
  margin: 0;
  font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(36px, 3.35vw, 52px);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -.045em;
}
.cases-section h2 em { color: var(--gold); font-weight: 400; }
.cases-controls { display: flex; flex-shrink: 0; gap: 10px; }
.cases-controls[hidden] { display: none; }
.cases-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.cases-arrow:hover:not(:disabled) { background: var(--story-surface); }
.cases-arrow:disabled { opacity: .35; cursor: default; }
.cases-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cases-rail {
  --case-gap: 20px;
  --case-width: calc((100% - var(--case-gap)) / 2);
  display: flex;
  gap: var(--case-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cases-rail::-webkit-scrollbar { display: none; }
.case-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--case-width);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: #293034;
  color: #FFFFFF;
  scroll-snap-align: start;
}
.case-card__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-card:hover .case-card__photo { transform: scale(1.03); }
.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(20 28 34 / 80%), rgb(20 28 34 / 38%) 42%, rgb(20 28 34 / 0%) 62%, rgb(20 28 34 / 62%));
}
.case-card__copy { padding: 26px 26px 0; }
.case-card__sector { margin: 0 0 10px; color: #E4D2B3; font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; }
.case-card h3 { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.case-card__detail { max-width: 36ch; margin: 12px 0 0; color: rgb(255 255 255 / 84%); font-size: 12px; line-height: 1.7; }
.case-card__brand { position: absolute; bottom: 24px; left: 26px; display: flex; align-items: center; }
.case-card .client-logo { --logo-scale: 1; background-color: #FFFFFF; }
.case-card .client-logo:hover { background-color: #FFFFFF; }
.case-card .client-logo--verso-investimentos { --w: 128; }
/* Clients whose logo is only a symbol: the symbol plus the name, as one lockup. */
.case-card__brand--lockup { gap: 10px; }
.case-card__wordmark { font-size: 15px; font-weight: 500; letter-spacing: .01em; }
/* Two cases at a time on wide screens, in a wider shape so a card fits on one screen. */
@media (min-width: 1101px) {
  .case-card { aspect-ratio: 5 / 4; }
  .case-card__copy { padding: 32px 32px 0; }
  .case-card h3 { max-width: 22ch; font-size: clamp(22px, 1.8vw, 27px); }
  .case-card__detail { font-size: 13px; }
  .case-card__brand { bottom: 28px; left: 32px; }
}
@media (max-width: 1100px) {
  .cases-rail { --case-width: calc((100% - var(--case-gap)) / 2.2); }
}
@media (max-width: 800px) {
  .cases-section { padding-block: 58px 42px; }
  .cases-heading { margin-bottom: 26px; }
  .cases-section h2 { font-size: clamp(34px, 5.8vw, 45px); }
  /* Swipe on phones: the arrows give way to a full-bleed rail. */
  .cases-controls { display: none; }
  /* The rail bleeds into the page gutter (24px here, 20px under 380px, as .page sets),
     and snapping keeps each card aligned with the text above. */
  .cases-rail {
    --case-gap: 14px;
    --case-width: 82%;
    --gutter: 24px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  /* Narrow cards wrap the copy lower into the photo, so the top shade reaches further. */
  .case-card::before { background: linear-gradient(to bottom, rgb(20 28 34 / 82%), rgb(20 28 34 / 55%) 48%, rgb(20 28 34 / 0%) 70%, rgb(20 28 34 / 62%)); }
  .case-card__copy { padding: 22px 22px 0; }
  .case-card__brand { bottom: 20px; left: 22px; }
  .case-card__sector { font-size: 11px; }
  .case-card__detail { font-size: 13px; }
}
@media (max-width: 380px) {
  .cases-rail { --gutter: 20px; }
}
/* A photo with a light background (real client photos) needs a deeper scrim under the text. */
.case-card--bright .case-card__photo { object-position: center top; }
.case-card--bright::before { background: linear-gradient(to bottom, rgb(20 28 34 / 88%), rgb(20 28 34 / 72%) 42%, rgb(20 28 34 / 20%) 66%, rgb(20 28 34 / 66%)); }
@media (prefers-reduced-motion: reduce) {
  .case-card__photo { transition: none; }
  .case-card:hover .case-card__photo { transform: none; }
}
.process-section { padding-block: 48px; scroll-margin-top: 0; }
.process-intro { max-width: 1120px; margin-inline: auto; text-align: center; }
.process-intro h2 { margin: 0; }
.process-copy { max-width: 660px; margin: 20px auto 0; }
.process-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.95; }
.process-copy p + p { margin-top: 16px; }
.process-copy .process-lead { color: var(--ink); font-size: 15px; line-height: 1.8; }
.process-quote { margin: 0 0 16px; }
.process-quote footer { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: right; }
.process-quote a { color: inherit; text-underline-offset: 3px; }
.process-illustration { width: 100%; max-width: 960px; margin: 24px auto 0; }
.process-art { display: block; width: 100%; height: auto; }
.contact-invitation { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 45px 55px; margin-block: 40px 65px; background: var(--story-surface); border: 1px solid var(--line); border-radius: 12px; }
.contact-invitation-copy { min-width: 0; max-width: 650px; }
.contact-invitation h2 { margin: 0; font-size: clamp(32px, 3vw, 44px); }
.contact-invitation-copy > p { max-width: 520px; margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.contact-invitation .button { margin: 0; flex-shrink: 0; }
@media (prefers-color-scheme: dark) {
  .office-study { --story-surface: #192630; --story-card: #15222D; --story-accent: #302E2B; --story-soft-gold: #625443; }
  /* Dark mode swaps in a cutout of the illustration, so the scene floats on the
     page instead of sitting in a white box; a faint warm glow grounds it. */
  /* Dark mode has its own still and loop, rendered on the page's navy with a faint
     warm glow. Their edges fade out so any small tone difference never shows as a box. */
  .platform-frame {
    border-radius: 0;
    mix-blend-mode: normal;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
    mask-composite: intersect;
  }
  /* The process loop reaches almost to the sides, so only a thin edge fades out. */
  .process-frame {
    border-radius: 0;
    mix-blend-mode: normal;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
  }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .office-study .hero-description { max-width: 352px; }
  .office-study .hero-note { max-width: 310px; }
  .story-section { gap: 35px; padding-block: 75px; }
}
@media (max-width: 800px) {
  .office-study {
    --mobile-header-height: calc(63.8408px + max(10px, env(safe-area-inset-top)) + 10px);
  }
  .office-study .header {
    min-height: 0;
    height: var(--mobile-header-height);
    padding-block: max(10px, env(safe-area-inset-top)) 10px;
  }
  .office-study .header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: calc((100% - 100vw) / 2);
    width: 100vw;
    background: #E9E0D8;
  }
  .office-study .brand-logo { width: 150px; }
  .office-study .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: stretch;
    gap: 0;
    /* The cover hugs its content: stretching it to the viewport left an empty band
       between the copy and the illustration on tall phones. The client logos below
       now peek above the fold instead. */
    min-height: 0;
    padding: 20px 0 0;
  }
  .office-study .hero-copy { display: contents; }
  .office-study .hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset-block: 0 -24px;
    left: calc((100% - 100vw) / 2);
    width: 100vw;
    background: linear-gradient(to bottom, #E9E0D8 calc(100% - 180px), var(--paper));
  }
  .office-study h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 20px;
    font-size: clamp(2rem, 10.2vw, 2.875rem);
    line-height: 1.07;
    overflow-wrap: anywhere;
  }
  .office-study .hero-description {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    font-size: .9375rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .office-study .hero-copy > .button {
    grid-column: 1;
    grid-row: 4;
    margin: 14px 0 max(20px, env(safe-area-inset-bottom));
    min-height: 54px;
    padding: 14px 21px;
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  /* Full-bleed crop of the cover around the characters; it dissolves into the
     background above the heading and below, where the CTA keeps its own row. */
  .office-study .hero-visual {
    position: relative;
    z-index: 0;
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    top: auto;
    bottom: auto;
    height: auto;
    aspect-ratio: 990 / 680;
    /* The faded bottom edge may sit in the CTA's top margin; keeps the CTA above the fold on short phones. */
    margin-block: 4px -14px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 24px), transparent);
  }
  .office-study .hero-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .story-section { grid-template-columns: 1fr; gap: 36px; padding-block: 58px; }
  .story-copy { max-width: 580px; }
  .story-section h2, .process-section h2 { font-size: clamp(34px, 5.8vw, 45px); }
  .platform-illustration { width: 100%; max-width: 680px; margin-inline: auto; }
  .process-section { padding-block: 58px; }
  .process-quote footer { font-size: 12px; }
  .process-illustration { margin-top: 28px; }
  .contact-invitation { padding: 30px; margin-block: 30px 42px; }
}
/* Short phones (iPhone SE and similar): tighten the cover so its CTA stays above the fold. */
@media (max-width: 800px) and (max-height: 600px) {
  .office-study .hero { padding-top: 12px; }
  .office-study h1 { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .office-study .hero-description { width: 100%; }
  .contact-invitation { flex-direction: column; align-items: flex-start; gap: 26px; padding: 28px 24px; }
}

/* Keep the final composition in print and when motion preferences change. */
@media print, (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] { translate: none !important; opacity: 1 !important; }
}