/* ============================================================
   Advokatska kancelarija — DIZAJN 2 „Zeleni registar"
   Boca-zelena + sijena, hladan papir.

   ZASTO POSTOJI: prethodni dizajn 2 (teget #0f1c33 / zlatna #c9a24b) je PRODAT
   klijentkinji (Branka Stojanovic Savic, advokatbrankastojanovic.com, 25.8.2026).
   Da je ostao u ponudi, ~3.277 prospekata bi dobilo sajt iste palete kao njen zivi
   sajt. Isto se ranije desilo sa dizajnom 1 (Nevenka Maksimovic) i knjigovodstvenim
   dizajnom 2 (Pro-abacus).

   Tipografija je NAMERNO obrnuta u odnosu na dizajne 1/2/3, koji su svi
   serif-naslov + sans-telo: ovde su naslovi grotesk, a telo serif.
   ============================================================ */

:root{
  --zelena:       #16332b;   /* podloga: hero, pristup, podnozje */
  --zelena-tamna: #0e231d;   /* zaglavlje, dublji slojevi */
  --zelena-srednja:#1b3d33;
  --zelena-svetla:#204c40;   /* izdignute povrsine na tamnom */
  --zelena-bleda: #e8ede9;   /* najsvetlija, za znacke na papiru */

  --siena:        #c26a3c;   /* akcenat — poveza pravnih knjiga */
  --siena-svetla: #dd8f60;
  --siena-bleda:  #f6e7dd;

  --papir:        #f2f3ef;   /* hladno belo sa zelenim podtonom */
  --papir-2:      #e7e9e3;
  --bela:         #ffffff;

  --mastilo:      #18201d;
  --mastilo-blaga:#465049;
  --tiho:         #6d766f;
  --linija:       #d8ddd4;
  --linija-blaga: #e6e9e2;
  --linija-tamna: rgba(232,237,233,.16);

  /* Naslovi: grotesk. Telo: serif. Obrnuto od ostalih advokatskih dizajna. */
  --grot: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --maxw: 1160px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --r: 4px;
  --senka: 0 1px 2px rgba(20,40,34,.05), 0 10px 30px rgba(20,40,34,.07);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.7;
  color:var(--mastilo);
  background:var(--papir);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
[hidden]{ display:none !important; }   /* mobilni meni ostaje zatvoren — vidi gotcha #37 */

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3,.eyebrow,.section-tag,.btn,.nav,.brand-name,.card-num,.step-num,.info-label,.hc-title,.hamburger-label{
  font-family:var(--grot);
}
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:700; text-wrap:balance; }

/* ---------- ZAGLAVLJE ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--zelena-tamna);
  border-bottom:1px solid var(--linija-tamna);
}
.header-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.25rem;
}
/* ── Zaglavlje: meni se ne lomi po sredini stavke ───────────────────────────
   Nadjeno 2026-08-11 kod „Advokat Ivana Popovic Tomanovic": dugo ime gura navigaciju,
   pa su se stavke menija prelamale u dva reda i zaglavlje je izgledalo pokvareno.
   Pravilo: stavke menija i telefon NIKAD ne prelamaju; ime kancelarije sme da se
   prelomi ili skrati, jer je ono jedino sto varira po firmi. */
