/*
Theme Name: eSimple
Theme URI: https://esimple.hr
Author: eSimple
Description: Custom theme for the eSimple.hr rebuild. Clean, lean, no page-builder runtime overhead — see /Users/roberturlovic/Desktop/claude/esimple-strategy/08-technical-architecture.md and 07-design-system.md for the full spec this implements.
Version: 0.5.0
Text Domain: esimple
*/

:root{
  /* Crno/bijelo je baza; lime (--accent = --pop) je jedini akcent, korišten pametno
     i minimalno — samo na eyebrow/brojevima i na jednom velikom finalnom CTA hitu,
     NE na svakom gumbu. Gumbi su neutralni (bijela pozadina, crn tekst). */
  --bg:#0B0B0C; --surface:#141416; --ink:#F5F4EF; --muted:#9A9A9C; --border:#232326;
  --accent:#D7FF3D; --accent-ink:#0B0B0C;
  --pop:#D7FF3D; --pop-ink:#0B0B0C;
  --radius:6px; --radius-pill:100px;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  line-height:1.5; margin:0; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.reveal{opacity:1;transform:none;}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero-word{opacity:1!important; transform:none!important;}
}

/* ===== 2026 polish pass — scroll progress, grain, micro-interactions ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--pop); z-index:100; transition:width .1s linear;
  box-shadow:0 0 8px rgba(215,255,61,.6);
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{transition:none;} }

body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons: tactile press feedback on top of the existing lift-on-hover */
.btn:active{transform:scale(.96); transition:transform .1s ease;}

/* Underline-in links ("Saznajte više →" etc.) — a filling line instead of a static one */
a.link-underline{position:relative; text-decoration:none; padding-bottom:.15rem;}
a.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
a.link-underline:hover::after, a.link-underline:focus-visible::after{transform-origin:left;}

/* Animated stat counters (JS swaps the text content; this just guards against
   layout shift while digits change width) */
.stat-count{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .btn:active{transform:none;}
  a.link-underline::after{transition:none;}
}

.wrap{max-width:1280px; margin:0 auto; padding:0 3rem;}
@media (max-width:720px){ .wrap{padding:0 1.25rem;} }

/* ===== Header ===== */
.skip-link{position:fixed;top:10px;left:20px;z-index:200;background:var(--pop);color:var(--bg);padding:12px 20px;transform:translateY(-200%);}
.skip-link:focus{transform:none;}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.2rem clamp(1.25rem,4vw,4rem);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;background:var(--bg);}
.site-header .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.4rem;text-decoration:none;color:var(--ink);flex-shrink:0;}
.brand-mark{height:30px;width:auto;display:block;}
.brand-accent{color:var(--pop);}
.primary-nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);font-size:.9rem;}
.primary-nav a{color:var(--ink);text-decoration:none;white-space:nowrap;}
.primary-nav a:hover{color:var(--pop);}
.primary-nav .mobile-nav-cta{display:none;}
.header-cta{display:flex;align-items:center;gap:1.5rem;background:var(--pop);color:var(--bg);padding:.7rem 1.2rem;border-radius:99px;text-decoration:none;font-weight:600;white-space:nowrap;}
.menu-toggle{display:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pop);outline-offset:5px;}
@media(max-width:900px){
 .site-header{gap:1rem;flex-wrap:wrap;padding:1rem 1.25rem;}
 .site-header .header-cta{display:none;}
 .primary-nav{width:100%;flex-direction:column;align-items:stretch;gap:0;}
 .primary-nav a{padding:1rem;border-bottom:1px solid var(--border);font-size:1.25rem;}
 .primary-nav .mobile-nav-cta{display:flex;justify-content:space-between;margin-top:1.5rem;color:var(--bg);}
 .js .menu-toggle{display:flex;align-items:center;gap:1rem;min-height:44px;background:transparent;border:1px solid var(--border);border-radius:99px;padding:.4rem 1rem;color:var(--ink);font:inherit;cursor:pointer;}
 .js .primary-nav{display:none;position:fixed;inset:77px 0 0;background:var(--bg);padding:1rem 1.25rem 4rem;overflow-y:auto;overscroll-behavior:contain;}
 .js .primary-nav.mobile-open{display:flex;}
}

/* ===== Sections / typography ===== */
section{padding:5rem 3rem;}
@media (max-width:720px){ section{padding:3rem 1.25rem;} }

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1.3rem;
}

h1, h2, h3{font-family:"Archivo",sans-serif; font-weight:800; margin:0;}
h1{font-size:3.4rem; line-height:1.06; text-wrap:balance;}
h2{font-size:2.3rem; line-height:1.15; text-wrap:balance;}
p{margin:0 0 1rem;}
.dim{color:var(--muted);}
.hero-center h1{font-size:6rem;}
@media (max-width:1100px){ .hero-center h1{font-size:4.6rem;} }
@media (max-width:720px){ h1{font-size:2.2rem;} h2{font-size:1.7rem;} .hero-center h1{font-size:2.8rem;} }

/* ===== Hero — centered, with an ambient animated background layer =====
   Full first screen on every breakpoint: the reference points Robert flagged
   (old esimple.hr, Buggy Adventure, Bornfight) all show ONE big hero and
   nothing else on load — trust-bar/next section only appear on scroll. */
.hero{padding-bottom:5.5rem; position:relative; overflow:hidden;}
.hero-home{
  min-height:calc(100vh - 84px); padding-bottom:2.5rem;
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:720px){
  .hero-home{ min-height:calc(100vh - 60px); }
}
@supports (height:100dvh){
  .hero-home{ min-height:calc(100dvh - 84px); }
  @media (max-width:720px){ .hero-home{ min-height:calc(100dvh - 60px); } }
}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-bg .glow{
  position:absolute; width:60vw; height:60vw; max-width:900px; max-height:900px;
  left:50%; top:40%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--muted) 0%, transparent 60%);
  opacity:.18; filter:blur(10px);
  animation:hero-glow-drift 10s ease-in-out infinite alternate;
}
.hero-bg .glow2{
  position:absolute; width:38vw; height:38vw; max-width:560px; max-height:560px;
  left:64%; top:32%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--pop) 0%, transparent 65%);
  opacity:.12; filter:blur(6px);
  animation:hero-glow-drift 13s ease-in-out infinite alternate-reverse;
}
@keyframes hero-glow-drift{
  0%{ transform:translate(-55%,-55%) scale(1); }
  100%{ transform:translate(-45%,-42%) scale(1.25); }
}
.hero-orb{position:absolute; border-radius:50%; filter:blur(1px); background:radial-gradient(circle at 35% 35%, rgba(245,244,239,.95), rgba(245,244,239,0) 70%); pointer-events:none;}
.hero-orb.o1{width:10px; height:10px; top:20%; left:22%; opacity:.7; animation:hero-float-a 6s ease-in-out infinite;}
.hero-orb.o2{width:7px; height:7px; top:70%; left:76%; opacity:.6; animation:hero-float-b 8s ease-in-out infinite;}
.hero-orb.o3{width:14px; height:14px; top:75%; left:16%; opacity:.5; animation:hero-float-a 9s ease-in-out infinite reverse;}
.hero-orb.o4{width:8px; height:8px; top:16%; left:80%; opacity:.6; animation:hero-float-b 7s ease-in-out infinite reverse;}
@keyframes hero-float-a{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(22px,-28px);} }
@keyframes hero-float-b{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-26px,20px);} }
@media (prefers-reduced-motion: reduce){ .hero-bg .glow, .hero-bg .glow2, .hero-orb{animation:none!important;} }

