:root{
  --paper:#EFE9DC;
  --paper-2:#E6DFCE;
  --ink:#201E1B;
  --ink-soft:#6E695E;
  --line: rgba(32,30,27,0.12);
  --accent:#8A6A3B;
  --accent-soft: rgba(138,106,59,0.32);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Manrope',sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
.serif{ font-family:'Fraunces',serif; }
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:100%; object-fit:cover;}
.wrap{ max-width:1180px; margin:0 auto; padding:0 48px; }
.rule{ height:1px; background:var(--line); border:none; }
.label{
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:14px; font-weight:600;
}
.label::after{ content:''; flex:0 0 40px; height:1px; background:var(--accent-soft); }

/* ---- header ---- */
header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:26px 0; }
header.scrolled{ background:rgba(247,244,238,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.wordmark{ font-family:'Fraunces',serif; font-size:16px; letter-spacing:0.26em; text-transform:uppercase; }
nav.links ul{ list-style:none; display:flex; gap:36px; }
nav.links a{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); transition:color .25s; }
nav.links a:hover, nav.links a.active{ color:var(--ink); }
.nav-cta{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--ink); padding:11px 22px; border-radius:2px; transition:.25s; }
.nav-cta:hover{ background:var(--ink); color:var(--paper); }
.hamburger{ display:none; }
@media(max-width:900px){
  nav.links{ display:none; }
  .hamburger{ display:block; background:none; border:none; cursor:pointer; }
}

/* ---- page header (non-home pages) ---- */
.page-head{ padding:170px 0 70px; }
.page-head .label{ margin-bottom:22px; }
.page-head h1{ font-size:clamp(34px,4.2vw,54px); font-weight:400; max-width:16ch; }
.page-head p{ font-size:15.5px; color:var(--ink-soft); max-width:520px; margin-top:20px; line-height:1.7; }

/* ---- section shared ---- */
section{ padding:110px 0; }
.sec-head{ margin-bottom:60px; }
.sec-head h2{ font-size:clamp(28px,3.2vw,42px); font-weight:400; margin-top:18px; max-width:600px; }