.header-inner{ flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; min-width:0; }
.brand-text{ min-width:0; }                 /* bez ovoga flex stavka ne sme da se smanji */
.brand-name{ overflow-wrap:anywhere; }      /* prelom dugackog imena, ne razvlacenje zaglavlja */
.nav{ flex:0 0 auto; }
.brand-mark{
  flex:none; width:40px; height:40px; border-radius:var(--r);
  background:var(--siena); color:var(--zelena-tamna);
  display:grid; place-items:center;
  font-family:var(--grot); font-weight:700; font-size:1.02rem; letter-spacing:.01em;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{ color:var(--papir); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.brand-sub{ color:rgba(232,237,233,.62); font-family:var(--serif); font-size:.79rem; font-style:italic; }

.nav{ display:none; gap:1.35rem; }
.nav a{
  color:rgba(232,237,233,.82); text-decoration:none;
  font-size:.83rem; font-weight:500; letter-spacing:.01em;
  padding-block:.35rem; transition:color .18s;
}
.nav a:hover{ color:var(--siena-svetla); }
.nav a.active{ color:var(--siena-svetla); text-decoration:none; }
/* UX blok podvlaci aktivnu stavku; ovde je akcenat boja, pa se podvlaka gasi */
body .nav a.active{ text-decoration:none; }

.header-phone{
  display:none; align-items:center; gap:.45rem;
  color:var(--zelena-tamna); background:var(--siena);
  text-decoration:none; font-family:var(--grot); font-weight:700; font-size:.85rem;
  padding:.5rem .9rem; border-radius:var(--r);
  transition:background .18s;
}
.header-phone:hover{ background:var(--siena-svetla); }

.hamburger{
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--papir);
  border:1px solid var(--linija-tamna); border-radius:var(--r);
  padding:.45rem .7rem; cursor:pointer;
  font-family:var(--grot); font-size:.8rem; font-weight:600;
}
.mobile-nav{ background:var(--zelena-tamna); border-top:1px solid var(--linija-tamna); padding:.5rem var(--pad) 1rem; }
.mobile-nav a{
  display:block; padding:.7rem 0; text-decoration:none;
  color:rgba(232,237,233,.88); font-family:var(--grot); font-size:.95rem;
  border-bottom:1px solid var(--linija-tamna);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-phone{ color:var(--siena-svetla) !important; font-weight:700; }

@media (min-width:1040px){
  .nav{ display:flex; }
  .header-phone{ display:inline-flex; }
  .hamburger{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------- HERO ---------- */
.hero{
  background:var(--zelena);
  color:var(--papir);
  padding-block:clamp(3.5rem,8vw,6.5rem);
  position:relative;
  overflow:hidden;
}
/* tanke vodoravne linije — motiv registarskog lista, jedva vidljiv */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(232,237,233,.05) 0 1px, transparent 1px 34px);
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.hero-inner{ position:relative; z-index:1; display:grid; gap:clamp(2rem,5vw,3.5rem); }
.eyebrow{
  margin:0 0 1.1rem; color:var(--siena-svetla);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.hero h1{ font-size:clamp(2.1rem,6vw,3.7rem); letter-spacing:-.03em; }
.hero h1 span{ color:var(--siena-svetla); }
.hero-lead{
  margin:1.4rem 0 0; max-width:34rem;
  color:rgba(232,237,233,.84); font-size:clamp(1.02rem,2.1vw,1.16rem);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-size:.88rem; font-weight:700; letter-spacing:.01em;
  padding:.85rem 1.5rem; border-radius:var(--r); border:1px solid transparent;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{ background:var(--siena); color:var(--zelena-tamna); }
.btn-primary:hover{ background:var(--siena-svetla); }
.btn-ghost{ background:transparent; color:var(--papir); border-color:rgba(232,237,233,.34); }
.btn-ghost:hover{ border-color:var(--siena-svetla); color:var(--siena-svetla); }
.btn-block{ display:block; width:100%; text-align:center; }

/* kartica sa podacima — „posetnica" kancelarije */
.hero-card{
  background:var(--zelena-svetla);
  border:1px solid var(--linija-tamna);
  border-top:3px solid var(--siena);
  border-radius:var(--r);
  padding:1.6rem 1.5rem 1.4rem;
}
.hc-title{
  margin:0 0 1.1rem; color:var(--siena-svetla);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.hc-list{ margin:0; display:grid; gap:.95rem; }
.hc-list > div{ display:grid; gap:.15rem; }
.hc-list dt{
  font-family:var(--grot); font-size:.72rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:rgba(232,237,233,.55);
}
.hc-list dd{ margin:0; font-size:.97rem; color:var(--papir); }
.hc-list dd a{ color:var(--papir); text-decoration:none; border-bottom:1px solid rgba(221,143,96,.5); }
.hc-list dd a:hover{ color:var(--siena-svetla); }
.hc-note{
  margin:1.3rem 0 0; padding-top:1rem; border-top:1px solid var(--linija-tamna);
  font-size:.82rem; font-style:italic; color:rgba(232,237,233,.6);
}

@media (min-width:940px){
  .hero-inner{ grid-template-columns:1fr minmax(19rem,23rem); align-items:center; }
}

/* ---------- FOTO BAND ---------- */
.foto-band{ background:var(--papir); padding-block:0; }
.foto-band .fb-in{ padding-inline:0; max-width:none; }
.foto-band img{ display:block; width:100%; height:clamp(120px,17vw,220px); object-fit:cover; }

/* ---------- SEKCIJE ---------- */
.section{ padding-block:clamp(3.2rem,7vw,5.5rem); }
.section-head{ margin-bottom:clamp(2rem,4vw,3rem); }
.section-tag{
  display:inline-block; margin-bottom:.7rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--siena);
}
.section h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); }
.section-head h2::after{
  content:""; display:block; width:44px; height:3px; margin-top:1rem; background:var(--siena);
}

/* ---------- O KANCELARIJI ---------- */
.about{ background:var(--papir); }
.about-grid{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); }
.about-head{ margin-bottom:0; }
.about-head h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); }
.about-head h2::after{ content:""; display:block; width:44px; height:3px; margin-top:1rem; background:var(--siena); }
.about-body p{ margin:0 0 1.1rem; color:var(--mastilo-blaga); }
.about-body .lede{ font-size:clamp(1.06rem,2.2vw,1.24rem); color:var(--mastilo); }
.about-body .note{
  margin-top:1.6rem; padding-left:1rem; border-left:3px solid var(--siena);
  font-style:italic; color:var(--tiho); font-size:.92rem;
}
@media (min-width:900px){
  .about-grid{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); }
}

