/* =========================
   TYPOGRAPHY — GLOBAL
========================= */

html, body{
  font-family: 'Istok Web', sans-serif!important;
  font-weight: 400;
  color: #111;
  background: #FEFEFE!important;
  overflow-x: hidden;
  max-width: 100%;
}

.text-1{ font-size: 18px; line-height: 2.4; font-style: italic; letter-spacing: 0.18em;}
.text-2{ font-size: 14px; line-height: 2.2;  letter-spacing: 0.18em; }
.text-card{ background: #fbf6f2; border-radius: 16px;}

.title-1{ font-size:38px; letter-spacing: 0.1em; font-weight: bold;}
.title-2{ font-size:28px; letter-spacing: 0.18em; line-height: 2em; font-weight: bold;}
.title-3{ font-size:24px; letter-spacing: 0.18em;  font-weight: bold;}

.link-1{ font-size: 14px; letter-spacing: 0.12em; text-transform: lowercase; text-decoration: underline; text-underline-offset: 6px; color: #111;}


.mb-6 { margin-bottom:4em }
.mt-6 { margin-top:4em }
.mb-12 {margin-bottom:6em }
.p-8 {padding:3.6em!important}
.pt-8 {padding-top:3.6em!important}
.p-0 {padding:0 !important}
.padding-x-5 {padding-left:3em; padding-right:3em}
.padding-y-5 {padding-top: 3rem ; padding-bottom: 3rem }

.relative {position: relative;}

@media (max-width:768px){
.title-1{ font-size:28px; }
.title-2{ font-size:20px;}
.padding-x-5 {padding-left:30px!important; padding-right:30px!important }
.text-1{ font-size: 14px; line-height:24px;  letter-spacing: 0.18em;}
.text-2{ font-size: 13px; line-height:24PX;  letter-spacing: 0.18em; }
.header-mark-wrap{position:absolute;left:52%!important;top:40px!important; opacity:0.05 }

.p-8{ padding: 1.6em !important;}
.mt-4{ margin-top: 10px;  }
.padding-y-5 {padding-top: 1rem ;
    padding-bottom: 1rem }
 .mb-6 {margin-bottom:2em;}
 .mb-12 {margin-bottom: 3em;}

 .contact-social {margin-bottom: 80px}

 .h4, h4 {font-size: 1.4em!important; }
}



/* =========================
   HEADER BASE
========================= */

.site-header{position: relative;width: 100%}

/* Logo */
.site-logo,
.custom-logo-link{ display: inline-flex; align-items: center; text-decoration: none; color: #111;}
.site-logo img, .custom-logo-link img{ display: block; max-height: 40px; width: auto;}

.header-mark-wrap{position:absolute;left:50%;top:20px;transform:translateX(-50%);pointer-events:none;z-index:1;}
.header-mark{display:block;width:auto;transform:rotate(180deg);transform-origin:center;height:170px;margin-top:0;}

.navbar-nav,.navbar-nav .menu{list-style:none;margin:0;padding:0;}
.navbar-nav .menu-item{margin:0; padding: 0}
.navbar-nav .menu-item a{font-size:14px;text-decoration:none;color:#111;letter-spacing:0.2px;display:inline-flex;align-items:center;line-height:1;}

.navbar-toggler{background:transparent !important;border:0 !important;padding:0 !important;box-shadow:none !important;line-height:0 !important;display:inline-flex;align-items:center;justify-content:center;}
.navbar-toggler:focus{outline:2px solid rgba(17,17,17,.25);outline-offset:4px;}
.navbar-toggler-icon{background-image:none !important;background-color:transparent !important;width:34px;height:22px!important;position:relative;display:inline-block; margin-top:17px; margin-right:8px}
.navbar-toggler-icon::before{content:"";position:absolute;left:0;top:0;width:100%;height:2.5px;background:#111;box-shadow:0 7px 0 #111,0 14px 0 #111;}

@media (max-width:991px){
  .site-header .container-fluid{padding-left:18px !important;padding-right:18px !important;padding-top:14px !important;padding-bottom:14px !important;}
  .site-logo,.custom-logo-link{height:52px;display:inline-flex;align-items:center;}
  .site-logo img,.custom-logo-link img{max-height:28px;}
  .header-mark{height:90px;margin-top:-30px;}
  #primaryMenu{width:100%;padding-top: 40px; border-bottom: 1px solid #F1F1F1;}
  #primaryMenu .navbar-nav,#primaryMenu .menu{display:flex;flex-direction:column;gap:10px;}
  #primaryMenu .menu-item a{font-size:15px;line-height:1.2;padding:6px 0;}
  .navbar-nav .menu-item a::after{content:"";}
  .navbar-nav .menu-item {border-top: 1px solid #F1F1F1; text-align: center; padding:30px 0 20px 0;}
}

@media (min-width:992px){
  .site-header .container-fluid{padding-top:24px !important;padding-bottom:24px !important;}
}

@media (min-width:992px){
  .site-header .row.align-items-center{min-height:100px;margin-top:40px;}
  .site-logo,.custom-logo-link{display:inline-flex;align-items:center;}
  .site-header nav.d-lg-flex{height:100px;display:flex;align-items:center;}
}


/* =========================
  Mark JORJA
========================= */

.mark-hero-1{ position: absolute; right: 480px; bottom: -80px;}
.mark-hero-2  { position: absolute; right: -50px; bottom: 120px; transform: rotate(-90deg);}

.mark-squid-1{position: absolute;right: 380px;bottom: -80px;}
.mark-squid-2  {position: absolute;right: 30px;top: -120px;transform: rotate(-90deg);z-index: -1;}

.mark-vitto-1{position: absolute;right: 480px;bottom: -80px; }
.mark-vitto-2  { position: absolute; right: -50px; bottom: 120px; transform: rotate(-90deg);}

.mark-white  .mark-svg { color: #fFF; }
.mark-green  .mark-svg { color: #C2D6BD; }
.mark-gray   .mark-svg { color: #C1C1C1; }
.mark-pink  .mark-svg { color: #E94589; }
.mark-blue  .mark-svg { color: #0099FF; }
.mark-yellow  .mark-svg { color: #FCCC0A; }
.hero-mark--black .mark-svg { color: #111; }

@media (max-width:768px){
.mark-hero-1 , .mark-hero-2, .mark-squid-1 ,.mark-squid-2 , .mark-vitto-1 , .mark-vitto-2 { display:none; }
}

/* =========================
  HERO JORJA
========================= */
.hero-text{ padding-top: 140px; padding-right: 100px; }
.hero-image-wrap{ width: min(780px, 100%); border-radius:0px; padding-top: 60px; }
.hero-mark { position: absolute; }




.hero-intro{ position: relative; padding-top: 80px;padding-bottom: 80px; background: #fff; overflow: hidden;}

/* grid do hero */
.hero-grid{ position: relative; z-index: 2; /* acima dos marks */ row-gap: 40px;}

 
@media (max-width:768px){
  .hero-text{ padding-top:0px; padding-right:0px; }
  .hero-intro {padding-top:60px; padding-bottom:40px} 
  .hero-image-wrap {padding-top: 0px}
  .hero-image-wrap img {width:100%; height: auto;}

  .site-logo img, .custom-logo-link img { width: 80px!important; height:20px}
  .case-1 {margin-bottom:20px!important; margin-top:20px!important;}
}


/* ===============================
   CASE 
================================ */

.case-1{margin-bottom:80px; margin-top:40px!important; }
/* imagem começa P&B */
.img-pb{ filter: grayscale(100%) contrast(1.05); transition: filter 0.4s ease; }

/* ao passar o mouse no case, imagem volta ao normal */
.img-pb:hover{
  filter: grayscale(0%) contrast(1);
}


/* wrapper dos dois cases */
.cases-stack{
  position: relative;
  overflow: visible;
  padding-bottom: 8px; /* espaço para o scroll do overlay */
}

/* case 1 sticky */
.case--sticky{
  position: sticky;
  top: 120px;   /* altura abaixo do header */
  z-index: 1;
}

/* case 2 sobe por cima */
.case--overlay{
  position: relative;
  z-index: 3;
  will-change: transform;
}

/* mobile: desliga */
@media (max-width: 991px){
  .case--sticky{ position: relative; top:auto; }
  .case--overlay{ transform:none !important; }
  .cases-stack{ padding-bottom:0; }

}

/* ===============================
   PORTFOLIO 
================================ */
  .page .link-portfolio{display: none!important}

.portfolio-rows{ display: grid; gap: 44px; }
.portfolio-row{ align-items: stretch; }


.portfolio-shot{ display: block; height: 100%; border-radius: 16px; overflow: hidden; ackground: rgba(0,0,0,.04);}
.portfolio-card{ background: #fbf6f2; border-radius: 16px; height: 100%;}


/* PORTFOLIO Responsivo */
@media (max-width: 991.98px){

  .portfolio-rows{ gap: 28px; }

  .portfolio-shot, .portfolio-card{ height: auto;}
  .portfolio-shot__img{height: auto;}
  .portfolio-desc{max-width: none;}
}


/* ===============================
   CONTACT FORM 7
================================ */

/* Social buttons (bolinhas) */
.contact-social__btn{ width: 68px; height: 68px; border-radius: 999px; background: #111; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff;}
.contact-social__icon{ font-size: 22px; line-height: 1; opacity: .95;}

/* Labels */
.cf7-label{ display: block; font-weight: 600; letter-spacing: .06em; margin-bottom: 0px!important;}

/* Inputs */
.cf7-control{ width: 100%; border: 1px solid rgba(0,0,0,.08); background: #fbf6f2; /* off-white suave como no print */ border-radius: 10px; padding: 14px 16px; outline: none; transition: box-shadow .15s ease, border-color .15s ease;}
.cf7-control::placeholder{ color: rgba(0,0,0,.55); }
.cf7-control:focus{ border-color: rgba(0,0,0,.18); box-shadow: 0 0 0 .2rem rgba(0,0,0,.06);}

/* Textarea height */
.cf7-textarea{ min-height: 180px; resize: vertical;}

/* Button */
.cf7-submit{ border: 0; background: #222; color: #fff; border-radius: 999px; padding: 18px 46px; font-weight: 600; letter-spacing: .06em; min-width: 260px;}
.cf7-submit:hover{ background: #111;}
.cf7-actions{ display: flex; justify-content: flex-end; margin-top: 22px;}

/* CF7 messages */
.contact-form-wrap .wpcf7-response-output{ margin: 18px 0 0; border-radius: 10px;}
.wpcf7-spinner {position: absolute!important;}

/* Responsivo */
@media (max-width: 991.98px){
  .contact-lead{max-width: 48ch;margin-bottom: 28px;}
  .cf7-actions{justify-content: flex-start;}
  .cf7-submit{width: 100%;min-width: 0;}
  .contact-social__btn { width: 48px; height: 48px;}
  .wpcf7-spinner {position: relative!important;}
  .cf7-textarea {height:110px!important ; min-height: 80px}
  .cf7-submit { padding: 10px 46px!important; font-size:12px }
}


/* ===============================
   ABOUT
================================ */



/* texto esquerdo (print tem texto mais “centralizado”/editorial) */
.about-intro{ padding-top: 20px; text-align: right; }


/* tags */
.about-tags{ display: flex; flex-wrap: wrap; gap: 16px; justify-content:right; }
.about-tag{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 999px; background: #fbf6f2; font-size: 10px; letter-spacing: .18em; text-transform: lowercase;; white-space: nowrap;}


.accordion-item .about-tags{ justify-content:left !important; }
.accordion-item  .about-tag { background:#FFFBF5!important }

.opacity-7{
  opacity: .7;
}

.experience-col {margin-top:140px !important}
.experience-item {margin-bottom:100px}

.accordion-button:not(.collapsed) {color: #111!important}

/* ===============================
   ABOUT ACCORDION (Bootstrap)
================================ */

/* remove bordas padrão e deixa com seu card */
.about-accordion .accordion-item{
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #FBF6F2;
  padding:20px;
}

/* botão */
.about-acc-btn{
  background: transparent !important;
  box-shadow: none !important;
  padding: 22px 26px;
  align-items: center;
  gap: 16px;
}

/* texto do summary */
.about-acc-summary{
  display: block;
  max-width: 56ch;
}

/* remove caret padrão do bootstrap */
.about-acc-btn::after{
  display: none !important;
}

/* cria o “+” na direita */
.about-acc-btn{
  position: relative;
}
.about-acc-btn::before{
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  line-height: 1;
  color: #111;
  font-weight: 300;
}

/* quando abre vira “–” */
.about-acc-btn:not(.collapsed)::before{
  content: "–";
}

/* corpo */
.about-acc-body{
  padding: 0 26px 24px;
}

/* tipografia dentro do accordion */
.about-acc-body .text-2{
  letter-spacing: 0.14em;
  line-height: 2.1;
}



/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 991px){
  .about-meta{ text-align: left; margin-top: 18px; }

  .about-intro{ padding-top: 40px; text-align: right; max-width: none; margin: 0;}

  .about-tags{ justify-content: flex-start; }

  .about-acc-btn{ padding: 18px 18px;}

  .about-acc-btn::before{ right: 16px; }

  .about-acc-body{ padding: 0  18px 18px; }
}

/* ===============================
   SINGLE PORTFOLIO
================================ */

.portfolio-single__hero{ height: 280px; overflow: hidden; border-radius: 16px; margin-top:40px; }
.portfolio-single__hero-img{ width: 100%; height: 100%; object-fit: cover; }
.portfolio-single__tags{ align-items: flex-start; }
.portfolio-single__intro-card{ max-width: 100%; }
.portfolio-single__content{ max-width: 620px; padding-left: 63px; }
.portfolio-single__child-image{ width: 100%; margin-top: 80px; margin-bottom:80px; }
.portfolio-single__child-img{ width: 100%; height: auto; display: block; border-radius:0px 0px 190px 190px; }
.wp-block-separator { border: none; border-top: 2px solid; margin: 80px 0; color:#DBCEC3;}

/* responsivo */
@media (max-width: 991.98px){
  .portfolio-single__hero{ height: 280px; border-radius: 16px; margin-top:20px;}
  .portfolio-single__intro-card { margin:0 20px;}
  .portfolio-single__tags{ margin: 0 20px 62px 20px; }

  .portfolio-single__content{ max-width: 100%;padding:0 20px;}

  .portfolio-single__child-image{ margin-top: 48px; }
  .wp-block-separator { margin: 30px 0; }
}


figure.figure-label { background:#FBF6F2; border-radius:16px; padding:12px 12px 1px 12px; font-size:9px; text-align:center }
figure.figure-label img {border-radius: 8px;}
figure.figure-label figcaption {padding: 0 50px; line-height: 14px; color:#6D6D6D; margin-top:8px }
}
  

.single-case__breadcrumbs  {font-size: 0.8em!important; color:#8D8D8D}
.single-case__breadcrumbs a { color:#8D8D8D!important; text-decoration:none; }
/* =========================
  FOOTER
========================= */
.footer-contact{ text-decoration:none; color:#111; font-size:20px; letter-spacing:.18em; font-weight:500; position: relative; top: 6px;}
.footer-mark{ width: 220px; height: auto; display:block; transform: rotate(0deg); transform-origin: center; margin-bottom: -60px;}

@media (max-width: 767.98px){
  .footer-contact{font-size:8px;letter-spacing:.16em;top: 0;}
  .footer-mark{width: 90px;margin-bottom: -60px; opacity:0.05}
  .footer-contact-left { margin-right:10px }
  .footer-contact-right { margin-left:10px }
}


.page-template-default .title-1 { font-size:32px !important }
.wp-block-column {padding-right:25px !important}
.single .text-2 { letter-spacing:0.08em !important }
.single .h3, h3 , h4 {font-weight: bold!important;}