/* Home fidelity pass - based on the approved 1627 px PSD/PDF artboard.
   Note: the fonts extracted straight from the source PDF (assets/fonts/
   pdf-extracted/*.ttf - the "Volumes PDF", "Volumes PDF Expanded" and
   "Garamond PDF" families) all fail to parse/load in the browser (corrupted
   during extraction - confirmed via document.fonts reporting status:'error'
   for every one of them). They were removed from here rather than left as
   @font-face rules that only generate failed network requests; the tokens
   below now point straight at the self-hosted brand fonts (already declared
   in style.css) that every element was already silently falling back to. */
:root{
  --cyan:#00d5fd; /* sampled directly from the PDF's button fill / CONTATO pill */
  --paper-dim:#f4f4f4;
  --home-wrap:1435px;
  --font-body:'Volumes',Arial,sans-serif;
  --font-ui:'Volumes',Arial,sans-serif;
  --font-display-alt:'Volumes',Arial,sans-serif;
  --font-script:'Garamond',Georgia,serif;
}

body{ font-family:var(--font-body); font-weight:400; line-height:1.18; }
.wrap{ max-width:var(--home-wrap); }
/* The PDF's cursive accent ("conceito", "freela", "clientes"...) is the
   self-hosted brand script font (assets/fonts/volumes-script.woff2, already
   declared in style.css as family 'Volumes'), not the thinner Garamond
   italic this file was pointing at — that's why it looked like the wrong
   weight/style. It's a script face already, so no forced italic either. */
.script{ font-family:'Volumes','Garamond',Georgia,serif; font-style:italic; color:var(--cyan); }
/* The stat labels ("projetos", "segmentos", "aprovação") carry the .script
   class too, but they use the separate --font-script face (an already-
   cursive-drawn font), not 'Volumes' - it doesn't need (and looks wrong
   with) the italic synthesis the rest of the .script accents need, so it's
   kept upright here regardless of viewport width. */
.stat-script{ font-family:var(--font-script); font-style:normal; }
/* The PSD's services "callout" note was dropped from the final layout (it
   doesn't appear anywhere in the reference PDF) — keep it hidden at every
   width, not just the pixel-fidelity tier below. */
.services-callout{ display:none; }
/* style.css's own (correct, responsive) FAQ rule explicitly sets
   text-transform:none on the question text; the PDF shows the questions in
   caps, so restore that unconditionally now that the oversized/fixed-px FAQ
   block below is gated to the native PSD width only. */
.faq-item summary{ text-transform:uppercase; }