/* ---------- OBLASTI PRAVA — registar, ne kartice ---------- */
.practice{ background:var(--papir-2); }
.practice-grid{ display:grid; gap:0; border-top:1px solid var(--linija); }
.practice-card{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem; align-items:start;
  padding:1.5rem 0; border-bottom:1px solid var(--linija);
  transition:background .18s;
}
.practice-card:hover{ background:rgba(255,255,255,.55); }
.card-num{
  grid-row:1 / span 2;
  font-size:.82rem; font-weight:700; letter-spacing:.06em;
  color:var(--siena);
  padding-top:.25rem; min-width:1.8rem;
  font-variant-numeric:tabular-nums;
}
.practice-card h3{ font-size:1.09rem; letter-spacing:-.015em; }
.area-list{
  grid-column:2; margin:.5rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.3rem .9rem;
  color:var(--tiho); font-size:.92rem;
}
.area-list li{ position:relative; padding-left:.85rem; }
.area-list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:5px; height:1px; background:var(--siena);
}
@media (min-width:860px){
  .practice-grid{ grid-template-columns:1fr 1fr; column-gap:3rem; }
  .practice-grid > :nth-child(-n+2){ border-top:none; }
}

/* ---------- PRISTUP RADU — tamna traka ---------- */
.approach{ background:var(--zelena); color:var(--papir); }
.approach .section-tag{ color:var(--siena-svetla); }
.approach h2{ color:var(--papir); }
.approach .section-head h2::after{ background:var(--siena-svetla); }
.approach-grid{ display:grid; gap:1px; background:var(--linija-tamna); border:1px solid var(--linija-tamna); }
.approach-item{ background:var(--zelena); padding:1.7rem 1.5rem; }
.approach-icon{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:1rem;
  border-radius:var(--r); background:rgba(194,106,60,.16); color:var(--siena-svetla);
}
.approach-item h3{ font-size:1.02rem; margin-bottom:.5rem; }
.approach-item p{ margin:0; color:rgba(232,237,233,.72); font-size:.93rem; }
@media (min-width:640px){ .approach-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .approach-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- SARADNJA — vertikalna traka sa spojnicom ---------- */
.process{ background:var(--papir); }
.steps-grid{ display:grid; gap:0; position:relative; }
.step-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  padding:0 0 2rem; position:relative;
}
.step-item:last-child{ padding-bottom:0; }
/* spojnica izmedju brojeva */
.step-item:not(:last-child)::before{
  content:""; position:absolute; left:21px; top:44px; bottom:0; width:1px;
  background:var(--linija);
}
.step-num{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:1;
  background:var(--zelena); color:var(--siena-svetla);
  font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.step-item h3{ font-size:1.06rem; margin:.5rem 0 .4rem; }
.step-item p{ margin:0; color:var(--mastilo-blaga); font-size:.95rem; }
@media (min-width:1000px){
  .steps-grid{ grid-template-columns:repeat(4,1fr); gap:2rem; }
  .step-item{ grid-template-columns:1fr; padding-bottom:0; }
  .step-item:not(:last-child)::before{ left:44px; right:-2rem; top:21px; bottom:auto; width:auto; height:1px; }
}

/* ---------- ČESTA PITANJA ---------- */
.faq{ background:var(--papir-2); }
.faq-list{ display:grid; gap:0; border-top:1px solid var(--linija); }
.faq-item{ border-bottom:1px solid var(--linija); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--grot); font-size:1rem; font-weight:600; letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:.4rem; top:1.5rem;
  width:9px; height:9px; border-right:2px solid var(--siena); border-bottom:2px solid var(--siena);
  transform:rotate(45deg); transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); top:1.75rem; }