.hero-center{position:relative; z-index:1; max-width:920px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero-center .eyebrow{margin-bottom:2rem;}
.hero-center h1{max-width:20ch; perspective:600px; margin-bottom:2rem;}
.hero-center .lede{max-width:50ch; color:var(--muted); font-size:1.05rem; margin-bottom:2rem;}
.eyebrow .eb-l1, .eyebrow .eb-l2{display:inline;}
@media (max-width:720px){ .eyebrow .eb-l1, .eyebrow .eb-l2{display:block;} }
.trust-bar{padding:2.6rem 3rem; margin-top:1rem; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
@media (max-width:720px){ .trust-bar{padding:2rem 1.25rem;} }
.hero-stats{justify-content:center;}
@media (max-width:720px){ .hero-stats{gap:1.2rem 1.8rem; row-gap:1rem;} }
@media (max-width:480px){ .hero-stats > div:nth-child(4){display:none;} }

/* ===== Flying shapes — same choreography as the production Revolution Slider
   (extracted from XRbl3g_revslider_slides on esimple.hr: each object starts
   rotated + offset, snaps into place on a fast-decel ease, staggered 500-1250ms),
   recreated with our own abstract brand shapes instead of the old stock icons. */
.hero-shape{
  position:absolute; opacity:0; will-change:transform,opacity;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.hero-shape.in{opacity:1; transform:none !important;}
.hero-shape{background-size:contain; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 12px 20px rgba(0,0,0,.4));}
.hs1{top:16%; left:9%; width:56px; height:89px; background-image:url('maus.png'); transform:translate(-30px,-20px) rotate(-90deg);}
.hs2{top:14%; right:10%; width:50px; height:83px; background-image:url('header_pen.png'); transform:translate(30px,-30px) rotate(90deg);}
.hs3{bottom:14%; left:11%; width:90px; height:77px; background-image:url('header_flowerpot.png'); transform:translate(-30px,40px) rotate(90deg);}
.hs4{bottom:12%; right:9%; width:78px; height:87px; background-image:url('header_papers.png'); transform:translate(30px,45px) rotate(45deg);}
.hs5{top:9%; right:28%; width:22px; height:44px; background-image:url('header_paperclip.png'); transform:translate(15px,-25px) rotate(90deg);}
.hs6{bottom:26%; left:27%; width:34px; height:51px; background-image:url('header_edding.png'); transform:translate(-18px,25px) rotate(-90deg);}
/* Mobile: reposition to the top/bottom margins (above eyebrow, below stats) so
   nothing overlaps the centered text column — still visible, not hidden. */
@media (max-width:900px){
  .hs1{top:3%; left:6%; width:34px; height:54px;}
  .hs2{top:3%; right:8%; width:30px; height:50px;}
  .hs5{top:1%; right:32%; width:14px; height:28px;}
  .hs3{bottom:3%; left:8%; width:54px; height:46px;}
  .hs4{bottom:2%; right:6%; width:46px; height:51px;}
  .hs6{bottom:6%; left:32%; width:20px; height:30px;}
}
@media (prefers-reduced-motion: reduce){ .hero-shape{transition:none; opacity:1 !important; transform:none !important;} }
.hero-visual{
  position:relative; border-radius:var(--radius); overflow:hidden; height:min(480px,60vh); align-self:center;
  background:linear-gradient(155deg,var(--grad-a) 0%, var(--bg) 78%);
  border:1px solid var(--border);
}
.hero-visual::before{
  content:""; position:absolute; inset:-20%;
  background-image:radial-gradient(circle at 50% 50%, var(--grad-b) 0%, transparent 45%);
  opacity:.85;
  animation:hero-glow-drift 9s ease-in-out infinite alternate;
}
.hero-visual::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(245,244,239,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,244,239,.05) 1px, transparent 1px);
  background-size:38px 38px;
}
@keyframes hero-glow-drift{
  0%{ transform:translate(-6%,-4%) scale(1); }
  100%{ transform:translate(6%,6%) scale(1.15); }
}
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(2px);
  background:radial-gradient(circle at 35% 35%, rgba(245,244,239,.9), rgba(245,244,239,0) 70%);
  opacity:.55; pointer-events:none;
}
.hero-orb.o1{width:14px; height:14px; top:22%; left:28%; animation:hero-float-a 7s ease-in-out infinite;}
.hero-orb.o2{width:8px; height:8px; top:62%; left:58%; animation:hero-float-b 9s ease-in-out infinite;}
.hero-orb.o3{width:20px; height:20px; top:70%; left:20%; animation:hero-float-a 11s ease-in-out infinite reverse;}
@keyframes hero-float-a{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(18px,-24px);} }
@keyframes hero-float-b{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-22px,16px);} }
@media (prefers-reduced-motion: reduce){
  .hero-visual::before, .hero-orb{animation:none!important;}
}
@media (max-width:900px){ .hero-visual{height:220px;} }
.hero-stats{display:flex; gap:1.8rem; margin-top:1.7rem; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;}
.hero-stats .n{font-size:1.3rem; display:block;}
.hero-stats .l{font-size:.68rem; opacity:.65; text-transform:uppercase; letter-spacing:.04em;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:var(--bg);
  font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:.92rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-pill); text-decoration:none; border:none; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(0,0,0,.5);}
.btn .arrow{transition:transform .3s;}
.btn:hover .arrow{transform:translateX(3px);}
.btn-dark{background:var(--ink); color:var(--bg);}
.btn-pop{background:var(--pop-ink); color:var(--pop);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--border);}
.hero-ctas{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;}

/* ===== Numbered rows (services / process) ===== */
.row{
  display:grid; grid-template-columns:3rem 1fr 2fr auto; gap:1.5rem; align-items:center;
  padding:1.4rem 0; border-top:1px solid var(--border); text-decoration:none; color:var(--ink);
}
.row:last-child{border-bottom:1px solid var(--border);}
.row .num{font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:.85rem;}
.row .rtitle{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.25rem;}
.row .rline{color:var(--muted); font-size:.88rem;}
.row .rarrow{font-size:1.1rem; color:var(--muted); transition:transform .3s, color .3s;}
.row:hover .rarrow{transform:translate(4px,-4px); color:var(--accent);}
@media (max-width:720px){
  .row{grid-template-columns:2rem 1fr; grid-template-rows:auto auto; row-gap:.4rem;}
  .row .rline{grid-column:2;} .row .rarrow{display:none;}
}

/* ===== Cards (projects) ===== */
.pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
@media (max-width:720px){ .pgrid{grid-template-columns:1fr;} }

.pgallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
.pgallery-item{aspect-ratio:4/3; background-size:cover; background-position:center; border-radius:var(--radius); background-color:var(--surface);}
@media (max-width:720px){ .pgallery{grid-template-columns:repeat(2,1fr);} }
.pcard{display:block; text-decoration:none; color:var(--ink);}
/* Staggered entrance — used on the full /projekti/ archive grid so cards
   settle in one after another instead of all popping at once (Robert loves
   motion, 2026-09-17/23). Scoped to this class, not bare .pcard, so the small
   3-up "related projects" grids elsewhere are untouched. */
.pcard-stagger{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in .pcard-stagger{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .pcard-stagger{opacity:1; transform:none; transition:none;} }
.pmeta{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); margin-bottom:.5rem;}
.ptitle{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.3rem;}

/* Plain, unframed project image — no laptop/device bezel anywhere on the site
   (Robert's own screenshots/mockups should stand on their own, 2026-09-17). */
.pthumb-raw{display:flex; align-items:center; justify-content:center; padding:0; margin-bottom:1rem; min-height:280px;}
.pthumb-raw img{width:100%; height:auto; max-height:340px; object-fit:contain;}
.pcard.featured .pthumb-raw{min-height:400px;}
.pcard.featured .pthumb-raw img{max-height:460px;}
.pthumb-raw-hero{padding:1rem 0;}
.pthumb-raw-hero img{max-height:560px;}
@media (max-width:720px){ .pthumb-raw{min-height:200px;} .pthumb-raw img{max-height:220px;} .pthumb-raw-hero img{max-height:360px;} }

/* ===== Blog list (/blog/) — text-first, no assumed featured image ===== */
.blog-list{display:flex; flex-direction:column;}
.blog-item{
  display:block; text-decoration:none; color:var(--ink);
  padding:2.4rem 0; border-bottom:1px solid var(--border);
  transition:padding-left .3s cubic-bezier(.2,.7,.2,1), opacity .6s ease, transform .6s ease;
}
.blog-item:first-child{padding-top:0;}
.blog-item:hover{padding-left:.8rem;}
.blog-item-stagger{opacity:0; transform:translateY(18px);}
.reveal.in .blog-item-stagger{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .blog-item-stagger{opacity:1; transform:none;} }
.blog-item h2{font-size:1.6rem; margin:0 0 .7rem;}
.blog-item-excerpt{color:var(--muted); font-size:1rem; line-height:1.6; max-width:65ch; margin:0 0 .9rem;}
.blog-item-link{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem;}
.blog-item:hover .blog-item-link .arrow{transform:translateX(3px);}
.blog-item-link .arrow{transition:transform .3s;}
.pagination{display:flex; gap:1.5rem; margin-top:3rem; font-size:.9rem;}
.pagination a, .pagination span{color:var(--muted); text-decoration:none;}
.pagination a:hover{color:var(--ink);}
.pagination .current{color:var(--pop);}

