@font-face{
  font-family:'Coolvetica Heavy';
  src:url('../assets/fonts/coolvetica-heavy-compressed.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica';
  src:url('../assets/fonts/coolvetica-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica';
  src:url('../assets/fonts/coolvetica-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Coolvetica Cond';
  src:url('../assets/fonts/coolvetica-condensed.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Garamond';
  src:url('../assets/fonts/garamond.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Volumes';
  src:url('../assets/fonts/volumes-script.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --ink: #131012;
  --paper: #ffffff;
  --paper-dim: #f0eded;
  --cyan: #44c2e1;
  --cyan-dim: #cdeef7;
  --line: rgba(19,16,18,0.1);
  --line-invert: rgba(255,255,255,0.14);
  --font-display: 'Coolvetica Heavy', 'Arial Narrow', sans-serif;
  --font-display-alt: 'Coolvetica', 'Arial Narrow', sans-serif;
  --font-cond: 'Coolvetica Cond', 'Arial Narrow', sans-serif;
  --font-body: 'Garamond', Georgia, serif;
  --font-script: 'Volumes', 'Brush Script MT', cursive;
  --radius: 18px;
  --wrap: 1100px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.02;
  margin:0 0 1rem;
  letter-spacing:0.005em;
}
h1{ font-size:clamp(2.1rem, 5vw, 4.2rem); text-transform:uppercase; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); }
h3{ font-family:var(--font-display-alt); font-size:1.15rem; text-transform:uppercase; letter-spacing:0.04em; }
p{ margin:0 0 1rem; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--cyan); color:var(--ink);
  padding:.75rem 1.25rem; z-index:200; font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }

.eyebrow{
  font-family:var(--font-cond); font-weight:400; text-transform:uppercase;
  letter-spacing:0.12em; font-size:0.85rem; color:var(--cyan);
  margin-bottom:1.25rem;
}
.eyebrow-dark{ color:var(--ink); opacity:0.55; }

.lede{ font-size:1.1rem; max-width:52ch; opacity:0.8; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.9rem 1.9rem; border-radius:999px; font-weight:700;
  text-decoration:none; font-family:var(--font-display-alt);
  text-transform:uppercase; letter-spacing:0.04em; font-size:0.85rem;
  border:2px solid transparent; transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.btn-primary{ background:var(--cyan); color:var(--ink); }
.btn-primary:hover{ background:#5fd0ec; }
.btn-ghost{ border-color:currentColor; color:inherit; background:transparent; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ===== Logo ===== */
.logo-img{ height:3.3rem; width:auto; display:block; }

/* ===== Script/cursive accent ===== */
.script{
  font-family:var(--font-script); font-style:normal; font-weight:400;
  color:var(--cyan); text-transform:none; letter-spacing:0;
}

/* ===== Header ===== */
.site-header{ background:var(--paper); position:relative; z-index:10; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:104px; }
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo--footer{ display:inline-block; }
.main-nav ul{
  list-style:none; display:flex; align-items:center; gap:2.25rem;
  margin:0; padding:0;
}
.main-nav a{
  font-family:var(--font-display-alt);
  color:var(--ink); text-decoration:none; font-weight:400;
  text-transform:uppercase; font-size:0.85rem; letter-spacing:0.03em;
  opacity:0.8; padding-bottom:4px; border-bottom:2px solid transparent;
}
.main-nav a:hover{ opacity:1; color:var(--cyan); }
.main-nav a.active{ opacity:1; border-color:var(--ink); }
.main-nav a.btn-nav{
  background:var(--cyan); color:var(--ink); padding:0.6rem 1.3rem;
  border-radius:999px; opacity:1; border-bottom:none;
}
.main-nav a.btn-nav:hover{ background:#5fd0ec; color:var(--ink); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:0.5rem;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }

/* ===== Side label ===== */
.side-label{
  position:absolute; right:1.5rem; top:9rem;
  writing-mode:vertical-rl; font-family:var(--font-cond); font-weight:400;
  letter-spacing:0.1em; font-size:0.8rem; color:var(--ink); opacity:0.6; z-index:2;
}
.side-label--card{ position:absolute; right:2rem; top:2rem; color:var(--paper); opacity:0.5; z-index:2; }

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  padding:3rem 0 6rem; min-height:70vh; display:flex; align-items:center;
}
.hero-bg-img{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-inner{
  position:relative; z-index:1; display:grid; grid-template-columns:1fr 340px;
  gap:2.5rem; align-items:end; width:100%; max-width:1020px; margin:0 auto;
}
.hero-title{
  font-size:clamp(2.8rem, 7.2vw, 5.6rem); color:var(--ink); margin:0;
}
.hero-title .script{ font-size:0.85em; }
.hero-copy{ max-width:32ch; padding-bottom:0.5rem; }
.hero-copy p:not(.eyebrow){ font-size:1.05rem; font-weight:600; }
.hero-copy .eyebrow{ color:var(--ink); opacity:0.9; }

/* ===== Sections generic ===== */
.section{ padding:6rem 0; position:relative; }
.section-title{ text-align:center; max-width:820px; margin:0 auto 3rem; text-transform:uppercase; }
.section-title--left{ text-align:left; margin:0 0 2.5rem; max-width:700px; text-transform:uppercase; }
.section-title .script, .section-title--left .script{ font-size:1em; }

/* ===== Worlds + Stats (combined) ===== */
.section-worlds{ background:var(--paper); }
.worlds-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; align-items:center; }
.worlds-copy h2{ margin-bottom:1.25rem; }
.worlds-copy .lede{ max-width:44ch; opacity:0.95; color:var(--ink); }

.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; align-items:start; }
.stat-card{ padding:0; }
.stat-number{
  font-family:var(--font-display); font-weight:900; font-size:2.9rem;
  color:var(--ink); margin:0 0 0.6rem; line-height:1; display:flex; align-items:baseline; gap:0.4rem;
}
.stat-script{ font-size:0.5em; font-weight:500; }
.stat-card p:not(.stat-number){ font-size:0.9rem; opacity:0.92; color:var(--ink); margin-bottom:0; }

@media (max-width: 860px){
  .worlds-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; gap:2rem; }
}

/* ===== Services (real bg image card + list) ===== */
.section-services{ background:var(--paper); padding-bottom:0; }
.services-card{
  position:relative; color:var(--paper); padding:3.5rem 3rem 6rem;
}
.services-bg-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; border-radius:32px;
}
.services-list, .services-cta{ position:relative; z-index:1; }
.services-mark{
  position:absolute; right:1rem; bottom:-3rem; width:17rem; height:auto; z-index:2;
  pointer-events:none;
}
.services-list{ margin:2.5rem 0 0; display:flex; flex-direction:column; gap:1.6rem; max-width:70%; }
.service-row{ display:grid; grid-template-columns:240px 1fr; gap:1.5rem; align-items:baseline; }
.service-row dt{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:2.3rem; letter-spacing:0.01em; margin:0;
}
.service-row dd{ margin:0; font-size:0.95rem; opacity:0.85; max-width:38ch; }
.services-cta{ margin-top:2.5rem; }

/* ===== Clients + Testimonials ===== */
.section-testimonials{ background:var(--paper-dim); }
.clients-grid{
  list-style:none; margin:0 0 3rem; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:1.75rem 1.5rem; align-items:center;
}
.clients-grid li{ display:flex; align-items:center; justify-content:center; }
.clients-grid img{
  max-width:100%; max-height:2.6rem; width:auto; height:auto;
  object-fit:contain;
}
.testimonials-carousel{ display:flex; align-items:center; gap:1rem; }
.carousel-arrow{
  flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); font-size:1.3rem; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background:var(--ink); color:var(--paper); }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem; flex:1; }
.testimonial-card{
  background:transparent; padding:0; margin:0;
  display:flex; flex-direction:column; justify-content:space-between;
}
.testimonial-card p{ font-size:0.9rem; opacity:0.8; }
.testimonial-card footer{ margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1rem; }
.testimonial-card cite{ font-style:normal; font-weight:700; display:block; }
.testimonial-card footer span{ font-size:0.85rem; opacity:0.6; }

@media (max-width: 900px){
  .clients-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonials-carousel{ flex-direction:column; }
}

/* ===== Structure ===== */
.section-structure{ background:var(--paper); }
.structure-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:2rem; margin-bottom:3rem;
}
.structure-title{ margin-bottom:0; text-transform:uppercase; }
.structure-flow{
  display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap;
  font-family:var(--font-display-alt); font-weight:700; text-transform:uppercase;
  font-size:1.35rem; letter-spacing:0.01em; line-height:1.15;
}
.structure-flow span{ position:relative; padding-left:2rem; }
.structure-flow span::before{
  content:''; position:absolute; left:0; top:50%; width:1.4rem; height:1px; background:var(--ink);
}
.structure-flow span:first-child{ padding-left:0; }
.structure-flow span:first-child::before{ display:none; }
.structure-flow .accent{ color:var(--cyan); }

.structure-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3.5rem; align-items:center; }
.structure-photo{ margin:0; border-radius:var(--radius); overflow:hidden; }
.structure-photo img{ width:100%; height:auto; display:block; }
.structure-subhead{ color:var(--cyan); font-size:1.3rem; margin-bottom:1.25rem; }
.structure-copy-col p{ font-size:0.92rem; opacity:0.8; }
.structure-tags{ opacity:1 !important; }
.structure-tags strong{ opacity:1; }

