/*-------------------------------------------------------
HEADER
-------------------------------------------------------*/
.site-header {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;	
    transition: background 300ms ease, box-shadow 300ms ease;	
}
/* WordPress admin bar (logged-in users) sits above the fixed header */
.admin-bar .site-header {
    top: 46px;
}
@media (min-width: 783px) {
    .admin-bar .site-header {
        top: 32px;
    }
}
.site-header[data-scrolled="true"] {
	background: var(--color-bg-soft);
	box-shadow: 0 12px 20px 8px rgba(94,77,65,0.15);	
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 24px;
    padding: 30px 24px 10px;	
    transition: padding 300ms ease;
}
.site-header__logo {
    display: block;
    width: max-content;
    height: 60px; 
    margin-right: auto;
    transition: height 300ms ease;	
}
.site-header[data-scrolled="true"] .site-header__inner {
    padding: 10px 24px 10px;	
}
.site-header[data-scrolled="true"] .site-header__logo {
        height: 40px; 
    }
.site-header__logo img {
    width: auto;
    height: 100%;
}
@media (min-width: 1024px) {
    .site-header__inner {
        padding: 50px 125px 15px;	
    }
    .site-header__logo {
        height: 75px; 
    }
    .site-header[data-scrolled="true"] .site-header__inner {
        padding: 15px 24px;	
    }
    .site-header[data-scrolled="true"] .site-header__logo {
        height: 50px; 
    }
}
/* Login button */
.user__icon{
    color: var(--color-text);
    transition: color 200ms ease;
}
.user__icon :is(path, polygon, rect, circle) {
	fill: currentColor;
}
.btn-login:hover .user__icon{
    color: var(--color-primary);
}
/* Menu toggle (hamburger) */
.menu-toggle {
    position: relative;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-text);
    cursor: pointer;
    transition: color 200ms ease;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
    display: block;
    width: 30px;
    height: 1px;
    background-color: currentColor;
    transition: transform 200ms ease, background-color 200ms ease;
}
.menu-toggle__bars {
    position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;  
}
.menu-toggle__bars::before {
    top: -10px;
}
.menu-toggle__bars::after {
    top: 10px;
}
.menu-toggle:hover{
    color: var(--color-primary);
}
.menu-toggle:hover .menu-toggle__bars::before{
    transform: translateY(-2px);
}
.menu-toggle:hover .menu-toggle__bars::after{
    transform: translateY(2px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
    background-color: transparent;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  transform: translateY(10px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  transform: translateY(-10px) rotate(-45deg);
}
/* Opacity navigation */
@keyframes fade-in-bottom {
    0% {
        transform:translateY(50px);
        opacity:0
    }
    100% {
        transform:translateY(0);
        opacity:1
    }
}
@keyframes fade-out-bottom {
    0% {
        transform:translateY(0);
        opacity:1
    }
    100% {
        transform:translateY(50px);
        opacity:0
    }
}
.site-nav {
    background-color: var(--color-bg);
    width: 100vw;
    height: 100vh;
    padding: 24px;	
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 30;	
	overflow-y: hidden;
	visibility: hidden;
	opacity: 0;
    pointer-events: none;
	/* Fechar: espera os itens saírem (até 500ms) e só então some o fundo */
	transition: opacity 300ms ease 500ms, visibility 0s linear 800ms;
}
.site-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    /* Abrir: o fundo aparece primeiro, os itens entram depois (delays abaixo) */
    transition: opacity 300ms ease, visibility 0s;
}
.site-nav__list {
	display: flex;
	gap: 18px;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}
.site-nav__list li {
	display: inline-block;
	margin: 0px;		
	opacity: 0;
	animation: 200ms ease both fade-out-bottom;
}
.site-nav.is-open .site-nav__list li {
	display: inline-block;
	margin: 0px;		
	opacity: 1;
	animation: 200ms ease both fade-in-bottom;
}
/* Delay saída dos itens do menu */
.site-nav.is-open .site-nav__list li:nth-child(1) {
    animation-delay: 400ms
}
.site-nav.is-open .site-nav__list li:nth-child(2) {
    animation-delay: 450ms
}
.site-nav.is-open .site-nav__list li:nth-child(3) {
    animation-delay: 500ms
}
.site-nav.is-open .site-nav__list li:nth-child(4) {
    animation-delay: 550ms
}
.site-nav.is-open .site-nav__list li:nth-child(5) {
    animation-delay: 600ms
}
.site-nav.is-open .site-nav__list li:nth-child(6) {
    animation-delay: 650ms
}
/* Delay entrada dos itens do menu */
.site-nav__list li:nth-child(6) {
    animation-delay: 50ms
}
.site-nav__list li:nth-child(5) {
    animation-delay: 100ms
}
.site-nav__list li:nth-child(4) {
    animation-delay: 150ms
}
.site-nav__list li:nth-child(3) {
    animation-delay: 200ms
}
.site-nav__list li:nth-child(2) {
    animation-delay: 250ms
}
.site-nav__list li:nth-child(1) {
    animation-delay: 300ms
}
.site-nav__link {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-text);
    transition: color 200ms ease;
}
.site-nav__link:hover {
    color: var(--color-primary);
}
.has-menu-open {
    overflow: hidden;
}
/*-------------------------------------------------------
FOOTER
-------------------------------------------------------*/
.site-footer {
  padding-block: 32px;
  background-color: var(--color-clay);
}