/* ===== Final CTA (pop color — reserved for this one use) ===== */
.final-cta{
  background:var(--pop); color:var(--pop-ink); padding:5rem 3rem;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem;
}
.final-cta h2{max-width:20ch;}
.final-cta p{font-size:.95rem; max-width:44ch; margin:.9rem 0 0; opacity:.75;}
.final-cta .btn{background:var(--pop-ink); color:var(--pop);}
.final-cta .btn:hover{box-shadow:0 10px 26px -10px rgba(0,0,0,.4);}

/* ===== Long-form service copy (e.g. /seo/) ===== */
.longform-section{padding-top:0;}
.longform-grid{display:grid; grid-template-columns:1fr 260px; gap:5rem; align-items:start;}
.longform{max-width:64ch;}
.longform h2{font-size:2.2rem; margin:3.5rem 0 1.3rem; text-wrap:balance; position:relative; padding-bottom:1.1rem;}
.longform h2::after{content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--pop); border-radius:2px; transition:width 1s cubic-bezier(.2,.7,.2,1) .2s;}
.reveal.in .longform h2::after{width:64px;}
.longform h2:first-child{margin-top:0;}
.longform h3{font-size:1.15rem; margin:2rem 0 .6rem; color:var(--ink);}
.longform p{color:var(--muted); font-size:1rem; line-height:1.65; margin:0 0 1.1rem;}
.longform p strong{color:var(--ink); font-weight:600;}
.longform p.tight{line-height:1.5;}
.longform ul, .longform ol{color:var(--muted); font-size:1rem; line-height:1.65; margin:0 0 1.1rem 1.2rem;}
.longform li{margin-bottom:.4rem;}
.longform li strong{color:var(--ink); font-weight:600;}
.longform-toc{position:sticky; top:6.5rem; align-self:start;}
.longform-toc nav{display:flex; flex-direction:column; gap:1rem; margin-top:1.2rem; border-left:1px solid var(--border); padding-left:1.2rem;}
.longform-toc nav a{display:flex; gap:.7rem; align-items:baseline; color:var(--muted); text-decoration:none; font-size:.88rem; transition:color .2s;}
.longform-toc nav a:hover{color:var(--ink);}
.longform-toc .num{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--pop); flex-shrink:0;}
@media (max-width:900px){
  .longform-grid{grid-template-columns:1fr;}
  .longform-toc{position:static; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border);}
}
@media (max-width:720px){ .longform h2{font-size:1.4rem;} }

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); padding:3rem 3rem 1.6rem;}
@media (max-width:720px){ .site-footer{padding:2.5rem 1.25rem 1.5rem;} }
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr; gap:2.2rem;} .footer-brand{margin-bottom:.4rem;} }
.footer-grid h3{font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 1rem;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem;}
.footer-grid a{text-decoration:none; color:var(--ink); font-size:.9rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-brand p{color:var(--muted); font-size:.88rem; max-width:28ch;}
.footer-tagline{
  display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:.62rem; color:var(--ink); opacity:.75; line-height:1.4; white-space:nowrap;
}
.footer-logo{display:inline-flex; align-items:center; gap:.7rem; font-family:"Archivo",sans-serif; font-weight:800; font-size:1.4rem; text-decoration:none; color:var(--ink); margin-bottom:.7rem;}
.brand-stack{display:flex; flex-direction:column; gap:.15rem;}
.brand-name{line-height:1;}
.footer-logo .brand-mark{height:32px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:1.6rem; border-top:1px solid var(--border); font-size:.82rem; color:var(--muted); flex-wrap:wrap; gap:.5rem;}
.footer-bottom b{color:var(--ink); font-family:"Archivo",sans-serif;}
.footer-bottom a{color:var(--muted); text-decoration:none;}
.footer-bottom a:hover{color:var(--ink);}

/* ===== Sticky bottom bar (mobile) — appears after scroll ===== */
.sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--surface); border-top:1px solid var(--border);
  transform:translateY(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-bar.visible{transform:translateY(0);}
@media (max-width:900px){
  .sticky-bar{display:flex;}
  body{padding-bottom:0;}
}
.sticky-bar a{
  flex:1; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem .5rem; font-size:.82rem; font-weight:500; color:var(--ink); text-decoration:none; text-align:center;
  border-right:1px solid var(--border);
}
.sticky-bar a:last-child{border-right:none;}
.sticky-bar svg.sb-icon{width:17px; height:17px; flex-shrink:0;}
.sticky-bar .sb-arrow{font-size:1rem; line-height:1;}
.sticky-bar .sb-primary{color:var(--bg); background:var(--ink); flex:1.3; font-weight:600;}

/* ===== Cookie consent banner — GA4 only loads after "Prihvaćam", per GDPR
   (Robert 2026-09-23: added his GA4 property, must ship gated together). */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--surface); border-top:1px solid var(--border);
  padding:1.2rem 1.5rem; padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{margin:0; font-size:.85rem; color:var(--muted); max-width:60ch;}
.cookie-banner p a{color:var(--ink);}
.cookie-banner-actions{display:flex; gap:.8rem; flex-shrink:0;}
.cookie-banner-actions .btn{padding:.6rem 1.2rem; font-size:.85rem;}
.btn-cookie-deny{background:transparent; color:var(--ink); border:1px solid var(--border);}
@media (max-width:900px){ .cookie-banner{bottom:60px;} }
@media (max-width:520px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:left;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;}
}

/* ===== Testimonials ===== */
.tcard{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;background:var(--surface);}
.tcard-result{border-left:3px solid var(--pop);}
.tresult{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pop);margin:0 0 .3rem;}
.tresult-text{font-size:.88rem;color:var(--ink);margin:0 0 1rem;font-weight:500;}
.tquote{font-size:.95rem;color:var(--ink);margin:0 0 1rem;}
.tattr{font-size:.85rem;color:var(--muted);margin:0;}
.tattr b{color:var(--ink);}

/* ===== FAQ ===== */
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  display:flex; align-items:center; gap:1.2rem; padding:1.3rem 0; cursor:pointer;
  list-style:none; font-family:"Archivo",sans-serif; font-weight:700; font-size:1rem;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .num{font-family:"IBM Plex Mono",monospace; color:var(--muted); font-size:.85rem; flex-shrink:0;}
.faq-q-text{flex:1;}
.faq-toggle{font-family:"IBM Plex Mono",monospace; font-size:1.2rem; color:var(--muted); transition:transform .25s;}
.faq-item[open] .faq-toggle{transform:rotate(45deg);}
.faq-a{padding:0 0 1.5rem 2.6rem; color:var(--muted); font-size:.92rem; max-width:60ch;}
.faq-a p{margin:0 0 1rem;}
.faq-a p:last-child{margin-bottom:0;}
.faq-a strong{color:var(--ink); font-weight:600;}
@media (max-width:720px){ .faq-a{padding-left:0;} }

/* ===== Kontakt — info cards + form card ===== */
.contact-grid{display:grid; grid-template-columns:.9fr 1.15fr; gap:3rem; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.contact-info{display:flex; flex-direction:column; gap:1rem;}
.contact-item{
  display:flex; align-items:center; gap:1.1rem; padding:1.3rem 1.5rem;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s;
}
a.contact-item:hover{border-color:var(--pop); transform:translateX(4px);}
.ci-icon{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--pop);
}
.ci-icon svg{width:18px; height:18px;}
.ci-body{display:flex; flex-direction:column; gap:.15rem;}
.ci-label{font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.ci-value{font-weight:600; font-size:1.02rem;}

.contact-form-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); padding:2.2rem;}
@media (max-width:720px){ .contact-form-card{padding:1.4rem;} }
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
@media (max-width:600px){ .form-row-2{grid-template-columns:1fr;} }

