/* ==========================================================================
   IN DETAIL — Personal Organizer
   Main stylesheet — design tokens + shared design system
   Phase 1: foundation, header, footer, navigation, Home layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour palette — Soft Neutrals (approved) */
  --color-ivory: #FBFCF6;
  --color-greige: #EBE2D9;
  --color-nude: #E0C4B6;
  --color-sand: #E2D1BF;
  --color-sage: #9DA28E;
  --color-charcoal: #252525;

  /* Semantic colour roles */
  --color-bg: var(--color-ivory);
  --color-bg-alt: var(--color-greige);
  --color-text: var(--color-charcoal);
  --color-text-muted: #5c5c58;
  --color-border: #d8d2c6;
  --color-accent: var(--color-sage);

  /* Typography */
  --font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --h1-size: clamp(2.4rem, 5.2vw, 4.875rem);   /* clamp(48px, 5.2vw, 78px) */
  --h1-line: 1.03;
  --h1-tracking: 0.02em;

  --h2-size: clamp(2.125rem, 3.2vw, 3.25rem);  /* clamp(34px, 3.2vw, 52px) */
  --h2-line: 1.10;
  --h2-tracking: 0.02em;

  --h3-size: 1.375rem;                          /* 22px, within 20–26px range */
  --h3-line: 1.25;

  --body-size: 1.0625rem;                       /* 17px, within 16–18px desktop */
  --body-size-mobile: 1rem;                     /* 16px, within 15.5–17px mobile */
  --body-line: 1.7;

  --label-size: 0.8125rem;                      /* 13px */
  --label-tracking: 0.07em;

  /* Layout */
  --content-max-width: 1280px;
  --text-max-width: 680px;                      /* within 620–720px */

  --margin-desktop: 72px;                       /* within 64–80px */
  --margin-tablet: 36px;                        /* within 32–40px */
  --margin-mobile: 22px;                        /* within 20–24px */

  --gutter: 28px;                               /* within 24–32px */

  --section-space-desktop: 140px;               /* within 120–160px */
  --section-space-tablet: 104px;                /* within 88–120px */
  --section-space-mobile: 76px;                 /* within 64–88px */

  --touch-target-min: 44px;

  /* Motion */
  --transition-fast: 220ms ease;
  --transition-medium: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-distance: 18px;

  /* Header */
  --header-height: 88px;                        /* within 80–92px */
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--weight-regular);
  font-size: var(--body-size-mobile);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    font-size: var(--body-size);
  }
}

img,
picture,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, .h1 {
  font-weight: var(--weight-light);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking);
}

h2, .h2 {
  font-weight: var(--weight-light);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-tracking);
}

h3, .h3 {
  font-weight: var(--weight-regular);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.eyebrow {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.body-text {
  font-size: inherit;
  line-height: var(--body-line);
  color: var(--color-text);
}

.text-measure {
  max-width: var(--text-max-width);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Prevents a hyphenated word (e.g. "integra-se") from being split across
   two lines at its internal hyphen — a valid browser break point by
   default that can otherwise strand a short fragment alone on the next
   line at certain widths. */
.nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--margin-tablet);
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: var(--margin-desktop);
  }
}

.section {
  padding-block: var(--section-space-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-space-tablet);
  }
}