/* Narrow centered block: links on top, copyright below */
.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: 8px;  
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--color-bg-soft);
}

.site-footer__contact,
.site-footer__copy {
  margin: 0;
}

.site-footer__copy {
    border-top: 1px solid var(--color-bg-soft);
	margin-top: 12px;	
	padding-top: 12px;
	text-align: center;	
}

/* Icon + text side by side; the icon follows the link color (fill: currentColor) */
.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.site-footer__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.site-footer__link:hover,
.site-footer__link:focus-visible,
.site-footer__copy a:hover,
.site-footer__copy a:focus-visible {
    color: var(--color-butter);
}

@media (min-width: 1024px) {
  .site-footer {
    min-height: 150px;
    padding-block: 36px;
  }

  /* Privacy link on the left, contacts on the right, copyright spanning both */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 40px;
    row-gap: 4px;
    text-align: left;
  }

  .site-footer__copy {
    flex-basis: 100%;
    margin-top: 16px;	
	padding-top: 16px;
  }
}
/*-------------------------------------------------------
APP
-------------------------------------------------------*/
/* Installed app (PWA "Meu Espaço BK", display-mode: standalone): the menu lists only the client
   area and the institutional site (its menu list, the login icon, the footer) is left out */
.site-nav__list--app {
    display: none;
}
@media (display-mode: standalone) {
    /* Same color as the app pages, so short pages don't end in a band without the footer */
    body {
        background-color: var(--color-bg-soft);
    }
    .site-nav__list:not(.site-nav__list--app),
    .login-nav,
    .site-footer {
        display: none;
    }
    .site-nav__list--app {
        display: flex;
    }
    /* Logged out there is no app menu: the client is already on the login page */
    body:not(.logged-in) .menu-toggle {
        display: none;
    }
}
/* Install invitation below the login form (only in the browser, revealed by main.js) */
.app-install {
    max-width: 450px;
    margin: 48px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--color-line);
    text-align: center;
}
.app-install__title {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-text);
}
.app-install__text {
    margin-top: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.app-install__action {
    margin-top: 20px;
}
/*-------------------------------------------------------
MAIN
-------------------------------------------------------*/
.main{
    position: relative;
    z-index: 30;
}
/*-------------------------------------------------------
HERO
-------------------------------------------------------*/
.hero {
    background-color: var(--color-bg);
    min-height: 100vh;   
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 12px 20px 8px rgba(94,77,65,0.15);
}
.hero__inner {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding-top: 130px;
}
.hero__content {   
    grid-column: 1;
    grid-row: 1;
    align-self: self-start;   
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start; 
    gap: 1.5rem;   
} 
.hero__title {
	font-size: 2rem;	
}
.hero__title-dot {
    color: var(--color-primary);
}
.hero__text {
    width: 100%;
	max-width: 330px;
	font-weight: 300;
	color: var(--color-text);
    margin-bottom: 0;
}
.hero__content .btn {
	margin-top: 0.5rem;
}
/* Photo with sand blob behind it */
.hero__media {
    width: 100%;  
    position: relative;
    justify-self: center;    
}
.hero__media_elements{   
    width: max-content;    
    max-height: 600px;
    position: absolute;   
    z-index: 10;
}
@media (max-width: 1023px) {
    .hero__media {
        height: 100vw;    
        max-height: 600px;
    }
    .hero__media_elements{         
        height: 100vw;       
        left: 50%;
        transform: translateX(-45%);      
    }
}
.hero__photo {
    position: relative; 
    width: auto;
    height: 100%; 
    z-index: 10;
}
.hero__animation {
    position: absolute;
    right: -2%;
    bottom: -30%;
    width: auto;
    height: 130%;
    z-index: 0;
}
@media (min-width: 1024px) {
    .hero {
        background-image: url("../img/bg-hero.jpg");
        background-repeat: no-repeat;
        background-position: center bottom;    
        height: 100vh;
    }
    .hero__inner {
        height: 100%;
        grid-template-columns: 1fr 1fr;    
        padding-top: 0;
    }
    .hero__content {
        padding-right: 230px;
        padding-bottom: 100px;
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        justify-content: end;
    }
    .hero__title {
        font-size: 2.4rem;	
    }
    .hero__media {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        justify-self: start;   
    }
    .hero__media_elements{
        position: absolute;
        right: -1.5rem;
        bottom: 0;  
        width: max-content;
        height: calc( 100vh - 160px ); 
        max-height: 600px;
        z-index: 10;
    }
}
/*-------------------------------------------------------
AUDIENCE
-------------------------------------------------------*/
.audience {
  padding-block: 50px 70px;
  background: var(--color-bg-soft);
  background: linear-gradient(0deg,rgba(246, 242, 238, 1) 10%, rgba(247, 233, 222, 1) 90%);  
}

.audience__title {
  position: relative;
}

.audience__card-title-line {
  display: block;
}

.audience__intro {
  max-width: 640px;
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

.audience__highlight {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  color: var(--color-primary);
}

/* Mobile: horizontal carousel with scroll-snap */
.audience__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 24px;
  margin-top: 48px;
  margin-inline: -1.5rem;
  padding-inline: 24px;
  scroll-padding-inline: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.audience__list::-webkit-scrollbar {
  display: none;
}

.audience__card {
  scroll-snap-align: start;
  position: relative;
}

.audience__summary {
  position: relative;
}

/* View transition: only the summaries are captured (they slide sideways).
   The root stays out of it so the panel animates live, without the
   snapshot swap at the end that made its items flicker. */
:root {
  view-transition-name: none;
}

/* Snapshots are drawn in a layer above the whole page, ignoring the z-index
   of main/header. The header joins the transition and stays on top. */
.site-header {
  view-transition-name: site-header;
}

::view-transition-group(site-header) {
  z-index: 2;
}

::view-transition-old(site-header) {
  display: none;
}

::view-transition-new(site-header) {
  animation: none;
}

.audience__card--business .audience__summary {
  view-transition-name: audience-summary-business;
}

.audience__card--personal .audience__summary {
  view-transition-name: audience-summary-personal;
}

.audience__card-btn-container{
    width: max-content;
    height: max-content;
    position: absolute;
    left: 80%;
    top: 110px;    
    transform: translateX(-100%);
    z-index: 2;
    transition: left 300ms ease;
}
/* Open/close button: "+" that rotates into an "x" */
.audience__card-btn {	
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 46px;
	cursor: pointer;	
}

.audience__card-btn-icon {
  position: relative;
  width: 12px;
  height: 12px;
  transition: transform 300ms ease;
}

.audience__card-btn-icon::before,
.audience__card-btn-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background-color: currentColor;
}

.audience__card-btn-icon::after {
  transform: rotate(90deg);
}

.audience__card-btn[aria-expanded="true"] .audience__card-btn-icon {
  transform: rotate(45deg);
}

/* Expanded state: only the open card stays visible */
.audience__card.is-hidden {
  display: none;
}

.audience__list.is-expanded {
  grid-auto-columns: 100%;
}

/* Mobile: panel opens over the image and text of the card */
.audience__card.is-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.audience__card.is-open .audience__summary {
  display: contents;
}

.audience__card.is-open .audience__card-btn-container{  
    left: 100%;   
}

/* Rows: 1 number, 2 title, 3 image, 4 text (the button is absolute) */
.audience__card.is-open .audience__image,
.audience__card.is-open .audience__text {
  grid-column: 1;
  visibility: hidden;
}

.audience__card.is-open .audience__image {
  grid-row: 3;
}

.audience__card.is-open .audience__text {
  grid-row: 4;
}

.audience__panel {
  grid-column: 1;
  grid-row: 3 / 5;
  margin-top: 24px;
  /* Keeps the first item below the close button */
  padding-top: 56px;
  animation: 400ms ease 150ms both audience-fade-in;
}

@keyframes audience-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.audience__panel-list {
  display: grid;
  gap: 20px;
  list-style: none;
}

.audience__panel-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 16px;
  animation: 300ms ease both fade-in-bottom;
}

