/* Klinika Elit — shared components added after the first prototype:
   "coming soon" notice, accordions, service cards, care model, left-aligned service pages */

/* ---------- "uskoro dostupno" notice ---------- */
.soon-toast{
  position:fixed; left:50%; bottom:28px; z-index:90; width:min(92vw, 440px);
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--navy); color:var(--warm); border-radius:16px; padding:16px 20px;
  box-shadow:0 18px 40px rgba(0,44,67,0.28); display:flex; flex-direction:column; gap:4px;
  transition:opacity .35s ease, transform .4s cubic-bezier(.16,.8,.3,1);
}
.soon-toast.show{opacity:1; transform:translate(-50%, 0);}
.soon-toast b{font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--green);}
.soon-toast span{font-size:14.5px; line-height:1.5; color:rgba(255,255,242,0.92);}

/* ---------- subpages: scroll badge removed, content flush with the left margin ---------- */
#spineBadge{display:none !important;}
.intro-copy .wrap{max-width:1200px;}
.intro-copy p{max-width:820px;}

/* ---------- accordion (shared by all service pages) ---------- */
.accordion{border-top:1px solid var(--border);}
.acc-item{border-bottom:1px solid var(--border); scroll-margin-top:90px;}
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--font-body);
}
.acc-trigger h4{font-size:17px; font-weight:700; color:var(--navy); transition:color .3s ease;}
.acc-trigger:hover h4{color:var(--teal);}
.acc-plus{position:relative; width:22px; height:22px; flex:0 0 auto;}
.acc-plus::before, .acc-plus::after{content:''; position:absolute; background:var(--teal); border-radius:2px; transition:transform .35s cubic-bezier(.16,.8,.3,1), opacity .35s ease;}
.acc-plus::before{left:0; top:50%; width:100%; height:2.5px; transform:translateY(-50%);}
.acc-plus::after{top:0; left:50%; width:2.5px; height:100%; transform:translateX(-50%);}
.acc-item.open .acc-plus::after{opacity:0; transform:translateX(-50%) rotate(90deg);}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.8,.3,1);}
.acc-panel-inner{padding:0 0 30px; color:var(--navy); font-size:16.5px; line-height:1.7; max-width:820px;}
.acc-panel-inner p{margin-bottom:12px;}
.acc-panel-inner p:last-child{margin-bottom:0;}
.acc-panel-inner h5{font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin:20px 0 8px;}
.acc-list{list-style:none; margin:4px 0 14px; padding:0;}
.acc-list li{position:relative; padding:5px 0 5px 22px;}
.acc-list li::before{content:''; position:absolute; left:2px; top:15px; width:8px; height:8px; border-radius:50%; background:linear-gradient(120deg, var(--teal), var(--green));}
.acc-list li b{color:var(--navy);}
.acc-soon{display:inline-block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal);}
.acc-link{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-weight:700; color:var(--teal); border-bottom:2px solid var(--green); padding-bottom:3px;}
.acc-link svg{width:16px; height:16px;}
.svc-block{margin-top:56px;}
.svc-block:first-of-type{margin-top:0;}
.svc-lead{max-width:820px; font-size:19.3px; line-height:1.65; color:var(--navy); margin-bottom:28px;}
.glossary{max-width:820px; margin-top:22px; padding:18px 22px; border-radius:16px; background:var(--mint); color:var(--navy); font-size:15.5px; line-height:1.6;}
.glossary b{color:var(--navy);}

