@font-face {
  font-family: 'Cormorant Garamond';
  src: url('Fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('Fonts/Cormorant_Garamond/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('Fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('Fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#0F2F26;--green-light:#1a4a3a;--dark:#1A1A1A;
  --bg:#F5F3EF;--sand:#E6DFD4;--muted:#5e5e5e;--white:#FDFCFA;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--dark);font-size:16px;line-height:1.7;overflow-x:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}
::selection{background:var(--green);color:var(--white)}

/* ── BLOB SHAPE UTILITY ── */
.blob{position:absolute;border-radius:60% 40% 50% 50% / 40% 60% 40% 60%;pointer-events:none;z-index:0}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;height:72px;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
nav.scrolled{background:rgba(245,243,239,.92);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(15,47,38,.08)}
/* On dark subpage heroes the nav stays transparent – force white text */
nav.nav-dark .nav-logo{color:rgba(255,255,255,.9)}
nav.nav-dark .nav-links a{color:rgba(255,255,255,.75)}
nav.nav-dark .nav-links a:hover{color:var(--white)}
nav.nav-dark .nav-links a::after{background:rgba(255,255,255,.6)}
nav.nav-dark .nav-cta{background:rgba(255,255,255,.15)!important;color:var(--white)!important;border:1px solid rgba(255,255,255,.3)}
nav.nav-dark .nav-cta:hover{background:rgba(255,255,255,.25)!important}
nav.nav-dark .hamburger span{background:var(--white)}
nav.scrolled .nav-logo{color:var(--green)!important}
nav.scrolled .nav-links a{color:var(--dark)!important}
nav.scrolled .nav-links a:hover{color:var(--green)!important}
nav.scrolled .nav-links a::after{background:var(--green)!important}
nav.scrolled .nav-links a.nav-cta{background:var(--green)!important;color:var(--white)!important;border:none!important}
nav.scrolled .nav-links a.nav-cta:hover{background:var(--green-light)!important;color:var(--white)!important}
nav.scrolled .hamburger span{background:var(--dark)!important}
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:.6rem}
.nav-logo-img{height:46px;width:auto;display:block;transition:opacity .3s}
.nav-logo-name{font-family:var(--serif);font-size:1.1rem;font-weight:400;color:var(--green);letter-spacing:.01em;line-height:1;transition:color .3s}
nav.nav-dark .nav-logo-name{color:rgba(255,255,255,.9)}
nav.scrolled .nav-logo-name{color:var(--green)!important}
nav.nav-dark .nav-logo-img{filter:none}
nav.scrolled .nav-logo-img{filter:none}
.footer-logo-img{height:42px;width:auto;display:block;margin-bottom:1rem}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.84rem;font-weight:400;color:var(--dark);letter-spacing:.02em;position:relative;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--green)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{padding:.55rem 1.4rem;background:var(--green);color:var(--white)!important;border-radius:2px;font-size:.82rem!important;letter-spacing:.06em!important;text-transform:uppercase;transition:background .3s,border .3s!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--green-light)!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--dark);transition:all .3s var(--ease)}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;z-index:99;background:rgba(245,243,239,.97);backdrop-filter:blur(20px);padding:2rem 5vw 3rem;flex-direction:column;gap:1.5rem;transform:translateY(-10px);opacity:0;transition:opacity .3s,transform .3s var(--ease);border-bottom:1px solid var(--sand)}
.mobile-menu.open{transform:translateY(0);opacity:1}
.mobile-menu a{text-decoration:none;color:var(--dark);font-family:var(--serif);font-size:1.5rem;font-weight:300;transition:color .3s}
.mobile-menu a:hover{color:var(--green)}

/* ── HERO ── */
#hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding:120px 5vw 6rem;align-items:center;gap:4rem;position:relative}
.hero-bg-shape{position:absolute;right:-8vw;top:10%;width:55vw;height:75vh;background:var(--sand);border-radius:60% 40% 50% 50%/40% 60% 40% 60%;z-index:0;opacity:.55;pointer-events:none}
.hero-content{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:2rem;opacity:0;animation:fadeUp .8s var(--ease) .2s forwards}
.hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--green);display:block}
.hero-title{font-family:var(--serif);font-size:clamp(2.8rem,5.5vw,5rem);font-weight:300;line-height:1.1;color:var(--dark);margin-bottom:1.75rem;opacity:0;animation:fadeUp .9s var(--ease) .35s forwards}
.hero-title em{font-style:italic;color:var(--green)}
.hero-subtitle{font-size:1.1rem;font-weight:300;color:var(--muted);max-width:440px;line-height:1.75;margin-bottom:2.75rem;opacity:0;animation:fadeUp .9s var(--ease) .5s forwards}
.hero-actions{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) .65s forwards}
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 2.2rem;background:var(--green);color:var(--white);font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .3s,transform .25s,box-shadow .3s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--green-light);transform:translateY(-2px);box-shadow:0 12px 32px rgba(15,47,38,.22)}
.btn-primary svg{transition:transform .3s var(--ease)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;color:var(--dark);text-decoration:none;border:1.5px solid rgba(15,47,38,.3);border-radius:2px;padding:.75rem 1.5rem;letter-spacing:.06em;text-transform:uppercase;transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)}
.btn-secondary:hover{border-color:var(--green);color:var(--green);background:rgba(15,47,38,.04);transform:translateY(-2px)}
.hero-visual{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeIn 1.2s var(--ease) .5s forwards}
.hero-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:400px;width:100%}
.hero-card{background:var(--white);border-radius:4px;padding:1.6rem 1.4rem;box-shadow:0 2px 20px rgba(15,47,38,.07);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.hero-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(15,47,38,.12)}
.hero-card:nth-child(even){margin-top:1.75rem}
.hero-card--dark{background:var(--green)!important}
.hero-card--dark .card-num{color:rgba(255,255,255,.65)}
.hero-card--dark .card-title{color:var(--white)}
.hero-card--dark .card-label{color:rgba(255,255,255,.5)}
.hero-card--wide{grid-column:span 2;margin-top:0!important;display:flex;align-items:center;gap:1.5rem}
.hero-card--wide .card-num{margin-bottom:0;flex-shrink:0}
.card-num{font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--green);line-height:1;margin-bottom:.4rem}
.card-title{font-size:.95rem;font-weight:600;color:var(--dark);margin-bottom:.35rem}
.card-label{font-size:.9rem;color:var(--muted)}