/* Items start once the summary has mostly slid into place */
.audience__panel-item:nth-child(1) {
  animation-delay: 250ms;
}
.audience__panel-item:nth-child(2) {
  animation-delay: 300ms;
}
.audience__panel-item:nth-child(3) {
  animation-delay: 350ms;
}
.audience__panel-item:nth-child(4) {
  animation-delay: 400ms;
}

.audience__panel-icon {
  justify-self: center;
}

.audience__panel-text {
  max-width: 230px;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

::view-transition-group(audience-summary-business),
::view-transition-group(audience-summary-personal) {
  z-index: 1;
  animation-duration: 500ms;
  animation-timing-function: ease;
}

/* Summary present before and after: no crossfade, only the sideways slide */
::view-transition-old(audience-summary-business),
::view-transition-old(audience-summary-personal) {
  animation: none;
  opacity: 0;
}

::view-transition-new(audience-summary-business),
::view-transition-new(audience-summary-personal) {
  animation: none;
}

/* Summary that leaves (card being hidden) or comes back (on close) */
::view-transition-old(audience-summary-business):only-child,
::view-transition-old(audience-summary-personal):only-child {
  opacity: 1;
  animation: 300ms ease both fade-out-bottom;
}

::view-transition-new(audience-summary-business):only-child,
::view-transition-new(audience-summary-personal):only-child {
  animation: 300ms ease 200ms both fade-in-bottom;
}

.audience__number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.9;
  color: var(--color-taupe);
}

