/* ==========================================================================
   WESLLEY RODRIGUES FOTOGRAFIA - DESIGN SYSTEM & DYNAMIC STYLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {
  /* Theme Colors (Managed by CMS) */
  --bg-primary: #F1EFEA;
  --text-primary: #15171A;
  --text-muted: rgba(21, 23, 26, 0.65);
  --text-light: rgba(21, 23, 26, 0.45);
  --border-color: rgba(21, 23, 26, 0.12);
  --hero-bg: #15171A;
  --hero-text: #F1EFEA;
  --accent: #15171A;
  --accent-hover: #3A3E45;

  /* Typography Scales */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --h1-scale: 1;
  --body-scale: 1;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 300ms;
  --duration-medium: 600ms;
  --duration-slow: 900ms;
}

/* Reset & Global Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: calc(16px * var(--body-scale));
  overflow-x: hidden;
  width: 100%;
}

/* Typography Helpers */
h1,
h2,
h3,
h4,
.font-serif {
  font-family: var(--font-serif);
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

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

button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

/* Keyframe Animations */
@keyframes curtainUp {
  0% {
    transform: translateY(0);
  }

  99% {
    visibility: visible;
  }

  100% {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

@keyframes logoReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes logoBreathe {
  from {
    transform: scale(0.97);
  }

  to {
    transform: scale(1);
  }
}

@keyframes driftUp {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes driftDown {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes colIn {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Revelação de linha.

   100% (e não 110%) porque agora existe uma máscara: a linha parte de
   exatamente uma altura abaixo, ou seja, encostada ao limite inferior do
   recorte. Assim entra em cena sem nunca ser desenhada fora da sua caixa.

   translate3d em vez de translateY promove o elemento a uma camada de GPU —
   o browser deixa de repintar o texto e a text-shadow em cada frame. */
@keyframes lineIn {
  from {
    /* 100% = a altura da própria linha, o que a põe encostada ao limite
       inferior do recorte. O +0.22em cobre o padding de 0.14em que a máscara
       do título ganhou para as descidas — sem ele, o topo das letras ficaria
       à espreita nesse espaço no instante inicial. A folga extra protege de
       arredondamentos subpixel em ecrãs de alta densidade. */
    transform: translate3d(0, calc(100% + 0.22em), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Entrada da etiqueta: subida curta com fade.
   Não leva máscara porque tem backdrop-filter, e recortar um elemento com
   backdrop-filter provoca artefactos de render em Safari. */
@keyframes badgeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Preloader Curtain */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--hero-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* A cortina tem de estar completamente fora antes de o texto do hero
     começar. Antes saía aos 2,4s e a etiqueta arrancava aos 2,2s — havia
     dois décimos de animação a acontecer escondida por trás dela. */
  animation: curtainUp 0.75s var(--ease-out) 1.15s both;
  pointer-events: none;
}

.preloader-logo {
  animation: logoBreathe 1.4s var(--ease-out) both;
}

.preloader-logo img {
  width: clamp(220px, 34vw, 460px);
  /* Termina a 1,05s, antes de a cortina começar a subir */
  animation: logoReveal 0.9s var(--ease-out) 0.15s both;
}

/* Header & Sticky Navigation */
.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  color: var(--hero-text);
  background: linear-gradient(180deg, rgba(13, 14, 16, 0.75) 0%, rgba(13, 14, 16, 0.25) 60%, transparent 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.header-transparent .nav-links a {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.header-standard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  border-bottom: 1px solid var(--border-color);
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding-bottom: 2px;
}

.nav-links a.active,
.nav-links a:hover {
  border-bottom: 1px solid currentColor;
}

/* Fixed Floating Navbar */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(241, 239, 234, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(21, 23, 26, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 40px;
  transform: translateY(-100%);
  transition: transform var(--duration-medium) var(--ease-out);
}

.fixed-nav.visible {
  transform: translateY(0);
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--hero-bg);
  display: flex;
  gap: 24px;
  padding: 0 24px;
}

/* As colunas revelam-se com clip-path, que é caro e não passa pela GPU.
   Antes corriam de 1,8s a 3,26s — mesmo em cima da animação do texto
   (2,3s–3,5s). Os dois trabalhos pesados coincidiam e o texto engasgava.
   Encurtadas e antecipadas, terminam antes de o título arrancar. */
/* As colunas revelam-se com clip-path, que é caro e não passa pela GPU.
   Antes corriam de 1,8s a 3,26s — em cima da animação do texto (2,3s–3,5s).
   Os dois trabalhos pesados coincidiam e o texto engasgava.
   Agora fecham a 2,23s, antes de o título arrancar aos 2,28s. */
.hero-col {
  flex: 1 1 25%;
  overflow: hidden;
  animation: colIn 0.72s var(--ease-out) 1.3s both;
}

.hero-col-1 {
  margin-top: -20svh;
  height: 136svh;
  animation-delay: 1.3s;
}

.hero-col-2 {
  margin-top: -8svh;
  height: 140svh;
  animation-delay: 1.37s;
}

.hero-col-3 {
  margin-top: -26svh;
  height: 132svh;
  animation-delay: 1.44s;
}

.hero-col-4 {
  margin-top: -12svh;
  height: 138svh;
  animation-delay: 1.51s;
}

.drift-up {
  animation: driftUp 55s linear infinite;
}

.drift-down {
  animation: driftDown 55s linear infinite;
}

.hero-overlay {
  /* Definido num só sítio: a máscara e o título têm de partilhar exatamente
     o mesmo tamanho para os cálculos em em baterem certo */
  --hero-title-size: calc(clamp(44px, 8.5vw, 120px) * var(--h1-scale));

  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(13, 14, 16, 0.65) 0%, rgba(13, 14, 16, 0.35) 50%, rgba(13, 14, 16, 0.55) 100%),
    linear-gradient(180deg, rgba(13, 14, 16, 0.6) 0%, transparent 25%, transparent 75%, rgba(13, 14, 16, 0.7) 100%);
}

/* Máscara de linha: é ela que impede o texto de invadir a linha seguinte. */
.hero-line-mask {
  overflow: hidden;
  display: block;
}

/* Máscara do título — precisa de folga para as descidas.

   A Playfair Display tem uma caixa de conteúdo de ~1.338em (ascendente 1.082
   + descendente 0.256). Com um line-height menor que isso, a caixa de linha
   fica mais curta que os próprios glifos e o overflow:hidden corta o "y" de
   Weslley e o "g" de Rodrigues.

   Duas defesas: line-height suficiente (ver .hero-title) e este padding em
   em — por isso a máscara assume o tamanho de letra do título, para que
   0.14em aqui valha exatamente o mesmo que 0.14em no h1. */
.hero-line-mask--title {
  font-size: var(--hero-title-size);
  padding-bottom: 0.14em;

  /* Anula o padding no fluxo: dá espaço ao recorte sem afastar o subtítulo */
  margin-bottom: -0.14em;
}

/* Etiqueta acima do título (antes vinha com estilos inline e sem animação —
   aparecia de repente enquanto o resto deslizava). */
.hero-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: badgeIn 0.7s var(--ease-out) 1.95s both;
}

.hero-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;

  /* Herda o tamanho da máscara, para que os cálculos em em coincidam nos dois */
  font-size: 1em;

  /* Era 1.02, depois 1.16 — ambos curtos demais e cortavam as descidas.
     A caixa de conteúdo da Playfair é 1.338em; com line-height L, a linha
     acaba a (0.256 - (1.338 - L) / 2) abaixo da linha de base. As descidas
     chegam a 0.2em, portanto L tem de ser pelo menos 1.246. 1.3 dá margem. */
  line-height: 1.3;

  letter-spacing: -0.02em;
  color: var(--hero-text);
  animation: lineIn 0.9s var(--ease-out) 2.28s both;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

.hero-subtitle {
  /* 20px antes; o line-height maior do título já acrescenta espaço */
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.95);
  animation: lineIn 0.85s var(--ease-out) 2.42s both;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
  will-change: transform;
}

/* Indicador "Explorar" — entra por último, a fechar a sequência */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.7);
  /* Keyframes próprios: o fadeIn genérico anima transform e apagaria
     o translateX(-50%) que centra este bloco, atirando-o para a esquerda. */
  animation: scrollHintIn 0.8s var(--ease-out) 2.85s both;
}

@keyframes scrollHintIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: rgba(241, 239, 234, 0.5);
}

/* Scroll Reveal Elements */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

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

/* Grid & Layout Utilities */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6vw;
}

.section-padding {
  padding: clamp(64px, 10vw, 160px) 6vw;
}

.masonry-grid {
  column-count: 3;
  column-gap: 24px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
  cursor: zoom-in;
  overflow: hidden;
  display: block;
}

.masonry-item img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--duration-medium) var(--ease-out);
}