/* ── SHARED ── */
section{padding:8rem 5vw}
.section-tag{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:1.25rem}
.section-tag::before{content:'';width:24px;height:1px;background:var(--green)}
.section-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.15;color:var(--dark);margin-bottom:1.5rem}
.section-title em{font-style:italic;color:var(--green)}
.section-intro{font-size:1.05rem;font-weight:300;color:var(--muted);max-width:540px;line-height:1.8}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}

/* ── ABOUT ── */
#about{background:var(--sand);display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;position:relative;overflow:hidden}
/* one small blob, top-right, stays behind everything */
#about .blob-about{width:28vw;height:34vh;background:rgba(15,47,38,.06);top:-8%;right:-8%;transform:rotate(20deg);z-index:0}
.about-image-wrap{position:relative}
.about-img-frame{width:95%;max-width:420px;aspect-ratio:1/1;padding-top:0;position:relative;margin:0 auto;border-radius:50%;overflow:hidden}
.about-img-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.about-img-inner svg{width:60px;opacity:.25;color:white}
.about-img-label{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:rgba(255,255,255,.45)}
.about-badge{position:absolute;bottom:-1.5rem;right:-1.5rem;width:120px;height:120px;background:var(--bg);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(15,47,38,.12);text-align:center}
.about-badge-num{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--green);line-height:1}
.about-badge-text{font-size:.68rem;color:var(--muted);margin-top:3px}
.about-values{display:flex;gap:1.5rem;margin-top:2.5rem;flex-wrap:wrap}
.value-pill{padding:.5rem 1.2rem;border:1px solid rgba(15,47,38,.2);border-radius:50px;font-size:.82rem;color:var(--green);transition:background .3s,color .3s;cursor:default}
.value-pill:hover{background:var(--green);color:var(--white)}

/* ── SERVICES – 3-col grid with inline expand ── */
#services{background:var(--bg);position:relative;overflow:hidden;overflow-anchor:none}
/* two small blobs bottom corners – green on light, very subtle */
#services .blob-services-a{width:18vw;height:22vh;background:rgba(15,47,38,.05);bottom:-6%;left:-5%;transform:rotate(-15deg);z-index:0}
#services .blob-services-b{width:14vw;height:18vh;background:rgba(15,47,38,.04);bottom:-4%;left:10%;transform:rotate(10deg);z-index:0}
.services-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem;flex-wrap:wrap;gap:2rem}
/*
  The grid holds cards + panels.
  Cards: always 3 per row (repeat(3,1fr))
  Detail panels: grid-column 1/-1, height-animated
*/
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.service-card{background:var(--white);padding:2.5rem 2rem 2rem;border-radius:3px;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;border:1px solid transparent;cursor:pointer}
.service-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(15,47,38,.10);border-color:rgba(15,47,38,.06)}
.service-card:hover::before,.service-card.active::before{transform:scaleX(1)}
.service-card.active{border-color:rgba(15,47,38,.15);box-shadow:0 8px 32px rgba(15,47,38,.10);transform:translateY(-3px)}
.service-icon{width:48px;height:48px;background:rgba(15,47,38,.07);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1.75rem;transition:background .3s}
.service-card:hover .service-icon,.service-card.active .service-icon{background:rgba(15,47,38,.12)}
.service-icon svg{width:22px;color:var(--green)}
.service-num{display:none}
.service-name{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--dark);margin-bottom:.75rem;line-height:1.3}
.service-desc{font-size:.95rem;color:var(--muted);line-height:1.75;margin-bottom:1.5rem}
.service-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.stag{font-size:.72rem;color:var(--green);background:rgba(15,47,38,.07);padding:.25rem .75rem;border-radius:50px}
.service-expand-hint{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:var(--green);padding:.55rem 1.1rem;border-radius:2px;transition:background .25s var(--ease)}
.service-expand-hint:hover{background:var(--green-light)}
.service-card.active .service-expand-hint{background:var(--green-light)}
.service-expand-hint svg{transition:transform .3s var(--ease);flex-shrink:0}
.service-card.active .service-expand-hint svg{transform:rotate(180deg)}

/* Detail panel spans all 3 columns and animates open */
.service-detail-panel{
  grid-column:1 / -1;
  background:var(--sand);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease),padding .4s var(--ease);
  opacity:0;
  padding:0 3rem;
}
.service-detail-panel.open{
  grid-template-rows:1fr;
  opacity:1;
  padding:3rem;
}
.service-detail-inner-wrap{overflow:hidden;min-height:0}
.service-detail-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;padding-bottom:.5rem}
.service-detail-title{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--dark);margin-bottom:1rem}
.service-detail-title em{font-style:italic;color:var(--green)}
.service-detail-text{font-size:.95rem;color:var(--dark);line-height:1.8;font-weight:300;margin-bottom:1.5rem}
.service-detail-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.service-detail-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--dark);font-weight:300}
.service-detail-list li::before{content:'→';color:var(--green);font-size:.85rem;margin-top:.1rem;flex-shrink:0}
.service-detail-link{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.8rem;background:var(--green);color:var(--white);font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .3s,transform .2s}
.service-detail-link:hover{background:var(--green-light);transform:translateY(-2px)}
.service-detail-refs{padding-top:.5rem}
.service-detail-refs-title{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem}
.service-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.service-ref-card{background:rgba(15,47,38,.07);border-radius:3px;padding:1.5rem 1.75rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.service-ref-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(15,47,38,.1)}
.service-ref-name{font-size:.97rem;font-weight:500;color:var(--dark);margin-bottom:.35rem}
.service-ref-cat{font-size:.85rem;color:var(--muted)}