/* ---------- "Sve usluge": full-width clickable cards with icons (same look as the homepage) ---------- */
.services-sec .service-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.service-card{
  background:var(--teal); border:1.5px solid var(--teal); border-radius:18px; padding:28px 26px 22px;
  min-height:310px; display:flex; flex-direction:column; outline:none; text-decoration:none;
  transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease, background .4s ease, border-color .4s ease;
}
.service-card:hover, .service-card:focus{transform:translateY(-8px); background:var(--green); border-color:var(--green); box-shadow:0 20px 40px rgba(0,44,67,0.14);}
.service-icon{position:relative; width:56px; height:56px; margin-bottom:18px;}
.service-icon img{width:100%; height:100%; display:block; transition:opacity .3s ease;}
.service-icon img.icon-hover{position:absolute; top:0; left:0; opacity:0;}
.service-card:hover .icon-default, .service-card:focus .icon-default,
.service-bio-banner:hover .icon-default, .service-bio-banner:focus .icon-default{opacity:0;}
.service-card:hover .icon-hover, .service-card:focus .icon-hover,
.service-bio-banner:hover .icon-hover, .service-bio-banner:focus .icon-hover{opacity:1;}
.service-badge{color:var(--warm); font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.2; letter-spacing:.02em; margin-bottom:14px; margin-top:10px; min-height:2.4em;}
.service-card p{font-size:16.8px; color:var(--warm); margin-bottom:14px; line-height:1.55;}
.service-more{display:flex; justify-content:flex-end; margin-top:auto;}
.service-more .mega-arrow-btn{margin-right:0; background:var(--warm); color:var(--teal);}
.service-card:hover .service-more .mega-arrow-btn, .service-card:focus .service-more .mega-arrow-btn{background:var(--teal); color:var(--warm); transform:translateX(3px);}
.service-bio-banner{
  display:flex; align-items:center; gap:28px; margin-top:18px;
  background:var(--navy); border:1.5px solid var(--navy); border-radius:18px; padding:26px 32px;
  text-decoration:none; outline:none; transition:background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.16,.8,.3,1);
}
.service-bio-banner:hover, .service-bio-banner:focus{background:var(--green); border-color:var(--green); transform:translateY(-4px);}
.service-bio-banner .service-icon{margin-bottom:0; flex:0 0 auto;}
.service-bio-banner .service-bio-text{flex:1 1 auto; min-width:0;}
.service-bio-banner h3{color:var(--warm); font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.2; letter-spacing:.02em; margin-bottom:6px;}
.service-bio-banner p{font-size:16.8px; color:var(--warm); line-height:1.55; margin:0;}
.service-bio-banner .service-more{flex:0 0 auto;}
.service-bio-banner:hover .mega-arrow-btn, .service-bio-banner:focus .mega-arrow-btn{background:var(--teal); color:var(--warm); transform:translateX(3px);}
@media (max-width:900px){ .services-sec .service-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:700px){ .services-sec .service-grid{grid-template-columns:1fr;} .service-bio-banner{flex-wrap:wrap;} }

