:root{
    --ink:#1c1b17;
    --ink-soft:#2a2822;
    --parchment:#ede7d6;
    --parchment-dim:#e0d9c4;
    --amber:#e2a73a;
    --amber-dim:#c98f28;
    --verdigris:#3f5b50;
    --verdigris-light:#5c7c6f;
    --brick:#a8391e;
    --grey:#8b8370;
    --line: rgba(28,27,23,0.14);
    --line-light: rgba(237,231,214,0.18);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:'Source Serif 4', serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.eyebrow,nav a,.tag,.card-num,button,.btn{
    font-family:'Archivo Narrow', sans-serif;
    letter-spacing:0.01em;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}

  /* ---------- focus ---------- */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(237,231,214,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .headbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:1180px; margin:0 auto;
  }
  .logo{
    font-weight:700; font-size:1.15rem; text-transform:uppercase;
    letter-spacing:0.06em; display:flex; align-items:baseline; gap:8px;
  }
  .logo .dot{color:var(--amber); font-size:1rem;}
  .logo small{font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:0.6rem; color:var(--grey); letter-spacing:0.08em;}
  nav{display:flex; gap:26px;}
  nav a{
    font-size:0.86rem; text-transform:uppercase; font-weight:600;
    text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0;
  }
  nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--amber); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav a:hover::after{transform:scaleX(1);}
  nav a.active{color:var(--brick);}
  nav a.active::after{transform:scaleX(1); background:var(--brick);}
  .logo{text-decoration:none; color:inherit;}
  .breadcrumb{
    font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--grey);
    text-transform:uppercase; letter-spacing:0.08em; padding:18px 0 0;
  }
  .breadcrumb a{text-decoration:none; color:var(--grey);}
  .breadcrumb a:hover{color:var(--amber);}
  .page-hero{background:var(--ink); color:var(--parchment); padding:64px 0 54px;}
  .page-hero .wrap{padding-top:8px;}
  .page-hero h1{font-size:clamp(2rem, 4.4vw, 3.1rem); max-width:20ch;}
  .crumb-dark{color:var(--grey);}
  .crumb-dark a{color:#c9c1a8;}
  .crumb-dark a:hover{color:var(--amber);}
  .next-links{display:flex; flex-wrap:wrap; gap:16px; margin-top:20px;}
  .next-link{
    border:1px solid var(--line-light); padding:14px 20px; text-decoration:none; color:inherit;
    font-family:'Archivo Narrow',sans-serif; font-size:0.86rem; font-weight:600; text-transform:uppercase;
    display:flex; align-items:center; gap:8px; transition:border-color .2s ease, color .2s ease;
  }
  .next-link:hover{border-color:var(--amber); color:var(--amber);}
  .section .next-links .next-link{border-color:var(--line);}
  .section .next-links .next-link:hover{border-color:var(--brick); color:var(--brick);}
  .navtoggle{display:none;}
  @media (max-width:820px){
    nav{position:fixed; top:64px; left:0; right:0; background:var(--parchment); flex-direction:column;
      padding:18px 28px; gap:16px; border-bottom:1px solid var(--line); transform:translateY(-130%);
      transition:transform .3s ease;}
    nav.open{transform:translateY(0);}
    .navtoggle{display:block; background:none; border:1px solid var(--ink); color:var(--ink); padding:7px 12px; font-size:0.8rem; cursor:pointer;}
  }

  /* ---------- hero ---------- */
  .hero{
    background:var(--ink);
    color:var(--parchment);
    padding:76px 0 0;
    overflow:hidden;
  }
  .hero-inner{max-width:1180px; margin:0 auto; padding:0 28px 40px;}
  .eyebrow{
    font-size:0.78rem; text-transform:uppercase; font-weight:600; letter-spacing:0.14em;
    color:var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:22px;
  }
  .eyebrow .rule{width:34px; height:1px; background:var(--amber);}
  h1{
    font-size:clamp(2.3rem, 5.4vw, 4.1rem);
    font-weight:700; line-height:1.04; margin:0 0 26px;
    text-transform:uppercase; max-width:15ch;
  }
  h1 em{font-style:normal; color:var(--amber);}
  .hero-sub{
    font-family:'Source Serif 4', serif; font-size:1.15rem; max-width:52ch; color:#d9d2bc;
    margin:0 0 34px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 24px; font-size:0.86rem; font-weight:700; text-transform:uppercase;
    text-decoration:none; letter-spacing:0.04em; border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .2s ease, color .2s ease;
  }
  .btn-primary{background:var(--amber); color:var(--ink);}
  .btn-primary:hover{background:#f0ba58; transform:translateY(-1px);}
  .btn-ghost{border-color:var(--line-light); color:var(--parchment);}
  .btn-ghost:hover{border-color:var(--amber); color:var(--amber);}

  /* exposure timeline — signature element */
  .exposure{
    border-top:1px solid var(--line-light);
    padding-top:18px;
  }
  .exposure-label{
    display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
  }
  .exposure-chart{position:relative; height:64px;}
  .exposure-chart svg{width:100%; height:100%; overflow:visible;}
  .exposure-path{
    fill:none; stroke:var(--amber); stroke-width:2;
    stroke-dasharray:600; stroke-dashoffset:600;
    animation:draw 2.6s ease forwards .3s;
  }
  .exposure-dot{fill:var(--amber); opacity:0; animation:fadein .4s ease forwards 2.6s;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes fadein{to{opacity:1;}}
  .exposure-ticks{display:flex; justify-content:space-between; margin-top:6px;}
  .exposure-ticks span{font-family:'IBM Plex Mono',monospace; font-size:0.62rem; color:var(--grey);}

  /* ---------- generic section chrome ---------- */
  .section{padding:96px 0;}
  .section-alt{background:var(--parchment-dim);}
  .section-dark{background:var(--ink); color:var(--parchment);}
  .head-block{max-width:640px; margin-bottom:56px;}
  .head-block .eyebrow{color:var(--brick);}
  .section-dark .head-block .eyebrow{color:var(--amber);}
  h2{
    font-size:clamp(1.9rem, 3.4vw, 2.6rem); text-transform:uppercase; font-weight:700;
    margin:0 0 16px; line-height:1.08;
  }
  .lede{font-size:1.08rem; color:var(--ink-soft); max-width:56ch;}
  .section-dark .lede{color:#d9d2bc;}

  /* seam / tape divider — recurring motif tied to hermetisation tape seams */
  .seam{
    display:flex; align-items:center; gap:8px; margin:10px 0 40px;
    color:var(--grey); font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
  }
  .seam::before, .seam::after{content:""; flex:1; height:0; border-top:1px dashed var(--grey);}

  /* ---------- services grid ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (min-width:900px){.services-grid{grid-template-columns:repeat(3,1fr);}}
  @media (min-width:560px) and (max-width:899px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  .service-card{background:var(--parchment); padding:32px 26px; display:flex; flex-direction:column; gap:14px;}
  .card-num{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--brick); letter-spacing:0.05em;}
  .service-card h3{font-size:1.15rem; text-transform:uppercase; margin:0; line-height:1.25;}
  .service-card p{margin:0; font-size:0.95rem; color:var(--ink-soft);}

  /* ---------- process / materials ---------- */
  .materials{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px;}
  .material{
    border:1px solid var(--line); padding:24px 22px; background:var(--parchment);
    border-image: repeating-linear-gradient(90deg, var(--grey) 0 8px, transparent 8px 14px) 1;
    border-style:dashed; border-width:1px;
  }
  .material h4{margin:0 0 10px; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; font-size:1rem; letter-spacing:0.03em;}
  .material p{margin:0; font-size:0.92rem; color:var(--ink-soft);}
  .material .tag{
    display:inline-block; margin-bottom:12px; font-size:0.62rem; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--verdigris); font-weight:700;
  }

  /* ---------- wood pest field panel ---------- */
  .fieldpanel{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;}
  @media (max-width:860px){.fieldpanel{grid-template-columns:1fr;}}
  .beam{
    position:relative; background:#e9dfc4; border:1px solid var(--line); aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .beam svg{width:82%; height:82%;}
  .beam-cap{
    position:absolute; bottom:10px; left:10px; right:10px; font-family:'IBM Plex Mono',monospace;
    font-size:0.62rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.06em;
  }
  .pest-list{display:flex; flex-direction:column; gap:22px;}
  .pest-item{border-left:2px solid var(--verdigris); padding-left:18px;}
  .pest-item h4{margin:0 0 6px; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; font-size:1rem;}
  .pest-item p{margin:0; font-size:0.92rem; color:var(--ink-soft);}

  /* ---------- drvene kuce: flagship section ---------- */
  .kuce-section{padding:110px 0;}
  .route{
    display:flex; align-items:center; gap:14px; margin-bottom:20px;
    font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--grey);
  }
  .route .pin{color:var(--brick); font-weight:700;}
  .route .track{flex:1; position:relative; height:1px; background:repeating-linear-gradient(90deg, var(--grey) 0 6px, transparent 6px 11px);}
  .route .truck{position:absolute; top:-7px; left:38%; font-size:0.9rem; animation:travel 5s ease-in-out infinite alternate;}
  @keyframes travel{from{left:8%;} to{left:78%;}}
  @media (prefers-reduced-motion: reduce){.route .truck{animation:none; left:45%;}}

  .kuce-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:start; margin-top:50px;}
  @media (max-width:900px){.kuce-grid{grid-template-columns:1fr; gap:50px;}}

  .house-visual{
    position:relative; background:#e6dcc0; border:1px solid var(--line);
    aspect-ratio:5/4; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .house-visual svg{width:78%; height:78%;}
  .house-cap{position:absolute; bottom:10px; left:10px; right:10px; font-family:'IBM Plex Mono',monospace; font-size:0.62rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.06em;}

  .spine{position:relative; padding-left:30px;}
  .spine::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line);}
  .spine-item{position:relative; padding-bottom:38px;}
  .spine-item:last-child{padding-bottom:0;}
  .spine-item::before{
    content:""; position:absolute; left:-30px; top:4px; width:11px; height:11px; border-radius:50%;
    background:var(--parchment-dim); border:2px solid var(--amber-dim);
  }
  .spine-item.build::before{border-color:var(--verdigris);}
  .spine-item .ph{font-family:'IBM Plex Mono',monospace; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--brick); margin-bottom:4px; display:block;}
  .spine-item.build .ph{color:var(--verdigris);}
  .spine-item h4{margin:0 0 8px; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; font-size:1.05rem;}
  .spine-item p{margin:0; font-size:0.94rem; color:var(--ink-soft);}
  .section-dark .spine::before{background:var(--line-light);}
  .section-dark .spine-item p{color:#d9d2bc;}
  .section-dark .spine-item h4{color:var(--parchment);}
  .section-dark .spine-item::before{background:var(--ink-soft);}

  /* ---------- case files ---------- */
  .cases{display:flex; flex-direction:column; border-top:1px solid var(--line);}
  .case{
    display:grid; grid-template-columns:140px 1fr 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line);
  }
  @media (max-width:760px){.case{grid-template-columns:1fr;}}
  .case-id{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--brick); align-self:start;}
  .case h3{margin:0 0 8px; font-size:1.2rem; text-transform:uppercase;}
  .case .loc{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--grey); text-transform:uppercase; margin-bottom:10px; display:block;}
  .case p{margin:0; font-size:0.94rem; color:var(--ink-soft);}
  .case .result{font-size:0.86rem; color:var(--verdigris); font-weight:600; margin-top:10px; font-family:'IBM Plex Mono',monospace;}

  /* ---------- about ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  @media (max-width:860px){.about-grid{grid-template-columns:1fr;}}
  .permits{display:flex; flex-direction:column; gap:0; margin-top:8px;}
  .permit{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-light); font-family:'IBM Plex Mono',monospace; font-size:0.78rem;}
  .permit span:last-child{color:var(--amber);}

  /* ---------- contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
  .contact-block{display:flex; flex-direction:column; gap:22px;}
  .contact-line{display:flex; flex-direction:column; gap:4px;}
  .contact-line .lbl{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--grey);}
  .contact-line a, .contact-line span.val{font-size:1.1rem; font-family:'Archivo Narrow',sans-serif; font-weight:600; text-decoration:none;}
  .contact-line a:hover{color:var(--amber);}
  form{display:flex; flex-direction:column; gap:16px;}
  label{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--grey);}
  input, textarea{
    background:transparent; border:none; border-bottom:1px solid var(--ink); color:var(--parchment);
    padding:10px 2px; font-family:'Source Serif 4',serif; font-size:1rem;
  }
  .section-dark input, .section-dark textarea{border-bottom:1px solid var(--line-light); color:var(--parchment);}
  input::placeholder, textarea::placeholder{color:var(--grey);}
  input:focus, textarea:focus{outline:none; border-bottom-color:var(--amber);}
  textarea{resize:vertical; min-height:100px;}
  .formnote{font-size:0.8rem; color:var(--grey); margin-top:-4px;}
  form > div{display:flex; flex-direction:column; gap:6px;}
  form input, form textarea{width:100%; box-sizing:border-box;}

  /* ---------- modern polish: reveal animation ---------- */
  .reveal-target{opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.16,.8,.3,1), transform .65s cubic-bezier(.16,.8,.3,1);}
  .reveal-target.is-visible{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal-target{opacity:1; transform:none; transition:none;}
  }

  /* header depth on scroll */
  header{transition:box-shadow .3s ease, background .3s ease;}
  header.scrolled{box-shadow:0 8px 24px rgba(28,27,23,0.10);}

  /* ---------- modern polish: card depth + hover ---------- */
  .service-card, .material, .case, .permit, .house-visual, .beam{
    transition:transform .28s cubic-bezier(.16,.8,.3,1), box-shadow .28s ease, border-color .28s ease;
  }
  .service-card:hover, .material:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(28,27,23,0.12);
    z-index:2;
  }
  .service-card{border-radius:2px;}
  .material{border-radius:2px;}
  .case{border-radius:2px; transition:background .25s ease;}
  .case:hover{background:rgba(226,167,58,0.05);}
  .section-dark .case:hover{background:rgba(226,167,58,0.06);}

  /* button polish */
  .btn{border-radius:2px; transition:transform .2s cubic-bezier(.16,.8,.3,1), background .2s ease, color .2s ease, box-shadow .2s ease;}
  .btn-primary:hover{box-shadow:0 10px 26px rgba(226,167,58,0.35);}
  .btn-ghost:hover{transform:translateY(-1px);}
  .next-link{border-radius:2px; transition:transform .2s ease, border-color .2s ease, color .2s ease;}
  .next-link:hover{transform:translateY(-2px);}

  /* hero glow — subtle depth behind headline */
  .hero{position:relative;}
  .hero::before{
    content:""; position:absolute; top:-10%; left:50%; width:70%; max-width:800px; aspect-ratio:1;
    background:radial-gradient(circle, rgba(226,167,58,0.16) 0%, rgba(226,167,58,0) 70%);
    transform:translateX(-50%); pointer-events:none; z-index:0;
  }
  .hero-inner{position:relative; z-index:1;}

  /* scroll cue */
  .scroll-cue{
    display:flex; align-items:center; gap:8px; margin-top:8px; opacity:0.7;
    font-family:'IBM Plex Mono',monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--grey);
  }
  .scroll-cue .arrow{width:1px; height:22px; background:linear-gradient(var(--grey), transparent); position:relative; animation:cue 1.8s ease-in-out infinite;}
  @keyframes cue{0%,100%{opacity:0.3;} 50%{opacity:1;}}
  @media (prefers-reduced-motion: reduce){.scroll-cue .arrow{animation:none;}}

  /* refined type rhythm */
  h2{letter-spacing:-0.01em;}
  h1{letter-spacing:-0.015em;}
  .lede{line-height:1.65;}

  /* stagger nth-child polish inside grids for wave-in effect (JS sets delay; this is a fallback) */
  .services-grid .service-card, .materials .material{will-change:transform, opacity;}

  footer{
    background:var(--ink); color:var(--grey); padding:34px 0; font-size:0.8rem;
    border-top:1px solid var(--line-light);
  }
  .foot-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
  .foot-inner .mono{letter-spacing:0.04em;}

  /* homepage: 5 services — two featured on top, three below */
  @media (min-width:900px){
    .services-grid.services-five{grid-template-columns:repeat(6,1fr);}
    .services-five .service-card{grid-column:span 2;}
    .services-five .service-card:nth-child(-n+2){grid-column:span 3;}
  }

  /* hero tagline under the main headline */
  .hero-tag{font-family:'Source Serif 4',serif; font-style:italic; font-size:clamp(1.2rem,2.2vw,1.55rem); color:var(--amber); margin:-6px 0 22px; letter-spacing:0.005em;}
  h2 em{font-style:normal; color:var(--brick);}
  .section-dark h2 em{color:var(--amber);}
  .eyebrow-sub{font-family:'IBM Plex Mono',monospace; font-size:0.62rem; font-weight:400; letter-spacing:0.12em; color:var(--grey); margin-left:6px;}

  /* hero mini-mosaic — replaces exposure curve; drop photos into img/ with the listed names */
  .mosaic{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:44px;}
  .tile{
    position:relative; aspect-ratio:4/3; overflow:hidden; display:block; text-decoration:none;
    border:1px solid var(--line-light);
    background:var(--img) center/cover no-repeat, var(--fallback, linear-gradient(135deg,#3a3326,#24211b));
    opacity:0; transform:translateY(10px); animation:tilein .6s ease forwards;
  }
  .tile::before{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(28,27,23,.82), rgba(28,27,23,0) 60%); transition:opacity .3s ease;}
  .tile span{position:absolute; left:10px; bottom:8px; right:10px; font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--parchment);}
  .tile:hover{border-color:var(--amber);}
  .tile:hover::before{opacity:.55;}
  .tile-1{--fallback:linear-gradient(135deg,#4a3a22,#2a241a); animation-delay:.15s;}
  .tile-2{--fallback:linear-gradient(135deg,#5a4526,#2c2519); animation-delay:.25s;}
  .tile-3{--fallback:linear-gradient(135deg,#6b4f2c,#30271a); animation-delay:.35s;}
  .tile-4{--fallback:linear-gradient(135deg,#3f5b50,#22302a); animation-delay:.45s;}
  .tile-5{--fallback:linear-gradient(135deg,#5c4a33,#2a231a); animation-delay:.55s;}
  .tile-6{--fallback:linear-gradient(135deg,#4d5a4f,#262b26); animation-delay:.65s;}
  @keyframes tilein{to{opacity:1; transform:none;}}
  @media (max-width:760px){.mosaic{grid-template-columns:repeat(3,1fr);}}
  @media (prefers-reduced-motion: reduce){.tile{animation:none; opacity:1; transform:none;}}

  /* photo tiles */
  .tile{background:#24211b;}
  .tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform .5s ease, filter .3s ease;}
  .tile::before{z-index:1;}
  .tile span{z-index:2;}
  .tile:hover img{transform:scale(1.05); filter:saturate(1.05);}

  /* hero seal */
  .hero-inner{position:relative;}
  .hero-seal{position:absolute; top:10px; right:28px; width:200px; height:auto; transform:rotate(-8deg); opacity:.92; filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));}
  @media (max-width:980px){.hero-seal{display:none;}}

  /* reference photo strip */
  .ref-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0 34px;}
  .ref-strip figure{margin:0;}
  .ref-strip img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; border:1px solid var(--line-light);}
  .ref-strip figcaption{font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); margin-top:8px;}
  @media (max-width:760px){.ref-strip{grid-template-columns:1fr;}}

  /* about preview with illustration */
  .about-preview{display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center;}
  .about-art{margin:0;}
  .about-art img{width:100%; height:auto; display:block; border:1px dashed var(--grey); padding:6px; background:var(--parchment-dim);}
  .about-art figcaption{font-family:'Source Serif 4',serif; font-style:italic; font-size:0.9rem; color:var(--grey); margin-top:8px; text-align:center;}
  @media (max-width:860px){.about-preview{grid-template-columns:1fr;} .about-art{max-width:380px;}}

  /* Djelatnost: service rows */
  .page-hero h1 em{color:var(--amber); font-style:normal;}
  .svc-jump{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:28px;}
  .svc-jump a{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:inherit; opacity:.75; border-bottom:1px dashed currentColor; padding-bottom:2px;}
  .svc-jump a:hover{opacity:1; color:var(--amber);}
  .svc-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:46px 0; border-bottom:1px dashed var(--line); scroll-margin-top:90px;}
  .svc-row:first-child{padding-top:0;}
  .svc-row:last-child{border-bottom:none;}
  .svc-rev .svc-media{order:2;}
  .svc-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border:1px solid var(--line);}
  .svc-text h2{font-size:clamp(1.6rem,2.8vw,2.2rem); text-transform:uppercase; margin:10px 0 14px; line-height:1.1;}
  .svc-text p{margin:0 0 16px;}
  .svc-list{list-style:none; padding:0; margin:0 0 20px;}
  .svc-list li{position:relative; padding:7px 0 7px 22px; border-top:1px solid var(--line); font-size:0.98rem;}
  .svc-list li::before{content:""; position:absolute; left:2px; top:15px; width:9px; height:1px; background:var(--brick);}
  .svc-panel{aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:space-between; padding:28px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px), linear-gradient(135deg,#4a3a22,#24211b); border:1px dashed var(--grey); color:var(--parchment);}
  .svc-panel-words{font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(2rem,4vw,3.2rem); line-height:1.02; letter-spacing:-0.01em;}
  .svc-panel-note{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber);}
  .cta-band{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:end;}
  .cta-band .next-links{justify-content:flex-end;}
  @media (max-width:860px){.svc-row,.cta-band{grid-template-columns:1fr; gap:24px;} .svc-rev .svc-media{order:0;} .cta-band .next-links{justify-content:flex-start;}}

  /* ===== v3: cinematic hero, trust strip, panels, process, ref cards, footer ===== */
  .head-phone{margin-left:22px; padding:9px 16px; background:var(--amber); color:var(--ink); font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:0.86rem; letter-spacing:0.04em; text-decoration:none; white-space:nowrap; transition:background .2s ease;}
  .head-phone:hover{background:#f0ba58;}
  @media (max-width:900px){.head-phone{margin-left:auto; margin-right:10px; padding:7px 10px; font-size:0.78rem;}}

  .hero-bg{position:absolute; top:0; right:0; bottom:0; width:62%; background:url('img/hero-bg.jpg') center 20%/cover no-repeat; z-index:0;}
  .hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 0%, rgba(28,27,23,.88) 22%, rgba(28,27,23,.45) 60%, rgba(28,27,23,.55) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(28,27,23,0) 35%);}
  .hero::before{z-index:0;}
  .hero-rail{position:absolute; left:22px; top:90px; bottom:60px; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:1; font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber);}
  .hero-rail span:not(.rail-line){writing-mode:vertical-rl; transform:rotate(180deg);}
  .hero-rail .rail-line{flex:1; width:1px; background:rgba(226,167,58,.35);}
  @media (max-width:1300px){.hero-rail{display:none;}}
  @media (max-width:860px){.hero-bg{width:100%; opacity:.45;}}

  .trust{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:8px 0 34px; border-top:1px solid var(--line-light);}
  .trust-item{display:flex; gap:14px; align-items:flex-start; padding:20px 22px 4px 0;}
  .trust-item + .trust-item{border-left:1px solid var(--line-light); padding-left:22px;}
  .trust-item svg, .steps svg, .pan-ico svg{width:30px; height:30px; flex:0 0 auto; fill:none; stroke:var(--amber); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}
  .trust-item b{display:block; font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; margin-bottom:4px;}
  .trust-item span{font-size:0.86rem; color:rgba(237,231,214,.72); line-height:1.4;}
  @media (max-width:760px){.trust{grid-template-columns:1fr;} .trust-item + .trust-item{border-left:none; border-top:1px solid var(--line-light); padding-left:0;}}

  .svc-split{display:grid; grid-template-columns:minmax(260px,1fr) 2.2fr; gap:44px; align-items:center;}
  .svc-split .head-block{margin-bottom:0;}
  .panels{display:grid; grid-template-columns:repeat(5,1fr); gap:4px;}
  .pan{position:relative; aspect-ratio:9/15; display:flex; flex-direction:column; padding:18px 14px; color:var(--parchment); text-decoration:none; overflow:hidden;
       background:linear-gradient(180deg, rgba(28,27,23,.35), rgba(28,27,23,.85)), var(--img, none) center/cover no-repeat, var(--tint, #2a241a);}
  .pan-02{--tint:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px), linear-gradient(160deg,#5a4526,#221d16);}
  .pan-05{--tint:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px), linear-gradient(160deg,#6b5a2c,#24211b);}
  .pan-num{font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:2.6rem; line-height:1;}
  .pan-title{font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase; font-size:1rem; line-height:1.15; margin-top:14px;}
  .pan-ico{margin-top:auto;}
  .pan::after{content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .25s ease, background .25s ease;}
  .pan:hover::after{border-color:var(--amber); background:rgba(226,167,58,.08);}
  @media (max-width:1000px){.svc-split{grid-template-columns:1fr;} }
  @media (max-width:640px){.panels{grid-template-columns:repeat(2,1fr);} .pan{aspect-ratio:4/5;}}

  .process-grid{display:grid; grid-template-columns:minmax(260px,1fr) 2.2fr; gap:44px; align-items:start;}
  .process-grid .head-block{margin-bottom:0;}
  .steps{list-style:none; margin:0; padding:34px 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; position:relative; counter-reset:st;}
  .steps::before{content:""; position:absolute; top:46px; left:6px; right:6px; height:1px; background:var(--amber); opacity:.6;}
  .steps li{counter-increment:st; position:relative; padding-top:30px; display:flex; flex-direction:column; gap:6px;}
  .steps li::before{content:"0" counter(st); position:absolute; top:-30px; left:0; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:1.3rem; color:var(--parchment);}
  .steps li::after{content:""; position:absolute; top:7px; left:0; width:11px; height:11px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(226,167,58,.18);}
  .steps svg{margin:14px 0 6px;}
  .steps b{font-family:'Archivo Narrow',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:0.9rem;}
  .steps span{font-size:0.85rem; color:rgba(237,231,214,.7); line-height:1.4;}
  @media (max-width:1000px){.process-grid{grid-template-columns:1fr;}}
  @media (max-width:760px){.steps{grid-template-columns:repeat(2,1fr); row-gap:44px;} .steps::before{display:none;}}

  .ref-split{display:grid; grid-template-columns:minmax(240px,1fr) 2.6fr; gap:44px; align-items:center;}
  .ref-split .head-block{margin-bottom:0;}
  .ref-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .ref-card{display:flex; flex-direction:column; background:#f4efe1; border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease;}
  .ref-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(28,27,23,.12);}
  .ref-img{aspect-ratio:16/10; background:var(--img) center/cover no-repeat;}
  .ref-noimg{display:flex; align-items:flex-end; padding:16px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px), linear-gradient(150deg,#3f5b50,#1c1b17); color:var(--parchment); font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase; font-size:1.7rem; line-height:1;}
  .ref-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .ref-body .case-id{font-size:0.62rem; color:var(--brick); letter-spacing:0.1em;}
  .ref-body h3{margin:0; font-size:1.02rem; text-transform:uppercase; line-height:1.2;}
  .ref-body p{margin:0; font-size:0.9rem; line-height:1.45;}
  .ref-more{margin-top:auto; font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.06em; padding-top:6px;}
  @media (max-width:1000px){.ref-split{grid-template-columns:1fr;}}
  @media (max-width:760px){.ref-cards{grid-template-columns:1fr;}}

  .site-foot{background:var(--ink); color:var(--parchment);}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr auto; gap:28px; align-items:start; padding-top:44px; padding-bottom:34px; border-bottom:1px solid var(--line-light); font-size:0.95rem;}
  .foot-grid a{color:var(--parchment); text-decoration:none;}
  .foot-grid a:hover{color:var(--amber);}
  .site-foot .logo{color:var(--parchment);}
  .foot-note{margin:10px 0 0; font-size:0.85rem; color:var(--grey);}
  .foot-lbl{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;}
  .foot-cta .btn{color:var(--parchment); border-color:var(--line-light);}
  @media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
  .headbar{gap:28px;}
  .headbar nav{margin-left:auto;}
  .steps{grid-template-columns:repeat(6,minmax(0,1fr));}
  .steps b{font-size:0.8rem; overflow-wrap:anywhere;}
  .svc-split h2, .process-grid h2, .ref-split h2{font-size:clamp(1.8rem,3vw,2.5rem);}
  .logo, nav a, .head-phone{white-space:nowrap;}
  @media (min-width:901px){ .headbar nav{gap:20px;} }
  @media (max-width:1180px){ .logo small{display:none;} }
  .steps b{font-size:0.74rem; letter-spacing:0.02em; overflow-wrap:normal;}
  @media (max-width:600px){
    .head-phone{font-size:0; padding:8px 10px;}
    .head-phone::before{content:"☎ Nazovite"; font-size:0.78rem;}
    .logo small{display:none;}
  }
  .cta-worm{position:relative; overflow:hidden;}
  .cta-worm::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 30%, rgba(28,27,23,.72) 100%), url('img/crvotocina-bg.jpg') center/cover no-repeat;}
  .cta-worm .wrap{position:relative;}

  /* campaign: Ne ugrađujte problem u krov */
  .campaign{position:relative; overflow:hidden;}
  .campaign::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(28,27,23,.97) 35%, rgba(28,27,23,.80) 100%), url('img/svc-grada.jpg') right center/cover no-repeat;}
  .campaign .wrap{position:relative;}
  .camp-head h2{font-size:clamp(2.2rem,5vw,3.8rem); text-transform:uppercase; line-height:1.02; margin:10px 0 12px; max-width:20ch;}
  .camp-head h2 em{font-style:normal; color:var(--amber);}
  .camp-sub{font-family:'Source Serif 4',serif; font-style:italic; font-size:clamp(1.15rem,2vw,1.45rem); color:var(--amber); margin:0 0 38px;}
  .camp-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px dashed var(--line-light);}
  .camp-col{padding:28px 30px 30px;}
  .camp-after{border-left:1px dashed var(--line-light); background:rgba(168,57,30,.10);}
  .camp-tag{font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber);}
  .camp-after .camp-tag{color:#e07a5a;}
  .camp-col h3{font-size:1.25rem; text-transform:uppercase; margin:8px 0 16px;}
  .camp-col ul{list-style:none; margin:0; padding:0;}
  .camp-col li{position:relative; padding:9px 0 9px 28px; border-top:1px solid var(--line-light); color:rgba(237,231,214,.88);}
  .camp-before li::before{content:"✓"; position:absolute; left:2px; top:8px; color:var(--amber); font-weight:700;}
  .camp-after li::before{content:"✕"; position:absolute; left:2px; top:8px; color:#e07a5a; font-weight:700;}
  .camp-foot{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:34px;}
  .camp-foot p{margin:0; font-size:1.1rem;}
  .camp-foot b{color:var(--amber);}
  @media (max-width:760px){.camp-grid{grid-template-columns:1fr;} .camp-after{border-left:none; border-top:1px dashed var(--line-light);}}
  .ref-cards{grid-template-columns:repeat(2,1fr);}
  @media (max-width:760px){.ref-cards{grid-template-columns:1fr;}}

  /* Reference page v2 */
  .head-block h2 em{font-style:normal; color:var(--brick);}
  .section-dark .head-block h2 em{color:var(--amber);}
  .cases2{display:flex; flex-direction:column; gap:22px;}
  .case2{display:grid; grid-template-columns:1fr 1.5fr; border:1px solid var(--line); background:#f4efe1;}
  .case2:nth-child(even) .case2-img{order:2;}
  .case2-img{min-height:300px; background:var(--img) center/cover no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px), linear-gradient(150deg,#3f5b50,#1c1b17); display:flex; align-items:flex-end; padding:22px;}
  .case2-img span{color:var(--parchment); font-family:'Archivo Narrow',sans-serif; font-weight:700; text-transform:uppercase; font-size:2.4rem; line-height:1;}
  .case2-body{padding:28px 32px;}
  .case2-body .case-id{font-size:0.62rem; color:var(--brick); letter-spacing:0.1em;}
  .case2-body .loc{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--grey); margin:6px 0 4px;}
  .case2-body h3{text-transform:uppercase; font-size:1.4rem; margin:0 0 12px;}
  .case2-body p{margin:0 0 12px;}
  .case2-body .result{font-size:0.72rem; color:var(--verdigris); border-top:1px dashed var(--line); padding-top:12px; margin-top:6px;}
  .ref-cards-3{grid-template-columns:repeat(3,1fr);}
  .section-dark .ref-card{background:#26231d; border-color:var(--line-light); color:var(--parchment);}
  .section-dark .ref-body .case-id{color:var(--amber);}
  .section-dark .ref-body p{color:rgba(237,231,214,.7);}
  .ref-static:hover{transform:none; box-shadow:none;}
  .archive{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .archive figure{margin:0; position:relative; overflow:hidden; border:1px solid var(--line);}
  .archive img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s ease;}
  .archive figure:hover img{transform:scale(1.04);}
  .archive figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 8px; background:linear-gradient(transparent, rgba(28,27,23,.85)); color:var(--parchment); font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;}
  @media (max-width:860px){.case2{grid-template-columns:1fr;} .case2:nth-child(even) .case2-img{order:0;} .ref-cards-3,.archive{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.ref-cards-3,.archive{grid-template-columns:1fr;}}
  .case2-img, .ref-img{--img:none;}
  .trust-2{grid-template-columns:repeat(2,1fr);} @media (max-width:760px){.trust-2{grid-template-columns:1fr;}}