/* ── PORTFOLIO ── */
#portfolio{background:var(--green);position:relative;overflow:hidden}
/* one small light blob bottom-right */
#portfolio .blob-portfolio{width:20vw;height:26vh;background:rgba(255,255,255,.05);bottom:5%;right:-6%;transform:rotate(-10deg);z-index:0}
#portfolio .section-tag{color:rgba(255,255,255,.5)}
#portfolio .section-tag::before{background:rgba(255,255,255,.4)}
#portfolio .section-title{color:var(--white)}
#portfolio .section-title em{color:rgba(255,255,255,.75)}
#portfolio .section-intro{color:rgba(255,255,255,.55)}
.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem;margin-top:4rem}
.portfolio-item{background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;position:relative;cursor:pointer;transition:transform .4s var(--ease)}
.portfolio-item:nth-child(1){grid-column:span 5}
.portfolio-item:nth-child(2){grid-column:span 7}
.portfolio-item:nth-child(3){grid-column:span 4}
.portfolio-item:nth-child(4){grid-column:span 4}
.portfolio-item:nth-child(5){grid-column:span 4}
.portfolio-item:hover{transform:scale(.98)}
.portfolio-item-inner{padding-top:80%;position:relative}
.portfolio-item:nth-child(1) .portfolio-item-inner,.portfolio-item:nth-child(2) .portfolio-item-inner{padding-top:60%}
.portfolio-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:3rem;font-weight:300;color:rgba(255,255,255,.12);transition:color .4s}
.portfolio-item:hover .portfolio-bg{color:rgba(255,255,255,.22)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,47,38,.85) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.75rem 1.5rem;opacity:0;transition:opacity .4s var(--ease)}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.portfolio-title-overlay{font-family:var(--serif);font-size:1.15rem;font-weight:300;color:var(--white)}

/* ── TESTIMONIALS ── */
#testimonials{background:var(--bg);position:relative;overflow:hidden}
/* one small sand blob, bottom-right */
#testimonials .blob-testi{width:18vw;height:22vh;background:rgba(230,223,212,.5);bottom:-8%;right:-5%;transform:rotate(30deg);z-index:0}
.testimonials-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:4rem}
.testimonial-card{background:var(--white);padding:2.5rem 2rem;border-radius:3px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,47,38,.08)}
.testimonial-card:nth-child(2){background:var(--green);margin-top:-1.5rem}
.testimonial-card:nth-child(2) .tquote,.testimonial-card:nth-child(2) .ttext,.testimonial-card:nth-child(2) .tname{color:var(--white)}
.testimonial-card:nth-child(2) .trole{color:rgba(255,255,255,.55)}
.testimonial-card:nth-child(2) .tstar{color:rgba(255,255,255,.6)}
.testimonial-card:nth-child(2) .tavatar{background:rgba(255,255,255,.15);color:var(--white)}
.tquote{font-family:var(--serif);font-size:3rem;font-weight:300;color:var(--green);line-height:.8;margin-bottom:1.25rem}
.tstars{display:flex;gap:4px;margin-bottom:1.25rem}
.tstar{color:var(--green);font-size:1rem}
.ttext{font-family:var(--sans);font-size:1rem;font-style:normal;color:var(--dark);line-height:1.75;font-weight:400;margin-bottom:2rem}
.tauthor{display:flex;align-items:center;gap:1rem}
.tavatar{width:44px;height:44px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--green);font-weight:500;flex-shrink:0}
.tname{font-size:.95rem;font-weight:500;color:var(--dark)}
.trole{font-size:.85rem;color:var(--muted);margin-top:2px}

