/* =========================================================
   DISTINTO CREATIVE — Landing Page
   Fraunces (headlines) + Archivo (corpo)
   ========================================================= */

:root {
  /* Color system — Distinto brand palette (strict grayscale, no gradients) */
  --black: #000000;
  --gray-900: #2e2e2e;
  --gray-800: #3f3f3f;
  --gray-500: #9b9b9b;
  --gray-200: #e0e0e0;
  --white: #f8f8f8;

  --bg: var(--white);
  --bg-elevated: var(--gray-200);
  --bg-elevated-2: var(--gray-500);
  --cream: var(--black);
  --stone: var(--gray-800);
  --line: var(--gray-200);
  --line-strong: var(--gray-500);
  --accent: var(--black);
  --accent-soft: var(--gray-200);
  --accent-contrast: var(--white);

  /* Always-inverted tokens for high-contrast accent cards (featured
     model, "vivid" comparison column) — opposite of whatever the page
     theme currently is, so they keep popping in both light and dark. */
  --invert-bg: var(--black);
  --invert-fg: var(--white);
  --invert-fg-muted: var(--gray-200);
  --invert-line: var(--gray-800);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius: 8px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll-triggered page-wide inversion, from "A mudança" onward.
   Toggled by main.js when the user scrolls past that section. */
body.theme-dark {
  --bg: var(--black);
  --bg-elevated: var(--gray-900);
  --bg-elevated-2: var(--gray-800);
  --cream: var(--white);
  --stone: var(--gray-200);
  --line: var(--gray-800);
  --line-strong: var(--gray-500);
  --accent: var(--white);
  --accent-soft: var(--gray-900);
  --accent-contrast: var(--black);

  --invert-bg: var(--white);
  --invert-fg: var(--black);
  --invert-fg-muted: var(--gray-800);
  --invert-line: var(--gray-200);
}

body,
.entrega, .entrega *,
.mudanca, .mudanca *,
.modelos, .modelos *,
.services, .services *,
.diagnostico, .diagnostico *,
.faq, .faq *,
.footer, .footer * {
  transition: background-color 700ms ease, color 700ms ease, border-color 700ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Fraunces is a variable font with an optical-size axis (opsz 9–144).
     Pin it to the lowest value everywhere so display type keeps low
     stroke contrast instead of the browser auto-scaling opsz with
     font-size. Inherited, so it reaches every Fraunces usage below. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 9;
}

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

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.wrap--wide {
  max-width: 1240px;
  width: 90%;
  margin-inline: auto;
  padding: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

/* ---------------- Typography ---------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}

p { margin: 0; text-wrap: pretty; }

.section-title {
  font-size: 36px;
  max-width: 18ch;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.section-title--center {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 1.75rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--primary:hover {
  background: var(--white);
  color: var(--black);
  transform: translateY(-1px);
}

.btn__arrow {
  flex-shrink: 0;
}

.btn:hover .btn__arrow {
  animation: btn-arrow-nudge 900ms ease-in-out infinite;
}

@keyframes btn-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.btn--outline {
  background: var(--bg-elevated-2);
  color: var(--cream);
}
.btn--outline:hover {
  background: var(--black);
  color: var(--white);
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 0.85rem;
}

.btn--small {
  padding: 0.65rem 1.1rem;
  font-size: 0.72rem;
}

/* ---------------- Header ---------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 60px;
  display: flex;
  align-items: center;
  background: var(--black);
  transform: translateY(0);
  transition: transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 300ms ease;
}

.site-header--hidden {
  transform: translateY(-100%);
}

.site-header--on-light {
  background: var(--white);
}

/* Transparent only at the very top of the page — matches wearecollins.com,
   where the header is solid everywhere except that first scroll position. */
.site-header--at-top {
  background: transparent;
}

body.menu-open .site-header {
  background: transparent;
}

.site-header__inner {
  width: 90%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.logo {
  display: inline-flex;
  align-items: center;
}

/* The logo is the full official lockup (elephant + "distinto" wordmark).
   At rest, the mask clips it down to just the elephant glyph; on hover
   it widens to reveal the wordmark sliding out from behind the mark. */
.logo__mask {
  display: block;
  height: 39px;
  width: 58px;
  overflow: hidden;
  transition: width 450ms var(--ease);
}

.logo__full {
  height: 39px;
  width: 145px;
  max-width: none;
  display: block;
}

.logo:hover .logo__mask,
.logo:focus-visible .logo__mask {
  width: 145px;
}

.site-header--on-light .logo__full,
body.menu-open .logo__full {
  filter: invert(1);
}

/* ---------------- Menu toggle (hamburger) ---------------- */

.menu-toggle {
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 240ms var(--ease), opacity 200ms var(--ease), background-color 0s;
}

.site-header--on-light .menu-toggle__bar,
body.menu-open .menu-toggle__bar {
  background: var(--black);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------- Site menu (overlay) ---------------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 0s;
}

.site-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.site-menu__list a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--black);
  transition: color 200ms var(--ease);
}

.site-menu__list a:hover {
  color: var(--gray-800);
}

@media (prefers-reduced-motion: no-preference) {
  body.menu-open,
  body.video-open { overflow: hidden; }
}

/* ---------------- Hero ---------------- */

.hero {
  padding: clamp(7rem, 16vh, 9rem) 0 var(--space-6);
  background: var(--bg);
  color: var(--cream);
}

.hero__intro {
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__headline {
  margin-bottom: 1.05rem;
  text-transform: uppercase;
}

.hero__headline-serif,
.hero__headline-bold {
  display: block;
}

.hero__headline-serif {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.9vw, 3.2rem);
  line-height: 1.08;
}

.hero__headline-bold {
  font-family: "Archivo Black", var(--font-body);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.35rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 0.15em;
}

.hero__lede {
  font-size: clamp(0.9rem, 1.36vw, 1.05rem);
  color: var(--stone);
  margin-bottom: 2.1rem;
  max-width: 46ch; /* fallback until JS measures the exact headline width */
}

/* The hero button always stays black — no hover color inversion — it
   just grows slightly, on top of the shared arrow-nudge animation. */
.hero .btn--primary,
.hero .btn--primary:hover {
  background: var(--black);
  color: var(--white);
  text-transform: none;
  border-radius: 999px;
  height: 45px;
  min-height: 45px;
  padding-block: 0;
  letter-spacing: 0.01em;
}
.hero .btn--primary:hover {
  transform: scale(1.06);
}

/* Video card: starts inset, its width is animated toward a wide-but-never-
   full-bleed max as main.js scrolls it into view — the same "card that
   expands on scroll" mechanic as the reference site, but capped short of
   the viewport edges so the whole card stays visible while scrolling.
   Corners stay rounded the whole time. */
.hero__media {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__media-inner {
  width: 90%;
  max-width: 1240px; /* never wider than the site's own content column */
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-elevated);
  transform-origin: center;
  will-change: transform;
}

.hero__video-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Forces software compositing — without this, Chromium's hardware video
     overlay can render behind a border-radius/overflow:hidden ancestor,
     which visually hides the mouse cursor whenever it's over the video. */
  transform: translateZ(0);
}