.masonry-item:hover img {
  transform: scale(1.03);
}

/* Image Zoom & Hover */
.img-hover-zoom {
  overflow: hidden;
  display: block;
}

.img-hover-zoom img {
  transition: transform 700ms var(--ease-out);
}

.img-hover-zoom:hover img {
  transform: scale(1.03);
}

/* Lightbox Modal */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(21, 23, 26, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transition: transform 300ms ease;
}

.lightbox-btn {
  position: absolute;
  background: none;
  border: none;
  color: #F1EFEA;
  font-size: 28px;
  cursor: pointer;
  padding: 20px;
  z-index: 101;
  transition: opacity 200ms;
}

.lightbox-btn:hover {
  opacity: 0.7;
}

.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-close {
  top: 24px;
  right: 32px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(241, 239, 234, 0.7);
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* Forms Styling */
.form-group {
  margin-bottom: 32px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-bottom-color: var(--text-primary);
}

.btn-submit {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 2px;
  padding: 18px 44px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  padding: 16px 36px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 200ms;
}

.btn-whatsapp:hover {
  background: #1EBE5D;
  color: #FFFFFF;
}

/* Accordion FAQ */
.faq-item {
  border-bottom: 1px solid var(--border-color);
  padding: 28px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out), margin-top 400ms var(--ease-out);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  margin-top: 16px;
}