/* ── NEWSLETTER ── */
#newsletter{background:var(--sand);position:relative;overflow:hidden}
/* one small green blob top-right */
#newsletter .blob-nl{width:16vw;height:20vh;background:rgba(15,47,38,.07);top:-6%;right:-5%;transform:rotate(15deg);z-index:0}
.newsletter-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.newsletter-form-wrap{background:var(--white);padding:2.5rem;border-radius:4px;box-shadow:0 4px 24px rgba(15,47,38,.06)}
.newsletter-form-title{font-family:var(--serif);font-size:1.3rem;font-weight:300;color:var(--dark);margin-bottom:1.5rem}
.newsletter-row{display:flex;gap:.75rem}
.newsletter-input{flex:1;padding:.85rem 1rem;background:var(--bg);border:1px solid transparent;border-radius:2px;font-family:var(--sans);font-size:.9rem;color:var(--dark);outline:none;transition:border-color .3s}
.newsletter-input:focus{border-color:var(--green)}
.newsletter-note{font-size:.75rem;color:var(--muted);margin-top:.75rem}
.newsletter-perks{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}
.newsletter-perk{display:flex;align-items:flex-start;gap:.75rem}
.perk-icon{width:32px;height:32px;background:rgba(15,47,38,.08);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.perk-icon svg{width:15px;color:var(--green)}
.perk-title{font-size:.88rem;font-weight:500;color:var(--dark)}
.perk-desc{font-size:.8rem;color:var(--muted)}

/* ── CONTACT ── */
#contact{background:var(--sand)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start;margin-top:1rem}
.form-wrap{margin-top:-9rem}
.contact-points{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.5rem}
.contact-point{display:flex;gap:1.25rem;align-items:flex-start}
.contact-point-icon{width:42px;height:42px;flex-shrink:0;background:rgba(15,47,38,.08);border-radius:8px;display:flex;align-items:center;justify-content:center}
.contact-point-icon svg{width:18px;color:var(--green)}
.contact-point-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.contact-point-value{font-size:.95rem;color:var(--dark)}
.form-wrap{background:var(--white);padding:3rem 2.5rem;border-radius:4px;box-shadow:0 4px 32px rgba(15,47,38,.07)}
.form-title{font-family:var(--serif);font-size:1.6rem;font-weight:300;color:var(--dark);margin-bottom:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.form-label{font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dark)}
.form-input,.form-select,.form-textarea{padding:.85rem 1rem;background:var(--bg);border:1px solid transparent;border-radius:2px;font-family:var(--sans);font-size:.9rem;color:var(--dark);outline:none;transition:border-color .3s,background .3s;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--green);background:var(--white)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{appearance:none;cursor:pointer}
.form-submit{width:100%;margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:.7rem}
.form-note{font-size:.76rem;color:var(--muted);margin-top:1rem;text-align:center}
.form-privacy{display:flex;align-items:flex-start;gap:.65rem;margin-top:1rem;cursor:pointer}
.form-privacy input[type="checkbox"]{flex-shrink:0;width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:var(--green);cursor:pointer}
.form-privacy span{font-size:.8rem;color:var(--muted);line-height:1.5}
.form-privacy a{color:var(--green);text-decoration:underline}

/* ── FOOTER ── */
footer{background:var(--dark);color:rgba(255,255,255,.6);padding:5rem 5vw 3rem}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem;padding-bottom:4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand-name{font-family:var(--serif);font-size:1.5rem;font-weight:300;color:var(--white);margin-bottom:1rem}
.footer-brand-name span{font-style:italic}
.footer-desc{font-size:.875rem;line-height:1.8;color:rgba(255,255,255,.45);max-width:280px;margin-bottom:1.75rem}
.footer-socials{display:flex;gap:.75rem}
.social-link{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);text-decoration:none;font-family:var(--serif);font-style:italic;font-size:.75rem;transition:border-color .3s,color .3s,background .3s}
.social-link:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.06)}
.footer-col-title{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.5rem;font-weight:500}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.footer-links a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.88rem;transition:color .3s;cursor:pointer}
.footer-links a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:rgba(255,255,255,.25)}

/* ── BACK TO TOP ── */
.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:50;width:46px;height:46px;background:var(--green);color:var(--white);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s,background .3s;pointer-events:none}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:all}
.back-to-top:hover{background:var(--green-light)}

/* ── SUBPAGES ── */
.subpage{display:none;min-height:100vh;background:var(--bg)}
.subpage.active{display:block}

/* Styled hero for service subpages */
.subpage-hero{
  min-height:30vh;display:flex;align-items:flex-end;
  padding:120px 5vw 3rem;position:relative;overflow:hidden;
  background:var(--green);
}
.subpage-hero .blob-sp1{width:30vw;height:36vh;background:rgba(255,255,255,.05);top:-8%;right:-8%;transform:rotate(15deg);z-index:0}
.subpage-hero-content{position:relative;z-index:1;text-align:left}
.subpage-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500;margin-bottom:1.25rem}
.subpage-eyebrow::before{content:'';width:20px;height:1px;background:rgba(255,255,255,.4);display:block}
.subpage-title-hero{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;line-height:1.1;color:var(--white);margin-bottom:.5rem}
.subpage-title-hero em{font-style:italic;color:rgba(255,255,255,.65)}
/* ── SUBPAGE OPEN ANIMATION ── */
.subpage.active .subpage-back{animation:fadeUp .6s var(--ease) .05s both}
.subpage.active .subpage-eyebrow{animation:fadeUp .7s var(--ease) .15s both}
.subpage.active .subpage-title-hero{animation:fadeUp .9s var(--ease) .25s both}
.subpage.active .subpage-hero p{animation:fadeUp .8s var(--ease) .4s both}
.subpage.active .subpage-hero-content>*:last-child{animation:fadeUp .8s var(--ease) .45s both}

.subpage-back{display:flex;width:fit-content;align-items:center;gap:.6rem;font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.04em;cursor:pointer;border:none;background:rgba(255,255,255,.1);font-family:var(--sans);transition:all .25s;padding:.45rem 1rem;border-radius:2px;margin-bottom:1.5rem;text-decoration:none}
.subpage-back:hover{background:rgba(255,255,255,.18);color:var(--white)}

/* Legal subpages – simpler hero */
.subpage-hero-legal{background:var(--sand);min-height:30vh;display:flex;align-items:flex-end;padding:120px 5vw 3rem;position:relative;overflow:hidden}
.subpage-hero-legal .blob-legal{width:20vw;height:24vh;background:rgba(15,47,38,.06);top:-10%;right:-6%;transform:rotate(20deg);z-index:0}
.subpage-hero-legal .subpage-title-hero{color:var(--dark)}
.subpage-hero-legal .subpage-eyebrow{color:var(--green)}
.subpage-hero-legal .subpage-eyebrow::before{background:var(--green)}
.subpage-hero-legal .subpage-back{background:rgba(15,47,38,.08);color:var(--green)}
.subpage-hero-legal .subpage-back:hover{background:rgba(15,47,38,.15)}