/* ---------- care model (replaces the screenshot from the presentation) ---------- */
.care-model{margin-top:8px;}
.cm-board{
  position:relative; background:var(--mint); border-radius:24px; padding:40px 28px 34px;
  display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-areas:
    "bol  dijag neuro"
    "bol  pac   neuro"
    "fizi band  orto";
  gap:22px 20px; align-items:center;
}
.cm-node{background:var(--warm); border:1.5px solid var(--border); border-radius:16px; padding:18px 20px; text-align:center;}
.cm-node h4{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:6px;}
.cm-node p{font-size:14.5px; color:var(--navy); line-height:1.5;}
.cm-dijag{grid-area:dijag; background:var(--navy); border-color:var(--navy);}
.cm-dijag h4{color:var(--warm);} .cm-dijag p{color:rgba(255,255,242,0.85);}
.cm-bol{grid-area:bol;} .cm-neuro{grid-area:neuro;} .cm-fizi{grid-area:fizi;} .cm-orto{grid-area:orto;}
.cm-pac{
  grid-area:pac; justify-self:center; width:210px; height:210px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--green)); color:var(--warm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.cm-pac b{font-family:var(--font-display); font-weight:500; font-size:26px; line-height:1.1;}
.cm-pac span{font-size:14px; margin-top:6px; opacity:.95;}
.cm-band{grid-area:band; text-align:center; font-size:14.5px; font-weight:600; color:var(--navy); background:var(--warm); border-radius:30px; padding:12px 18px; border:1.5px solid var(--border);}
@media (max-width:760px){
  .cm-board{grid-template-columns:1fr; grid-template-areas:"dijag" "pac" "bol" "neuro" "orto" "fizi" "band"; padding:26px 18px;}
  .cm-pac{width:180px; height:180px;}
}

/* ---- service hero: kicker acts as h1; descriptive h1 matches section headings ---- */
.page-hero h1.kicker{font-family:inherit; font-size:14px !important; font-weight:700 !important; letter-spacing:.09em !important; text-transform:uppercase; color:var(--teal) !important; line-height:1.4; margin:0 0 4px; max-width:none; display:block;}
.page-hero h1.h-sec{font-weight:400 !important;}

/* ---- breadcrumb aligned with page margins ---- */
.wrap.breadcrumb{padding-left:20px; padding-right:20px;}

/* service pages: tighter gap between hero buttons and the next section */
.page-hero.svc-hero{padding-bottom:24px !important;}

/* legal / privacy page */
.legal-sec{padding:0 0 100px;}
.legal-block{max-width:920px;}
.legal-block{margin-bottom:44px;}
.legal-block h2{font-size:clamp(24px,2.6vw,31px); margin-bottom:14px;}
.legal-block p{font-size:17.5px; line-height:1.75; color:var(--navy); margin-bottom:14px;}
.legal-block a{color:var(--teal); text-decoration:underline; text-underline-offset:3px;}

/* ---- shared text measure (set by site.js from the footer "Usluge" column) ---- */
html.has-measure .page-hero:not(.page-hero-c) h1, html.has-measure .page-hero:not(.page-hero-c) p.lead, html.has-measure .page-hero:not(.page-hero-c) p,
html.has-measure .section-head, html.has-measure .svc-lead, html.has-measure .split-text,
html.has-measure .intro-copy p, html.has-measure .legal-block, html.has-measure .feature-row p,
html.has-measure .about-chapter{max-width:var(--measure) !important;}

/* never leave a single word alone on the last line (JS adds the same rule for older browsers) */
p, li, h1, h2, h3, h4{text-wrap:pretty;}

/* ---- centered page hero with the homepage's text effect ---- */
.page-hero.page-hero-c{position:relative; overflow:hidden; text-align:center; padding:56px 0 40px !important; min-height:0;}
.page-hero-c .wrap{position:relative; z-index:2;}
.page-hero-c::before, .page-hero-c::after{content:""; position:absolute; z-index:1; border-radius:50%; pointer-events:none;}
.page-hero-c::before{width:560px; height:560px; left:-180px; top:-240px; background:radial-gradient(circle, rgba(0,144,171,.15), rgba(0,144,171,0) 68%); animation:hcFloat 18s ease-in-out infinite alternate;}
.page-hero-c::after{width:520px; height:520px; right:-160px; bottom:-300px; background:radial-gradient(circle, rgba(135,198,99,.18), rgba(135,198,99,0) 68%); animation:hcFloat 22s ease-in-out infinite alternate-reverse;}
@keyframes hcFloat{from{transform:translate(0,0) scale(1);} to{transform:translate(60px,40px) scale(1.12);}}
@keyframes hcIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.page-hero-c .hc-kicker{display:block; margin:0 0 16px; animation:hcIn 1s cubic-bezier(.16,.8,.3,1) both;}
.page-hero.page-hero-c h1.hc-title{font-family:var(--font-display); font-weight:400 !important; font-size:clamp(40px,5.4vw,70px); line-height:1.06; letter-spacing:-.01em; color:var(--navy); max-width:none; margin:0 auto; text-align:center; text-transform:none;}
.hc-1, .hc-2{display:block;}
.hc-1{color:var(--navy); animation:hcIn 1.3s cubic-bezier(.16,.8,.3,1) .1s both;}
.hc-2{background-image:linear-gradient(100deg,var(--teal) 10%,var(--green) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; animation:hcIn 1.3s cubic-bezier(.16,.8,.3,1) .35s both;}
.page-hero.page-hero-c p.lead{max-width:700px; margin:26px auto 0; text-align:center; animation:hcIn 1.2s cubic-bezier(.16,.8,.3,1) .7s both;}
.page-hero.page-hero-c p.lead + p.lead{animation-delay:.8s;}
.page-hero-c .cta-row{justify-content:center; animation:hcIn 1s ease .95s both;}
@media (prefers-reduced-motion:reduce){ .page-hero-c *, .page-hero-c::before, .page-hero-c::after{animation:none !important;} }

/* ---- hero fills the screen like the homepage; white on top, stronger gradient toward the bottom ---- */
.page-hero.page-hero-c{display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 150px); margin-top:14px; padding:70px 0 90px !important;
  background:linear-gradient(180deg, rgba(255,255,242,0) 0%, rgba(255,255,242,0) 38%, rgba(0,144,171,.10) 68%, rgba(135,198,99,.30) 100%);}
.page-hero-c::before, .page-hero-c::after{display:none !important;}
.page-hero-c .wrap{width:100%;}

/* ---- spacing: first section after a page hero uses the homepage rhythm ---- */
.page-hero-c + section{padding-top:90px !important;}

/* ---- O nama: story + founders (vertical clips, staggered along the text, drifting up on scroll) ---- */
.story-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:stretch;}
.founders{position:relative; display:flex; flex-direction:column; justify-content:space-between;}
.founder{width:80%; min-width:0; margin:0; will-change:transform; position:relative;}
.founder.f1{align-self:flex-start; z-index:1;}
.founder.f2{align-self:flex-end; z-index:2;}
.founder-media{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--mint); box-shadow:0 14px 40px rgba(0,44,67,.14);}
.founder-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.founder-tint{position:absolute; inset:0; background:var(--navy); opacity:.10; pointer-events:none;}
.founder figcaption{padding-top:16px;}
.founder figcaption h4{font-family:var(--font-body); font-size:16px; font-weight:700; color:var(--navy); line-height:1.35; margin:0 0 3px;}
.founder figcaption p{font-size:17.5px; font-weight:500; line-height:1.45; color:var(--navy); margin:0;}
@media (max-width:960px){
  .story-grid{grid-template-columns:1fr; gap:44px;}
  .founders{flex-direction:row; justify-content:space-between; gap:18px; padding-top:0 !important;}
  .founder{width:calc(50% - 9px);} .founder.f2{margin-bottom:0 !important; align-self:flex-start;}
}
@media (max-width:480px){ .founder figcaption h4{font-size:14.5px;} .founder figcaption p{font-size:15px;} }

