/* Podstranice usluga i blog: isti monokromni stil kao naslovna i uvjeti poslovanja. */
html, body { margin: 0; }
:root {
  --black: #000000; --ink: #0b0b0b; --white: #ffffff; --grey: #d4d4d4; --mid: #8a8a8a; --line: rgba(0,0,0,.14); --green: #3faf7f;
  --body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --tech: "Chakra Petch", "Eurostile", ui-monospace, monospace;
  --mark: "Syne", "Avenir Next", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--body); }
a { color: inherit; }
a:hover { color: var(--green); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.lbl { font: 400 14px/1.4 var(--tech); text-transform: uppercase; letter-spacing: .09em; }
.dim { color: var(--mid); }
.wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px)); }
.top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 120px; }
.top a { text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; }
.crumbs { grid-column: 1 / -1; margin: 0 0 16px; }
.crumbs a { text-decoration: none; }
h1 { grid-column: 1 / -1; margin: 0 0 80px; font: 500 clamp(40px, 5vw, 72px)/1.02 var(--body); letter-spacing: -.01em; max-width: 18ch; }
.side { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.side .price { font: 700 clamp(44px, 5vw, 72px)/.9 var(--mark); letter-spacing: -.05em; margin: 0; }
.side p { margin: 0; }
.doc { grid-column: 7 / -1; max-width: 68ch; }
.doc .lead { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; margin: 0 0 32px; }
.doc h2 { font: 400 14px/1.4 var(--tech); text-transform: uppercase; letter-spacing: .09em; margin: 48px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.doc h3 { font: 500 20px/1.3 var(--body); margin: 28px 0 8px; }
.doc p, .doc ul, .doc ol { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 4px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 12px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.doc th { font: 400 12px/1.4 var(--tech); text-transform: uppercase; letter-spacing: .09em; color: var(--mid); }
.doc details { border-top: 1px solid var(--line); padding: 12px 0; }
.doc summary { cursor: pointer; font-weight: 500; }
.doc details p { margin: 8px 0 0; }
.doc figure { margin: 24px 0; }
.doc figcaption { margin-top: 8px; }
.meta { margin: 0 0 24px; }
.btn { display: inline-block; background: var(--black); color: var(--white); padding: 14px 20px; text-decoration: none; font: 400 13px/1 var(--tech); letter-spacing: .09em; text-transform: uppercase; }
.btn:hover { background: var(--green); color: var(--white); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.cards { list-style: none; padding: 0 !important; display: grid; gap: 0; }
.cards li { border-top: 1px solid var(--line); padding: 16px 0; margin: 0; }
.cards a { text-decoration: none; display: grid; gap: 4px; }
.cards b { font: 500 22px/1.25 var(--body); }
.foot { grid-column: 1 / -1; margin-top: 120px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; }
.foot > * { margin: 0; }
.foot .a { grid-column: 1 / span 4; }
.foot .b { grid-column: 5 / span 4; display: grid; gap: 4px; align-content: start; }
.foot .c { grid-column: 9 / -1; display: grid; gap: 4px; align-content: start; }
.foot a { text-decoration: none; }
@media (max-width: 800px) {
  .side, .doc { grid-column: 1 / -1; }
  .side { margin-bottom: 48px; }
  .top { padding-bottom: 64px; flex-direction: column; }
  .top nav { justify-content: flex-start; }
  h1 { margin-bottom: 48px; }
  .foot .a, .foot .b, .foot .c { grid-column: 1 / -1; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; } .doc thead { display: none; } .doc td { border: 0; padding: 2px 0; } .doc tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
}