@media (max-width: 860px){
  .structure-grid{ grid-template-columns:1fr; }
  .structure-header{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
}

/* ===== Pricing ===== */
.section-pricing{ background:var(--paper); }
.pricing-card-wrap{
  position:relative; color:var(--paper); padding:3.5rem 3rem;
}
.pricing-bg-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; border-radius:32px;
}
.pricing-grid{
  position:relative; z-index:1; display:grid;
  grid-template-columns:repeat(4, 1fr); gap:2rem;
}
.pricing-intro{ padding:0 2rem 0 0; }
.pricing-intro h2{
  color:var(--paper); text-transform:uppercase; font-size:1.7rem; margin-bottom:1rem;
}
.pricing-intro p{ opacity:0.85; font-size:0.88rem; margin-bottom:0; }
.pricing-card{
  padding:0 0 0 2rem; border-left:1px solid var(--line-invert);
}
.pricing-icon{ width:3.2rem; height:auto; margin-bottom:1rem; display:block; }
.pricing-card h3{ color:var(--paper); }
.pricing-card p{ font-size:0.88rem; opacity:0.75; margin-bottom:0; }

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns:repeat(2, 1fr); }
  .pricing-intro{ grid-column:1 / -1; padding:0 0 1.5rem; border-bottom:1px solid var(--line-invert); margin-bottom:0.5rem; }
  .pricing-card{ border-left:none; padding-left:0; }
}
@media (max-width: 560px){
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-card{ border-top:1px solid var(--line-invert); padding-top:1.5rem; }
}