/* ---- two-sided gradient: white at the top, deepest in the middle of the page, fading back to white at the bottom ---- */
body:is(:has(.page-hero-c), .has-gradient){position:relative; background:var(--warm); isolation:isolate;}
body:is(:has(.page-hero-c), .has-gradient)::before{content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, #FFFFF2 0, #FFFFF2 34vh, #E3F4EA 80vh, #DAF0C8 130vh, #D3EDBD 50%, #DAF0C8 72%, #EEF8E6 90%, #FFFFF2 100%);}
body:is(:has(.page-hero-c), .has-gradient) .page-hero.page-hero-c{margin-top:0; background:none;}
body:is(:has(.page-hero-c), .has-gradient) .services-sec{background:transparent;}

/* ---- O nama: video beside "Zašto smo drugačiji"; text untouched, video bleeds off the right edge ---- */
.tour-row{position:relative;}
.tour-box{position:absolute; top:50%; transform:translateY(calc(-50% + var(--py, 0px))); will-change:transform;
  --edge:max(20px, (100vw - 1200px) / 2 + 20px);
  right:calc(-1 * var(--edge));
  width:calc(100% - var(--measure, 640px) - 64px + var(--edge));}
.tour-box.reveal, .tour-box.reveal.in{transform:translateY(calc(-50% + var(--py, 0px))); transition:opacity .8s ease;}
.tour-box .peek{position:relative; height:auto; max-height:none; aspect-ratio:16/9; overflow:hidden; background:var(--navy); cursor:pointer; border-radius:20px 0 0 20px;}
.tour-box .peek::before{display:none;}
.tour-box .peek video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:none; transform:none;}
.tour-fs{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,242,.92); color:var(--navy); font-size:13.5px; font-weight:600; transition:transform .3s ease;}
.tour-fs svg{width:16px; height:16px;}
.tour-box .peek:hover .tour-fs{transform:scale(1.05);}
.tour-box .peek:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}
@media (max-width:960px){ .tour-box{position:static; transform:none !important; width:auto; margin:36px calc(-1 * var(--edge)) 0 0;} .tour-box .peek{aspect-ratio:16/10;} }