.audience__card-title {
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.audience__image {
  width: 100%;
  max-width: 320px;
  margin-top: 12px;
}

.audience__text {
  max-width: 280px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

.audience__tabs-container{
    max-width: 720px;
    margin: 40px auto 0;
}

/* Tabs: line under both labels, darker bar under the active one */
.audience__tabs {
  display: flex;
  width: fit-content;  
  border-bottom: 2px solid var(--color-line);
  margin: 0 auto;
}

.audience__tab,
.audience__tabs-separator {
  padding-bottom: 12px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.audience__tab {
  position: relative;
}

.audience__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--color-text-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.audience__tab.is-active::after {
  transform: scaleX(1);
}

.audience__tab:hover {
  color: var(--color-primary);
}

.audience__tabs-separator {
  margin-inline: 12px;
}

@media (min-width: 1024px) {
  .audience {
    padding-block: 70px 70px;
  }

  /* Intro and closed list sit indented from the title */
  .audience__intro {
    margin-top: 44px;
    margin-left: 160px;
  }

  .audience__list {
    max-width: 720px;   
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;  
    padding-inline: 0;
    margin-top: 60px;
    margin-left: 160px;
    overflow: visible;
  }

  /* Expanded: the open card uses the full container width */
  .audience__list.is-expanded {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin-left: 0;
  }

  .audience__card.is-open {
    column-gap: 56px;
    align-items: center;
  }

  .audience__card--business.is-open {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .audience__card--personal.is-open {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .audience__card.is-open .audience__summary {
    display: block;
    grid-row: 1;
  }

    .audience__card-btn-container{        
        top: 130px;   
    }

  .audience__card.is-open .audience__image,
  .audience__card.is-open .audience__text {
    visibility: visible;
  }

  .audience__card--personal.is-open .audience__summary {
    grid-column: 2;
  }

  .audience__panel {
    grid-row: 1;
    margin-top: 0;
    padding: 32px 56px;
  }

  .audience__card--business .audience__panel {
    grid-column: 2;
    border-inline: 1px solid var(--color-line);
  }

  .audience__card--personal .audience__panel {
    grid-column: 1;
    border-right: 1px solid var(--color-line);
  }

  .audience__panel-list {
    grid-template-columns: 1fr 1fr;
    gap: 56px 64px;
  }

  .audience__number {
    font-size: 4rem;
  }

  .audience__card-title {
    font-size: 22px;
  }

  .audience__tabs-container{
    margin-top: 56px;
    margin-left: 160px;
    }
 

  .audience__tab,
  .audience__tabs-separator {
    font-size: 13px;
  }
}
/*-------------------------------------------------------
APPROACH
-------------------------------------------------------*/
.approach {
  padding-block: 20px 52px;
  background-color: var(--color-bg-soft);
}
.approach__inner {
  display: grid;
}
.approach__bulb {
  width: 58px;
  margin: 0 0 16px 40px;
}

.approach__title {
  max-width: 10.5em;
  font-weight: 600; 
  color: var(--color-primary);
}

.approach__lead,
.approach__text,
.approach__item {
  font-family: var(--font-heading);
  color: var(--color-text-soft);
}

.approach__lead {
  max-width: 14em;
  margin: 1.25rem 0 0;
  font-size: 1.75rem;
  line-height: 1.15;
}

.approach__text {
  max-width: 13em;
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  line-height: 1.25;  
}

/* Decorative arrow pointing to the list: desktop only */
.approach__arrow {
  display: none;
}

.approach__aside {
  margin-top: 48px;
}

.approach__list-title {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--color-primary);
}

.approach__list {
  margin-top: 1rem;
  list-style: none;
}

/* Check icon + text, with the divider starting just after the icon */
.approach__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  padding-block: 14px;
  font-size: 1.125rem;
  line-height: 1.25;  
  transition: color 200ms ease, transform 200ms ease;
}

.approach__item::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-line);
  transition: background-color 200ms ease;
}

.approach__check {
  justify-self: center;
  filter: brightness(0);
  transition: filter 200ms ease;
}

.approach__item-text {
  max-width: 16em;  
}

.approach__item:hover{
    color: var(--color-primary);
    transform: translateY(-4px);
}
.approach__item:hover::after{
    background-color: var(--color-primary);
}
.approach__item:hover .approach__check{
    filter: none;
}


@media (min-width: 1024px) {
  .approach {
    padding-block: 20px 70px;
  }

  /* Columns: text | arrow | list */
  .approach__inner {
    padding: 0 184px 0 24px;
    grid-template-columns: minmax(0, 570px) minmax(160px, 1fr) 380px;
  }

  .approach__bulb {
    grid-column: 1;
    grid-row: 1;
    width: 91px;
    margin: 0 0 24px 112px;
  }

  .approach__title {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .approach__lead {
    grid-column: 1;
    grid-row: 3;
    margin-top: 1.25rem;
  }

  .approach__text {
    grid-column: 1;
    grid-row: 4;
    margin-top: 1.25rem;   
  }

.approach__arrow {
	display: block;
	grid-column: 2;
	grid-row: 4;
	align-self: start;
	justify-self: center;
	width: 80%;
	max-width: 190px;
	margin-top: -30px;
	margin-left: -25px;
}

  .approach__aside {
    grid-column: 3;
    grid-row: 1 / 5;
    align-self: end;
    margin-top: 0;
  }

  .approach__list-title {
    font-size: 1.5rem;
  }

  .approach__item {
    padding-block: 15px;
    font-size: 1.25rem;
  }
}

/*-------------------------------------------------------
METHOD
-------------------------------------------------------*/
.method {
  background-color: var(--color-bg-soft);
}

/* Eyebrow sits on the light strip above the clay panel */
.method__eyebrow {
  margin: 0;
  padding-block: 20px 24px;
}

.method__panel {
  padding-block: 50px 50px;
  background-color: var(--color-clay);
}

.method__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.method__title {
  max-width: 13em;
  font-weight: 600;
  color: var(--color-bg-soft);
}

/* Route diagram: dotted paths between point A and point B */
.method__route {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 150px;
  margin-top: 56px;
}

.method__paths {
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  width: calc(100% - 52px);
  height: 100%;
  overflow: visible;
}

.method__path {
  fill: none;
  stroke: var(--color-bg-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.method__path.color-butter{
    stroke: var(--color-butter);
}

.method__path--straight {
  stroke-dasharray: 3 4;
}

.method__point {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 49px;
}

.method__point--end {
  align-items: center;
}

.method__dot {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-butter);
  background-color: var(--color-text-soft);
}

.method__dot--end {
  color: var(--color-text-soft);
  background-color: var(--color-butter);
}

/* Background hides the dotted arc behind the label */
.method__label {
  padding: 2px 4px;
  margin-inline: -4px;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--color-butter);
  background-color: var(--color-clay);
}

.method__point--end .method__label {
  text-align: center;
}

.method__aside {
  margin-top: 64px;
}

.method__text {
  margin-bottom: 1.5rem;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-bg-soft);
}

.method__highlight {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.17;
  color: var(--color-butter);
}

.method__underline {
  width: 290px;
  max-width: 100%;
  margin-top: 12px;
}

/* Pillars: icon on top, title and text below */
.method__pillars {
  display: grid;
  gap: 18px;
  margin-top: 48px;
  list-style: none;
}

.method__pillar {
    border-bottom: 1px solid var(--color-line);
    padding: 0 0 24px;
    display: grid;
    grid-template-rows: 100px auto;
    transition: transform 200ms ease;
}

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

.method__icon {
	align-self: end;
	margin-left: 12px;
	transform: scale(0.75);
	transform-origin: bottom left;
	color: var(--color-bg-soft);
    transition: transform 200ms ease, color 200ms ease;
}

/* Inline SVG shapes follow the icon color (overrides .cls-1 and fill attributes) */
.method__icon :is(path, polygon, rect, circle) {
  fill: currentColor;
}

.method__pillar-body {
  margin-top: 20px;
}

.method__pillar-title {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 200ms ease;
}

.method__pillar-text {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-text);
  transition: color 200ms ease;
}