.faq-icon {
  font-size: 20px;
  transition: transform 300ms ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Footer & Floating Admin Button */
footer {
  border-top: 1px solid var(--border-color);
  padding: 48px 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-access-link {
  color: var(--text-light);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 200ms;
}

.admin-access-link:hover {
  opacity: 1;
  color: var(--text-primary);
}

/* Mobile Hamburger Toggle Button */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
  z-index: 101;
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

/* Mobile Menu Fullscreen Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(16, 18, 20, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Botão de fechar.

   O overlay está a z-index 99 e os cabeçalhos a 10 e 50, por isso o botão
   de abrir ficava tapado por ele. Sem um X aqui dentro, a única saída era
   clicar num link — o que obrigava a mudar de página para fechar o menu. */
.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;

  /* 44x44 é o alvo mínimo recomendado para toque */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  color: #F1EFEA;
  cursor: pointer;
  transition: background 300ms ease, transform 300ms ease;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}

.mobile-menu-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.mobile-menu-links a {
  font-family: var(--font-serif);
  font-size: clamp(28px, 6vw, 42px);
  color: #F1EFEA;
  text-decoration: none;
  transition: transform 300ms ease, opacity 300ms ease;
}

.mobile-menu-links a:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

/* Responsive Rules & Multi-Tier Media Queries */
@media (max-width: 1023px) {
  .hero-col-4 {
    display: none;
  }

  .masonry-grid {
    column-count: 2;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .header-transparent .nav-links,
  .fixed-nav .nav-links {
    display: none;
  }
}

@media (max-width: 850px) {
  #sobre>div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #sobre img {
    grid-column: span 1 !important;
  }

  #sobre div[style*="grid-column:7/13"] {
    grid-column: span 1 !important;
  }
}