@media (min-width: 1200px) {
  .section {
    padding-block: var(--section-space-desktop);
  }
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--sage {
  background: var(--color-sage);
  color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   5. SKIP LINK / ACCESSIBILITY
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 14px 22px;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 3px;
}

.section--sage :focus-visible {
  outline-color: var(--color-ivory);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 13px 30px;
  font-family: var(--font-family);
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--color-charcoal);
  background: transparent;
  color: var(--color-charcoal);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

.btn--filled {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

.btn--filled:hover {
  background: transparent;
  color: var(--color-charcoal);
}

.btn--on-sage {
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}

.btn--on-sage:hover {
  background: var(--color-ivory);
  color: var(--color-sage);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition-medium), box-shadow var(--transition-medium);
}

/* Accessibility: the Home hero photograph is mostly light, but its right
   side (clothes rail, basket weave) is busy/varied enough that charcoal
   nav text there can fall below WCAG AA contrast — particularly from
   "Sobre" onwards. Rather than darkening the photo, a uniform, restrained
   translucent Ivory wash with a light backdrop blur sits behind the whole
   header, giving consistent legibility across its full width without
   reading as an opaque bar or a corporate navigation strip. It's replaced
   by the slightly stronger solid state once the page is scrolled. */
.site-header.has-photo-hero:not(.is-scrolled) {
  background: rgba(251, 252, 246, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.site-header.is-scrolled {
  background: rgba(251, 252, 246, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--color-border);
}

/* NOTE: the Home hero photograph is naturally light/warm-toned throughout
   (including behind the header), so the header keeps its standard charcoal
   text at all times — no separate "on-dark" light-text state is needed. */

.header-inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 768px) {
  .header-inner {
    padding-inline: var(--margin-tablet);
  }
}

@media (min-width: 1200px) {
  .header-inner {
    padding-inline: var(--margin-desktop);
  }
}

.logo {
  display: block;
}

/* Official IN DETAIL wordmark (horizontal, no-claim version). Sized purely
   via CSS height with width:auto, so the source artwork's intrinsic aspect
   ratio (≈2.9:1) is always preserved — never stretched or cropped. The
   source file is 2135×736px, far larger than any displayed size below, so
   increasing the display height here does not upscale or degrade it. */
.site-logo-img {
  display: block;
  height: 44px;
  width: auto;
}

@media (min-width: 1024px) {
  .site-logo-img {
    height: 68px; /* ~17-18% larger than the previous 58px, desktop only */
  }
}

.main-nav {
  display: none;
}

@media (min-width: 1024px) {
  .main-nav {
    display: flex;
    gap: 36px;
  }

  .main-nav a {
    font-size: var(--label-size);
    font-weight: var(--weight-medium);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-charcoal);
    padding-block: 6px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    border-color: currentColor;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
}

.lang-switch a {
  text-decoration: none;
  color: var(--color-charcoal);
  padding: 4px 2px;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.lang-switch a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header-contact {
  display: none;
}

@media (min-width: 1024px) {
  .header-contact {
    display: inline-flex;
    font-size: var(--label-size);
    font-weight: var(--weight-medium);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-charcoal);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }
}

/* Hamburger — mobile / tablet */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle-icon {
  position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle-icon::before {
  top: -7px;
}

.menu-toggle-icon::after {
  top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile navigation panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--margin-mobile);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-medium), transform var(--transition-medium), visibility var(--transition-medium);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--header-height);
}