.faq-item p{ margin:0 0 1.3rem; padding-right:2.5rem; color:var(--mastilo-blaga); font-size:.95rem; }

/* ---------- KONTAKT ---------- */
.contact{ background:var(--papir); }
.contact-grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
.info-list{ margin:0 0 1.6rem; padding:0; list-style:none; display:grid; gap:1.05rem; }
.info-list li{ display:grid; gap:.2rem; padding-bottom:1.05rem; border-bottom:1px solid var(--linija); }
.info-list li:last-child{ border-bottom:none; padding-bottom:0; }
.info-label{
  font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--tiho);
}
.info-value{ font-size:1rem; color:var(--mastilo); }
.info-value a{ color:var(--mastilo); text-decoration:none; border-bottom:1px solid var(--siena); }
.info-value a:hover{ color:var(--siena); }

.map-wrap{
  border:1px solid var(--linija); border-radius:var(--r); overflow:hidden;
  background:var(--papir-2); aspect-ratio:16/10;
}
.map-wrap iframe{ display:block; width:100%; height:100%; border:0; }
.map-link{
  display:inline-block; margin-top:.85rem;
  font-family:var(--grot); font-size:.83rem; font-weight:600;
  color:var(--siena); text-decoration:none; border-bottom:1px solid currentColor;
}

.contact-form-wrap{
  background:var(--bela); border:1px solid var(--linija);
  border-top:3px solid var(--siena); border-radius:var(--r);
  padding:1.8rem 1.6rem; box-shadow:var(--senka);
}
.contact-form-wrap h3{ font-size:1.15rem; margin-bottom:1.3rem; }
.field{ margin-bottom:1.05rem; }
.field label{
  display:block; margin-bottom:.35rem;
  font-family:var(--grot); font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tiho);
}
.field input, .field textarea{
  width:100%; padding:.75rem .85rem;
  font-family:var(--serif); font-size:.97rem; color:var(--mastilo);
  background:var(--papir); border:1px solid var(--linija); border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--siena); box-shadow:0 0 0 3px rgba(194,106,60,.14);
}
.field textarea{ resize:vertical; min-height:6.5rem; }
.form-status{
  margin:.9rem 0 0; font-size:.9rem; color:var(--zelena); font-family:var(--grot); font-weight:600;
  opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s;
}
.form-status.is-visible{ opacity:1; transform:none; }
/* Ishod posle povratka sa posalji.php: ?err=1 prazna polja · ?err=2 slanje nije uspelo (gotcha #122) */
.form-error{
  margin:.9rem 0 0; padding:.7rem .85rem;
  background:#fbeeee; border-left:3px solid #a8322d;
  color:#5f1f1c; font-family:var(--grot); font-size:.9rem;
}
.form-error p{ margin:0; }
.form-error a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.form-error a[href^="tel:"]{ white-space:nowrap; }
.form-disclaimer{
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--linija-blaga);
  font-size:.8rem; font-style:italic; color:var(--tiho); line-height:1.6;
}
@media (min-width:900px){
  .contact-grid{ grid-template-columns:1fr minmax(0,25rem); align-items:start; }
}

