:root{
  --ink:#0d1c23;
  --ink-2:#142a2e;
  --forest:#14563a;
  --forest-dark:#0d3d2a;
  --green:#237a52;
  --green-soft:#dfeee6;
  --sage:#edf3ef;
  --paper:#f6f7f4;
  --white:#ffffff;
  --text:#17211c;
  --muted:#66736b;
  --line:#d8e0da;
  --line-dark:rgba(255,255,255,.14);
  --shadow:0 22px 70px rgba(13,28,35,.11);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--text);
  background:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(calc(100% - 36px),var(--max));margin:auto}
.skip{position:absolute;left:-9999px;top:10px;background:white;color:#111;padding:10px 14px;z-index:999}
.skip:focus{left:10px}

.header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.93);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--forest);color:white;font-weight:900;
  box-shadow:0 10px 24px rgba(20,86,58,.18)
}
.brand-copy{display:flex;flex-direction:column;line-height:1.08}
.brand-copy strong{font-size:1rem;color:var(--ink)}
.brand-copy span{margin-top:5px;color:var(--muted);font-size:.7rem}
.nav-links{display:flex;align-items:center;gap:25px;position:relative}
.nav-links a{color:#34433b;font-size:.88rem;font-weight:650;transition:color .2s ease}
.nav-actions{display:flex;align-items:center;gap:10px}
.mobile-toggle{
  display:none;width:44px;height:42px;border:1px solid var(--line);border-radius:12px;
  background:white;color:var(--ink)
}
.mobile-menu{
  display:none;position:fixed;top:88px;left:14px;right:14px;z-index:75;
  padding:12px;background:white;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain
}
.mobile-menu.open{display:grid}
.mobile-menu a{padding:14px;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu a:last-child{border:0}

.btn{
  min-height:48px;padding:8px 20px;border-radius:12px;
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;text-align:center;transition:.2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:white;background:var(--forest);box-shadow:0 12px 28px rgba(20,86,58,.20)}
.btn-primary:hover{background:var(--forest-dark)}
.btn-secondary{background:white;border-color:var(--line);color:var(--ink)}
.btn-secondary:hover{border-color:#aab8af}
.btn-small{min-height:40px;padding:0 15px;font-size:.82rem}
.btn-full{width:100%}

.hero{
  padding:72px 0 78px;
  background:var(--ink);
  color:white;
  position:relative;
  overflow:hidden
}
.hero:before{
  content:"";position:absolute;left:-180px;bottom:-290px;width:620px;height:620px;border-radius:50%;
  border:115px solid rgba(58,140,92,.10)
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:56px;align-items:center;position:relative;z-index:2
}
.eyebrow,.kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--forest);font-size:.72rem;font-weight:900;letter-spacing:.11em
}
.hero .eyebrow{color:#9cd2b5}
.eyebrow:before,.kicker:before{
  content:"";width:25px;height:2px;background:currentColor
}
.hero h1,.page-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.02;
}
.hero h1{
  max-width:760px;margin:23px 0 20px;
  font-size:clamp(3.1rem,6vw,5.55rem)
}
.hero h1 span{color:#9bd0b2}
.hero-lead{max-width:690px;margin:0;color:#c3d0cb;font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:31px}
.hero .btn-secondary{background:transparent;color:white;border-color:rgba(255,255,255,.25)}
.hero .btn-secondary:hover{border-color:white;background:rgba(255,255,255,.06)}

.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px}
.hero-point{padding:15px 0;border-top:1px solid rgba(255,255,255,.18)}
.hero-point b,.hero-point span{display:block}
.hero-point b{font-size:.87rem}
.hero-point span{margin-top:4px;color:#9fafaa;font-size:.73rem}

.hero-media{position:relative}
.hero-photo{
  min-height:530px;border-radius:28px;overflow:hidden;
  box-shadow:0 34px 85px rgba(0,0,0,.32);
  position:relative
}
.hero-photo img{width:100%;height:100%;min-height:530px;object-fit:cover}
.hero-photo:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,24,20,.55))
}
.hero-caption{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:3;
  padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.92);color:var(--text);
  box-shadow:0 12px 32px rgba(0,0,0,.12)
}
.hero-caption small{display:block;color:var(--green);font-size:.68rem;font-weight:900;letter-spacing:.09em}
.hero-caption strong{display:block;margin-top:6px;font-size:1rem}
.hero-stat{
  position:absolute;top:26px;left:-30px;z-index:4;
  width:220px;padding:18px;border-radius:16px;
  background:var(--forest);color:white;box-shadow:0 18px 45px rgba(0,0,0,.24)
}
.hero-stat b,.hero-stat span{display:block}
.hero-stat b{font-family:Georgia,serif;font-size:2rem;font-weight:500}
.hero-stat span{margin-top:4px;color:#cae0d3;font-size:.75rem}

.trust-strip{background:white;border-bottom:1px solid var(--line)}
.trust-row{
  min-height:68px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:38px;
  color:#68766d;font-size:.74rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase
}

.section{padding:98px 0}
.section-white{background:white}
.section-sage{background:var(--sage)}
.section-dark{background:var(--ink);color:white}
.section-head{max-width:790px;margin-bottom:44px}
.section-head h2{
  margin:13px 0 14px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.4rem,4.5vw,4rem);
  font-weight:500;line-height:1.05;letter-spacing:-.04em
}
.section-head p{margin:0;color:var(--muted);font-size:1.02rem}
.section-dark .section-head p{color:#aebeb8}
.section-dark .kicker{color:#9cd2b5}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  min-height:330px;padding:28px;border:1px solid var(--line);
  border-radius:22px;background:white;
  display:flex;flex-direction:column;position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#aab9b0}
.service-num{
  font-family:Georgia,serif;color:var(--green);font-size:1.35rem
}
.service-card h3{margin:26px 0 9px;font-size:1.26rem;line-height:1.3;color:var(--ink)}
.service-card p{margin:0 0 18px;color:var(--muted);font-size:.88rem}
.clean-list{list-style:none;margin:auto 0 21px;padding:0}
.clean-list li{padding:5px 0 5px 22px;position:relative;color:#3f4d45;font-size:.85rem}
.clean-list li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:2px;background:var(--green)}
.card-link{margin-top:auto;color:var(--forest);font-size:.84rem;font-weight:850}

.strategy-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:52px;align-items:center}
.strategy-photo{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.strategy-photo img{width:100%;height:500px;object-fit:cover}
.photo-label{
  position:absolute;left:18px;bottom:18px;padding:10px 13px;border-radius:10px;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:800
}
.strategy-copy h3,.legal-copy h2{
  margin:14px 0 14px;
  font-family:Georgia,serif;font-weight:500;
  font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.07;letter-spacing:-.04em
}
.strategy-copy>p,.legal-copy>p{color:var(--muted)}
.strategy-list{display:grid;gap:12px;margin-top:25px}
.strategy-item{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:15px 0;border-top:1px solid var(--line)}
.strategy-item b{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--green-soft);color:var(--forest);font-size:.76rem
}
.strategy-item h4{margin:1px 0 5px;font-size:.95rem}
.strategy-item p{margin:0;color:var(--muted);font-size:.79rem}

.ai-seo-panel{
  display:grid;grid-template-columns:1.05fr .95fr;gap:36px;
  padding:44px;border:1px solid var(--line-dark);border-radius:26px;
  background:var(--ink-2)
}
.ai-seo-copy h3{
  margin:13px 0 13px;font-family:Georgia,serif;font-size:clamp(2rem,3.6vw,3.1rem);
  font-weight:500;line-height:1.08
}
.ai-seo-copy p{color:#afc0ba}
.ai-seo-note{
  margin-top:22px;padding:15px 17px;border-left:3px solid #7db697;
  background:rgba(255,255,255,.04);color:#bdccc7;font-size:.79rem
}
.ai-seo-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ai-seo-item{padding:19px;border:1px solid var(--line-dark);border-radius:16px;background:rgba(255,255,255,.035)}
.ai-seo-item b{display:block;font-size:.88rem}
.ai-seo-item span{display:block;margin-top:6px;color:#9eafa9;font-size:.75rem}

.legal-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
.legal-media{position:relative}
.legal-media img{width:100%;height:530px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.legal-badge{
  position:absolute;right:-20px;bottom:28px;max-width:230px;padding:18px;border-radius:16px;
  background:var(--forest);color:white;box-shadow:0 18px 40px rgba(13,61,42,.24)
}
.legal-badge b,.legal-badge span{display:block}
.legal-badge span{margin-top:5px;color:#cae0d3;font-size:.75rem}
.legal-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}
.legal-benefit{padding:17px;border:1px solid var(--line);border-radius:15px;background:white}
.legal-benefit b{display:block;font-size:.87rem;color:var(--ink)}
.legal-benefit span{display:block;margin-top:5px;color:var(--muted);font-size:.74rem}
.legal-disclaimer{padding:14px 16px;border-radius:13px;background:var(--green-soft);color:#385847;font-size:.75rem}

.included-every-package{margin:0 0 22px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#ffffff;display:flex;align-items:center;gap:22px}
.included-label{color:var(--forest);font-size:.67rem;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.included-items{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.included-items span{padding:7px 10px;border-radius:999px;background:var(--sage);color:#46564d;font-size:.72rem;font-weight:750}
@media(max-width:700px){.included-every-package{align-items:flex-start;flex-direction:column;gap:12px}}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price-monthly{margin-top:-14px;margin-bottom:4px;color:var(--muted);font-size:.78rem;font-weight:650}
.price-card.featured .price-monthly{color:#c0d2c8}
.price-monthly-note{margin:0 0 16px;color:var(--muted);font-size:.72rem;line-height:1.5}
.price-card.featured .price-monthly-note{color:#9fc2ae}
.ai-indicator{position:absolute;top:17px;right:17px;color:var(--forest);font-size:.61rem;font-weight:900;letter-spacing:.08em}
.price-card{
  padding:28px;border:1px solid var(--line);border-radius:22px;background:white;
  display:flex;flex-direction:column;position:relative
}
.price-card.featured{
  color:white;background:var(--forest-dark);border-color:var(--forest-dark);
  box-shadow:0 25px 65px rgba(13,61,42,.23);transform:translateY(-10px)
}
.price-card.featured .plan,.price-card.featured .popular{color:#b9dfc8}
.price-card.featured p,.price-card.featured .clean-list li,.price-card.featured .package-reason span,.price-card.featured .maintenance small{color:#c0d2c8}
.price-card.featured .clean-list li:before{background:#8fc4a7}
.price-card.featured .package-reason,.price-card.featured .maintenance{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.price-card.featured .btn-secondary{background:white;color:var(--forest-dark);border-color:white}
.popular{position:absolute;top:17px;right:17px;color:var(--forest);font-size:.61rem;font-weight:900;letter-spacing:.08em}
.plan{color:var(--forest);font-size:.68rem;font-weight:900;letter-spacing:.10em}
.price-card h3{margin:14px 0 8px;font-size:1.25rem;line-height:1.28}
.price-card>p{margin:0;color:var(--muted);font-size:.83rem}
.price-card>.btn{margin-top:auto}
.price{margin:20px 0;font-family:Georgia,serif;font-size:2.45rem;letter-spacing:-.04em}
.price small{font-family:Inter,sans-serif;color:var(--muted);font-size:.68rem;letter-spacing:0}
.price-card.featured .price small{color:#bcd0c5}
.package-reason,.maintenance{margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--sage)}
.package-reason b,.package-reason span,.maintenance b,.maintenance span,.maintenance small{display:block}
.package-reason b{font-size:.78rem}.package-reason span{margin-top:4px;color:var(--muted);font-size:.72rem}
.maintenance span{color:var(--forest);font-size:.67rem;font-weight:900}
.maintenance b{margin-top:3px}.maintenance small{margin-top:4px;color:var(--muted);font-size:.7rem}
.scope-note{margin-top:25px;padding:17px 19px;border:1px solid var(--line);border-radius:14px;background:white}
.scope-note strong,.scope-note span{display:block}
.scope-note span{margin-top:4px;color:var(--muted);font-size:.75rem}
.external-costs-note{margin-top:18px;color:var(--muted);font-size:.74rem;line-height:1.6;max-width:820px}
.pricing-trust{margin-top:26px;padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:var(--sage)}
.pricing-trust h3{margin:0 0 6px;font-size:1.02rem;color:var(--forest-dark)}
.pricing-trust>p{margin:0 0 14px;color:var(--text);font-size:.85rem;line-height:1.65;max-width:760px}
.pricing-trust-grid{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none}
.pricing-trust-grid li{display:flex;align-items:center;gap:7px;color:#385847;font-size:.8rem;font-weight:650}
.pricing-trust-grid li:before{content:"✓";display:inline-flex;color:var(--forest);font-weight:900}
.text-link{color:var(--forest);font-size:.84rem;font-weight:800}
.text-link:hover,.text-link:focus-visible{text-decoration:underline}
.package-details{margin-top:28px;border:1px solid var(--line);border-radius:16px;background:white;padding:4px 22px}
.package-details>summary{padding:16px 0;cursor:pointer;list-style:none;color:var(--forest);font-weight:800;font-size:.9rem}
.package-details>summary::-webkit-details-marker{display:none}
.package-details>summary:after{content:"+";float:right;color:var(--forest)}
.package-details[open]>summary:after{content:"–"}
.package-details-body{padding-bottom:22px}
.package-details-body h3{margin:20px 0 8px;font-size:1.02rem}
.package-details-body h3:first-child{margin-top:0}
.package-details-body p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.7}
.addon-card{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center;padding:34px;border:1px solid var(--line);border-radius:22px;background:white}
.addon-note{margin-top:14px;color:var(--muted);font-size:.8rem;line-height:1.7}
.addon-price-box{padding:24px;border-radius:16px;background:var(--sage);text-align:center}
.addon-price-box .price{margin:6px 0 0}
.addon-price-box .price-monthly{margin-bottom:16px}
@media(max-width:820px){.addon-card{grid-template-columns:1fr}}

.consultation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.consultation-card{min-height:225px;padding:24px;border-top:3px solid var(--green);background:white;box-shadow:0 10px 28px rgba(13,28,35,.05)}
.consultation-card>span{font-family:Georgia,serif;color:var(--green);font-size:1.25rem}
.consultation-card h3{margin:26px 0 9px;font-size:1.08rem}
.consultation-card p{margin:0;color:var(--muted);font-size:.8rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.step{padding:25px;border-top:1px solid #99afa1;background:transparent}
.step b{font-family:Georgia,serif;color:var(--green);font-size:1.15rem}
.step h3{margin:30px 0 9px}
.step p{margin:0;color:var(--muted);font-size:.84rem}

.cta{
  padding:45px;border-radius:24px;background:var(--ink);color:white;
  display:flex;align-items:center;justify-content:space-between;gap:30px
}
.cta h2{margin:13px 0 10px;font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:500;line-height:1.06}
.cta p{max-width:760px;margin:0;color:#acbdb7}
.cta .kicker{color:#9cd2b5}

.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);background:white}
.faq summary{padding:19px 21px;cursor:pointer;font-weight:800;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--forest)}
.faq details[open] summary:after{content:"–"}
.faq p{margin:0;padding:0 21px 20px;color:var(--muted)}

.contact-wrap{
  display:grid;grid-template-columns:.88fr 1.12fr;gap:45px;
  padding:45px;border:1px solid var(--line);border-radius:24px;background:white;
  box-shadow:var(--shadow)
}
.contact-copy h2{
  margin:14px 0;font-family:Georgia,serif;font-weight:500;
  font-size:clamp(2.2rem,4vw,3.45rem);line-height:1.05;letter-spacing:-.04em
}
.contact-copy p{color:var(--muted)}
.email-box{margin-top:25px;padding:16px;border-left:3px solid var(--green);background:var(--sage)}
.email-box span,.email-box strong{display:block}
.email-box span{color:var(--muted);font-size:.72rem}.email-box strong{margin-top:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:7px}
.form label>span{font-size:.75rem;font-weight:800;color:#334039}
.form input,.form select,.form textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  background:#fbfcfa;color:var(--text);outline:none
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#6f9880;box-shadow:0 0 0 3px rgba(35,122,82,.08)}
.span-2{grid-column:1/-1}
.form-note{margin:0;color:#7a867f;font-size:.7rem;text-align:center}

.page-hero{padding:78px 0 58px;background:var(--ink);color:white}
.page-hero .wrap{max-width:930px}
.page-hero h1{font-size:clamp(3rem,6vw,5.2rem);margin:20px 0}
.page-lead{max-width:780px;color:#c2d0cb;font-size:1.06rem}
.breadcrumb{margin-bottom:18px;color:#9badA7;font-size:.75rem}
.breadcrumb a{color:#b7d9c4}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px}
.article-card{padding:38px;border:1px solid var(--line);background:white}
.article-card h2{margin:35px 0 12px;font-family:Georgia,serif;font-weight:500;font-size:2rem;line-height:1.18}
.article-card h2:first-child{margin-top:0}
.article-card p,.article-card li{color:#4f5e55}
.article-card li{margin-bottom:7px}
.side-card{position:sticky;top:102px;height:max-content;padding:25px;background:var(--forest-dark);color:white}
.side-card h3{font-family:Georgia,serif;font-weight:500;font-size:1.55rem}
.side-card p{color:#bed0c6;font-size:.84rem}
.side-links{display:grid;gap:9px;margin:20px 0}
.side-links a{padding:10px;border-bottom:1px solid rgba(255,255,255,.13);font-size:.82rem}

.footer{padding:36px 0 44px;background:var(--ink);color:white}
.footer .brand-copy strong{color:white}
.footer .brand-copy span,.footer p{color:#a9bab4}
.footer-grid{display:grid;grid-template-columns:1.3fr .62fr .62fr .62fr;gap:35px}
.footer h3{margin-top:0;font-size:1em;margin-bottom:1.33em}
.footer-links{display:grid;gap:8px;color:#d3ded9;font-size:.83rem}
.copyright{margin-top:27px;padding-top:19px;border-top:1px solid rgba(255,255,255,.12);color:#84958e;font-size:.71rem}

.reveal{opacity:0;transform:translateY(15px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1040px){
  .hero-grid,.strategy-grid,.ai-seo-panel,.legal-grid,.contact-wrap,.content-layout{grid-template-columns:1fr}
  .hero-media{max-width:780px}.hero-stat{left:18px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .consultation-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .nav-links,.nav-actions>.btn{display:none}
  .mobile-toggle{display:block}
  .side-card{position:static}
}
@media(max-width:700px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .hero,.section{padding:72px 0}
  .hero h1{font-size:clamp(2.75rem,15vw,4.1rem)}
  .hero-points,.services-grid,.ai-seo-items,.legal-benefits,.consultation-grid,.steps,.form,.footer-grid{grid-template-columns:1fr}
  .hero-photo,.hero-photo img{min-height:430px}
  .hero-stat{position:static;width:auto;margin-bottom:12px}
  .legal-badge{position:static;max-width:none;margin-top:12px}
  .strategy-photo img,.legal-media img{height:420px}
  .cta{padding:30px 23px;align-items:flex-start;flex-direction:column}
  .contact-wrap{padding:28px 22px}
  .span-2{grid-column:1}
  .trust-row{gap:20px}
  .brand-copy span{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* MaxDiVision vector logo */
.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.brand-logo{
  display:block;
  width:auto;
  height:46px;
  max-width:235px;
  object-fit:contain;
  object-position:left center;
}
.footer .brand-logo{
  height:48px;
  max-width:245px;
}
@media(max-width:700px){
  .brand-logo{
    height:38px;
    max-width:190px;
  }
  .footer .brand-logo{
    height:42px;
    max-width:215px;
  }
}



/* Inline MaxDiVision logo — no external image dependency */
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto;
  line-height:1!important;
  color:var(--forest)!important;
}
.brand-symbol{
  display:block!important;
  width:58px!important;
  height:38px!important;
  flex:0 0 auto!important;
  overflow:visible!important;
}
.brand-wordmark{
  display:block!important;
  color:currentColor!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.42rem!important;
  font-weight:500!important;
  letter-spacing:-.045em!important;
  white-space:nowrap!important;
}
.footer .brand{
  color:#9bd0b2!important;
}
.footer .brand-wordmark{
  color:#ffffff!important;
}
.brand-logo{
  display:none!important;
}
@media(max-width:700px){
  .brand{
    gap:8px!important;
  }
  .brand-symbol{
    width:48px!important;
    height:32px!important;
  }
  .brand-wordmark{
    font-size:1.15rem!important;
  }
}


/* =========================================================
   FINAL COLOR CLARITY PASS
   Zadržan je tamnozeleni identitet, uz bolju čitljivost,
   jasnije odvajanje površina i umeren kontrast.
   ========================================================= */

:root{
  --ink:#0c1d22;
  --ink-2:#153036;
  --forest:#155b3d;
  --forest-dark:#0d402c;
  --green:#287b56;
  --green-soft:#dcebe2;
  --sage:#e9f1ec;
  --paper:#f4f6f3;
  --white:#ffffff;
  --text:#18231e;
  --muted:#56645c;
  --line:#cbd7cf;
  --line-strong:#afc0b5;
  --shadow:0 22px 68px rgba(12,29,34,.10);
}

html{
  background:var(--paper);
}

body{
  color:var(--text);
  background:var(--paper);
}

::selection{
  color:var(--ink);
  background:#cfe6d8;
}

/* Header and navigation */
.header{
  background:rgba(255,255,255,.97);
  border-bottom-color:#cbd6cf;
  box-shadow:0 5px 24px rgba(12,29,34,.045);
}

.brand-copy strong{
  color:var(--ink);
}

.brand-copy span{
  color:#58665e;
}

.nav-links a{
  color:#304038;
}

.nav-links a:focus-visible{
  color:var(--forest-dark);
}

.nav-links a[aria-current="page"],
.nav-links .nav-dropdown-trigger.nav-current{
  color:var(--forest-dark);
}

.mobile-toggle{
  border-color:#bdc9c1;
  background:#fff;
}

.mobile-menu{
  border-color:#c5d1c9;
  background:#fff;
}

.mobile-menu a{
  border-bottom-color:#d5ded8;
  color:#223229;
}

/* Buttons and focus visibility */
.btn-primary{
  background:var(--forest);
  box-shadow:0 12px 28px rgba(21,91,61,.18);
}

.btn-primary:hover{
  background:var(--forest-dark);
}

.btn-secondary{
  color:#18231e;
  background:#fff;
  border-color:#b8c6bd;
}

.btn-secondary:hover{
  border-color:#8fa399;
  background:#fbfcfb;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(40,123,86,.24);
  outline-offset:3px;
}

/* Dark hero and dark sections */
.hero,
.page-hero,
.section-dark,
.footer{
  background:
    radial-gradient(circle at 88% 8%,rgba(40,123,86,.10),transparent 30%),
    var(--ink);
}

.hero .eyebrow,
.section-dark .kicker,
.cta .kicker{
  color:#afe0c3;
}

.hero h1 span{
  color:#a8d9bd;
}

.hero-lead,
.page-lead{
  color:#d0dcd6;
}

.hero .btn-secondary{
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.025);
}

.hero .btn-secondary:hover{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
}

.hero-point{
  border-top-color:rgba(255,255,255,.24);
}

.hero-point span{
  color:#b8c7c0;
}

.hero-stat span,
.legal-badge span{
  color:#d1e3d8;
}

.section-dark .section-head p{
  color:#c2d0c9;
}

.breadcrumb{
  color:#b7c6be;
}

.breadcrumb a{
  color:#cce5d7;
}

/* Main light surfaces */
.section-sage{
  background:var(--sage);
}

.section-white{
  background:#fff;
}

.trust-strip{
  background:#fff;
  border-bottom-color:#cfd9d2;
}

.trust-row{
  color:#536159;
}

.service-card,
.price-card,
.legal-benefit,
.consultation-card,
.faq details,
.article-card,
.contact-wrap,
.public-testimonials-shell,
.public-testimonial-card,
.testimonial-loading-card{
  border-color:var(--line);
  background:#fff;
}

.service-card:hover,
.price-card:hover,
.legal-benefit:hover{
  border-color:#99aea1;
}

.service-card p,
.strategy-item p,
.legal-benefit span,
.price-card>p,
.package-reason span,
.maintenance small,
.scope-note span,
.consultation-card p,
.step p,
.faq p,
.contact-copy p,
.article-card p,
.article-card li,
.public-testimonials-heading p,
.public-testimonials-empty span{
  color:var(--muted);
}

.clean-list li{
  color:#35453c;
}

.strategy-item{
  border-top-color:#cbd6cf;
}

.strategy-item b{
  color:var(--forest-dark);
  background:#d9ebe0;
}

.photo-label,
.hero-caption{
  background:rgba(255,255,255,.96);
  color:var(--text);
}

.hero-caption small{
  color:#1e6a48;
}

/* Dark feature panels */
.ai-seo-panel{
  background:#153036;
  border-color:rgba(255,255,255,.22);
}

.ai-seo-copy p{
  color:#c4d2cb;
}

.ai-seo-note{
  color:#cbd8d1;
  border-left-color:#8ec5a6;
  background:rgba(255,255,255,.065);
}

.ai-seo-item{
  border-color:rgba(255,255,255,.19);
  background:rgba(255,255,255,.055);
}

.ai-seo-item span{
  color:#bac9c2;
}

.price-card.featured{
  background:#0f432e;
  border-color:#0f432e;
}

.price-card.featured .plan,
.price-card.featured .popular{
  color:#c5e7d2;
}

.price-card.featured p,
.price-card.featured .clean-list li,
.price-card.featured .package-reason span,
.price-card.featured .maintenance small,
.price-card.featured .price small{
  color:#d0ded7;
}

.price-card.featured .package-reason,
.price-card.featured .maintenance{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.075);
}

.cta{
  background:#10252a;
  border:1px solid rgba(255,255,255,.08);
}

.cta p{
  color:#c1cec8;
}

.side-card{
  background:#0f432e;
}

.side-card p{
  color:#c9d8d0;
}

.side-links a{
  color:#edf6f0;
  border-bottom-color:rgba(255,255,255,.18);
}

/* Forms */
.form label>span,
.consultation-fields label>span{
  color:#26372f;
}

.form input,
.form select,
.form textarea,
.consultation-fields input,
.consultation-fields select,
.consultation-fields textarea{
  color:#18231e;
  background:#fff;
  border-color:#bdcbc2;
}

.form input:hover,
.form select:hover,
.form textarea:hover,
.consultation-fields input:hover,
.consultation-fields select:hover,
.consultation-fields textarea:hover{
  border-color:#96aa9e;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.consultation-fields input:focus,
.consultation-fields select:focus,
.consultation-fields textarea:focus{
  border-color:#347e5a;
  box-shadow:0 0 0 4px rgba(40,123,86,.11);
}

.form input::placeholder,
.form textarea::placeholder,
.consultation-fields input::placeholder,
.consultation-fields textarea::placeholder{
  color:#748078;
  opacity:1;
}

.form-note,
.consultation-form-footer .form-note,
.feedback-insight-field small,
.consultation-fields small{
  color:#5e6c63;
}

.email-box{
  background:#e8f1eb;
  border-left-color:#287b56;
}

.email-box span{
  color:#58665e;
}

/* Consultation form */
.consultation-form-redesigned{
  border-color:#c4d1c8;
  background:#f8faf8;
  box-shadow:0 24px 62px rgba(12,29,34,.095);
}

.consultation-form-head{
  background:
    radial-gradient(circle at 100% 0,rgba(142,197,166,.18),transparent 40%),
    linear-gradient(145deg,#103d2c,#15583c);
}

.consultation-form-head p{
  color:#d5e3dc;
}

.consultation-form-badge{
  color:#bce8ce;
}

.consultation-form-time{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
}

.consultation-form-time span{
  color:#d0dfd7;
}

.consultation-progress{
  border-bottom-color:#d4ddd7;
  background:#fff;
}

.consultation-progress span{
  color:#65736a;
}

.consultation-progress span.is-active{
  color:#0f4c33;
}

.consultation-group{
  border-color:#ccd8d0;
  background:#fff;
}

.consultation-group-highlight{
  border-color:#b8cdbf;
  background:linear-gradient(145deg,#f9fcfa,#edf5f0);
}

.consultation-group-head p{
  color:#59675f;
}

.consultation-step-number{
  color:#0f4b33;
  background:#d9ebe0;
}

.consultation-date-note{
  border-color:#aebfb4;
  background:rgba(255,255,255,.88);
}

.consultation-date-note p{
  color:#59675f;
}

.consultation-consent{
  border-color:#cbd6cf;
  background:#fff;
}

.consultation-consent span{
  color:#56645c!important;
}

.consultation-submit-area{
  background:#10252a;
}

.consultation-submit-copy span{
  color:#c0cec7;
}

/* Feedback form */
.feedback-section{
  background:#f3f1e9;
  border-top-color:#d3d7cf;
}

.feedback-shell{
  border-color:#cbd5ce;
  background:#fff;
}

.feedback-copy p{
  color:#56645c;
}

.feedback-principles span{
  color:#2f4b3b;
  background:#e5eee8;
}

.feedback-skip{
  color:#526058;
}

.feedback-thanks{
  background:#e6efe9;
}

.feedback-publication-consent{
  border-color:#b8cbbf;
  background:linear-gradient(145deg,#f9fcfa,#eaf3ed);
}

.feedback-publication-consent:hover{
  border-color:#779b85;
}

.feedback-consent-box{
  border-color:#86a592;
}

.feedback-consent-copy small{
  color:#56645c;
}

.feedback-seo-note{
  border-color:#c5d3ca;
  background:#f5f8f5;
}

.feedback-seo-note span{
  color:#56645c;
}

/* Testimonials and SEO insight cards */
.public-testimonials-section{
  background:
    radial-gradient(circle at 88% 20%,rgba(127,183,153,.12),transparent 32%),
    #eef4ef;
}

.public-testimonials-shell{
  border-color:#c9d5cd;
}

.concept-disclosure{
  background:#edf4ef;
  border-left-color:#287b56;
}

.concept-disclosure span{
  color:#526058;
}

.public-testimonials-summary>div{
  border-color:#cfd9d2;
  background:#f7faf7;
}

.public-testimonials-summary span{
  color:#56645c;
}

.public-testimonial-card,
.testimonial-loading-card{
  border-color:#ccd8d0;
  background:linear-gradient(145deg,#fff,#f5f9f6);
}

.public-testimonial-date{
  color:#5f6c64;
}

.public-testimonial-card blockquote{
  color:#293a31;
}

.public-testimonial-author{
  border-top-color:#d5ded8;
}

.public-testimonial-author span{
  color:#5c6961;
}

.public-testimonials-empty{
  border-color:#aebfb4;
  background:#f5f8f5;
}

.feedback-seo-note,
.visitor-topic-insights,
.public-topic-overview{
  border-color:#c4d2c8;
}

.visitor-topic-insights,
.public-topic-overview{
  background:
    radial-gradient(circle at 100% 0,rgba(102,166,129,.09),transparent 35%),
    linear-gradient(145deg,#f9fcfa,#eaf3ed);
}

.visitor-topic-insights-caption,
.visitor-topic-chip small{
  color:#59675f;
}

.visitor-topic-chip{
  border-color:#b8c9be;
  background:#fff;
}

.visitor-topic-summary,
.public-topic-summary,
.public-testimonial-insights p{
  color:#4e5e55;
}

.public-testimonial-insights>div{
  background:#eaf2ed;
}

/* Article and SEO content pages */
.article-card{
  box-shadow:0 14px 38px rgba(12,29,34,.045);
}

.article-card p,
.article-card li{
  color:#48584f;
}

.article-card a{
  color:#155b3d;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.article-card a:hover{
  color:#0d402c;
}

.side-links a:hover,
.footer-links a:hover{
  color:#fff;
}

/* Footer */
.footer .brand-copy span,
.footer p{
  color:#bdcbc4;
}
.footer-email{
  display:inline-block;
  margin-top:12px;
  color:#e0e9e4;
  font-size:.83rem;
  font-weight:650;
}
.footer-email:hover{
  color:#fff;
}

.footer-social{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#e0e9e4;
}
.footer-social-link:hover{
  color:#fff;
}

.footer-links{
  color:#e0e9e4;
}

.copyright{
  color:#a8b8b0;
  border-top-color:rgba(255,255,255,.17);
}

/* Small text and separators */
.scope-note,
.package-reason,
.maintenance{
  border-color:#c7d2ca;
}

.scope-note{
  background:#fff;
}

.scope-note.scope-note,
.scope-note{
  color:var(--text);
}

.public-testimonial-stars{
  color:#9b6510;
}

.faq summary{
  color:#1d2c24;
}

.faq details[open]{
  border-color:#aebfb4;
}

@media(max-width:700px){
  .header{
    background:rgba(255,255,255,.985);
  }

  .consultation-progress span{
    color:#526058;
  }
}


/* === Mobile/tablet stability patch === */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
main,section,header,footer,nav,div,article,aside,figure{
  min-width:0;
}
/* Reset the browser default `margin:1em 40px` on <figure>. Without this the
   photo figures lose 80px of width — negligible on desktop, but 22% of the
   available width on a 390px phone, which visibly shrinks and misaligns them. */
figure{
  margin:0;
}
img,svg,video,canvas,iframe{
  max-width:100%;
  height:auto;
}
.container,
.hero-grid,
.strategy-grid,
.ai-seo-panel,
.legal-grid,
.services-grid,
.quick-grid,
.pricing-grid,
.consultation-grid,
.steps,
.contact-wrap,
.feedback-shell,
.footer-grid,
.form,
.consultation-fields-two,
.consultation-progress,
.public-testimonials-grid,
.public-testimonials-summary,
.public-testimonials-heading,
.visitor-topic-insights-head,
.included-every-package,
.content-layout{
  min-width:0;
  max-width:100%;
}
.quick-grid,
.pricing-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.hero h1,
.page-hero h1,
.section-head h2,
.cta h2,
.consultation-form-head h3{
  overflow-wrap:anywhere;
}

@media (max-width: 1100px){
  .hero-grid,
  .strategy-grid,
  .ai-seo-panel,
  .legal-grid,
  .contact-wrap,
  .content-layout,
  .feedback-shell{
    grid-template-columns:1fr !important;
  }
  .services-grid,
  .quick-grid,
  .pricing-grid,
  .consultation-grid,
  .steps,
  .public-testimonials-grid,
  .public-testimonials-summary,
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .hero-media,
  .strategy-photo,
  .legal-media,
  .contact-copy,
  .side-card{
    max-width:100%;
  }
  .hero-stat{
    left:18px;
  }
}

@media (max-width: 820px){
  .container{
    width:min(calc(100% - 24px), var(--max)) !important;
  }
  .nav{
    min-height:72px;
    gap:14px;
  }
  .nav-links,
  .nav-actions > .btn{
    display:none !important;
  }
  .mobile-toggle{
    display:block !important;
    flex:0 0 auto;
  }
  .brand{
    min-width:0 !important;
    max-width:calc(100vw - 96px) !important;
  }
  .brand-wordmark{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:1.05rem !important;
  }
  .hero,
  .section{
    padding:56px 0 !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .hero h1{
    max-width:none !important;
    font-size:clamp(2.25rem, 11vw, 3.35rem) !important;
    line-height:1.04 !important;
  }
  .hero-lead,
  .page-lead,
  .section-head p,
  .contact-copy>p{
    max-width:none !important;
    font-size:1rem !important;
  }
  .hero-points,
  .services-grid,
  .ai-seo-items,
  .legal-benefits,
  .quick-grid,
  .pricing-grid,
  .consultation-grid,
  .steps,
  .form,
  .footer-grid,
  .consultation-fields-two,
  .public-testimonials-grid,
  .public-testimonials-summary{
    grid-template-columns:1fr !important;
  }
  .quick-card,
  .price-card,
  .service-card,
  .consultation-card,
  .step,
  .public-testimonial-card,
  .testimonial-loading-card{
    min-height:auto !important;
  }
  .hero-photo,
  .hero-photo img{
    min-height:340px !important;
  }
  .hero-caption{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    padding:14px 15px !important;
  }
  .hero-stat,
  .legal-badge{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 0 12px !important;
  }
  .trust-row{
    justify-content:flex-start !important;
    gap:12px !important;
  }
  .included-every-package,
  .public-testimonials-heading,
  .visitor-topic-insights-head,
  .consultation-form-head,
  .contact-wrap,
  .feedback-shell{
    display:block !important;
  }
  .contact-wrap,
  .feedback-shell,
  .public-testimonials-shell{
    padding:20px !important;
    border-radius:20px !important;
  }
  .consultation-form-head{
    padding:24px 20px 20px !important;
  }
  .consultation-form-time{
    display:none !important;
  }
  .consultation-progress{
    padding:0 14px !important;
  }
  .consultation-progress span{
    padding:13px 4px !important;
    font-size:.61rem !important;
  }
  .consultation-group{
    margin:15px 13px 0 !important;
    padding:18px 15px !important;
  }
  .consultation-form-footer{
    padding:15px 13px 18px !important;
  }
  .consultation-submit-area{
    grid-template-columns:1fr !important;
    padding:16px !important;
  }
  .consultation-submit-area .btn{
    width:100% !important;
    min-width:0 !important;
  }
  .feedback-seo-note,
  .concept-disclosure,
  .visitor-topic-insights-head{
    grid-template-columns:1fr !important;
  }
  .feedback-seo-note strong,
  .concept-disclosure strong{
    white-space:normal !important;
  }
}

@media (max-width: 480px){
  .container{
    width:min(calc(100% - 20px), var(--max)) !important;
  }
  .brand-symbol{
    width:44px !important;
    height:30px !important;
  }
  .brand-wordmark{
    font-size:1rem !important;
  }
  .hero h1{
    font-size:clamp(2rem, 10.5vw, 2.85rem) !important;
  }
  .section-head h2,
  .page-hero h1,
  .cta h2{
    font-size:clamp(1.9rem, 9vw, 2.5rem) !important;
  }
}

/* Rezultati nav dropdown */
.nav-item-dropdown{position:relative}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;transition:color .2s ease}
.nav-dropdown-caret{font-size:.7em;transition:transform .18s ease}
.nav-item-dropdown.open .nav-dropdown-caret{transform:rotate(180deg)}
.nav-dropdown-panel{display:none;flex-direction:column;gap:2px}
.nav-item-dropdown.open .nav-dropdown-panel,
.nav-links .nav-item-dropdown:focus-within .nav-dropdown-panel{display:flex}
.nav-dropdown-panel a{padding:10px 12px;border-radius:9px;color:var(--ink);font-size:.85rem;font-weight:600}
.nav-links .nav-dropdown-trigger{color:#34433b;font-size:.88rem;font-weight:650}
.nav-links .nav-dropdown-trigger:focus-visible{color:var(--forest)}
.nav-links .nav-dropdown-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:200px;padding:8px;border-radius:14px;background:white;border:1px solid var(--line);box-shadow:var(--shadow);z-index:90}
.mobile-menu .nav-item-dropdown{border-bottom:1px solid var(--line)}
.mobile-menu .nav-dropdown-trigger{width:100%;justify-content:space-between;padding:14px;color:var(--ink)}
.mobile-menu .nav-dropdown-panel{padding:0 14px 12px 26px}
.mobile-menu .nav-dropdown-panel a{padding:8px 0;color:var(--ink)}

/* Hover-only affordances: gated behind (hover:hover) so touch taps give
   instant :active feedback instead of a hover state that has no "unhover"
   event and would otherwise stay visually stuck until the next tap. */
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--forest)}
  .nav-links .nav-dropdown-trigger:hover{color:var(--forest)}
  .nav-dropdown-panel a:hover{background:var(--sage);color:var(--forest)}
  .nav-links .nav-item-dropdown:hover .nav-dropdown-panel{display:flex}
}
.nav-links a:active,
.nav-links .nav-dropdown-trigger:active{color:var(--forest-dark)}
.nav-links a,
.nav-links .nav-dropdown-trigger,
.mobile-menu a,
.mobile-menu .nav-dropdown-trigger{-webkit-tap-highlight-color:transparent}

/* Current-page state in the vertical mobile menu */
.mobile-menu a[aria-current="page"],
.mobile-menu .nav-dropdown-trigger.nav-current{color:var(--forest);position:relative}
.mobile-menu a[aria-current="page"]::before,
.mobile-menu .nav-dropdown-trigger.nav-current::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--forest);
}

/* Shared sliding indicator: one element glides between nav items on hover,
   keyboard focus, or when the active page changes, instead of every item
   animating on its own. Absolutely positioned so it never affects layout. */
.nav-indicator{
  position:absolute;left:0;bottom:2px;height:2px;width:0;
  border-radius:2px;background:var(--forest-dark);
  opacity:0;pointer-events:none;
  transform:translateX(0);
  transition:transform .32s cubic-bezier(.65,0,.35,1),width .32s cubic-bezier(.65,0,.35,1),opacity .2s ease;
  will-change:transform,width;
}
.nav-indicator.is-visible{opacity:1}
@media (prefers-reduced-motion:reduce){
  .nav-indicator{transition:opacity .15s ease}
}

/* Process flow chips (used on /rezultati and /demo-resenja) */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0}
.flow-step{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:.82rem;font-weight:700}
.flow-arrow{color:var(--forest);font-weight:700;font-size:1rem}

/* Demo/concept label */
.demo-badge{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--green-soft);color:var(--forest-dark);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}


/* Anchor targets should not hide under sticky header */
section[id]{scroll-margin-top:90px}

/* Intent picker (homepage "šta vam treba" tool) and interactive checklists/quizzes */
.intent-options{display:flex;flex-wrap:wrap;gap:10px}
.intent-option{padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:.85rem;font-weight:700;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.intent-option:hover{border-color:#aebfb4}
.intent-option.is-active{border-color:var(--forest);color:var(--forest);background:var(--sage)}
.intent-result{margin-top:22px;padding:22px;border-radius:16px;background:var(--sage);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.intent-result[hidden]{display:none}
.intent-placeholder{margin-top:22px;padding:22px;border-radius:16px;background:white;border:1px dashed var(--line)}
.intent-placeholder p{margin:0;color:var(--text);font-size:.92rem;line-height:1.6}
.intent-placeholder p+p{margin-top:6px;color:var(--muted);font-size:.84rem}
.intent-result strong{display:block;color:var(--forest);font-size:.78rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.intent-result p{margin:0;max-width:640px;color:var(--text);font-size:.92rem;line-height:1.6}
.check-tool{max-width:760px}
.check-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.check-item>span{font-size:.92rem;color:var(--ink);font-weight:650}
.check-toggle{display:flex;gap:8px}
.check-toggle button{padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:.8rem;font-weight:750;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.check-toggle button:hover{border-color:#aebfb4}
.check-toggle button.is-selected{border-color:var(--forest);color:var(--forest);background:var(--sage)}
#checkResultBtn{margin-top:22px}
.quiz-tool{max-width:760px}
.quiz-item{padding:16px 0;border-bottom:1px solid var(--line)}
.quiz-item>span{display:block;margin-bottom:10px;font-size:.92rem;color:var(--ink);font-weight:650}
.quiz-options{display:flex;flex-wrap:wrap;gap:8px}
.quiz-options button{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:.8rem;font-weight:750;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.quiz-options button:hover{border-color:#aebfb4}
.quiz-options button.is-selected{border-color:var(--forest);color:var(--forest);background:var(--sage)}
#quizResultBtn{margin-top:22px}

/* Sticky "not sure where to start" CTA — desktop only */
.sticky-cta{
  display:none;
  position:fixed;right:24px;bottom:24px;z-index:95;
  width:260px;padding:18px 18px 16px;
  background:white;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
}
@media(min-width:1041px){
  .sticky-cta.is-visible{display:block}
}
@media(prefers-reduced-motion:no-preference){
  .sticky-cta{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
  .sticky-cta.is-shown{opacity:1;transform:none}
}
.sticky-cta-close{
  position:absolute;top:8px;right:8px;
  width:26px;height:26px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;
}
.sticky-cta-close:hover,.sticky-cta-close:focus-visible{background:var(--sage);color:var(--ink)}
.sticky-cta p{margin:0 0 12px;padding-right:20px;color:var(--ink);font-size:.85rem;font-weight:650;line-height:1.4}

/* Contextual micro-CTA after key content */
.micro-cta{margin-top:26px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.micro-cta p{margin:0;color:var(--ink);font-size:.86rem;font-weight:650}
.micro-cta-options{display:flex;flex-wrap:wrap;gap:10px}

/* Side quick-navigation rail — narrow icon rail, always present. Expands to show
   labels on hover/focus (desktop pointer) or on tap of the toggle (touch), per
   spec. Fixed position so it never shifts page content. */
.side-quicknav{
  position:fixed;right:16px;top:50%;z-index:96;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.side-quicknav-toggle{
  display:none;
  width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(13,28,35,.86);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;
  box-shadow:0 12px 30px rgba(13,28,35,.30);
}
.side-quicknav-toggle:focus-visible{outline:2px solid #9bd0b2;outline-offset:2px}
.side-quicknav-list{
  display:flex;flex-direction:column;gap:4px;
  padding:10px;border-radius:16px;
  background:rgba(13,28,35,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 45px rgba(13,28,35,.28);
  backdrop-filter:blur(14px);
}
.side-quicknav-list a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;overflow:hidden;
  transition:background .18s ease,color .18s ease;
}
.side-quicknav-list a:hover,.side-quicknav-list a:focus-visible{
  background:rgba(255,255,255,.10);color:#fff;
}
.side-quicknav-list a[aria-current="page"]{
  position:relative;color:#9bd0b2;background:rgba(155,208,178,.12);
}
.side-quicknav .sqn-ico{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.side-quicknav .sqn-ico svg{width:100%;height:100%}
.side-quicknav .sqn-label{
  font-size:.78rem;font-weight:700;
  max-width:0;opacity:0;margin-left:0;overflow:hidden;
}
.side-quicknav-cta{
  display:flex;align-items:center;gap:10px;
  padding:12px 13px;border-radius:14px;
  background:var(--forest);color:#fff;
  white-space:nowrap;overflow:hidden;
  box-shadow:0 14px 30px rgba(21,91,61,.35);
  transition:background .18s ease;
}
.side-quicknav-cta:hover,.side-quicknav-cta:focus-visible{background:#0f4a30;color:#fff}
.side-quicknav-cta .sqn-label{font-weight:800}
@media(prefers-reduced-motion:no-preference){
  .side-quicknav .sqn-label{transition:max-width .22s ease,opacity .18s ease,margin-left .22s ease}
  .side-quicknav-list{transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
}
@media(hover:hover) and (pointer:fine){
  .side-quicknav:hover .sqn-label,
  .side-quicknav:focus-within .sqn-label{
    max-width:170px;opacity:1;margin-left:2px;
  }
}
@media(hover:none),(pointer:coarse){
  .side-quicknav-toggle{display:flex}
  .side-quicknav-list{
    position:absolute;right:0;bottom:calc(100% + 10px);
    opacity:0;visibility:hidden;transform:translateY(8px);
    pointer-events:none;
  }
  .side-quicknav.is-open .side-quicknav-list{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
  }
  .side-quicknav-list .sqn-label{max-width:170px;opacity:1;margin-left:2px}
}

/* Digitalni puls — content hub grid + article components */
.pulse-summary-section{padding:44px 0}
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),380px));gap:22px;margin-top:8px}
.pulse-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:white;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pulse-card:hover,.pulse-card:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#aab9b0}
.pulse-card-media{aspect-ratio:16/9;overflow:hidden;background:var(--sage)}
.pulse-card-media img{width:100%;height:100%;object-fit:cover}
.pulse-card-body{display:flex;flex-direction:column;flex:1;padding:24px}
.pulse-cat{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--green-soft);color:var(--forest-dark);font-size:.66rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.pulse-cat-group{display:flex;flex-wrap:wrap;gap:6px}
.pulse-card-title{display:block;margin:16px 0 8px;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.28rem;line-height:1.32;color:var(--ink)}
.pulse-card-desc{display:block;margin:0 0 16px;color:var(--muted);font-size:.87rem}
.pulse-card-meta{display:flex;gap:0;margin:0 0 16px;color:var(--muted);font-size:.74rem;font-weight:650}
.pulse-card-meta span+span{margin-left:10px;padding-left:10px;border-left:1px solid var(--line)}
.pulse-card-cta{margin-top:auto;color:var(--forest);font-size:.84rem;font-weight:850}
.pulse-card:hover .pulse-card-cta{text-decoration:underline}

.pulse-article-meta{margin:16px 0 0;color:#b7c6be;font-size:.83rem;font-weight:650}
.pulse-article-meta .sep{margin:0 9px;color:#7fa08c}

.pulse-hero-figure{margin:0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.pulse-hero-figure img{width:100%;height:auto;object-fit:contain;display:block}

.pulse-summary{margin:0;padding:26px 28px;border-radius:20px;background:var(--sage);border:1px solid var(--line)}
.pulse-summary-label{display:block;margin-bottom:10px;color:var(--forest-dark);font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.pulse-summary p{margin:0 0 10px;color:var(--muted);font-size:.94rem;line-height:1.72}
.pulse-summary p:last-child{margin-bottom:0}

.pulse-toc{margin:0 0 32px;padding:22px 26px;border-radius:18px;border:1px solid var(--line);background:var(--paper)}
.pulse-toc-label{display:block;margin-bottom:12px;color:var(--forest);font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.pulse-toc ol{margin:0;padding:0 0 0 1.15em;columns:2;column-gap:26px}
.pulse-toc li{margin-bottom:9px;font-size:.85rem;line-height:1.4;break-inside:avoid}
.pulse-toc a{color:var(--ink);font-weight:650}
.pulse-toc a:hover,.pulse-toc a:focus-visible{color:var(--forest)}

.pulse-figure{margin:30px 0;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(13,28,35,.09)}
.pulse-figure img{width:100%;height:auto;display:block}
.pulse-figure figcaption{padding:12px 18px;background:var(--sage);color:var(--muted);font-size:.76rem}

.article-card h3{margin:22px 0 10px;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.35rem;line-height:1.3;color:var(--ink)}

@media(max-width:700px){
  .pulse-toc ol{columns:1}
  .pulse-summary{padding:22px 20px}
  .pulse-toc{padding:20px 18px}
}

/* The SR homepage keeps its consultation-form geometry in its own inline <style>,
   so only the colour overrides above are shared. The /en/ contact form is built
   from .article-card and .form instead; the consent row is the one element with
   no equivalent here. Scoped to .en-consent, which exists only under /en/. */
.form label.en-consent{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;border:1px solid #cbd6cf;border-radius:12px;background:#fff;
}
.form .en-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;padding:0}
.form .en-consent span{font-size:.82rem;font-weight:600;color:#56645c}

/* Field geometry for the /en/ consultation grid, matching the SR homepage form.
   Scoped to the one element carrying BOTH classes, so every other .form on the
   site (and .consultation-fields on its own) keeps exactly the rules it had. */
.form.consultation-fields{gap:15px}
.form.consultation-fields>label{align-content:start}
.form.consultation-fields input,
.form.consultation-fields select,
.form.consultation-fields textarea{min-height:51px;border-radius:12px}
/* Left alone, a text input renders 54px, a <select> 51px and a date input 56px,
   so two fields sharing a row never line up. Padding is already identical; the
   difference is intrinsic content height (line-height:normal on select, the
   spinner box on date). Pinning both settles all three on one height. */
.form.consultation-fields input:not([type="checkbox"]),
.form.consultation-fields select{height:54px;min-height:54px;line-height:26px}
.form.consultation-fields textarea{min-height:136px;height:auto;resize:vertical}
.form.consultation-fields small{color:#7b887f;font-size:.66rem;line-height:1.45}
.form.consultation-fields>.en-consent{margin-top:3px}

/* SR | EN language switcher. Sits in the existing .nav-actions on desktop and in
   the existing .mobile-menu below the nav breakpoint, so exactly one copy is
   visible at any width and the existing mobile toggle already controls it.
   No JavaScript: the active language is plain text, only the other one is a link. */
.lang-switch{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border:1px solid var(--line);border-radius:10px;
  font-size:.78rem;font-weight:800;line-height:1;letter-spacing:.02em;
}
.lang-switch [aria-current="page"]{color:var(--forest)}
.lang-switch a{color:var(--muted);text-decoration:none}
.lang-switch a:hover,.lang-switch a:focus-visible{color:var(--forest)}
.lang-switch .lang-sep{color:var(--line);font-weight:400}

@media(max-width:1040px){
  /* header copy steps aside for the hamburger; .mobile-menu carries it instead */
  .nav-actions>.lang-switch{display:none}
}

/* Inside the mobile menu the generic ".mobile-menu a" row styling would turn each
   code into a full-width padded row, so it is neutralised here. */
.mobile-menu .lang-switch{margin-top:6px;padding:13px 14px;justify-content:flex-start}
.mobile-menu .lang-switch a{padding:0;border:0}