/* ===== Forms (Kontakt) ===== */
.form-field{margin-bottom:1.3rem;}
.form-field label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:.4rem;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--ink); padding:.8rem 1rem; font-family:"IBM Plex Sans",sans-serif; font-size:.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.form-field select option{background:var(--surface); color:var(--ink);}
.field-hint{font-size:.78rem; color:var(--muted); margin:.5rem 0 0; line-height:1.4;}
.field-hint a{color:var(--pop); text-decoration:underline;}
.form-field input::placeholder, .form-field textarea::placeholder{color:var(--muted); opacity:.7;}

/* ===== Project share + prev/next pager ===== */
.project-share{display:flex; align-items:center; gap:.9rem;}
.project-share-label{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-right:.3rem;}
.project-share a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  text-decoration:none; font-family:"Archivo",sans-serif; font-weight:800; font-size:.85rem;
  transition:border-color .2s, color .2s;
}
.project-share a:hover{border-color:var(--pop); color:var(--pop);}

.project-pager{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2rem 3rem; border-top:1px solid var(--border);}
@media (max-width:720px){ .project-pager{padding:1.5rem 1.25rem;} }
.pager-link{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink); max-width:36%;}
.pager-next{margin-left:auto;}
.pager-arrow{font-family:"IBM Plex Mono",monospace; font-size:1.1rem; color:var(--pop); flex-shrink:0;}
.pager-text{display:flex; flex-direction:column; gap:.15rem; font-weight:600; font-size:.92rem;}
.pager-label{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.pager-grid{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; font-size:1.1rem;
  transition:border-color .2s, color .2s;
}
.pager-grid:hover{border-color:var(--pop); color:var(--pop);}

/* ===== Utility ===== */
.statement{position:relative; overflow:hidden;}
.statement .label{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); margin-bottom:1rem; position:relative; z-index:1;}
.statement h2{position:relative; z-index:1; padding-bottom:1.2rem; margin-bottom:.2rem;}
.statement h2::after{content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--pop); border-radius:2px; transition:width 1s cubic-bezier(.2,.7,.2,1) .2s;}
.reveal.in .statement h2::after{width:64px;}
.statement.center h2::after{left:50%; transform:translateX(-50%);}
.statement p{position:relative; z-index:1;}
.statement-num{
  position:absolute; right:2rem; top:50%; transform:translateY(-50%) scale(.9);
  font-family:"Archivo",sans-serif; font-weight:900; font-size:15rem; line-height:1;
  color:var(--surface); z-index:0; pointer-events:none; user-select:none;
  opacity:0; transition:opacity 1s ease .1s, transform 1s cubic-bezier(.2,.7,.2,1) .1s;
}
.reveal.in .statement-num{opacity:1; transform:translateY(-50%) scale(1);}
@media (max-width:1100px){ .statement-num{font-size:9rem; right:1.5rem;} }
@media (max-width:720px){ .statement-num{display:none;} }

.headline-rule{position:relative; padding-bottom:1.2rem; margin-bottom:0 !important;}
.headline-rule::after{content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--pop); border-radius:2px; animation:draw-underline .9s cubic-bezier(.2,.7,.2,1) .4s forwards;}
@keyframes draw-underline{ to{ width:64px; } }
@media (prefers-reduced-motion: reduce){
  .statement h2::after, .longform h2::after{transition:none; width:64px;}
  .headline-rule::after{animation:none; width:64px;}
  .statement-num{transition:none; opacity:1; transform:translateY(-50%) scale(1);}
}

/* ===== Sticky-stacked service panels (Paper Tiger reference) — each panel
   is position:sticky, so later panels scroll up and visually cover earlier
   ones as you scroll, pure CSS. IMPORTANT: never combine with .reveal or any
   transform on the .sticky-panel element itself — a transform establishes a
   new containing block and silently breaks position:sticky. */
.sticky-stack{position:relative;}
.sticky-panel{
  position:sticky; top:0; min-height:62vh; display:flex; flex-direction:column;
  justify-content:center; padding:3.5rem 3rem; border-top:1px solid var(--border);
  text-decoration:none; color:inherit;
}
.sticky-panel:nth-child(odd){background:var(--bg);}
.sticky-panel:nth-child(even){background:var(--surface);}
.sticky-panel-inner{max-width:640px;}
.sticky-num{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:.9rem; color:var(--pop);
  margin-bottom:1.8rem;
}
.sticky-kicker{display:none;}
.sticky-word{font-size:5rem; line-height:.95; margin-bottom:1.3rem; text-wrap:balance;}
.sticky-desc{color:var(--muted); font-size:1.1rem; max-width:38ch; margin-bottom:1.5rem;}
.sticky-link{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--ink);
  font-weight:600; border-bottom:1px solid var(--border); padding-bottom:.3rem;
  width:fit-content; transition:border-color .2s, color .2s;
}
.sticky-panel:hover .sticky-link{border-color:var(--pop); color:var(--pop);}
@media (max-width:720px){
  /* position:sticky panel-stacking is unreliable on mobile browsers (and the
     "cover the previous panel" effect needs scroll room .sticky-stack doesn't
     have room for on a phone anyway) — swap to a vertical list with the
     first (most-requested) service highlighted, matching the mobile-app
     concept Robert approved 2026-09-28: no swipe needed to see all 5. */
  .sticky-stack{
    display:grid; grid-template-columns:1fr 1fr; gap:.8rem;
    padding:0 1.25rem; margin:0;
  }
  .sticky-panel{
    position:relative; top:auto; min-height:0; flex:none;
    border-top:none; border:1px solid var(--border); border-radius:14px;
    padding:1.3rem 1.1rem;
  }
  /* 01 (highlighted) spans full width; 02+03 pair up; 04 and 05 each take
     their own full row — matches the mobile-app concept Robert approved. */
  .sticky-panel:nth-child(1),
  .sticky-panel:nth-child(4),
  .sticky-panel:nth-child(5){grid-column:1 / -1;}
  .sticky-panel:nth-child(odd), .sticky-panel:nth-child(even){background:var(--surface);}
  .sticky-num{
    width:auto; height:auto; border:none; border-radius:0; margin-bottom:.5rem;
    font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
    display:inline-block;
  }
  .sticky-kicker{
    font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; margin-left:.4em; display:inline-block;
  }
  .sticky-kicker::before{content:"/"; margin-right:.4em;}
  .sticky-word{font-size:1.5rem;}
  .sticky-panel:nth-child(1) .sticky-word{font-size:1.7rem;}
  .sticky-desc{font-size:.88rem;}
  .sticky-panel:first-child{background:var(--pop); border-color:var(--pop);}
  .sticky-panel:first-child .sticky-num,
  .sticky-panel:first-child .sticky-kicker{color:rgba(11,11,12,.6);}
  .sticky-panel:first-child .sticky-word,
  .sticky-panel:first-child .sticky-desc{color:var(--pop-ink);}
  .sticky-panel:first-child .sticky-link{color:var(--pop-ink); border-color:rgba(11,11,12,.35);}
  .sticky-panel:first-child:hover .sticky-link{color:var(--pop-ink); border-color:var(--pop-ink);}
}

/* ===== Mobile-only feature sections (Projekt u fokusu, Jasan proces) —
   desktop keeps its existing layout untouched; these render only ≤720px,
   per the mobile-app concept Robert approved 2026-09-28. Content is pulled
   live from the flagship project CPT, nothing hardcoded. */
.mobile-feature{display:none;}
@media (max-width:720px){
  .mobile-feature{display:block; padding:2.2rem 1.25rem;}
  .flagship-desktop{display:none;}

  .focus-badge{display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem;}
  .live-pill{
    font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--pop); display:inline-flex; align-items:center; gap:.4rem;
  }
  .live-pill::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--pop); display:inline-block;}
  .browser-mock{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); margin-bottom:1.1rem;}
  .browser-chrome{
    display:flex; align-items:center; gap:.4rem; padding:.55rem .7rem; border-bottom:1px solid var(--border);
    font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted);
  }
  .browser-chrome .dots{display:flex; gap:.25rem;}
  .browser-chrome .dots span{width:6px; height:6px; border-radius:99px; background:#3a3a3e;}
  .browser-chrome .url{background:var(--bg); border-radius:6px; padding:.3rem .6rem; flex:1;}
  .browser-shot{height:180px; background-size:cover; background-position:center top;}
  .project-focus-card h3{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.25rem; margin:0 0 .5rem;}
  .project-focus-card p{color:var(--muted); font-size:.88rem; line-height:1.5; margin:0 0 .8rem;}
  .tag-row{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem;}
  .tag-row span{border:1px solid var(--border); border-radius:99px; padding:.3rem .65rem; font-size:.72rem; color:var(--muted);}
  .project-link{color:var(--pop); font-weight:600; font-size:.85rem; text-decoration:none;}

  .process-list{display:flex; flex-direction:column;}
  .process-item{display:flex; gap:.9rem; padding:1rem 0; border-top:1px solid var(--border);}
  .process-item:last-child{border-bottom:1px solid var(--border);}
  .process-num{font-family:"IBM Plex Mono",monospace; color:var(--pop); font-size:.85rem; flex-shrink:0; padding-top:.1rem;}
  .process-item h4{font-family:"Archivo",sans-serif; font-weight:800; font-size:.98rem; margin:0 0 .3rem;}
  .process-item p{color:var(--muted); font-size:.84rem; line-height:1.5; margin:0;}
}