.subpage-body-section{padding:5rem 5vw}
.subpage-body{max-width:720px}
.subpage-body h3{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--dark);margin:2.5rem 0 .75rem}
.subpage-body h4{font-size:1rem;font-weight:600;color:var(--dark);margin:1.5rem 0 .5rem}
.subpage-body p{font-size:.95rem;color:var(--dark);line-height:1.85;font-weight:300;margin-bottom:1rem}
.subpage-body ul{padding-left:1.5rem;margin-bottom:1rem}
.subpage-body ul li{font-size:.95rem;color:var(--dark);line-height:1.85;font-weight:300;margin-bottom:.4rem}
.subpage-divider{width:40px;height:1px;background:var(--green);margin:2.5rem 0}

/* Service subpage content sections */
.sp-intro-section{padding:5rem 5vw;display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:start;position:relative;overflow:hidden}
/* two small blobs side by side at bottom – green on light bg */
.sp-intro-section .blob-spi-a{width:14vw;height:18vh;background:rgba(15,47,38,.06);bottom:-6%;right:2%;transform:rotate(-18deg);z-index:0}
.sp-intro-section .blob-spi-b{width:10vw;height:14vh;background:rgba(15,47,38,.04);bottom:-4%;right:16%;transform:rotate(12deg);z-index:0}
.sp-intro-text{position:relative;z-index:1}
.sp-info-box{position:relative;z-index:1}
.sp-intro-text h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;line-height:1.2;color:var(--dark);margin-bottom:1.25rem}
.sp-intro-text h2 em{font-style:italic;color:var(--green)}
.sp-intro-text p{font-size:.95rem;color:var(--dark);line-height:1.85;font-weight:300;margin-bottom:1rem}
.sp-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
.sp-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--dark);font-weight:300}
.sp-list li::before{content:'→';color:var(--green);flex-shrink:0;margin-top:.1rem}
.sp-info-box{background:none;border-radius:0;padding:0;position:sticky;top:100px;align-self:start}
.sp-info-title{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--dark);margin-bottom:1.25rem}
.bgv-checklist{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:0;position:relative}
.bgv-checklist::before{content:'';position:absolute;left:13px;top:14px;bottom:14px;width:1px;background:rgba(15,47,38,.15)}
.bgv-checklist li{display:flex;gap:1rem;align-items:flex-start;font-size:.9rem;color:var(--dark);line-height:1.6;padding:.75rem 0;position:relative}
.bgv-checklist li::before{content:'✓';width:28px;height:28px;border-radius:50%;background:var(--green);color:var(--white);font-size:.8rem;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.sp-stat{display:flex;flex-direction:column;gap:.2rem;padding:.875rem 0;border-bottom:1px solid rgba(15,47,38,.1)}
.sp-stat:last-child{border-bottom:none}
.sp-stat-num{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--green);line-height:1}
.sp-stat-label{font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.sp-process{position:relative;z-index:1}
.sp-process-label{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--dark);margin-bottom:2rem;letter-spacing:normal;text-transform:none}
.sp-timeline{position:relative;padding-left:3.5rem}
.sp-timeline::before{content:'';position:absolute;left:.9rem;top:.4rem;bottom:.4rem;width:1px;background:rgba(15,47,38,.15)}
.sp-tl-step{position:relative;margin-bottom:1.75rem}
.sp-tl-step:last-child{margin-bottom:0}
.sp-tl-marker{position:absolute;left:-3.5rem;width:1.8rem;height:1.8rem;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--white);letter-spacing:.03em;top:.05rem;flex-shrink:0}
.sp-tl-content{}
.sp-tl-title{font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:.3rem;line-height:1.3}
.sp-tl-desc{font-size:.9rem;color:var(--muted);line-height:1.7}

/* Service subpage refs section */
.sp-refs-section{background:var(--green);padding:6rem 5vw;position:relative;overflow:hidden}
/* two small light blobs side by side – white on green */
.sp-refs-section .blob-ref-a{width:14vw;height:18vh;background:rgba(255,255,255,.05);bottom:5%;left:3%;transform:rotate(-12deg);z-index:0}
.sp-refs-section .blob-ref-b{width:10vw;height:14vh;background:rgba(255,255,255,.04);bottom:8%;left:17%;transform:rotate(20deg);z-index:0}
.sp-refs-section .section-tag{color:rgba(255,255,255,.5)}
.sp-refs-section .section-tag::before{background:rgba(255,255,255,.4)}
.sp-refs-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;line-height:1.15;color:var(--white);margin-bottom:3rem;position:relative;z-index:1}
#subpage-service-web .sp-refs-section{background:var(--sand)}
#subpage-service-web .sp-refs-section .blob-ref-a,#subpage-service-web .sp-refs-section .blob-ref-b{display:none}
#subpage-service-web .sp-refs-section .section-tag{color:var(--green)}
#subpage-service-web .sp-refs-section .section-tag::before{background:var(--green)}
#subpage-service-web .sp-refs-title{color:var(--dark)}
#subpage-service-web .service-ref-item{background:var(--green)}
#subpage-service-web .service-ref-item:hover{background:#0d3829}
.sp-refs-title em{font-style:italic;color:rgba(255,255,255,.6)}
.service-ref-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative;z-index:1}
.service-ref-item{background:rgba(255,255,255,.07);border-radius:3px;padding:2rem 1.5rem;transition:background .3s,transform .3s}
.service-ref-item:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}
.service-ref-item-name{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--white);margin-bottom:.4rem}
.service-ref-item-cat{font-size:.72rem;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.service-ref-item-desc{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.7}

/* ── PRICING / PAKETE ── */
.pricing-section{padding:6rem 5vw;background:var(--bg);position:relative}
.pricing-section-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;line-height:1.2;margin-bottom:1.25rem;max-width:720px}
.pricing-section-intro{color:var(--muted);font-size:1rem;line-height:1.8;max-width:680px;margin-bottom:3.5rem}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:end}
.pkg-card{background:var(--white);border:1px solid rgba(15,47,38,.1);border-radius:4px;padding:2.5rem 2rem;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pkg-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(15,47,38,.12)}
.pkg-featured{background:var(--green);border-color:var(--green)}
.pkg-badge{display:inline-block;background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .75rem;border-radius:2px;margin-bottom:1.25rem}
.pkg-name{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin-bottom:.5rem}
.pkg-featured .pkg-name{color:var(--white)}
.pkg-price{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--green);line-height:1;margin-bottom:1rem}
.pkg-featured .pkg-price{color:rgba(255,255,255,.85)}
.pkg-tagline{font-size:.875rem;color:var(--dark);line-height:1.6;margin-bottom:.6rem;font-weight:500}
.pkg-featured .pkg-tagline{color:rgba(255,255,255,.9)}
.pkg-sub{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:0}
.pkg-featured .pkg-sub{color:rgba(255,255,255,.55)}
.pkg-divider{height:1px;background:rgba(15,47,38,.1);margin:1.5rem 0}
.pkg-featured .pkg-divider{background:rgba(255,255,255,.15)}
.pkg-list-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}
.pkg-featured .pkg-list-label{color:rgba(255,255,255,.5)}
.pkg-list{list-style:none;padding:0;margin:0 0 1.25rem}
.pkg-list li{font-size:.92rem;color:var(--dark);line-height:1.5;padding:.35rem 0 .35rem 1.4rem;position:relative;border-bottom:1px solid rgba(15,47,38,.06)}
.pkg-list li:last-child{border-bottom:none}
.pkg-list li::before{content:'→';position:absolute;left:0;color:var(--green);font-size:.8rem;top:.4rem}
.pkg-featured .pkg-list li{color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.08)}
.pkg-featured .pkg-list li::before{color:rgba(255,255,255,.4)}
.pkg-ideal-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.pkg-featured .pkg-ideal-label{color:rgba(255,255,255,.5)}
.pkg-ideal{font-size:.9rem;color:var(--muted);line-height:1.6;font-style:italic}
.pkg-featured .pkg-ideal{color:rgba(255,255,255,.45)}