.mobile-nav-list a {
  display: block;
  padding: 14px 0;
  font-size: 1.75rem;
  font-weight: var(--weight-light);
  text-decoration: none;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-footer .lang-switch {
  font-size: 0.9375rem;
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

/* Desktop (≥1024px): full-bleed photograph at its own natural aspect ratio
   (no crop — the composition, with its deliberate left-side negative space,
   is preserved exactly), with the claim overlaid directly on that negative
   space. No dark scrim: the photograph is naturally light there, so
   charcoal text reads clearly against it without one. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-greige);
}

.hero-media {
  position: relative;
  width: 100%;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-content {
  width: 100%;
  padding-block: var(--section-space-mobile);
}

/* Tablet & mobile: the hero becomes a stacked composition rather than an
   overlay. A full-width, uncropped 2.5:1 strip would shrink the closet
   itself to almost nothing on a narrow screen, so instead the photograph is
   given its own deliberate crop here — framed on the organized shelving
   rather than the empty wall — and the claim moves into normal document
   flow below it, on solid Ivory, at full readable size. */
@media (max-width: 1023px) {
  .hero-media {
    aspect-ratio: 5 / 4;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 74% 42%;
  }

  .hero-content {
    padding-inline: var(--margin-mobile);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }

  .hero-content {
    padding-inline: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  .hero {
    display: block;
  }

  .hero-media {
    position: relative;
    aspect-ratio: 1983 / 793;
    max-height: 760px;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-content {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: 44%;
    max-width: 560px;
    padding: 0;
    padding-left: var(--margin-desktop);
    padding-right: 40px;
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Hero claim — the official brand claim gets significantly more visual
   presence: uppercase, generous scale, elegant tracking. Raleway Light only;
   no bold, no boxes, no decorative effects. The underlying copy in the HTML
   stays exactly as approved (mixed case) — this is a visual transform only. */
.hero-claim {
  text-transform: uppercase;
  font-weight: var(--weight-light);
  font-size: clamp(2.75rem, 6.6vw, 5.25rem); /* clamp(44px, 6.6vw, 84px) */
  line-height: 1.08;
  letter-spacing: 0.045em;
  color: var(--color-charcoal);
}

.hero-claim-line {
  display: block;
}

/* The desktop overlay column is intentionally narrow (so the closet stays
   fully visible on the right). Breaking the claim across three lines
   (rather than two) shortens the longest line enough to let it render
   meaningfully larger here than a two-line version could, while still
   fitting on one line per row at any desktop width — verified at
   1024/1200/1440/1920px. */
@media (min-width: 1024px) {
  .hero-claim {
    font-size: clamp(1.875rem, 3vw, 2.75rem); /* clamp(30px, 3vw, 44px) */
    line-height: 1.12;
  }
}

.hero-actions {
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   9. IMAGE PLACEHOLDERS
   -------------------------------------------------------------------------- */
.image-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--color-greige) 0%, var(--color-sand) 100%);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(37,37,37,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(37,37,37,0.05) 25%, transparent 25%);
  background-size: 34px 34px;
}

.image-placeholder-label {
  position: relative;
  z-index: 1;
  margin: 20px;
  padding: 10px 14px;
  background: rgba(251, 252, 246, 0.88);
  color: var(--color-charcoal);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 82%;
}

.image-placeholder-label strong {
  display: block;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  font-size: 0.6875rem;
  margin-bottom: 4px;
  color: var(--color-sage);
}

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   10. VALUE PROPOSITION
   -------------------------------------------------------------------------- */
.value-prop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.value-prop-text {
  text-align: left;
}

.value-prop-text .text-measure {
  margin-top: 24px;
}

.value-prop-text h2 {
  max-width: 620px;
}

/* Asymmetric editorial composition: a deliberately smaller, offset image
   rather than a conventional 50/50 split — generous negative space around
   it keeps the emphasis on the text. */
.value-prop-media {
  width: 100%;
  max-width: 340px;
}

.value-prop-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .value-prop-grid {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
  }

  .value-prop-media {
    max-width: 400px;
    margin-left: auto;
    margin-top: 64px;
  }
}

/* --------------------------------------------------------------------------
   11. DIFFERENTIATOR
   -------------------------------------------------------------------------- */
.differentiator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

/* Tablet/mobile: text reads before the image (so the section doesn't look
   visually fused to the Value Proposition photo directly above it). Desktop
   keeps the source order — image left, text right — untouched. */
@media (max-width: 1023px) {
  .differentiator-media {
    order: 2;
  }

  .differentiator-text {
    order: 1;
  }
}

.differentiator-text h2 {
  margin-bottom: 24px;
}

/* Mirrors the Value Proposition's asymmetric treatment (a deliberately
   smaller, offset image with generous negative space) but inverted — image
   on the left, wider text column on the right — so the two sections create
   alternating editorial rhythm down the page rather than repeating the
   same composition. */
.differentiator-media {
  width: 100%;
  max-width: 340px;
}

.differentiator-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Slightly tighten the gap to the Value Proposition section above (desktop
   only) so the two feel intentionally related rather than disconnected —
   still generous, just not the full section-to-section rhythm used
   elsewhere. Tablet/mobile spacing is left at the standard section rhythm,
   reviewed independently rather than scaled down from this value. */
@media (min-width: 1200px) {
  .differentiator-grid-section {
    padding-top: 100px;
  }
}

@media (min-width: 1024px) {
  .differentiator-grid {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }

  .differentiator-media {
    max-width: 400px;
    margin-right: auto;
    margin-top: 64px;
  }
}

/* --------------------------------------------------------------------------
   12. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonials-section {
  background: var(--color-greige);
}

.testimonials-section .eyebrow {
  text-align: center;
  display: block;
}

.testimonials-grid {
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
    gap: 96px;
  }
}

.testimonial blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: var(--weight-light);
  line-height: 1.5;
  color: var(--color-charcoal);
}

/* Desktop-only: body text ~15% smaller than the base (mobile/tablet) size
   above. Every clamp parameter is scaled by the same 0.85 factor, so the
   reduction is exactly 15% at any desktop width, not just at one reference
   size. Line-height, weight and colour are intentionally left untouched. */
@media (min-width: 1024px) {
  .testimonial blockquote {
    font-size: clamp(1.0625rem, 1.36vw, 1.275rem);
  }
}

.testimonial blockquote::before {
  content: "\201C";
}

.testimonial blockquote::after {
  content: "\201D";
}

.testimonial cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Testimonial carousel — shows a "step" of testimonials at a time
   (3 desktop / 2 tablet / 1 mobile), sliding by one item per navigation.
   Each visible testimonial reads as its own card: a subtle Ivory fill
   against the section's Greige background, with the horizontal padding
   on .testimonial-slide (the outer flex item) forming the gap between
   adjacent cards. The track is a flex row; every slide is a flex item,
   and flexbox's default cross-axis "stretch" behaviour makes every slide
   (visible or not) match the height of the tallest one automatically —
   visible cards therefore always share equal height and width, and the
   section's height stays stable when navigating, with nothing ever
   clipped. Within each card, .testimonial is a column flex container;
   the client name (cite) follows the quote with a fixed margin-top
   (not margin-top: auto), so it sits at a consistent distance below the
   text regardless of testimonial length, rather than being pushed to
   the bottom of the card — any leftover space in a shorter card appears
   below the name instead of between the quote and the name. */
.testimonial-carousel {
  max-width: 600px;
  margin: 8px auto 0;
}

@media (min-width: 768px) {
  .testimonial-carousel {
    max-width: none;
  }
}

.testimonial-viewport {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    transition: none;
  }
}

.testimonial-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 0;
}

@media (min-width: 768px) {
  .testimonial-slide {
    flex: 0 0 50%;
    padding-inline: 20px;
  }
}

@media (min-width: 1024px) {
  .testimonial-slide {
    flex: 0 0 33.3334%;
    padding-inline: 28px;
  }
}

.testimonial-slide .testimonial {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-ivory);
  padding: 32px 28px;
}