/* ---- usluge : alternating editorial rows ---- */
.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
  padding:60px 0; border-bottom:1px solid var(--line);
}
.service-row:first-of-type{ border-top:1px solid var(--line); }
.service-row.rev .s-media{ order:2; }
.service-row.rev .s-text{ order:1; }
.s-media{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.s-text .idx{ font-family:'Fraunces',serif; font-size:13px; color:var(--accent); letter-spacing:0.08em; margin-bottom:18px; display:block; }
.s-text h3{ font-size:clamp(24px,2.6vw,32px); font-weight:400; margin-bottom:14px; }
.s-text p.desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom:22px; }
.s-meta{ display:flex; gap:26px; align-items:baseline; margin-top:8px; padding-top:22px; border-top:1px solid var(--line); }
.s-price{ font-family:'Fraunces',serif; font-size:26px; font-style:italic; color:var(--accent); }
.s-time{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.s-link{ margin-left:auto; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:2px; }
@media(max-width:820px){
  .service-row, .service-row.rev{ grid-template-columns:1fr; gap:26px; }
  .service-row.rev .s-media, .service-row.rev .s-text{ order:initial; }
}

/* ---- detail page (usluga/blog/edukacija) ---- */
.detail-hero{ padding:170px 0 0; }
.detail-media{ width:100%; aspect-ratio:16/7; overflow:hidden; margin-top:40px; }
.detail-body{ max-width:720px; margin:0 auto; padding:70px 48px; }
.detail-body h1{ font-size:clamp(30px,4vw,46px); font-weight:400; margin-bottom:24px; }
.detail-body .meta-row{ display:flex; gap:30px; margin-bottom:40px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.detail-body p{ font-size:15.5px; line-height:1.85; color:var(--ink-soft); margin-bottom:20px; font-weight:300; }
.back-link{ display:inline-block; margin-bottom:30px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.back-link:hover{ color:var(--ink); }

/* ---- my world system : quiet, no photos ---- */
.system{ background:var(--paper-2); }
.system-names{ display:flex; flex-direction:column; margin-top:50px; }
.sys-row{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); }
.sys-row:first-child{ border-top:1px solid var(--line); }
.sys-name{ font-family:'Fraunces',serif; font-size:clamp(20px,2.2vw,26px); font-weight:400; }
.sys-tag{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-soft); padding:6px 14px; border-radius:20px; }
.signup{ display:flex; max-width:440px; border-bottom:1px solid var(--ink); padding-bottom:6px; margin-top:44px; }
.signup input{ flex:1; background:transparent; border:none; color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; padding:12px 0; font-weight:300; }
.signup input::placeholder{ color:var(--ink-soft); }
.signup input:focus{ outline:none; }
.signup button{ background:none; border:none; color:var(--accent); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; padding:12px 0 12px 18px; font-weight:600; }
.signup-note{ font-size:11px; color:var(--ink-soft); margin-top:14px; }

/* ---- blog / edukacija list cards ---- */
.card-list{ display:flex; flex-direction:column; }
.card-row{ display:grid; grid-template-columns:220px 1fr; gap:36px; padding:34px 0; border-bottom:1px solid var(--line); align-items:center; }
.card-row:first-child{ border-top:1px solid var(--line); }
.card-row .c-media{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.card-row h3{ font-size:clamp(19px,2vw,24px); font-weight:400; margin-bottom:10px; }
.card-row p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:60ch; }
.card-row .c-tag{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block; }
@media(max-width:640px){ .card-row{ grid-template-columns:1fr; } }

/* ---- kontakt ---- */
.kontakt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.kontakt-item{ padding:22px 0; border-bottom:1px solid var(--line); }
.kontakt-item:first-child{ border-top:1px solid var(--line); }
.kontakt-item .k-label{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block; }
.kontakt-item .k-val{ font-size:16px; }
.map-frame{ width:100%; aspect-ratio:4/3; border-radius:2px; overflow:hidden; border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:100%; border:0; }
@media(max-width:820px){ .kontakt-grid{ grid-template-columns:1fr; } }

/* ---- forms (generic) ---- */
.form-row{ margin-bottom:22px; }
.form-row label{ display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:12px 0; font-family:'Manrope',sans-serif; font-size:15px; color:var(--ink); font-weight:300;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--ink); }
.form-submit{
  background:var(--ink); color:var(--paper); border:none; padding:15px 34px; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:.25s; font-weight:600;
}
.form-submit:hover{ background:var(--accent); }

/* ---- footer ---- */
footer{ padding:80px 0 40px; border-top:1px solid var(--line); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:30px; flex-wrap:wrap; }
.foot-mark{ display:flex; align-items:center; gap:14px; }
.foot-mark img{ width:36px; height:36px; }
.foot-mark .word{ font-family:'Fraunces',serif; font-size:13px; letter-spacing:0.24em; text-transform:uppercase; }
.foot-links{ display:flex; gap:34px; flex-wrap:wrap; }
.foot-links a{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--ink); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }

@media(prefers-reduced-motion: reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }

/* ---- pokret: Ken Burns na hero slici ---- */
.kenburns{ overflow:hidden; }
.kenburns img{ animation:kb 24s ease-in-out infinite alternate; will-change:transform; }
@keyframes kb{ from{ transform:scale(1); } to{ transform:scale(1.1); } }

/* ---- pokret: hero tekst ulazi pri učitavanju ---- */
.hero-enter{ opacity:0; transform:translateY(18px); animation:heroEnter 1s ease forwards; }
.hero-enter.d2{ animation-delay:.15s; }
.hero-enter.d3{ animation-delay:.3s; }
@keyframes heroEnter{ to{ opacity:1; transform:none; } }

/* ---- pokret: scroll-reveal za sekcije ---- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion: reduce){
  .kenburns img{ animation:none; }
  .hero-enter{ opacity:1; transform:none; animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}