.method__pillar:hover{
    transform: translateY(-4px);
}
.method__pillar:hover .method__pillar-title,
.method__pillar:hover .method__pillar-text{
    color: var(--color-butter);
}

.method__pillar:hover .method__icon {
  color: var(--color-butter);
}


@media (min-width: 768px) {
  .method__route {
    height: 192px;
  }

  .method__paths {
    left: 32px;
    right: 32px;
    width: calc(100% - 64px);
  }

  .method__point {
    margin-top: 64px;
  }

  .method__dot {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
  }

  .method__label {
    font-size: 1.25rem;
  }

  .method__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .method__panel {
    padding-block: 70px 70px;
  }

  /* Columns: title + route | aside; pillars span both */
  .method__inner {
    grid-template-columns: minmax(0, 1fr) 310px;
    column-gap: 60px;
  }

  .method__title {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 40px;
  }

  .method__route {
    grid-column: 1;
    grid-row: 2;
    margin-top: 80px;
  }

  .method__aside {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
  }

  .method__text {
    margin-bottom: 1.75rem;
  }

  .method__highlight {
    margin-top: 2.5rem;
    padding-top: 3.5rem;
    font-size: 1.875rem;
  }

  .method__pillars {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 40px;
  }

  .method__pillar {
    border-bottom: none;
    padding: 0 18px 0 30px;
  }

  .method__pillar-text {
    max-width: 12em; 
    }

  /* Vertical dividers next to title and text, not the icons */
  .method__pillar:not(:last-child) .method__pillar-body {
    border-right: 1px solid var(--color-line);
  }
 
}