@media (min-width: 1024px) {
  .testimonial-slide .testimonial {
    padding: 44px 36px;
  }
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.testimonial-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.testimonial-nav:hover,
.testimonial-nav:focus-visible {
  color: var(--color-charcoal);
}

.testimonial-nav[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.testimonial-nav svg {
  display: block;
}

.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-dot[hidden] {
  display: none;
}

.testimonial-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.testimonial-dot:hover,
.testimonial-dot:focus-visible {
  background: var(--color-text-muted);
}

.testimonial-dot.is-active {
  background: var(--color-sage);
  transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   13. SECONDARY BRAND STATEMENT
   -------------------------------------------------------------------------- */
.brand-statement {
  padding-block: 64px;
  text-align: center;
}

@media (min-width: 768px) {
  .brand-statement {
    padding-block: 88px;
  }
}

@media (min-width: 1200px) {
  .brand-statement {
    padding-block: 120px;
  }
}

.brand-statement-text {
  max-width: 700px;
  margin-inline: auto;
  font-weight: var(--weight-light);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem); /* clamp(22px, 2.4vw, 30px) */
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* --------------------------------------------------------------------------
   14. FINAL CTA
   -------------------------------------------------------------------------- */
.cta-final {
  text-align: center;
}

.cta-final .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cta-final h2 {
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-alt);
  padding-block: 64px 32px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-logo-img {
  display: block;
  height: 60px;
  width: auto;
}

.footer-tagline {
  margin-top: 16px;
  max-width: 320px;
  font-weight: var(--weight-light);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-heading {
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--color-text-muted);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-list a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.footer-nav-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9375rem;
}

.footer-contact-list a {
  text-decoration: none;
}

.footer-contact-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.footer-legal a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.footer-legal a:hover {
  text-decoration: underline;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.footer-lang-switch {
  font-size: 0.8125rem;
}

/* Social icons: sit in the Contacts column, right after email/phone — a
   discreet, muted-color icon pair matching the copyright/legal text
   treatment, not the more prominent email/phone link color. Outline-only
   SVGs using currentColor, so no brand colors are introduced and they
   inherit the footer's existing palette exactly. */
.footer-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--color-text);
}

.footer-social svg {
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex: 0 0 16px;
}

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* No-JS fallback: content must never depend on JS to be visible */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   17. LANGUAGE SELECTOR (root entry page)
   -------------------------------------------------------------------------- */
.lang-select {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin-mobile);
  text-align: center;
}

.lang-select-inner {
  max-width: 460px;
}

.lang-select-logo-img {
  display: block;
  height: 56px;
  width: auto;
  margin-inline: auto;
  margin-bottom: 28px;
}

.lang-select-claim {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 48px;
}

.lang-select-options {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.lang-select-options a {
  flex: 1;
  padding: 20px;
  border: 1px solid var(--color-charcoal);
  text-decoration: none;
  font-size: 1rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-select-options a:hover {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   18. CURRENT-PAGE NAV INDICATOR (shared across all pages)
   -------------------------------------------------------------------------- */
.main-nav a[aria-current="page"],
.mobile-nav-list a[aria-current="page"] {
  border-color: currentColor;
}

/* --------------------------------------------------------------------------
   19. PAGE HERO (Services / Process / About / Partners / Contact)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--header-height) + 56px);
  padding-bottom: 64px;
  background: var(--color-greige);
}

@media (min-width: 768px) {
  .page-hero {
    padding-top: calc(var(--header-height) + 72px);
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .page-hero {
    padding-top: calc(var(--header-height) + 96px);
    padding-bottom: 104px;
  }
}

.page-hero h1 {
  max-width: 780px;
}

.page-hero-intro {
  margin-top: 22px;
  max-width: var(--text-max-width);
  font-size: 1.0625rem;
  line-height: var(--body-line);
  color: var(--color-text-muted);
}

/* About page variant: intro text alongside a placeholder atmosphere image */
.page-hero--split .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .page-hero--split .container {
    grid-template-columns: 6fr 6fr;
    gap: 64px;
  }
}

.page-hero-media {
  width: 100%;
}

.page-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* About hero: the round logo is treated as a large editorial graphic, not
   a small brand mark — but capped so it never feels oversized or
   promotional, and never boxed/backed/shadowed. */
.page-hero-media--logo {
  display: flex;
  justify-content: center;
}

.page-hero-media--logo img {
  width: 100%;
  max-width: 340px;
}

@media (min-width: 1024px) {
  .page-hero-media--logo {
    justify-content: flex-end;
  }

  .page-hero-media--logo img {
    max-width: 420px;
  }
}

/* Partners hero: an asymmetric editorial relationship between the intro
   text and the hero photograph, rather than a full-width image dropped
   below the heading. */
.page-hero--partners .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 1024px) {
  .page-hero--partners .container {
    grid-template-columns: 6fr 5fr;
    gap: 64px;
    align-items: end;
  }

  .page-hero--partners .page-hero-media {
    max-width: 420px;
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   20. EDITORIAL ALTERNATING BLOCKS (Services / Partners)
   -------------------------------------------------------------------------- */
.editorial-block {
  padding-block: var(--section-space-mobile);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .editorial-block {
    padding-block: var(--section-space-tablet);
  }
}

@media (min-width: 1200px) {
  .editorial-block {
    padding-block: var(--section-space-desktop);
  }
}

.editorial-block:first-of-type {
  border-top: none;
}

.editorial-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

/* Text must always read before its image on tablet/mobile — regardless of
   which side the image sits on at desktop. This overrides source order
   for the --reverse blocks (which put the image first in the DOM so it
   can sit on the left at desktop). */
@media (max-width: 1023px) {
  .editorial-block-text {
    order: 1;
  }

  .editorial-block-media {
    order: 2;
  }
}

@media (min-width: 1024px) {
  .editorial-block-grid {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
  }

  /* Alternates the image side per block for editorial rhythm, matching the
     Home Value Proposition / Differentiator alternation. Apply
     .editorial-block--reverse to flip a given block to image-left. */
  .editorial-block--reverse .editorial-block-grid {
    grid-template-columns: 5fr 7fr;
  }

  .editorial-block--reverse .editorial-block-media {
    order: -1;
  }

  /* Vary the image column's vertical alignment slightly per block so
     repeated sections don't read as identical, mechanically stamped
     units — matching each photo's own proportions rather than forcing a
     uniform crop. */
  .editorial-block-media {
    align-self: start;
  }

  .editorial-block--align-center .editorial-block-media {
    align-self: center;
  }
}

.editorial-block-media {
  width: 100%;
}

.editorial-block-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Home Organization image: the source photograph's native aspect ratio
   (1024×1536) differs from the Closet Organization image (1122×1402), so
   left at its natural ratio it would render taller than Closet's. This
   forces it into the exact same 1122:1402 box — matching Closet's
   displayed width AND height at every breakpoint, since both share the
   same .editorial-block-media container/grid column already — cropping
   the photo via object-fit rather than stretching it. */
.editorial-block-media--match-closet img {
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  object-position: center 30%;
}

.editorial-block-text h2,
.editorial-block-text h3 {
  margin-bottom: 20px;
}

.editorial-block-text .text-measure {
  margin-bottom: 28px;
}

.editorial-block-text .text-measure:last-child {
  margin-bottom: 0;
}

.editorial-list-heading {
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.editorial-list {
  margin-bottom: 28px;
}

.editorial-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* Modest mobile/tablet legibility improvement for Phase 2 secondary content
   (service/partner lists, body copy, values, page-hero intros). Scoped to
   Phase-2-only selectors so Home's typography is entirely unaffected —
   .body-text is shared with Home, but these parent classes
   (.editorial-block-text, .about-manifesto, .about-value) only exist on
   Phase 2 pages. A small increase only: not a hierarchy change. */
@media (max-width: 1023px) {
  .editorial-list li,
  .editorial-areas-grid li {
    font-size: 1rem;
    line-height: 1.65;
  }

  .editorial-block-text .body-text,
  .about-manifesto .body-text,
  .page-hero-intro {
    line-height: 1.75;
  }

  .about-value p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

.editorial-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--color-text-muted);
}

/* Plain intro line for a sub-group within an Extra/Optional services list
   (e.g. "Selection Consultancy for:" before its own two bullet items).
   Deliberately copies .editorial-list li's font-size/line-height/color
   exactly — this is regular body text, not a heading, and not a bullet
   itself, so it has no left padding and no ::before dash marker. */
.editorial-list-intro {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

@media (max-width: 1023px) {
  .editorial-list-intro {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.editorial-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .editorial-areas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.editorial-areas-grid li {
  font-size: 0.9375rem;
  color: var(--color-text);
  padding-block: 4px;
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   21. PROCESS STEPS
   -------------------------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 48px;
  }
}

.process-step-number {
  display: block;
  font-weight: var(--weight-light);
  font-size: clamp(2.625rem, 4vw, 4rem); /* clamp(42px, 4vw, 64px) */
  line-height: 1;
  color: var(--color-sage);
  margin-bottom: 18px;
}

.process-step h3 {
  margin-bottom: 10px;
}

.process-step p {
  color: var(--color-text);
  max-width: 480px;
}

/* --------------------------------------------------------------------------
   22. ABOUT — MANIFESTO & VALUES
   -------------------------------------------------------------------------- */
.about-manifesto p {
  margin-bottom: 24px;
  max-width: var(--text-max-width);
}

.about-manifesto p:last-child {
  margin-bottom: 0;
}

.about-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 600px) {
  .about-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-values {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

.about-value h3 {
  margin-bottom: 10px;
}

.about-value p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   23. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
    gap: 80px;
  }
}

.contact-info-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info-list a {
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}

.contact-info-list a:hover {
  border-color: currentColor;
}

.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  transition: border-color var(--transition-fast);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-charcoal);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
}

.form-consent input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.form-consent label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.form-consent label a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent label a:hover,
.form-consent label a:focus-visible {
  color: var(--color-charcoal);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   24. PLACEHOLDER LABEL — refined variant for interior pages
   -------------------------------------------------------------------------- */
.editorial-block-media .image-placeholder,
.page-hero-media .image-placeholder {
  aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------------
   25. LEGAL / PRIVACY POLICY PAGE
   -------------------------------------------------------------------------- */
.legal-content {
  padding-block: var(--section-space-mobile);
}

@media (min-width: 768px) {
  .legal-content {
    padding-block: var(--section-space-tablet);
  }
}

@media (min-width: 1200px) {
  .legal-content {
    padding-block: var(--section-space-desktop);
  }
}

.legal-content-inner {
  max-width: 720px;
}

.legal-updated {
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 40px;
}

.legal-intro {
  margin-bottom: 56px;
}

.legal-intro p {
  margin-bottom: 20px;
}

.legal-intro p:last-child {
  margin-bottom: 0;
}

.legal-section {
  padding-top: 44px;
  margin-top: 44px;
  border-top: 1px solid var(--color-border);
}

.legal-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.legal-section h2 {
  font-size: 1.375rem;
  font-weight: var(--weight-regular);
  line-height: 1.3;
  margin-bottom: 18px;
}

.legal-section p {
  margin-bottom: 18px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin-bottom: 18px;
}

.legal-section ul:last-child {
  margin-bottom: 0;
}

.legal-section li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 1.7;
}

.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--color-text-muted);
}

.legal-section a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
}

.legal-section a:hover,
.legal-section a:focus-visible {
  text-decoration-color: currentColor;
}

.legal-contact-block {
  margin-top: 4px;
  font-style: normal;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   26. SERVICE TITLE WITH SECONDARY QUALIFIER
   Used only for the "Organização da Casa / Total ou Parcial" (and EN
   equivalent) service heading. The main title keeps the exact same
   typography as every other service h2 (inherited, untouched); only the
   gap between it and the subtitle beneath it is tightened here, via a
   selector scoped to this wrapper so no other service heading is affected.
   -------------------------------------------------------------------------- */
.service-heading-group {
  margin-bottom: 20px;
}

.service-heading-group h2 {
  margin-bottom: 0;
}


/* Both title lines are <span> elements inside ONE <h2> — a single semantic
   title, not a heading plus a separate subtitle. Each line is its own
   full-width display:block box (width:100% added as extra insurance), which
   is what makes the line break reliable: unlike forcing display:block on a
   <br> element (an earlier approach, which is a non-standard override with
   inconsistent cross-browser support), a block-level <span> is a completely
   standard, universally-supported way to force content onto its own line.
   This cannot silently collapse into the line above it. */
.service-title-line {
  display: block;
  width: 100%;
}

.service-title-second-line {
  display: block;
  width: 100%;
  margin-top: 0.34em;
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.68em; /* exact measured desktop ratio: 31.3344px / 46.08px = 0.68 */
  line-height: 1.08;
  letter-spacing: inherit;
  color: inherit;
  text-transform: uppercase;
}

/* Mobile only: re-declared explicitly (not just inherited from the rule
   above) with a higher-specificity selector — the h2.service-title ancestor
   qualifier — so this cannot lose to any other mobile-breakpoint rule.
   Preserves the exact same 0.68 ratio measured on desktop; tablet and
   desktop are untouched. */
@media (max-width: 767px) {
  h2.service-title .service-title-second-line {
    display: block;
    width: 100%;
    margin-top: 0.38em;
    font-family: inherit;
    font-weight: inherit;
    font-size: 0.68em;
    line-height: 1.08;
    letter-spacing: inherit;
    color: inherit;
    text-transform: uppercase;
    white-space: nowrap;
  }
}


/* V15: restore approved uppercase presentation for service titles only. */
.service-title { text-transform: uppercase; }