@media (max-width: 767px) {
  .hero-col-3 {
    display: none;
  }

  .hero-col {
    flex: 1 1 50%;
  }

  .header-transparent,
  .header-standard,
  .fixed-nav {
    padding: 16px 20px;
  }

  .masonry-grid {
    column-count: 1;
  }

  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   ULTRA-PREMIUM FULL-BLEED SHOWCASE COMPONENTS (Cinematic Editorial Tier)
   ========================================================================== */

/* Full Bleed Canvas Container */
.full-bleed-section {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 4vw;
}

/* Header Area for Full Bleed Section */
.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 24px;
}

.showcase-title-block h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}

.showcase-subtitle {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--text-muted);
  max-width: 600px;
  margin-top: 12px;
  line-height: 1.6;
}

/* Eyebrow Glowing Pill */
.eyebrow-badge-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(21, 23, 26, 0.04);
  border: 1px solid rgba(21, 23, 26, 0.12);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.eyebrow-badge-glow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15171A;
  box-shadow: 0 0 10px rgba(21, 23, 26, 0.5);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

/* Ultra-Premium Glowing Button */
.btn-glow-luxury {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: #15171A;
  color: #F1EFEA;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 30px rgba(21, 23, 26, 0.2);
}

.btn-glow-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 500ms ease;
}

.btn-glow-luxury:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px rgba(21, 23, 26, 0.35);
  color: #FFFFFF;
}

.btn-glow-luxury:hover::before {
  opacity: 1;
}

.btn-glow-luxury .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), background 300ms ease;
}

.btn-glow-luxury:hover .arrow-circle {
  transform: translate(3px, -3px) rotate(45deg);
  background: rgba(255, 255, 255, 0.3);
}

/* Full-Bleed Showcase 3-Column Vertical Grid (Strict 1-Row Layout) */
.showcase-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Full-Bleed Vertical Story Card */
.cinematic-story-card {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #F1EFEA;
  background: #101214;
  border: 1px solid rgba(21, 23, 26, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.cinematic-story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.28);
  border-color: rgba(21, 23, 26, 0.35);
}

/* Vertical Aspect Ratio (3:4.5) for Portrait Photography */
.cinematic-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.4;
  min-height: 460px;
  overflow: hidden;
}

.cinematic-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 800ms ease;
  filter: brightness(0.92) contrast(1.02);
}

.cinematic-story-card:hover .cinematic-img-wrapper img {
  transform: scale(1.06);
  filter: brightness(0.98) contrast(1.06);
}

/* Gradient Mask Overlay */
.cinematic-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(16, 18, 20, 0.1) 0%,
      rgba(16, 18, 20, 0.0) 35%,
      rgba(16, 18, 20, 0.94) 100%);
  z-index: 2;
  transition: opacity 600ms ease;
}

/* Floating Glassmorphism Infobox for Vertical Cards */
.story-glass-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px;
  background: rgba(16, 18, 20, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.cinematic-story-card:hover .story-glass-panel {
  background: rgba(16, 18, 20, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

/* Infobox Header & Typography */
.glass-location-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.75);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.glass-location-tag::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: rgba(241, 239, 234, 0.4);
}

.glass-story-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2vw, 32px);
  margin: 0 0 4px;
  line-height: 1.1;
  color: #F1EFEA;
}

.glass-story-desc {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(241, 239, 234, 0.8);
  margin: 0;
}

/* CTA Inside Glass Panel */
.glass-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F1EFEA;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  margin-top: 2px;
}

.cinematic-story-card:hover .glass-action-btn {
  background: #F1EFEA;
  color: #15171A;
  border-color: #F1EFEA;
  transform: scale(1.03);
}

.glass-action-btn .btn-arrow {
  font-size: 12px;
  transition: transform 400ms ease;
}

.cinematic-story-card:hover .glass-action-btn .btn-arrow {
  transform: translateX(4px);
}

/* Secondary Floating Accent Badge for Vertical Layout */
.accent-photo-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 95px;
  height: 125px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  transition: all 700ms cubic-bezier(0.25, 1, 0.5, 1);
}

.accent-photo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.cinematic-story-card:hover .accent-photo-badge {
  transform: rotate(3deg) scale(1.08);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

.cinematic-story-card:hover .accent-photo-badge img {
  transform: scale(1.12);
}

/* ==========================================================================
   LUXURY SERVICES ACCORDION COMPONENTS (Solo Photographer Tier)
   ========================================================================== */

.services-accordion-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 100px 4vw 120px;
}