/* ---- O nama: hospital director's clip (second founder) bleeds off the right edge ---- */
.founders{--edge:max(20px, (100vw - 1200px) / 2 + 20px);}
.founder.f2{margin-right:calc(-1 * var(--edge));}
.founder.f2 .founder-media{border-radius:18px 0 0 18px;}
@media (max-width:960px){ .founder.f2{margin-right:0 !important;} .founder.f2 .founder-media{border-radius:18px;} }

/* ---- homepage rhythm: generous air between sections so the text can breathe ---- */
.split-section, .intro-copy, .legal-sec{padding-top:130px !important; padding-bottom:130px !important;}
.page-hero-c + section{padding-top:130px !important;}
.about-chapter{margin-top:150px;}

/* full-screen symbol only (dark blue) */
.tour-fs{padding:0 !important; width:46px; height:46px; justify-content:center; gap:0 !important; background:rgba(255,255,242,.9) !important; color:var(--navy) !important;}
.tour-fs svg{width:22px !important; height:22px !important; stroke-width:2.2;}
/* full-screen button: blue circle, matches the site's arrow buttons */
.tour-fs{background:var(--teal) !important; color:var(--warm) !important; width:48px; height:48px; box-shadow:0 6px 18px rgba(0,44,67,.25); transition:background .3s ease, transform .3s ease;}
.tour-box .peek:hover .tour-fs{background:var(--navy) !important; transform:scale(1.08);}