/* ── SUPPORT SECTION ── */
.support-section{padding:6rem 5vw;background:var(--sand);position:relative}
.support-section-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;line-height:1.2;margin-bottom:1.25rem;max-width:720px}
.support-section-intro{color:var(--muted);font-size:1rem;line-height:1.8;max-width:680px;margin-bottom:3rem}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem;align-items:end}
.support-card{background:var(--white);border:1px solid rgba(15,47,38,.1);border-radius:4px;padding:2rem 1.75rem;transition:box-shadow .3s}
.support-card:hover{box-shadow:0 8px 32px rgba(15,47,38,.1)}
.support-featured{background:var(--green);border-color:var(--green)}
.support-name{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.4rem}
.support-featured .support-name{color:var(--white)}
.support-price{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--green);line-height:1;margin-bottom:.75rem}
.support-per{font-size:.9rem;font-weight:400;opacity:.7}
.support-featured .support-price{color:rgba(255,255,255,.85)}
.support-tagline{font-size:.875rem;color:var(--dark);line-height:1.6;margin-bottom:.6rem;font-weight:500}
.support-featured .support-tagline{color:rgba(255,255,255,.9)}
.support-featured .pkg-divider{background:rgba(255,255,255,.15)}
.support-featured .pkg-list-label{color:rgba(255,255,255,.5)}
.support-featured .pkg-list li{color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.08)}
.support-featured .pkg-list li::before{color:rgba(255,255,255,.4)}
.support-note{font-size:.875rem;color:var(--muted);max-width:100%;display:flex;flex-direction:column;gap:.4rem;font-style:italic}

/* ── ADD-ONS SECTION ── */
.addon-section{padding:5rem 5vw;background:var(--bg)}
.addon-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;max-width:1100px}
.addon-title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;line-height:1.2;margin-bottom:1rem}
.addon-intro{font-size:.95rem;color:var(--muted);line-height:1.8;margin-bottom:.75rem}
.addon-label{font-size:.95rem;color:var(--muted);line-height:1.8;font-weight:400}
.addon-list{list-style:none;padding:0;margin:0}
.addon-list li{font-size:.95rem;color:var(--dark);padding:.5rem 0 .5rem 1.4rem;position:relative;border-bottom:1px solid rgba(15,47,38,.07)}
.addon-list li:last-child{border-bottom:none}
.addon-list li::before{content:'→';position:absolute;left:0;color:var(--green);font-size:.8rem;top:.55rem}

.pricing-note{text-align:left;margin-top:2rem;font-size:.875rem;color:var(--muted);font-style:italic}
/* ── PRICING CTA ── */
.pricing-cta-section{padding:5rem 5vw;background:var(--white);text-align:center}
.pricing-cta-question{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;margin-bottom:.75rem;color:var(--dark)}
.pricing-cta-text{font-size:.95rem;color:var(--muted);line-height:1.8;max-width:520px;margin:0 auto 2rem}