/* ===== FAQ ===== */
.section-faq{ background:var(--paper); }
.faq-layout{ display:grid; grid-template-columns:300px 1fr; gap:4rem; align-items:start; }
.faq-sidebar{ position:sticky; top:7rem; }
.faq-title{ text-transform:uppercase; line-height:0.95; margin-bottom:1.5rem; }
.faq-sidebar .lede{ font-size:0.92rem; opacity:0.8; margin-bottom:1.5rem; }

.faq-list{ display:flex; flex-direction:column; }
.faq-item{
  background:transparent; border-bottom:1px solid var(--line); padding:1.25rem 0;
}
.faq-item:first-child{ padding-top:0; }
.faq-item summary{
  cursor:pointer; font-weight:700; font-family:var(--font-display-alt);
  text-transform:uppercase; font-size:0.95rem; letter-spacing:0.01em;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:1.2rem; color:var(--ink); flex-shrink:0;
  width:1.6rem; height:1.6rem; border:1px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ margin:1rem 0 0; opacity:0.75; font-size:0.92rem; max-width:75ch; }

@media (max-width: 860px){
  .faq-layout{ grid-template-columns:1fr; gap:2rem; }
  .faq-sidebar{ position:static; }
}

/* ===== Contact ===== */
.section-contact{
  position:relative; overflow:hidden; background:var(--ink); color:var(--paper);
  padding:6rem 0;
}
.footer-bg-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.contact-inner{
  position:relative; z-index:1; display:flex; justify-content:space-between;
  align-items:center; gap:2rem; flex-wrap:wrap; max-width:1000px; margin:0 auto;
}
.section-contact h2{ color:var(--paper); max-width:520px; margin-bottom:1.5rem; }
.contact-email{ opacity:0.8; font-size:0.9rem; letter-spacing:0.03em; margin-bottom:1.5rem; }
.contact-email a{ color:inherit; text-decoration:none; }
.social-list{ list-style:none; display:flex; gap:0.75rem; margin:0; padding:0; }
.social-list a{
  display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border:1px solid var(--line-invert); border-radius:8px;
}
.social-list img{ width:1.2rem; height:1.2rem; }
.social-list a:hover{ background:rgba(255,255,255,0.08); }
.logo--footer img{ height:8rem; width:auto; display:block; }

@media (max-width: 760px){
  .contact-inner{ flex-direction:column; align-items:flex-start; }
}

/* ===== Footer ===== */
.site-footer{ background:var(--ink); color:var(--paper); border-top:1px solid var(--line-invert); }
.footer-inner{
  display:flex; justify-content:center; align-items:center;
  padding:1.5rem; font-size:0.8rem; opacity:0.55;
}
.footer-inner p{ margin:0; }

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--cyan); outline-offset:2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .service-card{ transition:none; }
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .worlds-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .worlds-labels{ flex-direction:row; flex-wrap:wrap; }
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .main-nav ul{
    position:fixed; inset:76px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:2rem 1.5rem; gap:1.5rem;
    transform:translateX(100%); transition:transform .25s ease; z-index:50;
  }
  .main-nav ul.open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink); }
  .section{ padding:4rem 0; }
  .hero{ padding:2rem 0 3rem; min-height:auto; }
  .hero-inner{ grid-template-columns:1fr; gap:2rem; }
  .side-label{ display:none; }
  .services-card{ padding:2.5rem 1.5rem 3rem; }
  .services-list{ max-width:100%; }
  .service-row{ grid-template-columns:1fr; gap:0.4rem; }
  .services-mark{ width:5rem; height:5rem; right:1.25rem; bottom:1.25rem; opacity:0.4; }
  .side-label--card{ display:none; }
}

/* ===== Floating WhatsApp button ===== */
.whatsapp-float{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:200;
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,0.3); }
.whatsapp-float img{ width:1.8rem; height:1.8rem; }
@media (max-width:600px){
  .whatsapp-float{ right:1rem; bottom:1rem; width:3.2rem; height:3.2rem; }
  .whatsapp-float img{ width:1.6rem; height:1.6rem; }
}