.services-accordion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  min-height: 540px;
}

.luxury-service-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(21, 23, 26, 0.12);
  background: #101214;
  color: #F1EFEA;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 500ms ease, border-color 500ms ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.luxury-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.28);
}

.luxury-service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 800ms ease;
  filter: brightness(0.8) contrast(1.05);
}

.luxury-service-card:hover img {
  transform: scale(1.08);
  filter: brightness(0.9) contrast(1.08);
}

.service-card-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(16, 18, 20, 0.15) 0%,
      rgba(16, 18, 20, 0.3) 40%,
      rgba(16, 18, 20, 0.94) 100%);
  z-index: 2;
  transition: opacity 500ms ease;
}

.service-content-block {
  position: relative;
  z-index: 4;
  padding: 40px 32px 36px;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-service-card:hover .service-content-block {
  transform: translateY(-4px);
}

.service-card-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.2vw, 38px);
  margin: 0 0 12px;
  line-height: 1.12;
  color: #F1EFEA;
}

.service-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(241, 239, 234, 0.85);
  margin: 0 0 24px;
}

.service-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F1EFEA;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-service-card:hover .service-card-btn {
  background: #F1EFEA;
  color: #15171A;
  border-color: #F1EFEA;
  transform: translateY(-2px);
}

.service-card-btn .arrow-icon {
  font-size: 13px;
  transition: transform 400ms ease;
}

.luxury-service-card:hover .service-card-btn .arrow-icon {
  transform: translateX(4px);
}

/* Responsive Overrides for Services Grid */
@media (max-width: 1024px) {
  .services-accordion-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .services-accordion-container {
    padding: clamp(48px, 8vw, 80px) 20px;
  }

  .services-accordion-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .luxury-service-card {
    min-height: 420px;
    border-radius: 14px;
  }

  .service-content-block {
    padding: 28px 22px 24px;
  }
}



/* ==========================================================================
   LUXURY ABOUT SECTION COMPONENTS (Editorial Photographer Showcase)
   ========================================================================== */

.about-luxury-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 100px 4vw 120px;
}

.about-luxury-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* Portrait Doppelrand Double-Bezel Frame */
.about-portrait-shell {
  width: 100%;
  position: relative;
  background: rgba(21, 23, 26, 0.03);
  border: 1px solid rgba(21, 23, 26, 0.1);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 24px 60px -10px rgba(21, 23, 26, 0.08);
}

.about-portrait-inner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #E8E5DF;
}

.about-portrait-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-portrait-shell:hover .about-portrait-inner img {
  transform: scale(1.04);
}

/* Floating Photographer Badge */
.about-floating-tag {
  position: absolute;
  bottom: 28px;
  right: 16px;
  z-index: 4;
  padding: 10px 20px;
  background: rgba(16, 18, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #F1EFEA;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

/* Content Block */
.about-content-block {
  width: 100%;
}

.about-quote-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 14px 0 20px;
}

.about-body-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 68ch;
}

/* Stats Badges Grid */
.about-stats-grid {
  display: flex;
  gap: 40px;
  padding-top: 28px;
  margin-bottom: 40px;
  border-top: 1px solid var(--border-color);
}

.stat-item-number {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.stat-item-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}

