@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/Fraunces-Variable.woff2') format('woff2-variations'),
      url('/assets/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  font-style:normal;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'),
      url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
  font-style:normal;
}
/* Fraunces is a variable serif. Keep SOFT/WONK dialled down so headings read
   confident rather than quirky, and let optical size track the type size.   */
h1,h2,h3,h4,h5,h6,.font-display{
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 48;
  letter-spacing:-0.012em;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#f3f1ec;color:#33363b;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:#a58b60;}
a:hover{color:#8a7350;}
::selection{background:#e0d5c0;}
@keyframes fo-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes fo-fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
[data-carousel]{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
[data-carousel]::-webkit-scrollbar{display:none;}

/* hover helpers (override inline styles) */
.h-navy:hover{background:#5f5645 !important;}
.h-light:hover{background:#dcc9a4 !important;}
.h-ghost:hover{background:rgba(246,244,239,0.26) !important;}
.h-gold:hover{background:#f6f4ef !important;}
.h-ghostbtn:hover{border-color:#a58b60 !important;color:#8a7350 !important;}
.foot-link:hover{color:#fff !important;}
.nav-link:hover{color:#a58b60;}
.readmore:hover{color:#8a7350 !important;}
.svc{appearance:none;background:none;border:none;padding:0;cursor:pointer;flex:none;width:clamp(180px,15vw,208px);display:flex;flex-direction:column;align-items:center;gap:18px;font-family:inherit;color:inherit;}
.svc-circle{position:relative;width:clamp(160px,13.5vw,184px);height:clamp(160px,13.5vw,184px);border-radius:50%;background:#fbfaf7;border:1px solid #e5e0d4;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .2s,box-shadow .2s;}
.svc-plus{position:absolute;right:4px;bottom:4px;width:40px;height:40px;border-radius:50%;background:#fbfaf7;border:1px solid #a58b60;color:#a58b60;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
.svc:hover .svc-circle{border-color:#a58b60;transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,52,38,0.12);}
.svc:hover .svc-plus{background:#a58b60;color:#fbfaf7;}
.arrow:hover{background:#a58b60 !important;color:#fbfaf7 !important;border-color:#a58b60 !important;}
.modal-x:hover{background:#4d4639 !important;}
.modal-x-brown:hover{background:#4d4639 !important;}

/* nav responsive */
.nav-desktop{display:flex;align-items:center;gap:clamp(24px,2.6vw,40px);}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-burger span{display:block;width:24px;height:2px;background:#33363b;}
.nav-mobile{display:none;border-top:1px solid #e2ddd2;background:#f3f1ec;padding:8px clamp(20px,5vw,40px) 22px;flex-direction:column;gap:2px;}
.nav-mobile a{padding:13px 4px;font-size:1.05rem;font-weight:600;text-decoration:none;color:#4a4d52;border-bottom:1px solid #e7e2d8;}
.nav-mobile a:last-child{border-bottom:none;}
.nav-mobile .m-cta{margin-top:10px;text-align:center;background:#4d4639;color:#f6f4ef;font-weight:700;padding:14px;border-radius:999px;border-bottom:none;font-family:'Fraunces',Georgia,serif;}
@media (max-width:920px){
  .nav-desktop{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile.open{display:flex;}
}

/* therapy pages */
.h-ghost-l:hover{border-color:#a58b60 !important;color:#8a7350 !important;}
.rel-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,52,38,0.12);border-color:#a58b60 !important;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:'+';float:right;color:#a58b60;font-size:1.4rem;font-weight:400;line-height:1;}
details[open] summary::after{content:'\2013';}
.svc-chip:hover{border-color:#a58b60 !important;color:#8a7350 !important;background:#fff !important;}

/* ---------- Terapije dropdown: desktop ---------- */
.nav-dd{position:relative;display:inline-flex;}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;font-size:0.96rem;font-weight:600;text-decoration:none;color:#4a4d52;cursor:pointer;}
.dd-chev{transition:transform .2s ease;flex:none;}
.nav-dd:hover .dd-chev,.nav-dd:focus-within .dd-chev{transform:rotate(180deg);}
.nav-dd:hover .nav-dd-btn,.nav-dd:focus-within .nav-dd-btn{color:#a58b60;}
/* invisible bridge so the menu does not close when crossing the gap */
.nav-dd-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-dd-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:236px;background:#fbfaf7;border:1px solid #e5e0d4;border-radius:16px;
  padding:8px;display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(60,52,38,0.14);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:70;
}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dd-menu a{
  display:block;padding:10px 14px;border-radius:10px;
  font-size:0.93rem;font-weight:600;color:#4a4d52;text-decoration:none;
  white-space:nowrap;transition:background .15s ease,color .15s ease;
}
.nav-dd-menu a:hover{background:#eae7df;color:#8a7350;}

/* ---------- Terapije dropdown: mobile ---------- */
.m-sub-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 4px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:1.05rem;font-weight:600;
  color:#4a4d52;background:none;border:none;border-bottom:1px solid #e7e2d8;
  cursor:pointer;text-align:left;
}
.m-sub-ico{font-size:1.35rem;line-height:1;color:#a58b60;font-weight:400;}
.m-sub-btn[aria-expanded="true"] .m-sub-ico{color:#8a7350;}
.m-sub{display:none;flex-direction:column;padding:4px 0 8px 14px;border-left:2px solid #e0d5c0;margin:6px 0 6px 4px;}
.m-sub.open{display:flex;}
.m-sub a{padding:11px 4px !important;font-size:0.98rem !important;border-bottom:none !important;color:#5b5850 !important;}
.m-sub a:hover{color:#a58b60 !important;}
.m-sub-all{font-weight:700 !important;color:#a58b60 !important;}

/* ---------- partner marquee: auto-scrolls, also drag/swipeable ---------- */
.mq-viewport{
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* old Edge */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;     /* don't trigger browser back-swipe */
}
.mq-viewport::-webkit-scrollbar{display:none;height:0;}
.mq-viewport.is-dragging{cursor:grabbing;}
.mq-viewport.is-dragging .mq-track{user-select:none;}
.mq-viewport img{pointer-events:none;-webkit-user-drag:none;user-select:none;}

/* ---------- responsive safety net ---------- */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video,iframe{max-width:100%;}
h1,h2,h3{overflow-wrap:break-word;}
p,li,blockquote,figcaption{overflow-wrap:break-word;}

/* long unbroken strings (emails, URLs) must not push the layout */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere;}

/* tap targets: keep interactive elements finger-sized on touch devices */
@media (hover:none) and (pointer:coarse){
  .nav-mobile a,.m-sub a,.m-sub-btn{min-height:44px;display:flex;align-items:center;}
  .readmore{padding:6px 0;}
}

/* very small phones */
@media (max-width:400px){
  .mq-viewport .mq-track > div{width:150px !important;height:54px !important;}
}