/* ---------------- Video lightbox (click-to-watch-with-sound) ---------------- */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
}

.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms var(--ease), visibility 0s linear 0s;
}

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.video-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
}

.video-lightbox__video {
  display: block;
  width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: #000;
  transform: translateZ(0);
}

.video-lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
}

@media (max-width: 700px) {
  .hero__media-inner {
    border-radius: 14px;
    /* The mobile file is a vertical (9:16) recording — give it a tall
       frame instead of squeezing it into the desktop's 16:9 box, so it
       reads properly and fills more of the screen. */
    aspect-ratio: 9 / 16;
  }
}

/* ---------------- Entrega ---------------- */

.entrega {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
  background: var(--bg);
  color: var(--cream);
}

.entrega .section-title {
  color: var(--cream);
  font-weight: 400;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.step {
  display: flex;
  flex-direction: column;
}

.step__image {
  aspect-ratio: 4 / 3;
  background: var(--bg-elevated);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
}

@media (max-width: 700px) {
  .step__image { border-radius: 14px; }
}

.step__image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__image-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
}

.step__body {
  padding-top: 0;
}

.step__number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--stone);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}

.step__title {
  font-weight: 300;
  font-size: 32px;
  margin-bottom: var(--space-2);
  color: var(--cream);
  text-transform: uppercase;
}