/* ── FORM PAKETAUSWAHL ── */
.pkg-group-wrapper{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s var(--ease)}
.pkg-group-wrapper.visible{max-height:800px;opacity:1}
.pkg-radio-group{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.25rem}
.pkg-radio-card{display:flex;align-items:center;gap:.65rem;border:1px solid rgba(15,47,38,.15);border-radius:3px;padding:.75rem .9rem;cursor:pointer;transition:border-color .22s,background .22s;background:var(--white);user-select:none}
.pkg-radio-card:hover{border-color:var(--green);background:rgba(15,47,38,.03)}
.pkg-radio-card:has(input:checked){border-color:var(--green);background:rgba(15,47,38,.05)}
.pkg-radio-card input[type=radio]{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid rgba(15,47,38,.3);border-radius:50%;flex-shrink:0;transition:all .2s;position:relative;cursor:pointer}
.pkg-radio-card input[type=radio]:checked{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--white)}
.pkg-radio-label{display:flex;flex-direction:column;gap:.1rem;line-height:1.3}
.pkg-radio-name{font-size:.82rem;color:var(--dark);font-weight:500}
.pkg-radio-price{font-size:.72rem;color:var(--muted)}
.pkg-radio-full{grid-column:1/-1}
.pkg-error{font-size:.78rem;color:#c0392b;margin-top:.4rem;display:block}

/* ── KLARO CONSENT MANAGER ── */
.klaro{font-family:'DM Sans',system-ui,sans-serif;font-size:16px}

/* ── NOTICE (Banner unten rechts) ── */
.klaro .cookie-notice{position:fixed;bottom:1.5rem;right:1.5rem;left:auto;max-width:400px;width:calc(100% - 3rem);background:#E6DFD4;border-radius:16px;border:1.5px solid #0F2F26;box-shadow:0 8px 40px rgba(15,47,38,.14);padding:1.75rem;z-index:9999}
/* Text */
.klaro .cookie-notice .cn-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;font-weight:400;color:#0F2F26;margin:0}
.klaro .cookie-notice p{font-size:.84rem;line-height:1.6;color:#5e5e5e;margin:0}
.klaro .cookie-notice a.cn-learn-more{color:#FDFCFA}
/* Buttons: alle in einer Reihe nebeneinander */
.klaro .cookie-notice .cn-body{display:flex;flex-direction:column;gap:.75rem}
.klaro .cookie-notice .cn-buttons{display:flex;flex-wrap:nowrap;gap:.6rem;margin-top:.1rem}
/* cn-learn-more ist ein Link direkt in cn-body – volle Breite, Outline-Stil */
.klaro .cookie-notice .cn-learn-more{white-space:normal;text-align:center;line-height:1.25;width:100%;background:transparent!important;color:#0F2F26!important;border:1.5px solid #0F2F26!important}
.klaro .cookie-notice .cn-learn-more:hover{background:rgba(15,47,38,.07)!important}

/* ── MODAL OVERLAY ── */
.klaro .cookie-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center}
.klaro .cookie-modal .cm-bg{position:absolute;inset:0;background:rgba(26,26,26,.45);backdrop-filter:blur(4px)}

/* ── MODAL BOX ── */
.klaro .cookie-modal .cm-modal{position:relative;background:#E6DFD4;border-radius:20px;max-width:500px;width:calc(100% - 2rem);max-height:85vh;overflow-y:auto;box-shadow:0 16px 60px rgba(15,47,38,.18);z-index:1;display:flex;flex-direction:column}
.klaro .cookie-modal .cm-header{padding:1.75rem 1.75rem 1.25rem;border-bottom:1px solid #d4ccc0;position:relative;background:#E6DFD4;border-radius:20px 20px 0 0}
.klaro .cookie-modal .cm-header h1,.klaro .cookie-modal .cm-header .title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:400;color:#0F2F26;margin-bottom:.4rem}
.klaro .cookie-modal .cm-header p{font-size:.84rem;color:#5e5e5e;line-height:1.6;margin:0}
/* Header-Ablehnen ausblenden */
.klaro .cookie-modal .cm-header .cn-decline{display:none!important}
/* Schließen-Button: dunkelgrün */
.klaro .cookie-modal .cm-header .hide,.klaro .hide{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:#0F2F26;font-size:1.4rem;line-height:1;padding:.25rem}
.klaro .hide svg{stroke:#0F2F26;width:16px;height:16px}
/* Modal Body: Sandfarbe */
.klaro .cookie-modal .cm-body{padding:1.25rem 1.5rem;flex:1;background:#E6DFD4}
/* Footer: Sandfarbe */
.klaro .cookie-modal .cm-footer{padding:1rem 1.5rem;border-top:1px solid #d4ccc0;background:#E6DFD4;border-radius:0 0 20px 20px}
.klaro .cookie-modal .cm-footer-buttons{display:flex;gap:.5rem;flex-wrap:nowrap;align-items:stretch}
/* "Realisiert mit Klaro!" kaum sichtbar, rechtsbündig */
.klaro .cm-footer .cm-powered-by,.klaro .cm-footer a{font-size:.65rem!important;color:rgba(26,26,26,.2)!important;text-decoration:none!important;display:block;text-align:right;margin-top:.5rem}
/* Keine Bullet-Punkte in der Dienste-Liste */
.klaro ul,.klaro li{list-style:none!important}

/* ── SERVICE- UND PURPOSE-EINTRÄGE ── */
.klaro .cm-service,.klaro .cm-purpose{padding:.8rem 0;border-bottom:1px solid rgba(15,47,38,.12)}
.klaro .cm-service:last-child,.klaro .cm-purpose:last-child{border-bottom:none}
.klaro .cm-service-title,.klaro .cm-purpose-title{font-weight:600;font-size:.88rem;color:#1A1A1A}
.klaro .cm-service p,.klaro .cm-purpose p{font-size:.8rem;color:#5e5e5e;line-height:1.5;margin:.2rem 0 0}
/* Dienste-Link (Ein-/Ausklappen) */
.klaro .cm-services-count{cursor:pointer;color:#0F2F26;font-size:.78rem;text-decoration:underline;display:inline-block;margin:.4rem 0 .2rem;background:none;border:none;padding:0}
/* Dienste-Liste: standardmäßig eingeklappt, bei .expanded sichtbar */
.klaro .cm-content{display:none}
.klaro .cm-content.expanded{display:block}

/* ── ALLE BUTTONS: einheitlich dunkelgrün ── */
.klaro .cm-btn,.klaro .cookie-notice .cn-learn-more{display:inline-flex;align-items:center;justify-content:center;padding:.58rem .9rem;border-radius:2px;font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .2s;border:none;text-decoration:none;line-height:1;flex:1;background:#0F2F26;color:#FDFCFA!important}
.klaro .cm-btn:hover,.klaro .cookie-notice .cn-learn-more:hover{background:#1a4a3a}
.klaro .cookie-notice .cn-learn-more{color:#0F2F26!important}
.klaro .cookie-notice .cn-learn-more:hover{background:rgba(15,47,38,.07)!important}

/* ── TOGGLE ── */
.klaro .cm-list-label{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.klaro .cm-required{display:none}
.klaro .slider{position:relative;display:inline-block;width:2.4rem;height:1.35rem;background:#b8b0a6;border-radius:999px;transition:background .25s;flex-shrink:0}
.klaro .slider::after{content:'';position:absolute;top:.18rem;left:.18rem;width:.99rem;height:.99rem;background:#FDFCFA;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.klaro .cm-list-input:checked+.cm-list-label .slider{background:#0F2F26}
.klaro .cm-list-input:checked+.cm-list-label .slider::after{transform:translateX(1.05rem)}
.klaro .cm-list-input{position:absolute;opacity:0;width:0;height:0}

/* Links (außer Buttons) */
.klaro a:not(.cm-btn):not(.cn-learn-more),.klaro a:visited:not(.cm-btn):not(.cn-learn-more){color:#0F2F26}

/* Responsive */
@media(max-width:520px){
  .klaro .cookie-notice{right:1rem;left:1rem;bottom:1rem;max-width:none;width:auto}
  .klaro .cookie-modal .cm-modal{border-radius:16px}
  .klaro .cookie-modal .cm-header,.klaro .cookie-modal .cm-body,.klaro .cookie-modal .cm-footer{padding-left:1.25rem;padding-right:1.25rem}
  .klaro .cookie-modal .cm-footer-buttons{flex-wrap:wrap}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #hero{grid-template-columns:1fr;padding-top:120px}
  .hero-visual{display:none}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .service-detail-inner{grid-template-columns:1fr}
  .service-ref-list{grid-template-columns:1fr 1fr}
  .portfolio-item:nth-child(1){grid-column:span 12}
  .portfolio-item:nth-child(2){grid-column:span 12}
  .portfolio-item:nth-child(3){grid-column:span 4}
  .portfolio-item:nth-child(4){grid-column:span 4}
  .portfolio-item:nth-child(5){grid-column:span 4}
  .testimonials-layout{grid-template-columns:1fr}
  .testimonial-card:nth-child(2){margin-top:0}
  .newsletter-inner{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr;gap:3rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:3rem}
  #about{grid-template-columns:1fr;gap:3rem}
  .about-image-wrap{max-width:340px;margin:0 auto}
  .sp-intro-section{grid-template-columns:1fr}
  .sp-info-box{position:static}
  .pricing-grid{grid-template-columns:1fr}
  .support-grid{grid-template-columns:1fr}
  .addon-inner{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .mobile-menu{display:flex}
  section{padding:5rem 5vw}
  .services-grid{grid-template-columns:1fr}
  .portfolio-grid{display:flex;flex-direction:column}
  .portfolio-item{width:100%}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .services-header{flex-direction:column;align-items:flex-start}
  .hero-bg-shape{display:none}
  .service-ref-list{grid-template-columns:1fr}
  .newsletter-row{flex-direction:column}
  .pkg-radio-group{grid-template-columns:1fr 1fr}

  /* Über mich: Bild anzeigen und unterhalb des Textes platzieren */
  #about{display:flex;flex-direction:column}
  .about-image-wrap{order:2;max-width:100%;width:100%}
  .about-img-frame{width:80%;max-width:320px;margin:0 auto}
  .about-text{order:1}

  /* Services: Intro-Text umbrechend statt abgeschnitten */
  .services-header .section-intro{white-space:normal!important;text-align:left!important}

  /* "Bald folgt mehr"-Karte auf Mobile ausblenden */
  .service-placeholder{display:none!important}

  /* Referenz-Karte: volle Breite */
  .service-ref-item{width:100%;box-sizing:border-box}
  .service-ref-grid{grid-template-columns:1fr}

  /* Portfolio-Platzhalter: Kreis rund halten */
  .portfolio-item [style*="border-radius:50%"]{flex-shrink:0;min-width:48px;min-height:48px}

  /* Kontakt: Formular überlappt nicht mehr */
  .form-wrap{margin-top:0}
  .contact-layout{display:flex;flex-direction:column;gap:2rem}

  /* Alle Blobs: vmin statt vw/vh mix – verhindert Verzerrung im Hochformat */
  #about .blob-about{width:35vmin;height:35vmin}
  #services .blob-services-a{width:22vmin;height:22vmin}
  #services .blob-services-b{width:18vmin;height:18vmin}
  #portfolio .blob-portfolio{width:25vmin;height:25vmin}
  #testimonials .blob-testi{width:22vmin;height:22vmin}
  #newsletter .blob-nl{width:20vmin;height:20vmin}
  .subpage-hero .blob-sp1{width:36vmin;height:36vmin}
  .subpage-hero-legal .blob-legal{width:28vmin;height:28vmin}
  .sp-intro-section .blob-spi-a{width:18vmin;height:18vmin}
  .sp-intro-section .blob-spi-b{width:12vmin;height:12vmin}
  .sp-refs-section .blob-ref-a{width:18vmin;height:18vmin}
  .sp-refs-section .blob-ref-b{width:12vmin;height:12vmin}
}