/*-------------------------------------------------------
ABOUT
-------------------------------------------------------*/
.about {
	padding-bottom: 50px;
	overflow-x: clip;
	background: var(--color-bg-soft);
	background: linear-gradient(0deg,rgba(246, 242, 238, 1) 10%, rgba(247, 233, 222, 1) 80%);
}
/* Clay strip with the eyebrow (continues the METHOD panel) */
.about__strip {
    padding-block: 40px 36px;
    background-color: var(--color-clay-soft);
}
.about__eyebrow {
    margin: 0;
    color: var(--color-bg-soft);
}
.about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 50px;
}
.about__title {
    max-width: 11em;
    font-weight: 400;
    color: var(--color-text-soft);
}
/* Photo in 3 layers, positioned in % of a box */
.about__media {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 300 / 333;
	margin: 40px auto 0;
}
.about__shape,
.about__line,
.about__photo {
    position: absolute;
}
.about__shape {
	top: -6%;
	left: -10%;
	width: 105%;
}
.about__line {
	top: 7%;
	left: -8%;
	width: 90%;
}
.about__photo {
    top: 0%;
    left: 0%;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 333;
    object-fit: cover;
    object-position: center top;
    -webkit-mask: url("../img/mask-photo.svg") center / 100% 100% no-repeat;
    mask: url("../img/mask-photo.svg") center / 100% 100% no-repeat;
}

.about__intro {
  position: relative;
  margin-top: 40px;
}

/* Decorative loop next to the text: desktop only */
.about__loop {
  display: none;
}

.about__text,
.about__highlight {
  max-width: 300px;
}

.about__text {
  margin-bottom: 1rem;   
  color: var(--color-text-soft);
}

.about__highlight {
  font-weight: 500;
  font-size: 1.25rem; 
  color: var(--color-clay-soft);
}

/* Short divider under the highlight */
.about__intro::after {
  content: "";
  display: block;
  width: 276px;
  max-width: 100%;
  height: 1px;
  margin-top: 30px;
  background-color: var(--color-text-soft);
}

.about__story {
  max-width: 910px;
  margin: 40px 0 0; 
  color: var(--color-text-soft);
}

@media (min-width: 1024px) {
  .about {
    padding-bottom: 70px;
  }

  .about__strip {
    padding-block: 48px 44px;
  }

  .about__strip__inner{
    padding-inline: 72px;
  }

  /* Columns: text | photo; the photo rises into the strip */
  .about__inner {
    grid-template-columns: 490px 1fr;
    column-gap: 120px;
    padding-top: 0;
    padding-inline: 72px;
  }

  .about__title {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 70px;
  }

  .about__media {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: none;
    margin: -20px 0 0;
  }

  .about__intro {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 36px;
    padding-left: 240px;
  }

    .about__loop {
        display: block;
        position: absolute;
        top: 32px;
        left: -75px;
        width: 260px;
    }

    .about__loop path{
        fill: var(--color-clay-soft);
    }

  .about__text {
    position: relative;
  }

  .about__story {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 36px;
  }
}
/*-------------------------------------------------------
PHRASE
-------------------------------------------------------*/
.phrase {
  padding-block: 30px 50px;
  overflow-x: clip;
  background-color: var(--color-bg-soft);
}

.phrase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.phrase__quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.25;
  color: var(--color-primary);
}

/* Signature over shape and line, positioned in % of a 644x375 box */
.phrase__author {
	position: relative;
	justify-self: end;
	width: 110vw;
	max-width: 460px;
	aspect-ratio: 644 / 375;
	margin-top: 24px;
	margin-right: calc( -32vw + 24px );
}

.phrase__shape,
.phrase__line,
.phrase__signature {
  position: absolute;
}

.phrase__shape {
  top: 0;
  left: 13.4%;
  width: 64.6%;
  opacity: 0.6;
}

.phrase__line {
  top: 22.1%;
  left: 0;
  width: 100%;
}

.phrase__signature {
  top: 68.8%;
  left: 43.6%;
  width: 32.9%;
}

@media (min-width: 768px) {
  .phrase__quote p {
    font-size: 2.5rem;
  }

  /* Two fixed lines from tablet up; mobile wraps naturally */
  .phrase__quote-line {
    display: block;
  }
}