/* Responsive Overrides for About Section */
@media (max-width: 960px) {
  .about-luxury-container {
    padding: clamp(48px, 8vw, 80px) 20px;
  }

  .about-luxury-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-portrait-shell {
    grid-column: span 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 16px;
  }

  .about-content-block {
    grid-column: span 1;
  }

  .about-floating-tag {
    right: 12px;
    bottom: 20px;
    font-size: 10px;
    padding: 8px 16px;
  }

  .about-quote-title {
    font-size: clamp(26px, 6vw, 38px);
    margin: 12px 0 16px;
  }

  .about-body-text {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .about-stats-grid {
    gap: 20px;
    justify-content: space-between;
    padding-top: 20px;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   LUXURY TESTIMONIALS COMPONENTS (Palavras dos Meus Casais)
   ========================================================================== */

.testimonials-luxury-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 100px 4vw 120px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.luxury-testimonial-card {
  position: relative;
  background: #101214;
  color: #F1EFEA;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 500ms ease, border-color 500ms ease;
}

.luxury-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
}

.testimonial-quote-icon {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 0.6;
  color: rgba(241, 239, 234, 0.35);
  margin-bottom: 20px;
  user-select: none;
}

.testimonial-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
  color: rgba(241, 239, 234, 0.95);
  margin: 0 0 32px;
  flex-grow: 1;
}

.testimonial-author-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonial-author-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-couple-name {
  font-size: 15px;
  font-weight: 600;
  color: #F1EFEA;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.testimonial-location-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.65);
  margin: 0;
}

.testimonial-story-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F1EFEA;
  text-decoration: none;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.testimonial-story-link:hover {
  background: #F1EFEA;
  color: #15171A;
  border-color: #F1EFEA;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.testimonial-story-link .story-arrow {
  font-size: 11px;
  transition: transform 300ms ease;
}

.testimonial-story-link:hover .story-arrow {
  transform: translate(2px, -2px);
}

/* Responsive Overrides for Testimonials */
@media (max-width: 1100px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .testimonials-luxury-container {
    padding: clamp(48px, 8vw, 80px) 20px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .luxury-testimonial-card {
    padding: 28px 22px 24px;
    border-radius: 14px;
  }

  .testimonial-quote-text {
    font-size: 16px;
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   LUXURY PROCESS TIMELINE COMPONENTS (A Minha Abordagem)
   ========================================================================== */

.process-luxury-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 100px 4vw 120px;
}

.process-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step-card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(21, 23, 26, 0.1);
  border-radius: 18px;
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.04);
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 500ms ease, border-color 500ms ease;
}

.process-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(21, 23, 26, 0.12);
  border-color: rgba(21, 23, 26, 0.25);
  background: rgba(255, 255, 255, 0.95);
}

.step-number-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #15171A;
  color: #F1EFEA;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 24px;
  box-shadow: 0 8px 18px rgba(21, 23, 26, 0.2);
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1), background 300ms ease;
}

.process-step-card:hover .step-number-pill {
  transform: scale(1.1) rotate(-4deg);
  background: #101214;
}

.process-step-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 0 0 12px;
  line-height: 1.15;
  color: var(--text-primary);
}

.process-step-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Responsive Overrides for Process Timeline */
@media (max-width: 1180px) {
  .process-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .process-luxury-container {
    padding: clamp(48px, 8vw, 80px) 20px;
  }

  .process-timeline-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process-step-card {
    padding: 28px 22px 24px;
    border-radius: 14px;
  }

  .process-step-title {
    font-size: 22px;
  }
}

/* ==========================================================================
   LUXURY CTA BANNER COMPONENTS (Cinematic Finale Banner)
   ========================================================================== */

.cta-luxury-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 4vw 120px;
}

.cta-luxury-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: clamp(64px, 8vw, 120px) 4vw;
  text-align: center;
  background: #101214;
  color: #F1EFEA;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

/* Background Photo Image + Gradient Backdrop */
.cta-luxury-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-luxury-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.28) contrast(1.1);
  transform: scale(1.04);
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-luxury-card:hover .cta-luxury-backdrop img {
  transform: scale(1.08);
}

.cta-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(16, 18, 20, 0.5) 0%, rgba(16, 18, 20, 0.92) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cta-content-wrapper {
  position: relative;
  z-index: 4;
  max-width: 720px;
  margin: 0 auto;
}

.cta-luxury-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #F1EFEA;
  margin: 16px 0 20px;
}

.cta-luxury-desc {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(241, 239, 234, 0.85);
  margin: 0 auto 40px;
  max-width: 620px;
}

/* Action Button Group */
.cta-button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary White Luxury Glow Button */
.btn-glow-luxury-light {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 36px;
  background: #F1EFEA;
  color: #15171A;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.btn-glow-luxury-light:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 50px rgba(255, 255, 255, 0.25);
  background: #FFFFFF;
  color: #101214;
}