/* ===== Fanned project card stack (Paper Tiger reference, Robert 2026-09-16) —
   hover a card and it pulls forward like drawing a card from a hand. Pure
   CSS, no JS: each card's own --i custom property drives its fan position. */
.card-stack-section{padding-top:2rem; overflow-x:hidden;}
.card-stack-wrap{display:flex; justify-content:center; padding:1rem 0 6.5rem;}
.card-stack{position:relative; width:340px; height:460px;}
.stack-card{
  position:absolute; top:0; left:0; width:340px; height:460px;
  border-radius:14px; overflow:hidden; display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.75);
  transform-origin:bottom center;
  transform:translateX(calc((var(--i) - 3.5) * 132px)) rotate(calc((var(--i) - 3.5) * 4deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  z-index:calc(10 - var(--i));
}
.stack-card-img{position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:top center; background-color:var(--bg);}
.stack-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);}
.stack-card:hover, .stack-card:focus-visible{
  transform:translateX(calc((var(--i) - 3.5) * 132px)) translateY(-40px) rotate(0deg) scale(1.08);
  box-shadow:0 40px 70px -20px rgba(0,0,0,.85);
  z-index:30;
}
.stack-card-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.35rem;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.stack-card:hover .stack-card-caption, .stack-card:focus-visible .stack-card-caption{opacity:1; transform:translateY(0);}
.stack-card-caption strong{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.25rem; color:var(--ink);}
.stack-card-caption span{font-size:.9rem; color:var(--muted); line-height:1.4;}
@media (max-width:900px){
  .card-stack{width:240px; height:320px;}
  .stack-card{width:240px; height:320px;}
  .stack-card{transform:translateX(calc((var(--i) - 3.5) * 78px)) rotate(calc((var(--i) - 3.5) * 4deg));}
  .stack-card:hover, .stack-card:focus-visible{transform:translateX(calc((var(--i) - 3.5) * 78px)) translateY(-24px) rotate(0deg) scale(1.06);}
}
@media (max-width:600px){
  /* Touch has no hover, so the desktop fan (reveal-on-hover) doesn't work here —
     swap to a swipeable, scroll-snap row instead: cards keep a fanned, alternating
     tilt so it still reads as "a hand of cards" while you flip through them. */
  .card-stack-wrap{padding-bottom:1.25rem;}
  .card-stack{
    position:static; width:auto; height:auto;
    display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:1.75rem 1.5rem; margin:0 -1.25rem;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .card-stack::-webkit-scrollbar{display:none;}
  .stack-card{
    /* Deliberately under 2/3 width so the next card always peeks in at rest —
       that's the "there's more" cue, per Robert 2026-09-17 (mobile felt like
       only one card existed). */
    position:relative; flex:0 0 62vw; width:62vw; height:280px;
    scroll-snap-align:center; z-index:1;
  }
  .stack-card:nth-child(odd){transform:rotate(-3deg) translateY(8px);}
  .stack-card:nth-child(even){transform:rotate(3deg) translateY(-8px);}
  .stack-card:active{transform:scale(.98); z-index:2;}
  /* Title only — the description line sat over the (letterboxed) image itself
     on cards whose mockup doesn't fill the card, unreadable (Robert 2026-09-17). */
  .stack-card-caption{opacity:1; transform:translateY(0);}
  .stack-card-caption span{display:none;}
  /* No text hint ("Prevucite" read oddly, per Robert 2026-09-17) — instead the
     2nd card visibly slides into its peeking spot as the section scrolls into
     view, so the motion itself signals "there's more" as you scroll the page. */
  .stack-card:nth-child(2){transition:transform .7s cubic-bezier(.2,.7,.2,1) .3s;}
  .card-stack-section:not(.in) .stack-card:nth-child(2){transform:translateX(40px) rotate(3deg) translateY(-8px);}
}
@media (prefers-reduced-motion: reduce){ .stack-card{transition:none;} }

/* ===== Client logo carousel — auto-scrolling marquee (legible-size logos,
   2-3 visible at a time on desktop, moves continuously; replaces the earlier
   static grid AND the swipeable version, per Robert 2026-09-17) ===== */
/* No card grid/borders here — just logos flowing freely on the section
   background (Robert 2026-09-17: "vidi se grid", didn't want boxed cells). */
.logo-carousel-viewport{overflow:hidden;}
.logo-carousel{
  display:flex; align-items:center; gap:4.5rem; width:max-content; height:130px;
  animation:logo-scroll 22s linear infinite;
}
.logo-carousel-viewport:hover .logo-carousel{animation-play-state:paused;}
.logo-item{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.logo-item img{max-height:110px; width:auto; height:auto; opacity:.85; transition:opacity .2s;}
.logo-item:hover img{opacity:1;}
@keyframes logo-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (max-width:900px){
  .logo-carousel{gap:3rem; height:100px; animation-duration:16s;}
  .logo-item img{max-height:84px;}
}
@media (max-width:600px){
  .logo-carousel{gap:2.25rem; height:76px; animation-duration:12s;}
  .logo-item img{max-height:64px;}
}
@media (prefers-reduced-motion: reduce){
  .logo-carousel{animation:none; flex-wrap:wrap; width:100%; justify-content:center;}
  .logo-item[aria-hidden="true"]{display:none;}
}
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:start;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }

.about-portrait{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/5; max-width:260px; margin-left:auto;}
.about-portrait img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:760px){ .about-portrait{max-width:200px; margin:0 auto;} }
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem;}

/* ===== Cjenik (price list) — reuses the FAQ's native <details> pattern but
   styled as a price card, not a question. 2026-09-25 sidrena cijena work. ===== */
.price-list{border-top:1px solid var(--border);}
.price-item{border-bottom:1px solid var(--border);}
.price-summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.6rem 0; cursor:pointer; list-style:none;
}
.price-summary::-webkit-details-marker{display:none;}
.price-name{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.15rem; flex:1;}
.price-tag{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; text-align:right;}
.price-amount{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.25rem; color:var(--pop);}
.price-anchor{font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--muted); white-space:nowrap;}
.price-toggle{font-family:"IBM Plex Mono",monospace; font-size:1.2rem; color:var(--muted); transition:transform .25s; flex-shrink:0;}
.price-item[open] .price-toggle{transform:rotate(45deg);}
.price-details{padding:0 0 1.8rem; max-width:60ch;}
.price-details ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem;}
.price-details li{color:var(--muted); font-size:.95rem; padding-left:1.4rem; position:relative;}
.price-details li::before{content:"—"; position:absolute; left:0; color:var(--pop);}
@media (max-width:600px){
  .price-summary{flex-wrap:wrap;}
  .price-tag{align-items:flex-start; text-align:left;}
}

.maint-table{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem;}
@media (max-width:900px){ .maint-table{grid-template-columns:1fr; max-width:420px;} }
.maint-col{
  border:1px solid var(--border); border-radius:var(--radius); padding:2rem 1.6rem;
  background:var(--surface); position:relative;
}
.maint-recommended{border-color:var(--pop);}
.maint-badge{
  position:absolute; top:-.7rem; left:1.6rem; background:var(--pop); color:var(--pop-ink);
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.3rem .7rem; border-radius:var(--radius-pill);
}
.maint-col h3{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.3rem; margin:.5rem 0 .8rem;}
.maint-price{font-family:"Archivo",sans-serif; font-weight:800; font-size:2rem; margin:0;}
.maint-price span{font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:1rem; color:var(--muted);}
.maint-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.maint-features li{font-size:.88rem; padding-left:1.5rem; position:relative;}
.maint-yes{color:var(--ink);}
.maint-yes::before{content:"✓"; position:absolute; left:0; color:var(--pop);}
.maint-no{color:var(--muted); opacity:.5;}
.maint-no::before{content:"–"; position:absolute; left:0;}
@media (max-width:720px){ .grid-2{grid-template-columns:1fr; gap:1.2rem;} }

