/* Site-wide typography and layout system: Inter for interface/content, Fraunces only for the wordmark. */
:root{
  --font-ui:"Inter",Arial,sans-serif;
  --font-wordmark:"Fraunces",Georgia,serif;
  --type-xs:0.75rem;
  --type-sm:0.875rem;
  --type-base:1rem;
  --type-lead:clamp(1.05rem,1vw + .78rem,1.2rem);
  --type-h1:clamp(2.3rem,3.5vw + 1.1rem,3.55rem);
  --type-h2:clamp(1.85rem,2vw + 1.1rem,2.65rem);
  --type-h3:clamp(1.12rem,.55vw + .98rem,1.38rem);
}

html{scroll-behavior:smooth;}
body,button,input,textarea,select{font-family:var(--font-ui);}
body{font-size:var(--type-base);line-height:1.68;font-weight:400;}
h1,h2,h3,h4,p{overflow-wrap:normal;}
h1,h2,h3,h4{font-family:var(--font-ui);font-weight:600;letter-spacing:-.018em;line-height:1.16;text-wrap:balance;}
h1{font-size:var(--type-h1);}
h2{font-size:var(--type-h2);}
h3{font-size:var(--type-h3);}
p{line-height:1.68;}
.nav-wordmark{font-family:var(--font-wordmark);font-style:italic;font-weight:500;letter-spacing:.01em;}
.nav-links a,.btn,.eyebrow,.sub-eyebrow,.dur{font-family:var(--font-ui);}
.nav-links a{font-size:.8rem;font-weight:500;letter-spacing:.015em;}
.btn{font-size:.92rem;font-weight:600;line-height:1.2;}
.eyebrow,.sub-eyebrow{font-size:var(--type-xs);font-weight:700;letter-spacing:.16em;line-height:1.3;}

/* The web crop contains the complete original framed logo. Keep ample space around it. */
.hero{padding:78px 0 72px;overflow:visible;}
.hero .wrap{overflow:visible;}
.hero-logo{display:block;width:min(330px,76vw);height:210px;max-width:100%;margin:0 auto 20px;object-fit:contain;object-position:center;overflow:visible;clip-path:none;filter:none;}
.hero h1{max-width:720px;margin-inline:auto;font-size:var(--type-h1);font-weight:600;letter-spacing:-.026em;}
.hero p.lead{max-width:650px;margin:18px auto 30px;font-size:var(--type-lead);line-height:1.62;}
.hero-cta{gap:12px;}

section,.sub-section{padding:84px 0;}
.section-title{margin-bottom:14px;}
.marken-grid{gap:20px;align-items:stretch;}
.marke,.book,.roadmap-item,.atlas-card,.kontakt-block{border-radius:14px;}
.marke{padding:27px;min-height:0;}
.marke h3,.book h3{font-size:var(--type-h3);line-height:1.22;margin:8px 0 10px;}
.marke p,.book-desc{font-size:.94rem;line-height:1.65;}
.book{padding:24px;}
.book h3{font-size:clamp(1.12rem,.6vw + 1rem,1.32rem);}

/* Practice and room-harmony offers: a stable card rhythm and a scannable price row. */
.corpus-section .marken-grid{grid-auto-rows:1fr;gap:18px;}
.corpus-section .card{padding:25px 24px;min-height:218px;border-radius:14px;}
.corpus-section .card h3{font-family:var(--font-ui);font-size:clamp(1.08rem,.55vw + .95rem,1.28rem);font-weight:600;line-height:1.25;margin:0 0 10px;letter-spacing:-.012em;}
.corpus-section .card .desc{font-size:.94rem;line-height:1.62;margin:0 0 20px;}
.corpus-section .price{gap:16px;padding-top:15px;margin-top:auto;}
.corpus-section .dur{font-size:.72rem;font-weight:700;letter-spacing:.1em;line-height:1.35;}
.corpus-section .chf{font-family:var(--font-ui);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;}
.corpus-section .faq-item summary{font-family:var(--font-ui);font-size:.98rem;line-height:1.42;}
.corpus-section .faq-item p{font-size:.94rem;line-height:1.65;}

.atlas-card h3{font-family:var(--font-ui);font-size:clamp(1.45rem,1.6vw + 1rem,2.1rem);}
.roadmap-item h3{font-size:var(--type-h3);}
.kontakt-block p{font-size:.96rem;line-height:1.68;}
.footer-grid h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;}

@media (max-width:820px){
  section,.sub-section{padding:66px 0;}
  .hero{padding:68px 0 60px;}
  .hero-logo{width:min(280px,78vw);height:180px;margin-bottom:18px;}
  .marken-grid{gap:16px;}
  .corpus-section .card{min-height:0;}
}
@media (max-width:520px){
  body{line-height:1.62;}
  .topnav-inner{align-items:center;}
  .nav-wordmark{font-size:1.18rem;}
  .hero{padding:58px 0 52px;}
  .hero-logo{width:min(252px,82vw);height:158px;margin-bottom:15px;}
  .hero h1{font-size:clamp(2.1rem,9vw,2.55rem);line-height:1.14;}
  .hero p.lead{font-size:1rem;margin:15px auto 24px;}
  .btn{font-size:.9rem;}
  .corpus-section .card{padding:22px 20px;}
  .corpus-section .price{align-items:flex-start;flex-direction:column;gap:5px;}
  .corpus-section .chf{font-size:1.08rem;}
}

/* CamioloTech: colour is limited to the four offer titles. */
#camiolotech .tech-social h3{color:#A9C9E8;}
#camiolotech .tech-web h3{color:#A9D7C2;}
#camiolotech .tech-apps h3{color:#C7B5E8;}
#camiolotech .tech-optimisation h3{color:#E6C6A5;}