.btn-glow-luxury-light .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(21, 23, 26, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), background 300ms ease;
}

.btn-glow-luxury-light:hover .arrow-circle {
  transform: translate(3px, -3px) rotate(45deg);
  background: rgba(21, 23, 26, 0.2);
}

/* WhatsApp Secondary Luxury Button */
.btn-whatsapp-luxury {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F1EFEA;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-whatsapp-luxury:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.6);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.25);
}

/* Responsive Overrides for CTA Banner */
@media (max-width: 720px) {
  .cta-luxury-container {
    padding: 0 20px 80px;
  }

  .cta-luxury-card {
    padding: 48px 20px;
    border-radius: 16px;
  }

  .cta-button-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-glow-luxury-light,
  .btn-whatsapp-luxury {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MONUMENTAL LUXURY AGENCY FOOTER
   ========================================================================== */

footer.luxury-agency-footer {
  background: #0D0E10;
  color: #F1EFEA;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 100px 4vw 48px;
  position: relative;
  overflow: hidden;
}

.footer-inner-container {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

/* Big Brand Watermark Header */
.footer-watermark-block {
  margin-bottom: 72px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-brand-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #F1EFEA;
  margin: 0;
}

.footer-tagline-text {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.6);
  max-width: 340px;
  margin: 0;
  line-height: 1.55;
}

/* 4-Column Navigation & Info Grid */
.footer-main-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 80px;
}

.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 239, 234, 0.45);
  margin-bottom: 24px;
}

.footer-manifesto-text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(241, 239, 234, 0.75);
  max-width: 380px;
  margin-bottom: 24px;
}

.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-link-list a {
  font-size: 14px;
  color: rgba(241, 239, 234, 0.8);
  text-decoration: none;
  transition: color 300ms ease, transform 300ms ease;
  display: inline-block;
}

.footer-link-list a:hover {
  color: #FFFFFF;
  transform: translateX(4px);
}

.footer-contact-item {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(241, 239, 234, 0.8);
  margin-bottom: 12px;
}

.footer-contact-item a {
  color: #F1EFEA;
  border-bottom: 1px solid rgba(241, 239, 234, 0.3);
  padding-bottom: 2px;
}

.footer-contact-item a:hover {
  border-color: #FFFFFF;
}

/* Sub-Footer Bottom Bar */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(241, 239, 234, 0.5);
  flex-wrap: wrap;
  gap: 20px;
}

.footer-back-to-top {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #F1EFEA;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 300ms ease;
}

.footer-back-to-top:hover {
  background: #F1EFEA;
  color: #15171A;
  transform: translateY(-2px);
}

/* ==========================================================================
   GLOBAL HERO TYPOGRAPHY
   ========================================================================== */
.portfolio-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #F1EFEA;
  margin: 0 0 16px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
}

.portfolio-hero-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241,239,234,0.6);
}