.pgallery-item img{width:100%;height:100%;object-fit:contain;}
.article-byline{color:var(--muted);font-size:.95rem;margin-top:1.5rem;}
@media(max-width:900px){body{padding-bottom:65px;}.cookie-banner{bottom:65px;}}

/* eSimple studio — October 2026. Content and links remain usable without JS. */
html{scroll-padding-top:105px;}
.pcard-stagger,.blog-item-stagger{opacity:1;transform:none;}
body::before{display:none;}
.studio-hero,.studio-clients,.studio-work,.studio-services,.studio-approach,.studio-testimonials,.studio-faq,.studio-final{padding-left:clamp(1.25rem,4vw,4rem);padding-right:clamp(1.25rem,4vw,4rem);}
.studio-hero{max-width:1680px;margin:auto;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:4vw;padding-top:5rem;padding-bottom:4rem;}
.studio-hero .eyebrow{font-size:.68rem;letter-spacing:.09em;display:flex;align-items:center;gap:.6rem;}
.status-dot{width:6px;height:6px;background:var(--pop);border-radius:50%;display:inline-block;flex-shrink:0;}
.studio-hero h1{font-family:"Archivo",sans-serif;font-size:clamp(3.5rem,6.3vw,6.3rem);line-height:1.02;letter-spacing:-.065em;max-width:none;margin:1.6rem 0;}
.studio-hero h1 span{color:var(--pop);}
.studio-lede{font-size:clamp(1.05rem,1.55vw,1.4rem);font-weight:500;letter-spacing:-.025em;margin:0 0 .85rem;}
.studio-intro{color:#aaaab0;max-width:42ch;font-size:1rem;line-height:1.7;margin:0;}
.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:2rem;}
.studio-actions .btn{background:var(--pop);color:var(--pop-ink);font-size:.9rem;gap:1.5rem;padding:1rem 1.35rem;}
.studio-text-link{display:inline-flex;align-items:center;gap:1rem;font-weight:500;text-decoration:none;font-size:.9rem;}
.studio-text-link:hover{text-decoration:underline;text-underline-offset:6px;}
.studio-proof{display:flex;gap:2rem;margin-top:2.5rem;font-size:.78rem;color:#aaaab0;}
.studio-proof strong{font-family:"Archivo",sans-serif;font-size:1.15rem;color:var(--ink);margin-right:.35rem;}
.hero-project{display:block;min-width:0;color:var(--ink);text-decoration:none;background:#1b1c1b;border:1px solid #30332b;border-radius:1rem;position:relative;padding:1.3rem;transition:border-color .2s;}
.hero-project:hover{border-color:var(--pop);}
.hero-project-top{display:flex;justify-content:space-between;gap:1rem;font-family:"IBM Plex Mono",monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:#b9bbaf;margin-bottom:2rem;}
.hero-project-top span:first-child{color:var(--pop);}
.hero-project-screen{border-radius:.5rem;overflow:hidden;background:#eee;box-shadow:0 18px 35px #0005;transform:rotate(-2deg);margin:0 .25rem 2rem;}
.screen-toolbar{display:flex;justify-content:space-between;align-items:center;background:#e4e5df;color:#65665e;font-size:.6rem;padding:.6rem .8rem;}
.screen-toolbar span:first-child{letter-spacing:.12em;font-size:.5rem;}
.hero-project-image{width:100%;height:auto;aspect-ratio:1.38;object-fit:cover;object-position:top;}
.hero-project-caption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem;}
.hero-project-caption div>span{font-size:.7rem;color:#aaaab0;}
.hero-project-caption h2{font-size:clamp(1.35rem,2vw,1.9rem);letter-spacing:-.035em;margin:.25rem 0 0;}
.circle-arrow{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--pop);color:var(--bg);font-size:1.4rem;}
.studio-clients{display:flex;gap:4rem;align-items:center;border-top:1px solid var(--border);padding-top:2rem;padding-bottom:2rem;}
.studio-clients>p{font-size:.78rem;line-height:1.6;color:var(--muted);min-width:125px;}
.studio-clients>p strong{font-weight:500;color:var(--ink);}
.studio-client-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:3rem;width:100%;}
.studio-client-logos a{display:flex;align-items:center;justify-content:center;height:65px;}
.studio-client-logos img{height:auto;width:auto;max-height:60px;max-width:110px;filter:grayscale(1);opacity:.7;}
.studio-client-logos a:hover img{filter:none;opacity:1;}
.studio-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-bottom:3rem;}
.studio-section-heading h2,.studio-approach h2,.studio-faq h2{font-size:clamp(2rem,3.6vw,3.7rem);line-height:1.08;letter-spacing:-.045em;margin:0;max-width:none;}
.studio-section-heading>p{color:var(--muted);max-width:34ch;margin:0;}
.studio-work{background:#e9eae2;color:#171918;padding-top:5.5rem;padding-bottom:5.5rem;}
.studio-work .eyebrow{color:#526329;}
.studio-work h2 span{color:#72766b;}
.studio-work a:focus-visible{outline-color:#475a19;}
.studio-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem 2rem;}
.studio-work-card{text-decoration:none;min-width:0;}
.studio-work-card-0{grid-row:span 2;}
.studio-work-image{position:relative;background:#d3d6ca;border-radius:.5rem;overflow:hidden;}
.studio-work-image img{width:100%;height:auto;aspect-ratio:2.2;object-fit:cover;object-position:top;transition:transform .5s;}
.studio-work-card-0 .studio-work-image img{aspect-ratio:.95;}
.studio-work-card:hover img{transform:scale(1.025);}
.work-view{position:absolute;bottom:1rem;right:1rem;background:#f5f4ef;color:#171918;padding:.6rem 1rem;border-radius:99px;font-size:.75rem;box-shadow:0 2px 15px #0002;}
.studio-work-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;}
.studio-work-title p{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.07em;text-transform:uppercase;color:#5d6256;margin:0 0 .3rem;}
.studio-work-title h3{font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.03em;margin:0;}
.studio-work-title>span{font-size:1.7rem;}
.studio-work-description{color:#595e54;font-size:.9rem;max-width:55ch;line-height:1.6;margin:.65rem 0 0;}
.studio-services{padding-top:6rem;padding-bottom:6rem;}
.studio-service-list{border-top:1px solid #373835;}
.studio-service-list>a{display:grid;grid-template-columns:40px 1fr 1fr 40px;align-items:center;gap:2rem;padding:1.8rem 0;border-bottom:1px solid #373835;text-decoration:none;transition:color .2s;}
.service-index{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:.75rem;}
.studio-service-list h3{font-size:clamp(1.2rem,2.1vw,2.1rem);line-height:1.15;letter-spacing:-.03em;margin:0;}
.studio-service-list p{font-size:.9rem;color:var(--muted);max-width:42ch;margin:0;}
.service-arrow{justify-self:end;font-size:1.7rem;color:var(--pop);}
.studio-service-list>a:hover h3{color:var(--pop);}
.studio-approach{display:grid;grid-template-columns:1fr 1fr;gap:6rem;background:#151613;padding-top:5.5rem;padding-bottom:5.5rem;border-top:1px solid #30332b;border-bottom:1px solid #30332b;}
.studio-approach h2 span{color:#a4aa98;}
.studio-approach>div>p:not(.eyebrow){color:#aeb1a5;max-width:43ch;line-height:1.8;margin:1.5rem 0;}
.studio-process{padding:0;list-style:none;margin:0;}
.studio-process li{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid #383b33;}
.studio-process li:first-child{padding-top:0;}
.studio-process li>span{font-family:"IBM Plex Mono",monospace;color:var(--pop);font-size:.8rem;}
.studio-process h3{font-size:1.25rem;letter-spacing:-.025em;line-height:1.3;margin:0 0 .6rem;}
.studio-process p{font-size:.9rem;color:#aeb1a5;margin:0;line-height:1.65;}
.studio-testimonials{padding-top:5.5rem;padding-bottom:5.5rem;}
.studio-quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.studio-quote{margin:0;display:flex;flex-direction:column;padding:1.5rem 0 0;border-top:1px solid #373835;}
.quote-mark{color:var(--pop);font-family:Georgia,serif;font-size:4rem;line-height:1;}
.studio-quote blockquote{font-size:1rem;line-height:1.8;margin:0 0 2rem;flex:1;}
.studio-quote figcaption{display:flex;flex-direction:column;gap:.4rem;}
.studio-quote figcaption strong{font-size:.85rem;}
.studio-quote figcaption a{color:var(--muted);font-size:.8rem;text-underline-offset:4px;}
.studio-faq{display:grid;grid-template-columns:1fr 1.35fr;gap:5rem;background:#141513;padding-top:5rem;padding-bottom:5rem;}
.studio-faq>div>p:not(.eyebrow){color:var(--muted);}
.studio-faq .faq-q{font-size:.98rem;}
.studio-final{background:var(--pop);color:#171918;padding-top:4.5rem;padding-bottom:4.5rem;}
.studio-final .eyebrow{color:#455021;}
.studio-final h2{font-size:clamp(2.6rem,6.4vw,6.5rem);line-height:1.03;letter-spacing:-.055em;max-width:none;margin:1.4rem 0 2.5rem;}
.studio-final h2 span{color:#52691b;}
.studio-final>div{display:flex;align-items:center;justify-content:space-between;gap:2rem;border-top:1px solid #17191840;padding-top:1.5rem;}
.studio-final p{font-size:1rem;}
.studio-final .btn{background:#171918;color:#fff;gap:2rem;}
.studio-final a:focus-visible{outline-color:#171918;}
@media(min-width:1681px){.studio-work,.studio-services,.studio-approach,.studio-testimonials,.studio-faq,.studio-final{padding-left:max(4rem,calc((100vw - 1552px)/2));padding-right:max(4rem,calc((100vw - 1552px)/2));}}
@media(max-width:1100px){.studio-hero{gap:2rem;padding-top:3rem;}.studio-hero h1{font-size:5.5vw;}.studio-actions{gap:1.2rem;}.studio-actions .btn{font-size:.8rem;}.studio-approach,.studio-faq{gap:3rem;}.studio-client-logos{gap:1.5rem;}}
@media(max-width:900px){
 .studio-hero{grid-template-columns:1fr;gap:2rem;padding-top:2rem;padding-bottom:2.2rem;}
 .studio-hero h1{font-size:clamp(3.8rem,10vw,5.3rem);margin:1rem 0;}
 .studio-hero .eyebrow{font-size:.62rem;}
 .studio-lede{font-size:1.06rem;}.studio-intro{max-width:55ch;font-size:.95rem;}
 .studio-actions{margin-top:1.4rem;}.studio-actions .btn{font-size:.88rem;}
 .studio-proof{margin-top:1.5rem;}
 .hero-project{max-width:680px;width:100%;margin:auto;}
 .hero-project-image{aspect-ratio:1.8;}
 .studio-clients{gap:2rem;}.studio-client-logos{gap:1rem;}.studio-client-logos img{max-width:80px;max-height:48px;}
 .studio-service-list>a{grid-template-columns:24px 1fr 1fr 24px;gap:1rem;}
 .studio-approach{gap:2rem;}.studio-quote-grid{gap:1.5rem;}.studio-quote blockquote{font-size:.9rem;}
}
@media(max-width:600px){
 .studio-hero{padding-top:1.7rem;gap:1.8rem;}
 .studio-hero h1{font-size:clamp(2.75rem,14vw,5rem);}
 .studio-lede{max-width:30ch;line-height:1.5;}.studio-intro{font-size:.9rem;line-height:1.65;}
 .studio-actions{gap:1rem;}.studio-actions .btn{padding:.85rem 1.05rem;gap:.8rem;font-size:.82rem;}.studio-actions .studio-text-link{font-size:.8rem;gap:.5rem;}
 .studio-proof{gap:1.5rem;font-size:.7rem;}.studio-proof strong{font-size:1rem;}
 .hero-project{padding:.85rem;}.hero-project-top{font-size:.58rem;margin-bottom:1rem;}.hero-project-screen{margin:0 .1rem 1rem;}.hero-project-caption h2{font-size:1.4rem;}.hero-project-caption div>span{font-size:.62rem;}
 .studio-clients{display:block;padding-top:1.5rem;padding-bottom:1.5rem;}.studio-clients>p{margin:0 0 1rem;}.studio-clients>p br{display:none;}.studio-clients>p strong{margin-left:.5rem;}.studio-client-logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;}.studio-client-logos a{height:45px;}.studio-client-logos img{max-width:100%;max-height:42px;}
 .studio-work,.studio-services,.studio-approach,.studio-testimonials,.studio-faq{padding-top:3rem;padding-bottom:3rem;}
 .studio-section-heading{display:block;margin-bottom:2rem;}.studio-section-heading>.studio-text-link{margin-top:1.5rem;}.studio-section-heading>p{margin-top:1.2rem;}
 .studio-section-heading h2,.studio-approach h2,.studio-faq h2{font-size:2.1rem;}
 .studio-work-grid{grid-template-columns:1fr;gap:2rem;}.studio-work-card-0{grid-row:auto;}.studio-work-image img,.studio-work-card-0 .studio-work-image img{aspect-ratio:1.35;}.studio-work-title h3{font-size:1.5rem;}.studio-work-description{font-size:.85rem;}.work-view{font-size:.65rem;padding:.5rem .8rem;}
 .studio-service-list>a{grid-template-columns:22px 1fr 22px;padding:1.3rem 0;gap:.6rem .8rem;}.studio-service-list h3{font-size:1.3rem;}.studio-service-list p{grid-column:2;font-size:.85rem;}.service-arrow{grid-column:3;grid-row:1;}.service-index{align-self:center;}
 .studio-approach,.studio-faq{grid-template-columns:1fr;gap:2rem;}.studio-process li:first-child{padding-top:1.5rem;border-top:1px solid #383b33;}
 .studio-quote-grid{grid-template-columns:1fr;gap:2rem;}.studio-quote blockquote{font-size:.95rem;margin-bottom:1.2rem;}
 .studio-faq .faq-q{gap:.75rem;font-size:.9rem;}.studio-final{padding-top:3rem;padding-bottom:3rem;}.studio-final h2{font-size:clamp(2.5rem,10vw,3.8rem);}.studio-final>div{flex-direction:column;align-items:flex-start;gap:.6rem;}.studio-final p{font-size:.9rem;}
}
@media(prefers-reduced-motion:reduce){.studio-work-image img,.hero-project{transition:none;}.studio-work-card:hover img{transform:none;}}

/* Self-hosted fonts: no third-party stylesheet round trip. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Motion system: finite entrances, scroll-triggered reveals and direct interaction. */
.studio-hero{position:relative;isolation:isolate;overflow:hidden;}
.studio-hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:65%;aspect-ratio:1;right:-12%;top:-12%;background:radial-gradient(ellipse,#dfff6310,transparent 65%);}
.studio-hero h1 span{display:inline-block;position:relative;}
.studio-hero h1 span::after{content:"";position:absolute;left:0;bottom:-.06em;width:100%;height:3px;background:currentColor;transform-origin:left;opacity:.55;}
.hero-project-screen{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;}
.hero-project.pointer-active .hero-project-screen{transition:transform .16s ease-out;box-shadow:0 24px 48px #0007;}
.circle-arrow,.service-arrow,.studio-work-title>span,.studio-actions .btn>span,.header-cta>span,.studio-final .btn>span{transition:transform .35s cubic-bezier(.16,1,.3,1);}
.hero-project:hover .circle-arrow,.hero-project:focus-visible .circle-arrow{transform:rotate(45deg);}
.studio-service-list>a{position:relative;isolation:isolate;}
.studio-service-list>a::before{content:"";position:absolute;inset:0 -1rem;background:#dfff6308;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.studio-service-list>a:hover::before,.studio-service-list>a:focus-visible::before{transform:scaleY(1);}
.studio-service-list>a:hover .service-arrow,.studio-service-list>a:focus-visible .service-arrow,.studio-work-card:hover .studio-work-title>span{transform:translate(4px,-4px);}
.studio-actions .btn:hover>span,.header-cta:hover>span,.studio-final .btn:hover>span{transform:translate(3px,-3px);}
.work-view{transition:transform .4s,background-color .4s;}
.studio-work-card:hover .work-view,.studio-work-card:focus-visible .work-view{transform:translateY(-5px);background:var(--pop);}
.studio-work-card:focus-visible img{transform:scale(1.025);}
.studio-client-logos img{transition:filter .35s,opacity .35s,transform .35s;}
.studio-client-logos a:hover img{transform:translateY(-4px);}
.studio-process li{position:relative;}
.studio-process li::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--pop);transform:scaleX(0);transform-origin:left;}
@media(prefers-reduced-motion:no-preference){
 .studio-hero h1 span::after{animation:studio-line-in 1.2s .2s both;}
 .studio-hero::before{animation:studio-light-in 3.5s ease-out both;}
 .status-dot{animation:studio-pulse 1.5s 3;}
 .studio-process li.motion-seen::after{animation:studio-line-in 1.1s .15s both;}
 .studio-faq details[open] .faq-a{animation:studio-detail-in .35s ease-out;}
 @media(max-width:900px){.primary-nav.mobile-open a{animation:studio-menu-in .45s cubic-bezier(.16,1,.3,1) both;}.primary-nav.mobile-open a:nth-child(2){animation-delay:.04s;}.primary-nav.mobile-open a:nth-child(3){animation-delay:.08s;}.primary-nav.mobile-open a:nth-child(4){animation-delay:.12s;}.primary-nav.mobile-open a:nth-child(5){animation-delay:.16s;}.primary-nav.mobile-open a:nth-child(6){animation-delay:.2s;}}
}
@keyframes studio-line-in{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes studio-light-in{from{transform:translate(12%,8%) scale(.8);}to{transform:none;}}
@keyframes studio-pulse{0%,100%{box-shadow:0 0 0 0 #dfff6330;}60%{box-shadow:0 0 0 7px #dfff6300;}}
@keyframes studio-detail-in{from{transform:translateY(-7px);}to{transform:none;}}
@keyframes studio-menu-in{from{transform:translateY(14px);}to{transform:none;}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto;}
 *,*::before,*::after{animation:none!important;transition:none!important;}
 .hero-project-screen{transform:none!important;}
 .studio-work-card:hover img,.studio-work-card:focus-visible img{transform:none;}
}
@media(prefers-reduced-motion:no-preference){
 .studio-work-image img,.hero-project-image{transform:translateY(var(--scroll-shift,0px)) scale(1.065);}
 .hero-project-image{transform-origin:center;}
 .studio-work-card:hover img,.studio-work-card:focus-visible img{transform:translateY(var(--scroll-shift,0px)) scale(1.09);}
 @media(hover:none){.studio-work-image img{transition:none;}}
}

/* Complete project previews: preserve every screenshot's original proportions. */
.hero-project-image,.studio-work-image img,.studio-work-card-0 .studio-work-image img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none!important;}
.studio-work-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
.studio-work-card-0{grid-row:auto;}
.studio-work-image{overflow:visible;background:transparent;}
.studio-work-image img{border-radius:.5rem;}
.work-view{position:static;display:inline-flex;margin-top:.85rem;box-shadow:none;border:1px solid #bec3b3;background:transparent;}
@media(max-width:900px){.studio-work-grid{grid-template-columns:1fr;gap:2.5rem;}.studio-work-image{max-width:680px;}.studio-work-title h3{font-size:1.6rem;}}

/* Clearer first screen and shorter enquiry form, October 2026. */
.studio-hero h1{font-size:clamp(2.8rem,5.3vw,5.3rem);}
.contact-extra{margin:1rem 0 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 0;}
.contact-extra summary{cursor:pointer;color:var(--ink);font-size:.95rem;}
.contact-extra[open] summary{margin-bottom:1.25rem;}
.contact-extra summary:focus-visible{outline:2px solid var(--pop);outline-offset:5px;}
@media(max-width:900px){.studio-hero h1{font-size:clamp(2.7rem,8vw,4.4rem);}.studio-hero{padding-top:1rem;}.studio-proof{margin-top:1rem;}}
@media(max-width:600px){.hero3d-stage{height:110px;}.studio-lede{font-size:1rem;}.studio-actions{gap:.8rem;}.studio-intro{line-height:1.5;}.studio-proof{gap:1rem;}.studio-hero{gap:1.2rem;}}

@media(min-width:901px){.hero3d-stage{height:190px;}.studio-hero{padding-top:2rem;padding-bottom:2.5rem;}}

/* Integrated studio hero: decorative motion alongside a readable offer. */
.studio-hero{position:relative;isolation:isolate;background-image:radial-gradient(ellipse at 85% 15%,#d7ff3d12,transparent 54%),linear-gradient(#d7ff3d06 1px,transparent 1px),linear-gradient(90deg,#d7ff3d06 1px,transparent 1px);background-size:auto,56px 56px,56px 56px;border-bottom:1px solid #d7ff3d20;padding-top:2.5rem;padding-bottom:3.5rem;}
.studio-hero-copy{min-width:0;}
.studio-hero-copy .hero3d{padding:0;text-align:left;margin:-1rem 0 .5rem;}
.studio-hero-copy .hero3d-stage{width:100%;height:125px;max-width:500px;margin:0;}
.studio-hero-copy .hero3d-fallback{font-size:clamp(3rem,6vw,5rem);justify-content:flex-start;}
.studio-hero .eyebrow{margin-top:0;}
.hero-project{background:linear-gradient(135deg,#252a20,#11150f);border-color:#d7ff3d40;box-shadow:0 24px 80px #0006,inset 0 1px 0 #ffffff12;}
.hero-project-top{border-bottom:1px solid #d7ff3d25;padding-bottom:1rem;margin-bottom:1.4rem;}
.hero-project-screen{transform:none;}
.studio-work-card{padding:1.1rem;border:1px solid #bcc3b1;border-radius:1rem;background:#f4f5ef;box-shadow:0 8px 24px #15200d08;transition:border-color .25s,box-shadow .25s,translate .25s;}
.studio-work-card .work-view{background:#20271b;color:#eef5e5;border-color:#20271b;}
.studio-work-title>span,.studio-actions .btn>span{transition:translate .25s;}
.studio-work-card:hover,.studio-work-card:focus-visible{border-color:#708b38;box-shadow:0 14px 35px #293c1824;translate:0 -5px;}
.studio-work-card:hover .studio-work-title>span,.studio-actions .btn:hover>span{translate:3px -3px;}
.studio-work-card.motion-seen{border-top-color:#819d43;}
@media(max-width:900px){.studio-hero{padding-top:1rem;padding-bottom:2rem;background-size:auto,36px 36px,36px 36px;}.studio-hero-copy .hero3d{margin:0 0 .75rem;}.studio-hero-copy .hero3d-stage{height:90px;max-width:330px;}.studio-hero h1{margin:.8rem 0;}.studio-work-card{padding:.85rem;}}
@media(prefers-reduced-motion:reduce){.studio-work-card,.studio-work-title>span,.studio-actions .btn>span{transition:none;translate:none!important;}}
/* Project card button: readable on hover/focus; no sticky hover state on touch */
.studio-work-card:hover .work-view,.studio-work-card:focus-visible .work-view{color:var(--pop-ink);border-color:var(--pop);}
@media(hover:none){.studio-work-card:hover{translate:none;border-color:#bcc3b1;box-shadow:0 8px 24px #15200d08;}.studio-work-card:hover .work-view{transform:none;background:#20271b;color:#eef5e5;border-color:#20271b;}.studio-work-card:hover .studio-work-title>span{translate:none;transform:none;}}
/* Footer social links */
.footer-grid .footer-social{flex-direction:row; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem;}
.footer-social a{display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border:1px solid var(--border); border-radius:50%; color:var(--ink); transition:border-color .2s,color .2s,background-color .2s;}
.footer-social a:hover,.footer-social a:focus-visible{border-color:var(--accent); color:var(--accent);}
.footer-social svg{display:block;}