@media (min-width: 1024px) {
    .phrase__inner {
        padding-inline: 125px;
    }
    .phrase {
        padding-block: 70px 50px;
    }
    .phrase__quote p {
        font-size: 3em;
    }
    .phrase__author {
        max-width: none;
        width: 520px;
        margin-top: -55px;
        margin-right: -120px;
    }
}
/*-------------------------------------------------------
TESTIMONIALS
-------------------------------------------------------*/
.testimonials {
    overflow-x: clip;
    background-color: var(--color-bg-soft);
}
/* Eyebrow fica  acima do painel bege. */
.testimonials__eyebrow {
    margin: 0;
    padding-block: 20px 24px;
}
.testimonials__panel {
    padding-block: 50px 50px;
    background-color: var(--color-clay);
}
.testimonials__header {
    position: relative;
    display: grid;
    gap: 24px;
    padding-bottom: 48px;
}
/* Divider bleeds to the left edge of the screen and stops at the container */
.testimonials__header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: -100vw;
    height: 1px;
    background-color: var(--color-butter);
    opacity: 0.75;
}
.testimonials__title {
    max-width: 10em;
    font-weight: 400;
    color: var(--color-bg-soft);
}
.testimonials__note {
    max-width: 13.5em;
    margin: 0;
    font-size: 1rem;   
    color: var(--color-bg-soft);
}
.testimonials__note-highlight {
    display: block;
    color: var(--color-butter);
}

.testimonials__slider {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  margin-top: 56px;
}

.testimonials__nav {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.testimonials__nav[hidden] {
  display: none;
}

.testimonials__arrow {
  padding: 4px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--color-butter);
  cursor: pointer;
  transition: color 200ms ease;
}

.testimonials__arrow:hover {
  color: var(--color-bg-soft);
}

/* All testimonials share one grid cell: the list keeps the height of the
   longest one, so the section doesn't jump when the slide changes */
.testimonials__list {
  display: grid;
  list-style: none;
}

.testimonials__item {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms;
}

.testimonials__item.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease 150ms, transform 500ms ease 150ms, visibility 0s;
}

/* Quote mark + author on top, text below */
.testimonials__card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}

.testimonials__mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 5rem;
  line-height: 0.6;
  height: 0.45em;
  color: var(--color-bg-soft);
}

.testimonials__name {
  display: block;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--color-butter);
}

.testimonials__role {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-bg-soft);
}

.testimonials__text {
  grid-column: 1 / -1;
  margin-top: 32px;
}

.testimonials__text p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-bg-soft);
}

@media (min-width: 1024px) {
  .testimonials__panel {
    padding-block: 70px 70px;
  }

  /* Title on the left, short note on the right */
  .testimonials__header {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 40px;
    padding-bottom: 70px;
  }

  .testimonials__note {
    margin-top: 16px;
  }

  .testimonials__slider {
    position: relative;
    display: block;
    margin: 80px 0 0 200px;
  }

  /* Arrows on the right, aligned with the author name */
  .testimonials__nav {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 1;
  }

  .testimonials__card {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 24px;
  }

  .testimonials__author {
    padding-right: 120px;
  }

  .testimonials__text {
    grid-column: 2;
    margin-top: 40px;
  }

  .testimonials__text p {
    font-size: 1.25rem;
    line-height: 1.25;
  }
}

/*-------------------------------------------------------
CONTACT
-------------------------------------------------------*/
.contact {
  padding-block: 50px 60px;
  background-color: var(--color-bg-soft);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
}

.contact__title {
  max-width: 8em;
  font-weight: 400;
  color: var(--color-text-soft);
}

.contact__text {
    margin: 24px 0 0; 
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-text-soft);
}

/* Photo cut by the organic mask */
.contact__photo {
  justify-self: center;
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 594.57 / 508.8;
  object-fit: cover;
  -webkit-mask: url("../img/mask-contact.svg") center / 100% 100% no-repeat;
  mask: url("../img/mask-contact.svg") center / 100% 100% no-repeat;
}

.contact__whatsapp {
    display: grid;
    gap: 8px;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-primary);
}
.contact__phone {
    color: var(--color-primary);
}
.contact__phone:hover {
    color: var(--color-primary-dark);
}
.contact__cta {
    position: relative;
    display: inline-block;
    margin-top: 32px;
}
.contact__sparkle {
	position: absolute;
	top: 70%;
	left: 95%;
	width: 40px;
	color: var(--color-text-soft);
    transition: color 300ms ease, transform 300ms ease;
}

.contact__cta:hover .contact__sparkle {
    transform: translateY(-4px);
    color: var(--color-primary);
}

.contact__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: start;
  column-gap: 24px;
}

.contact__form-title {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--color-primary);
}

.contact__fields {
  display: grid;
  gap: 20px;
}