/* Responsive Rules for Luxury Footer */
@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  footer.luxury-agency-footer {
    padding: 64px 20px 36px;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-watermark-block {
    margin-bottom: 48px;
    padding-bottom: 32px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
/* ==========================================================================
   PORTFÓLIO EM DESTAQUE — Carrossel no telemóvel

   A .showcase-cards-grid estava fixa em 3 colunas com !important e sem
   qualquer media query: num telemóvel de 390px cada card ficava com ~114px.
   Abaixo dos 900px passa a carrossel horizontal com scroll-snap nativo —
   sem JS para o gesto, o que dá inércia e travagem próprias do sistema.
   No desktop mantém-se a grelha de 3, onde tudo cabe de uma vez.
   ========================================================================== */
@media (max-width: 899px) {
  .showcase-cards-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* Sangrar até às margens do ecrã sem quebrar o alinhamento da secção */
    margin-left: -4vw;
    margin-right: -4vw;
    padding: 4px 4vw 8px;
    scroll-padding-left: 4vw;

    /* A barra de scroll é ruído; a navegação é por gesto e pelos pontos */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .showcase-cards-grid::-webkit-scrollbar {
    display: none;
  }

  .showcase-cards-grid > article {
    flex: 0 0 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* O min-height de 460px deformava o card em ecrãs estreitos —
     aqui manda a proporção da fotografia. Mais alto que no desktop para
     compensar o painel de texto, que ocupa uma fatia maior num ecrã estreito. */
  .cinematic-img-wrapper {
    min-height: 0;
    aspect-ratio: 3 / 4.6;
  }

  /* Sem :hover no telemóvel, o card tem de nascer no estado final */
  .cinematic-story-card:hover {
    transform: none;
  }

  /* ------------------------------------------------------------------
     O painel de texto estava a comer a fotografia.

     Num ecrã estreito a descrição quebrava em 5 linhas e empurrava o
     painel até meio do card — sobrava pouco mais de um terço da foto,
     que é justamente o que o card devia mostrar.

     Aqui o painel encolhe: descrição limitada a 2 linhas (é uma amostra,
     o texto completo está na página da história), espaçamentos mais
     apertados e tipografia ligeiramente menor.
     ------------------------------------------------------------------ */
  .story-glass-panel {
    bottom: 14px;
    left: 14px;
    right: 14px;
    gap: 9px;
    padding: 15px 16px;
  }

  .glass-story-title {
    font-size: 22px;
  }

  .glass-story-desc {
    font-size: 12.5px;
    line-height: 1.4;

    /* Corta na 2ª linha com reticências, seja qual for o tamanho do texto */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A miniatura no canto tapava o rosto em cards estreitos */
  .accent-photo-badge {
    width: 76px;
    top: 14px;
    right: 14px;
  }
}

/* Indicadores de posição — sem eles ninguém percebe que há mais cards ao lado */
.showcase-dots {
  display: none;
}

@media (max-width: 899px) {
  .showcase-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }

  .showcase-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 100px;
    background: rgba(21, 23, 26, 0.22);
    cursor: pointer;
    transition: width 300ms cubic-bezier(0.25, 1, 0.5, 1), background 300ms ease;
  }

  .showcase-dot.is-active {
    width: 22px;
    background: var(--text-primary);
  }
}

/* ==========================================================================
   HERO — ritmo no telemóvel e acessibilidade

   Num telemóvel a espera pesa mais: o ecrã é pequeno e o utilizador chega
   muitas vezes por rede móvel. A mesma coreografia, mais curta e com um
   percurso menor — quanto menos distância, menos hipótese de perder frames
   num GPU fraco.
   ========================================================================== */
@media (max-width: 767px) {
  .preloader-logo { animation-duration: 1s; }
  .preloader-logo img { animation: logoReveal 0.65s var(--ease-out) 0.1s both; }

  /* Cortina fora a 1,45s — antes de a etiqueta entrar a 1,50s */
  .preloader {
    animation-delay: 0.85s;
    animation-duration: 0.6s;
  }

  /* Colunas fecham a 1,70s — antes de o título arrancar a 1,75s */
  .hero-col { animation-duration: 0.6s; }
  .hero-col-1 { animation-delay: 0.95s; }
  .hero-col-2 { animation-delay: 1.00s; }
  .hero-col-3 { animation-delay: 1.05s; }
  .hero-col-4 { animation-delay: 1.10s; }

  .hero-eyebrow  { animation: badgeIn 0.55s var(--ease-out) 1.50s both; }
  .hero-title    { animation: lineIn 0.7s var(--ease-out) 1.75s both; }
  .hero-subtitle { animation: lineIn 0.65s var(--ease-out) 1.87s both; }
  .hero-scroll-hint { animation: scrollHintIn 0.6s var(--ease-out) 2.15s both; }
}

/* Quem pede menos movimento no sistema recebe o hero já composto.
   As fotografias em deriva contínua são o que mais incomoda quem tem
   sensibilidade vestibular, por isso param aqui. */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .hero-col,
  .hero-eyebrow,
  .hero-title,
  .hero-subtitle,
  .hero-scroll-hint {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero-scroll-hint { transform: translateX(-50%); }

  .drift-up,
  .drift-down,
  .marquee-rail {
    animation: none;
  }
}