.btn{
  min-height:38px;
  padding:0 44px;
  border:0;
  border-radius:999px;
  font-family:var(--font-display-alt);
  font-size:21px;
  font-weight:700;
  font-stretch:expanded;
  letter-spacing:0;
  line-height:1;
}
.btn-primary{ background:var(--cyan); color:#fff; }
.btn-primary:hover{ background:#72d5ff; }

/* Hero */
.hero{ min-height:920px; padding:0; align-items:stretch; }
.hero-inner{ max-width:1627px; height:920px; display:block; padding:0; }
.hero-title{
  position:absolute;
  left:13.45%;
  top:25.9%;
  margin:0;
  font-family:'Coolvetica',Arial,sans-serif;
  font-size:clamp(112px,9.35vw,152px);
  font-weight:400;
  line-height:.88;
  letter-spacing:0;
}
.hero-title .script{
  left:.55em;
  top:.32em;
  font-size:.68em;
  line-height:1;
  font-style:italic;
}
.hero-copy{
  position:absolute;
  left:66%;
  top:49.4%;
  width:302px;
  max-width:302px;
  padding:0;
}
.hero-copy .eyebrow{
  margin:0 0 20px;
  font-family:var(--font-body);
  font-size:21px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}
.hero-copy p:not(.eyebrow){
  margin:0;
  font-family:var(--font-body);
  font-size:19px;
  font-weight:400;
  line-height:1.06;
}
.hero .side-label{
  right:15.2%;
  top:25.5%;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:400;
  letter-spacing:.04em;
  opacity:1;
}

/* Everything from here through the end of the FAQ section below was authored
   as fixed-pixel, position:absolute layout tuned to exactly the 1627px PSD
   canvas. style.css already has its own complete, vw-scaled responsive pass
   for these same sections (search "HOME DESKTOP" in style.css) that works
   correctly at every width from 1025px up. Below 1627px these fixed-pixel
   rules fought that responsive pass instead of matching it, so text
   overlapped (stat numbers/labels, services list crossing the side label),
   cards clipped their own content (the Crédito pricing card, the third
   testimonial), and captions ran oversized. Gating this block to the native
   PSD width keeps it pixel-exact there while letting style.css's responsive
   rules handle every width below it. */
@media (min-width:1627px){

/* Quality + statistics */
.section-worlds{ padding:77px 0 111px; }
.worlds-grid{
  max-width:1149px;
  padding:0;
  display:grid;
  grid-template-columns:387px 1fr;
  gap:106px;
  align-items:start;
}
.worlds-copy h2{
  margin:0 0 35px;
  font-family:'Coolvetica',Arial,sans-serif;
  font-size:45px;
  font-weight:400;
  line-height:.94;
  letter-spacing:0;
}
.worlds-copy h2 .script{ font-size:1.5em; line-height:0; vertical-align:-.14em; }
.worlds-copy .lede{
  width:349px;
  max-width:349px;
  margin:0 0 41px;
  font-size:18px;
  line-height:1.02;
  font-weight:400;
  opacity:1;
}
.worlds-copy .btn{ width:245px; padding:0; }
.stats-grid{ grid-template-columns:repeat(3,1fr); gap:52px; }
.stat-number{
  position:relative;
  display:block;
  height:81px;
  margin:0;
  font-family:var(--font-display-alt);
  font-size:72px;
  font-weight:800;
  font-stretch:expanded;
  line-height:.75;
  letter-spacing:-.035em;
}
.stat-script{
  position:absolute;
  left:48px;
  top:28px;
  z-index:1;
  font-family:var(--font-script);
  font-size:50px;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.stat-card p:not(.stat-number){
  margin:0;
  font-size:18px;
  line-height:1.02;
  font-weight:400;
  opacity:1;
}
.stat-card:nth-child(1) p:not(.stat-number){ max-width:148px; }
.stat-card:nth-child(2) p:not(.stat-number){ max-width:187px; }
.stat-card:nth-child(3) p:not(.stat-number){ max-width:203px; }

/* Services */
.section-services{ padding:0; }
.section-services>.wrap{ max-width:1435px; }
.services-card{ height:1093px; padding:0; }
.services-bg-img{ border-radius:0; }
.services-list{
  position:absolute;
  left:161px;
  top:112px;
  width:705px;
  max-width:none;
  margin:0;
  gap:0;
}
.service-row{
  display:grid;
  grid-template-columns:385px 320px;
  gap:0;
  min-height:132px;
  align-items:start;
}
.service-row:nth-child(2){ min-height:139px; }
.service-row:nth-child(3){ min-height:129px; }
.service-row:nth-child(4){ min-height:126px; }
.service-row:nth-child(5){ min-height:132px; }
.service-row dt{
  font-family:'Coolvetica Cond','Arial Narrow',sans-serif;
  font-size:72px;
  font-weight:400;
  line-height:.78;
  letter-spacing:0;
}
.service-row dd{
  max-width:312px;
  margin:7px 0 0;
  font-family:var(--font-body);
  font-size:19px;
  font-weight:400;
  line-height:1.02;
  opacity:1;
}
.side-label--card{
  right:248px;
  top:111px;
  font-family:var(--font-display-alt);
  font-size:25px;
  font-weight:700;
  color:#fff;
  opacity:1;
  letter-spacing:0;
}
.side-label-line{
  right:257px;
  top:339px;
  width:4px;
  height:570px;
  background:#fff;
}
.side-label-line::before{ display:none; }
.services-mark{ right:0; bottom:-272px; width:540px; }
.services-callout{ display:none; }
.services-cta{
  left:138px;
  bottom:-42px;
  width:583px;
  height:85px;
  padding:0 0 0 80px;
  font-family:'Coolvetica Cond','Arial Narrow',sans-serif;
  font-size:51px;
  font-weight:400;
  line-height:1;
  text-transform:none;
}
/* This connector mark is meant to sit above-left of the pill as a small
   flag leading into it, not cross through the button's own label — the
   original height/top values reached ~50px down INTO the 85px-tall button,
   drawing a bar straight across "Veja nosso portfólio". Both segments now
   stay above the button's top edge (y=0 in the button's own coordinate
   space). */
.services-cta::before{
  content:'';
  position:absolute;
  left:37px;
  top:-76px;
  width:4px;
  height:64px;
  background:#fff;
}
.services-cta::after{
  content:'';
  position:absolute;
  left:37px;
  top:-14px;
  width:80px;
  height:4px;
  background:#fff;
}

/* Clients and testimonials */
.section-testimonials{ padding:176px 0 112px; background:#f4f4f4; }
.section-testimonials .section-title--left{
  width:622px;
  max-width:622px;
  margin:0 0 92px 127px;
  font-family:'Coolvetica',Arial,sans-serif;
  font-size:49px;
  font-weight:400;
  line-height:1.02;
  letter-spacing:0;
}
.section-testimonials .section-title .script{ font-size:1.47em; vertical-align:-.1em; }
.clients-grid{ margin:0 100px 139px; gap:39px 48px; }
.testimonials-carousel{ position:relative; display:block; padding:0 147px; }
.testimonials-grid{ display:grid; grid-template-columns:repeat(3,315px); gap:71px; overflow:hidden; }
.testimonial-card header{
  position:relative;
  display:block;
  margin:0 0 13px;
  min-height:34px;
}
.testimonial-card cite{
  font-family:var(--font-display-alt);
  font-size:17px;
  font-weight:700;
  font-stretch:expanded;
  line-height:1;
}
.testimonial-card header span{
  margin-top:2px;
  font-size:16px;
  line-height:1;
  opacity:1;
}
.quote-icon{
  position:absolute;
  left:140px;
  top:-12px;
  width:46px;
  height:36px;
  object-fit:contain;
}
.testimonial-card p{ margin:0; font-size:16px; line-height:1.12; }
.carousel-arrow{
  position:absolute;
  top:55px;
  z-index:2;
  width:29px;
  height:51px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:hidden;
  text-indent:-9999px;
}
.carousel-arrow::before{
  content:'';
  position:absolute;
  top:8px;
  width:31px;
  height:31px;
  border-top:4px solid #8a8a8a;
  border-left:4px solid #8a8a8a;
}
.carousel-arrow--prev{ left:45px; }
.carousel-arrow--prev::before{ left:8px; transform:rotate(-45deg); }
.carousel-arrow--next{ right:77px; }
.carousel-arrow--next::before{ right:8px; transform:rotate(135deg); }

/* Team structure */
.section-structure{ padding:67px 0 91px; }
.structure-header{
  position:relative;
  min-height:198px;
  margin:0;
  display:block;
}
.structure-title{
  position:absolute;
  left:127px;
  top:0;
  width:282px;
  font-family:'Coolvetica',Arial,sans-serif;
  font-size:42px;
  font-weight:400;
  line-height:.74;
  letter-spacing:0;
}
.structure-title .script{ display:inline-block; font-size:1.55em; line-height:.72; }
.structure-flow{
  position:absolute;
  left:455px;
  right:100px;
  top:63px;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:0;
  align-items:start;
  font-family:var(--font-display-alt);
  font-size:22px;
  font-weight:700;
  font-stretch:expanded;
  line-height:.96;
  letter-spacing:0;
}
.structure-flow::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:10px;
  height:3px;
  background:#131012;
}
.structure-flow span,
.structure-flow span:first-child{
  width:max-content;
  margin:0 auto;
  padding:0 8px;
  background:#fff;
  z-index:1;
}
.structure-flow span::before{ display:none!important; }
.structure-grid{
  display:grid;
  grid-template-columns:850px 344px;
  gap:91px;
  align-items:start;
  margin-left:-30px;
}
.structure-photo{ margin:0; }
.structure-photo img{ width:900px; height:620px; border-radius:0; object-fit:contain; }
.structure-copy-col{ padding-top:113px; }
.structure-subhead{
  margin:0 0 25px;
  font-family:var(--font-display-alt);
  font-size:20px;
  font-weight:700;
  font-stretch:expanded;
  line-height:1.02;
  letter-spacing:0;
}
.structure-copy-col p{
  margin:0 0 18px;
  font-size:15px;
  font-weight:400;
  line-height:1.12;
  opacity:1;
}
.structure-copy-col .btn{ width:246px; padding:0; }

/* Job / Fee / Credit */
.section-pricing{ padding:0 0 91px; }
.pricing-card-wrap{ height:491px; padding:0; }
.pricing-bg-img{ border-radius:0; }
.pricing-grid{
  position:absolute;
  left:114px;
  right:112px;
  top:118px;
  display:grid;
  grid-template-columns:252px repeat(3,1fr);
  gap:46px;
}
.pricing-intro{ width:252px; padding:0; }
.pricing-intro h2{ margin:0 0 24px; font-size:47px; line-height:.9; letter-spacing:0; }
.pricing-intro p{ width:241px; font-size:18px; line-height:1.05; opacity:1; }
.pricing-card{ position:relative; min-height:250px; padding:0; border:0; }
.pricing-card-head{ display:grid; grid-template-columns:92px 1fr; gap:19px; align-items:center; margin:0; }
.pricing-icon{ width:92px; }
.pricing-card h3{ font-family:var(--font-display-alt); font-size:46px; font-weight:700; letter-spacing:0; }
.pricing-card p{ width:174px; margin:7px 0 0 113px; font-size:18px; line-height:1.1; opacity:1; }
.pricing-card::after{ content:''; position:absolute; left:46px; top:99px; width:2px; height:173px; background:#fff; }

/* FAQ */
.section-faq{ padding:131px 0 142px; }
.faq-layout{ grid-template-columns:280px 1fr; gap:67px; padding-left:127px; padding-right:99px; }
.faq-sidebar{ position:static; }
.faq-title{
  width:224px;
  margin:0 0 47px;
  font-family:'Coolvetica',Arial,sans-serif;
  font-size:55px;
  font-weight:400;
  line-height:.79;
  letter-spacing:0;
}
.faq-sidebar .lede{ width:239px; max-width:239px; margin:0 0 39px; font-size:17px; line-height:1.08; opacity:1; }
.faq-sidebar .btn{ width:245px; padding:0; }
.faq-item{ padding:0; border-bottom:2px solid #131012; }
.faq-item summary{
  min-height:43px;
  padding:0 0 5px 2px;
  font-family:var(--font-display-alt);
  font-size:24px;
  font-weight:700;
  font-stretch:expanded;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0;
}
.faq-item summary::after{
  content:'';
  width:24px;
  height:24px;
  border:0;
  background:#000;
  color:#fff;
  background-image:linear-gradient(45deg,transparent 45%,#fff 46%,#fff 55%,transparent 56%),linear-gradient(-45deg,transparent 45%,#fff 46%,#fff 55%,transparent 56%);
  background-size:8px 8px;
  background-position:6px 8px,11px 8px;
  background-repeat:no-repeat;
}
.faq-item[open] summary::after{ content:''; }
.faq-item p{ max-width:795px; margin:7px 0 19px 2px; font-size:16px; line-height:1.16; opacity:1; }

} /* end @media (min-width:1627px) pixel-fidelity gate */

/* Stat numbers ("+235 projetos" etc.): style.css's own 1025-1627px tier still
   lays the number and its script label out as a nowrap flex row, which is
   too wide for the narrow stat-card column and made adjacent cards run into
   each other ("+235projetos+12segmentos96%aprovação" with no gap at all).
   The PDF's actual layout is the layered/overlapping one already built above
   for >=1627px - reuse it here, scaled proportionally with vw so it holds
   up at any width from 1025px up to the native 1627px artboard. */
@media (min-width:1025px){
  .stat-number{
    position:relative;
    display:block;
    height:min(4.98vw,81px);
    margin:0 0 min(.7vw,11px);
    font-family:var(--font-display-alt);
    font-size:min(4.425vw,72px);
    font-weight:800;
    font-stretch:expanded;
    line-height:.75;
    letter-spacing:-.035em;
  }
  .stat-script{
    position:absolute;
    left:min(2.95vw,48px);
    top:min(1.72vw,28px);
    z-index:1;
    font-family:var(--font-script);
    font-size:min(3.07vw,50px);
    font-weight:400;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
  }
  .stats-grid{ gap:min(3.20vw,52px); }
}

@media (max-width:1199px){
  .hero{ min-height:760px; }
  .hero-inner{ height:760px; }
  .hero-title{ left:8%; top:25%; font-size:clamp(82px,10vw,112px); }
  .hero-copy{ left:auto; right:9%; top:58%; }
  .hero .side-label{ right:8%; }

  .worlds-grid{ width:calc(100% - 48px); grid-template-columns:minmax(280px,387px) 1fr; gap:32px; }
  .stats-grid{ gap:20px; }
  .stat-number{ font-size:min(4.425vw,60px); }
  .stat-script{ font-size:min(3.07vw,42px); left:min(2.95vw,34px); }

  .services-card{ height:auto; min-height:960px; padding:85px 70px 180px; }
  .services-list{ position:relative; left:auto; top:auto; width:72%; }
  .service-row{ grid-template-columns:45% 55%; }
  .service-row dt{ font-size:58px; }
  .side-label--card{ right:80px; }
  .side-label-line{ right:88px; }
  .services-mark{ width:430px; bottom:-220px; }
  .services-cta{ left:70px; }

  .section-testimonials .section-title--left{ margin-left:5%; }
  .clients-grid{ margin-left:5%; margin-right:5%; }
  .testimonials-carousel{ padding:0 6%; }
  .testimonials-grid{ grid-template-columns:repeat(3,1fr); gap:45px; }
  .carousel-arrow--prev{ left:0; }
  .carousel-arrow--next{ right:0; }

  .structure-title{ left:5%; }
  .structure-flow{ left:40%; right:5%; }
  .structure-grid{ grid-template-columns:58% 31%; gap:6%; margin-left:0; }
  .structure-photo img{ width:100%; height:auto; }
  .structure-copy-col{ padding-top:10%; }

  .pricing-grid{ left:5%; right:5%; grid-template-columns:22% repeat(3,1fr); gap:3%; }
  .pricing-card p{ width:calc(100% - 68px); margin-left:68px; font-size:16px; }
  .pricing-card-head{ grid-template-columns:72px 1fr; gap:12px; }
  .pricing-icon{ width:72px; }
  .pricing-card h3{ font-size:36px; }
  .pricing-card::after{ left:35px; }

  .faq-layout{ padding-left:5%; padding-right:5%; }
}

@media (max-width:860px){
  .wrap{ padding-left:24px; padding-right:24px; }
  .btn{ min-height:44px; font-size:18px; }
  .hero{ min-height:680px; }
  .hero-inner{ height:680px; padding:0 24px; }
  .hero-title{ position:absolute; left:7%; top:17%; font-size:clamp(68px,17vw,112px); }
  .hero-title .script{ left:.2em; font-size:.58em; }
  .hero-copy{ left:7%; right:auto; top:auto; bottom:65px; width:min(84%,360px); max-width:360px; }
  .hero .side-label{ display:none; }

  .section-worlds{ padding:70px 0; }
  .worlds-grid{ width:auto; padding:0 24px; grid-template-columns:1fr; gap:58px; }
  .worlds-copy h2{ font-size:42px; }
  .worlds-copy .lede{ width:auto; max-width:36ch; font-size:18px; }
  .stats-grid{ grid-template-columns:1fr; gap:42px; }
  .stat-card p:not(.stat-number){ max-width:32ch!important; }

  .services-card{ min-height:0; padding:72px 28px 110px; }
  .services-list{ width:100%; }
  .service-row,.service-row:nth-child(n){ grid-template-columns:1fr; min-height:0; margin-bottom:46px; }
  .service-row dt{ font-size:54px; }
  .service-row dd{ max-width:32ch; font-size:18px; }
  .side-label--card,.side-label-line,.services-mark{ display:none; }
  .services-cta{ position:relative; left:auto; bottom:auto; width:100%; height:64px; margin-top:8px; padding:0; font-size:36px; }
  .services-cta::before,.services-cta::after{ display:none; }

  .section-testimonials{ padding:90px 0 80px; }
  .section-testimonials .section-title--left{ width:auto; margin:0 0 60px; font-size:42px; }
  .clients-grid{ margin:0 0 85px; grid-template-columns:repeat(3,1fr); }
  .testimonials-carousel{ padding:0 42px; }
  .testimonials-grid{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .testimonial-card{ flex:0 0 86%; scroll-snap-align:center; }
  .carousel-arrow{ top:70px; }

  .section-structure{ padding:70px 0; }
  .structure-header{ min-height:300px; }
  .structure-title{ position:static; width:auto; font-size:42px; }
  .structure-flow{ left:0; right:0; top:190px; font-size:15px; }
  .structure-grid{ grid-template-columns:1fr; gap:15px; margin:0; }
  .structure-copy-col{ padding:0; }
  .structure-subhead{ font-size:20px; }
  .structure-copy-col p{ font-size:16px; }

  .section-pricing{ padding-bottom:70px; }
  .pricing-card-wrap{ height:auto; min-height:0; padding:70px 28px; }
  .pricing-grid{ position:relative; inset:auto; grid-template-columns:1fr; gap:55px; }
  .pricing-intro{ width:auto; }
  .pricing-intro p{ width:auto; max-width:32ch; }
  .pricing-card{ min-height:280px; }
  .pricing-card p{ width:min(230px,calc(100% - 100px)); margin-left:110px; font-size:18px; }
  .pricing-card-head{ grid-template-columns:92px 1fr; gap:19px; }
  .pricing-icon{ width:92px; }
  .pricing-card h3{ font-size:46px; }
  .pricing-card::after{ left:46px; }

  .section-faq{ padding:80px 0; }
  .faq-layout{ grid-template-columns:1fr; gap:70px; padding:0 24px; }
  .faq-title{ font-size:54px; }
  .faq-sidebar .lede{ width:auto; max-width:32ch; font-size:17px; }
  .faq-item summary{ min-height:58px; font-size:19px; line-height:1.08; }
  .faq-item p{ font-size:16px; }
}

@media (min-width:1200px){
  .hero{ min-height:min(77.1vw,1254px); }
  .hero-inner{ height:min(77.1vw,1254px); }
}