/* Underline-only fields */
.contact__input {
  width: 100%;
  padding: 12px 0 10px;
  border: 0;
  border-bottom: 1.5px solid var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
  transition: border-color 200ms ease;
}

.contact__input::placeholder {
  color: var(--color-text-soft);
  opacity: 1;
}

.contact__input:focus-visible {
  outline: none;
  border-bottom-color: var(--color-primary);
}

/* Privacy consent: custom checkbox (the reset removes the native look) */
.contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

/* CF7 acceptance markup: span.wpcf7-list-item > label > input + span.wpcf7-list-item-label */
.contact__consent .wpcf7-list-item {
  margin: 0;
}

.contact__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact__checkbox,
.contact__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--color-text-soft);
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.contact__checkbox:checked,
.contact__consent input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.contact__consent-label,
.contact__consent .wpcf7-list-item-label {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-soft);
  cursor: pointer;
}

.contact__consent-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact__consent-link:hover {
  color: var(--color-primary-dark);
}

/* Contact Form 7: field wrappers, validation tips and sending result */
.contact__form .wpcf7-form-control-wrap {
    display: block;
}

.contact__form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--color-primary-dark);
}

.contact__input.wpcf7-not-valid {
    border-bottom-color: var(--color-primary-dark);
}

.contact__form .wpcf7-response-output {
    grid-column: 1 / -1;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.contact__form.invalid .wpcf7-response-output,
.contact__form.unaccepted .wpcf7-response-output,
.contact__form.failed .wpcf7-response-output,
.contact__form.aborted .wpcf7-response-output,
.contact__form.spam .wpcf7-response-output {
    color: var(--color-primary-dark);
}

/* Shown when CF7 is inactive or the "Contato" form is missing (functions.php) */
.contact__fallback {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.contact__fallback a {
    text-decoration: underline;
}

/* CF7 keeps the button disabled until the privacy checkbox is checked */
.contact__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact__form.submitting .contact__submit {
    cursor: wait;
}
/* Round submit button with arrow */
.contact__submit {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: var(--color-primary);
    cursor: pointer;
    margin-top: 83px;
    transition: background-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.contact__submit svg {
    width: 30px;
    transition: transform 250ms ease;
}
.contact__submit:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 12px 4px rgba(94,77,65,0.25);
}
.contact__submit:hover svg {
    transform: translateX(4px);
}
@media (min-width: 1024px) {
  .contact {
    padding-block: 70px 70px;
  }

  /* Columns: text | photo, then contacts | form */
  .contact__inner {
    padding-inline: 96px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    column-gap: 40px;
    row-gap: 32px;
    align-items: start;
  }

  .contact__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .contact__title {
    margin-top: 72px;
  }  

  .contact__photo {
    grid-column: 2;
    grid-row: 1;
    max-width: 595px;
    justify-self: start;
  }

  .contact__direct {
    grid-column: 1;
    grid-row: 2;
    margin-top: 32px;
  }  
  /* Title + CF7 form (the <form> itself is rendered by Contact Form 7) */
  .contact__form-area {
    grid-column: 2;
    grid-row: 2;
  }

  .contact__form {
    grid-template-columns: minmax(0, 400px) 100px;
    column-gap: 32px;
  }

  .contact__form-title {
    font-size: 1.5rem;
  }

  .contact__fields {
    gap: 28px;
  }

    .contact__submit {      
        margin-top: 92px;
    }

  .contact__submit svg {
    width: 34px;
  }
}
/*-------------------------------------------------------
GENERAL PAGE
-------------------------------------------------------*/
.page__content {   
	padding-block: 140px 50px;
}
@media (min-width: 1024px) {
    .page__content {
        min-height: calc( 100vh - 150px );
        padding-block: 180px 70px;
    }
}
/*-------------------------------------------------------
LEGAL
-------------------------------------------------------*/
/* Privacy policy page (politica-de-privacidade.html) */
.legal {
  padding-block: 140px 80px;
  background-color: var(--color-bg-soft);
}

/* Narrow reading column */
.legal__inner {
  max-width: 820px;
}

.legal__title {
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-text);
}

.legal__updated {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--color-taupe);
}

.legal__lead {
  margin-top: 32px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.legal__section {
  margin-top: 48px;
}

.legal__heading {
  margin-bottom: 16px;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.legal__section p,
.legal__list {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}

.legal__list {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.legal__list li {
  margin-bottom: 8px;
}

.legal__list li::marker {
  color: var(--color-primary);
}

.legal__link {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__link:hover {
  color: var(--color-primary-dark);
}

.legal__back {
  margin-top: 56px;
}

@media (min-width: 1024px) {
  .legal {
    padding-block: 220px 120px;
  }

  .legal__title {
    font-size: 3rem;
  }

  .legal__heading {
    font-size: 1.5rem;
  }
}