.step__text {
  color: var(--stone);
  font-size: 1rem;
}

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .step__image { aspect-ratio: 16 / 10; }
}

/* ---------------- Mudança ---------------- */

.mudanca {
  padding: var(--space-6) 0;
  background: var(--bg);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.compare__col {
  padding: var(--space-4);
  border-radius: var(--radius);
}

.compare__col--fade {
  opacity: 0.62;
  background: #ffffff;
}

.compare__col--vivid {
  background: var(--invert-bg);
}

.compare__title {
  font-size: 28px;
  margin-bottom: var(--space-3);
  font-weight: 500;
}

.compare__col--fade .compare__title { color: var(--stone); }
.compare__col--vivid .compare__title { color: var(--invert-fg); }

.compare__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.compare__list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}

.compare__list li:first-child {
  padding-top: 0;
}

.compare__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.compare__col--fade .compare__list li { color: var(--stone); border-bottom-color: var(--line); }
.compare__col--vivid .compare__list li { color: var(--invert-fg); border-bottom-color: var(--invert-line); }

.compare__result {
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: 1.1rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.compare__col--fade .compare__result { color: var(--stone); }
.compare__col--vivid .compare__result { color: var(--invert-fg-muted); border-top-color: var(--invert-line); }

.mudanca__close {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-top: var(--space-6);
  color: var(--cream);
}

/* Scroll-scrubbed word reveal: each word starts dim and turns full
   color as the user scrolls the paragraph through the viewport. */
.scroll-color-reveal .word-color {
  color: var(--line-strong);
  transition: color 150ms ease;
}

.scroll-color-reveal .word-color.is-active {
  color: var(--cream);
}

.mudanca__close-break {
  display: none;
}

@media (max-width: 700px) {
  /* "Ser notado é o começo." / "Ser lembrado é o verdadeiro jogo." on
     their own lines — mobile only. */
  .mudanca__close-break {
    display: inline;
  }
}

@media (max-width: 800px) {
  .compare { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------------- Modelos ---------------- */

.modelos {
  padding: var(--space-6) 0;
}

.modelos__intro {
  color: var(--stone);
  font-size: 1.1rem;
  max-width: 56ch;
  margin-bottom: var(--space-5);
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.card {
  position: relative;
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
}

.card--featured {
  background: var(--invert-bg);
}

.card--featured .card__title,
.card--featured .card__list li {
  color: var(--invert-fg);
}

.card--featured .card__list li {
  border-bottom-color: var(--invert-line);
}

.card--featured .card__subtitle,
.card--featured .card__note {
  color: var(--invert-fg-muted);
}

.card--featured .btn--primary {
  background: var(--invert-fg);
  color: var(--invert-bg);
}
.card--featured .btn--primary:hover {
  background: var(--invert-bg);
  color: var(--invert-fg);
}

.card__badge {
  position: absolute;
  top: -0.8rem;
  left: var(--space-4);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
}

.card__title {
  font-size: 36px;
  margin-bottom: var(--space-1);
}

.card__subtitle {
  font-family: "Archivo", var(--font-body);
  font-weight: 600;
  font-style: normal;
  color: var(--stone);
  font-size: 1.05rem;
  margin-bottom: var(--space-4);
}

.card__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__list li {
  padding: 0.85rem 0;
  font-size: 0.98rem;
  color: var(--cream);
  border-bottom: 1px solid var(--line);
}

.card__list li:first-child {
  padding-top: 0;
}

.card__list-strong {
  font-weight: 600;
}

.card__note {
  color: var(--stone);
  font-size: 0.92rem;
  margin-bottom: var(--space-4);
}

.card .btn {
  align-self: flex-start;
  border-radius: 999px;
  height: 45px;
  min-height: 45px;
  padding-block: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Hover matches the hero button: no color swap, just a slight grow. */
.card .btn:hover {
  transform: scale(1.06);
}
.card .btn--primary:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}
.card--featured .btn--primary:hover {
  background: var(--invert-fg);
  color: var(--invert-bg);
}
.card .btn--outline:hover {
  background: var(--bg-elevated-2);
  color: var(--cream);
}

@media (max-width: 800px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------------- Serviços ---------------- */

.services {
  padding: var(--space-7) 0;
  background: var(--bg);
  color: var(--cream);
}

.services__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
}

.services__sticky {
  position: sticky;
  top: 45vh;
  align-self: start;
  height: fit-content;
}

.services__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--stone);
}

.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.services__item {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  padding: 1.5rem 0;
  color: var(--line-strong);
  transition: color 250ms ease;
}

.services__item.is-active {
  color: var(--cream);
}

@media (max-width: 800px) {
  .services__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .services__sticky { position: static; }
}

/* ---------------- Diagnóstico / Formulário ---------------- */

.diagnostico {
  padding: var(--space-6) 0;
  scroll-margin-top: 5rem;
}

.diagnostico__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.diagnostico__text {
  color: var(--stone);
  font-size: 1.1rem;
  max-width: 40ch;
}

.diagnostico__cta {
  margin-top: var(--space-4);
  border-radius: 999px;
  height: 45px;
  min-height: 45px;
  padding-block: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}

.faq__cta {
  margin-top: var(--space-3);
  border-radius: 999px;
  height: 45px;
  min-height: 45px;
  padding-block: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}

.diagnostico__image {
  height: 100%;
  min-height: 100%;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.diagnostico__image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diagnostico__image-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
}

@media (max-width: 800px) {
  .diagnostico__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .diagnostico__image { aspect-ratio: 4 / 3; height: auto; }
}


/* ---------------- FAQ ---------------- */

.faq {
  padding: var(--space-6) 0;
}

.accordion__item {
  border-bottom: 1px solid var(--line);
}

.accordion__item h3 { margin: 0; }

.accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  color: var(--stone);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  padding: var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  min-height: 44px;
  transition: color 200ms var(--ease);
}

.accordion__trigger:hover,
.accordion__trigger[aria-expanded="true"] { color: var(--accent); }

.accordion__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.accordion__icon::before { width: 14px; height: 1.5px; }
.accordion__icon::after { width: 1.5px; height: 14px; transition: transform 220ms var(--ease); }

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion__panel {
  padding: 0 0 var(--space-3);
  max-width: 68ch;
}

.accordion__panel p {
  color: var(--stone);
  font-size: 1rem;
}

/* ---------------- Footer ---------------- */

.footer {
  padding: var(--space-6) 0;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.footer__logo {
  height: 34px;
  width: auto;
  display: block;
}

@media (max-width: 700px) {
  /* Stacked layout on narrow screens — JS only syncs the logo's height to
     the contact block while they sit side by side, so fall back to a
     width-based size here (auto height keeps it undistorted). */
  .footer__logo { height: auto; width: 220px; max-width: 70%; }
}

.footer__right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 0.9rem;
}

.footer__links,
.footer__location {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer__location strong {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--cream);
}

.footer__location span {
  color: var(--stone);
}

.footer a { color: var(--stone); transition: color 200ms var(--ease); }
.footer a:hover { color: var(--accent); }

/* ---------------- Scroll reveal ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

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

/* ---------------- Typewriter reveal ---------------- */

.word-reveal {
  opacity: 0;
  animation: word-in 320ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 130ms);
}

@keyframes word-in {
  from { opacity: 0; }
  to { opacity: 1; }
}