/* ---- Naš tim: names first, gradient rule, roles in teal; light blue page gradient ---- */
body:has(.team-roster)::before{background:linear-gradient(180deg, #FFFFF2 0, #FFFFF2 34vh, #E3F3F8 80vh, #D8EDF5 130vh, #CFE8F3 50%, #D8EDF5 72%, #EEF7FA 90%, #FFFFF2 100%);}
.team-roster{padding:0 0 130px;}
.roster{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:64px; row-gap:0;}
.person{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0;}
.person h3{font-family:var(--font-display); font-weight:500; font-size:clamp(26px, 2.6vw, 33px); line-height:1.15; color:var(--navy); margin:0; align-self:end;}
.person .p-line{height:2px; border-radius:2px; background:linear-gradient(90deg, var(--teal), var(--green)); margin:18px 0 16px;}
.person .p-roles{list-style:none; padding:0 0 76px; margin:0; display:flex; flex-direction:column; gap:4px; align-content:start;}
.person .p-roles li{font-size:17.5px; font-weight:400; line-height:1.45; color:var(--navy);}
@supports not (grid-template-rows: subgrid){ .person{display:block;} .person h3{min-height:2.3em;} .roster{row-gap:0;} }
@media (max-width:960px){ .roster{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px;} }
@media (max-width:560px){ .roster{grid-template-columns:1fr;} .person h3{min-height:0;} }

/* ---- O nama on phones/tablets: clips sit below their texts and keep the scroll animation ---- */
@media (max-width:960px){
  .founders{flex-direction:column !important; justify-content:flex-start !important; gap:36px; padding-top:0 !important;}
  .founder{width:82% !important; max-width:440px;}
  .founder.f1{align-self:flex-start;}
  .founder.f2{align-self:flex-end; margin:0 !important;}
  .founder.f2 .founder-media{border-radius:18px;}
  .tour-box{position:static !important; width:auto !important; margin:40px calc(-1 * var(--edge)) 0 0 !important; transform:translateY(var(--py, 0px)) !important;}
  .tour-box .peek{border-radius:18px 0 0 18px;}
}

/* ---- service pages: intro text under the hero is centred; the accordions stay as they are ---- */
.svc-page .section-head{margin-left:auto; margin-right:auto; text-align:center;}
.svc-page .svc-lead{margin-left:auto; margin-right:auto; text-align:center;}
.svc-page .intro-copy p{margin-left:auto; margin-right:auto; text-align:center;}
.svc-page .accordion{text-align:left;}
.acc-group-title{font-family:var(--font-display); font-weight:400; font-size:clamp(26px, 2.6vw, 33px); line-height:1.15; color:var(--navy); margin:0 0 22px;}
.acc-group-second{margin-top:72px;}
.acc-group-title{text-align:center; margin:64px 0 34px;}
.acc-group-second{margin-top:104px;}

/* ---- one spacing standard on every service page ----
   kicker -> heading 18 | heading -> text 24 | paragraph -> paragraph 20 | text -> list 56 | list -> banner 56 */
.svc-page .section-head{margin-bottom:24px !important;}
.svc-page .section-head:has(+ .accordion){margin-bottom:56px !important;}
.svc-page .section-head p{margin-top:16px;}
.svc-page .svc-lead{margin-top:0; margin-bottom:56px !important;}
.svc-page .svc-lead:has(+ .svc-lead){margin-bottom:20px !important;}
.svc-page .svc-lead + .svc-lead{margin-top:0 !important;}
.svc-page .intro-copy p{margin-bottom:20px !important;}
.svc-page .intro-copy p:last-child{margin-bottom:0 !important;}
.svc-page .page-hero-c p.lead + p.lead{margin-top:20px !important;}
.svc-page .accordion + .service-bio-banner, .svc-page .service-bio-banner{margin-top:56px !important;}
.svc-page .acc-panel-inner{color:var(--navy) !important; font-size:16.5px !important; max-width:820px !important;}
.svc-page .acc-panel-inner p{margin-bottom:14px;}
.svc-page .acc-panel-inner p:last-child{margin-bottom:0;}
.svc-page .acc-group-title{margin:0 0 34px !important;}
.svc-page .svc-lead + .acc-group-title, .svc-page .section-head + .acc-group-title{margin-top:0 !important;}
.svc-page .acc-group-second{margin-top:72px !important;}
.svc-page .section-head:has(+ .service-grid, + .care-model, + .feature-row, + .service-bio-banner){margin-bottom:44px !important;}

/* menu: Bioregenerativna panel is blue, turns green on hover / click */
a.mega-bio-panel{background:var(--teal);}
a.mega-bio-panel:hover, a.mega-bio-panel:focus, a.mega-bio-panel:active{background:var(--green);}

/* service pages: page gradient runs from the lightest blue into green and fades out at the bottom */
body.svc-page:has(.page-hero-c)::before{background:linear-gradient(180deg, #FFFFF2 0, #FFFFF2 30vh, #E6F4F9 70vh, #DDF0F1 120vh, #D7EEDC 50%, #D6EDBE 66%, #E9F5DC 86%, #FFFFF2 100%);}

/* left-aligned closing text above the links */
.svc-page .svc-lead.svc-left{margin-left:0 !important; margin-right:auto; text-align:left;}
.svc-page .svc-lead.svc-end{margin-top:72px !important; margin-bottom:24px !important;}

/* feature rows follow the same rhythm and type as the accordion lists */
.svc-page .feature-row{padding:24px 0 !important; border-top:none !important; border-bottom:1px solid var(--border) !important; gap:18px;}
.svc-page .acc-group-title + .feature-row{border-top:1px solid var(--border) !important;}
.svc-page .feature-row h4{font-size:17px !important; font-weight:700; color:var(--navy) !important; margin-bottom:6px !important;}
.svc-page .feature-row p{font-size:16.5px !important; line-height:1.7 !important; color:var(--navy) !important;}
.svc-page .feature-row .fico{margin-top:3px;}

/* service pages: hero is as tall as its content (like Neurohirurgija), so the first heading below sits just as high on every page */
.svc-page .page-hero.page-hero-c{min-height:0 !important; padding:80px 0 90px !important;}
@media (max-width:700px){ .svc-page .page-hero.page-hero-c{padding:48px 0 56px !important;} }

#forma{scroll-margin-top:110px;}

/* Usluge page: services block identical to the homepage */
.svc-page .services-sec .section-head{max-width:640px !important; margin-bottom:52px !important;}
.svc-page .page-hero-c + .services-sec{padding-top:30px !important;}

/* Kontakt: no hero, the form comes first */
.has-gradient .split-section{padding-top:56px !important;}

/* ---- map: tinted picture of the location, clickable, with a clinic-blue pin on no. 25 ---- */
.map-embed{height:auto !important;}
.map-pic{position:relative; display:block; border-radius:15px; overflow:hidden; line-height:0; background:#8CC9D6;}
.map-pic img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,.8,.3,1);}
.map-pic:hover img{transform:scale(1.04);}
.map-pin{position:absolute; left:47.03%; top:48%; width:40px; height:52px; transform:translate(-50%,-100%); filter:drop-shadow(0 6px 8px rgba(0,44,67,.35)); pointer-events:none; transition:transform .3s ease;}
.map-pin svg{display:block;}
.map-pic:hover .map-pin{transform:translate(-50%,-108%);}
.map-open{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; background:var(--teal); color:var(--warm); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,44,67,.25); transition:background .3s ease, transform .3s ease;}
.map-open svg{width:20px; height:20px;}
.map-pic:hover .map-open{background:var(--navy); transform:scale(1.08);}
.map-pic:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}
.map-credit{position:absolute; left:8px; bottom:6px; font-size:10px; line-height:1; color:rgba(0,44,67,.7); background:rgba(255,255,242,.75); padding:3px 6px; border-radius:6px;}

/* contact + location cards are always the same height; the message field grows to fill the form card */
.contact-grid{align-items:stretch !important;}
.contact-card, .footer-contact-card{display:flex; flex-direction:column;}
.contact-card form.js-contact-form, .footer-contact-card form.js-contact-form{display:flex; flex-direction:column; flex:1 1 auto;}
.js-contact-form .form-field:has(textarea){flex:1 1 auto; display:flex; flex-direction:column;}
.js-contact-form .form-field textarea{flex:1 1 auto; min-height:140px; resize:none;}

/* contact / location texts: same navy styling everywhere (no grey) */
.loc-row{color:var(--navy) !important;}
.loc-hours{color:var(--navy) !important; font-size:13.5px; margin-top:14px; line-height:1.9;}
.loc-hours b{color:var(--navy); display:block; margin-bottom:4px;}
.loc-hours-row{display:flex; gap:8px; margin-bottom:2px;}
.loc-hours-row span:first-child{min-width:64px;}
.loc-hours-time{font-weight:700; color:var(--navy);}
.contact-call{color:var(--navy) !important;}
.form-note{display:none !important;}

.loc-row a{color:var(--navy); border-bottom:1.5px solid transparent; transition:color .3s ease, border-color .3s ease;}
.loc-row a:hover, .loc-row a:focus{color:var(--teal); border-color:var(--teal);}

/* footer: cover any hairline seam between the wave and the navy block */
footer{box-shadow:0 -6px 0 var(--navy); position:relative;}
/* map fills its gradient frame exactly (no extra frame showing around the picture) */
.map-embed{display:flex !important; min-height:0 !important; flex:1 1 auto;}
.map-pic{flex:1 1 auto; width:100%; min-height:200px;}
.map-pic img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;}

/* homepage team: names and titles only */
.roster-4{grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:40px;}
.roster-4 .person h3{font-size:clamp(21px, 1.9vw, 26px);}
.roster-4 .p-roles{padding-bottom:0;}
.roster-4 + .team-more{margin-top:56px;}
.roster-4 .person{padding-bottom:48px;}
.contact-call .call-link{white-space:nowrap; display:inline-block;}
@media (max-width:960px){ .roster-4{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:560px){ .roster-4{grid-template-columns:1fr;} .roster-4 .person{padding-bottom:32px;} }

/* nothing in the footer may stick out below it (that created a pale strip at the end of the scroll) */
footer{overflow:hidden;}

.roster-4 + .team-more{align-items:center; text-align:center;}
.roster-4 .person h3 .t{color:var(--teal);}
.person h3 .t{color:var(--teal);}
.person h3 .t{font-weight:400;}
.person .p-line{background:var(--teal);}