/* ---------- PODNOŽJE ---------- */
.site-footer{ background:var(--zelena-tamna); color:rgba(232,237,233,.7); padding-block:2.8rem 2.2rem; }
.footer-inner{ display:grid; gap:.7rem; }
.footer-brand{ display:flex; align-items:center; gap:.65rem; margin-bottom:.4rem; }
.footer-name{ font-family:var(--grot); font-weight:700; color:var(--papir); font-size:1rem; }
.footer-line{ margin:0; font-size:.88rem; }
.footer-note{ margin:0; font-size:.84rem; font-style:italic; color:rgba(232,237,233,.55); }
.footer-copy{
  margin:.9rem 0 0; padding-top:1rem; border-top:1px solid var(--linija-tamna);
  font-size:.8rem; color:rgba(232,237,233,.45);
}
/* potpis koji ubacuje generator */
.ax-credit{ margin:.5rem 0 0; font-size:.8rem; color:rgba(232,237,233,.45); }
.ax-credit a{ color:rgba(232,237,233,.7); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
/* `.in` je zastita od BELOG EKRANA, ne ukras: generator ubacuje kod koji tu klasu doda
   svim `.reveal` sekcijama na prvi klik na sidro. Ako IntersectionObserver ne opali
   (stari/strogi pregledac, blokiran JS posle ucitavanja), sekcije ostaju na opacity 0 i
   covek vidi PRAZNU stranu. Prenetо iz dizajna 1 — nov dizajn je bez toga bio
   nezasticen isto kao sto su advokati bili do 2026-08-13. */
.reveal.is-visible,
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- FOKUS ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--siena); outline-offset:2px;
}

/* sidro ispod lepljivog zaglavlja */
section[id]{ scroll-margin-top:80px; }

/* „nazad na vrh" ubacuje generator sa tvrdo upisanom teget bojom — pretice ga
   veca specificnost (body #toTop), jer njegov <style> dolazi POSLE ovog fajla */
body #toTop{ background:var(--zelena); color:var(--papir); }


/* ── Zaglavlje na telefonu: JEDAN red (3.9.2026), ime se NE skraćuje (25.9.2026) ──
   Dug naziv firme je brend gurao u dva reda, pa je dugme menija padalo ispod
   (isti kvar nadjen i na knjigovodstvenim d2/d3). 3.9. je to reseno skracivanjem
   sa tri tacke — ali ime klijenta se nikad ne skracuje (gotcha #98; pregled 25.9.
   je nasao „Advokat Ime Pre…"). Ime se sada prelama, a podnaslov se sklanja, kao
   u dizajnu 1: hero odmah ispod pocinje istim recima. */
@media (max-width:700px){
  .header-inner{ flex-wrap:nowrap; }
  .brand{ min-width:0; }
  .brand-text{ min-width:0; }
  .brand-text>.brand-sub{ display:none; }
  .brand-text>.brand-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.18; font-size:.95rem; }
}

/* ═══ Fotografija advokata (12.10.2026, poslao advokat) — desno od teksta, na telefonu ispod ═══ */
#o-kancelariji .about-foto { margin: 0; }
#o-kancelariji .about-foto img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  #o-kancelariji .about-inner, #o-kancelariji .about-grid {
    grid-template-columns: minmax(0, 1fr) 300px;   /* 12.10.2026: advokat tražio manju fotografiju (bila ~430 px) */
    grid-template-areas: "glava foto" "tekst foto";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.2rem, 4.5vw, 4.2rem); row-gap: 0; align-items: start;
  }
  #o-kancelariji .section-head, #o-kancelariji .about-head { grid-area: glava; }
  #o-kancelariji .about-body { grid-area: tekst; }
  #o-kancelariji .about-foto { grid-area: foto; }
}
@media (max-width: 899.98px) { #o-kancelariji .about-foto { margin-top: 2rem; max-width: 260px; } }

#o-kancelariji .about-foto img { border-top: 3px solid var(--siena); border-radius: var(--r); box-shadow: 0 18px 40px -22px rgba(14, 35, 29, .45); }
#o-kancelariji .about-foto figcaption { margin-top: .7rem; font-size: .86rem; font-style: italic; color: var(--tiho); }

/* Potpis izrađivača — dodaje ga napravi-live.py (demo verzija ga nema). Boje futera dizajna 2. */
.footer-made{ margin:.35rem 0 0; font-size:.8rem; color:rgba(232,237,233,.45); }
.footer-made a{ color:rgba(232,237,233,.7); text-decoration:underline; text-underline-offset:2px; }
.footer-made a:hover{ color:var(--papir); }