/* fotografiranje.net — static rebuild · homepage wireframe v1 */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sen";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sen-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sen";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sen-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sen";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sen-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sen";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sen-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* brand — taken from the WordPress theme */
  --blue:#2E6FF2;      /* Elementor primary */
  --blue-deep:#2F65D0; /* portfolio overlay */
  --navy:#01234B;      /* Elementor secondary */
  --ink:#181B31;       /* headings / tags */
  --text:#565656;      /* body copy */
  --muted:#7A7A7A;
  --line:#DDDDDD;
  --soft:#F5F5F5;      /* testimonials bg */
  --soft-2:#F3F3F7;    /* logos bg */
  --field:#F7F8F8;     /* form inputs */
  --bg:#FFFFFF;

  --ease:cubic-bezier(.16,1,.3,1);   /* expo-out — every hover / focus / accordion */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur:.5s;

  --wrap:1170px;
  --gutter:clamp(16px,4vw,40px);
  --radius:18px;
  --head-h:76px;

  --f-head:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Sen",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
b,strong{font-weight:600;color:var(--ink)}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:12px}

/* type scale — tracking tightens as size grows, leading loosens as size shrinks */
.display{font:500 clamp(2.05rem,calc((100vw - 5rem) / 19.6),4.35rem)/1.1 var(--f-head);letter-spacing:-.03em;color:var(--ink);text-wrap:pretty}
.display b{font-weight:600}
.h2{font:500 clamp(1.75rem,1.2rem + 2.3vw,3.1rem)/1.12 var(--f-head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.h3{font:500 clamp(1.35rem,1.1rem + 1.1vw,2rem)/1.22 var(--f-head);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.eyebrow{font:500 clamp(.95rem,.9rem + .3vw,1.2rem)/1.4 var(--f-head);letter-spacing:-.005em;color:var(--blue)}
.eyebrow b{color:var(--blue)}
.lead{font:500 1.2rem/1.5 var(--f-head);letter-spacing:-.01em;color:var(--ink)}
.muted{color:var(--text)}
.muted a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--blue) 50%,transparent);text-underline-offset:3px;transition:color var(--dur) var(--ease)}
.muted a:hover{color:var(--blue)}

/* ambient background — low contrast, very slow */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;will-change:transform}
.b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(closest-side,#dbe6ff,transparent);animation:drift1 46s var(--ease-in-out) infinite alternate}
.b2{width:40vmax;height:40vmax;right:-14vmax;top:18vh;background:radial-gradient(closest-side,#e9eefb,transparent);animation:drift2 58s var(--ease-in-out) infinite alternate}
.b3{width:34vmax;height:34vmax;left:30vw;bottom:-18vmax;background:radial-gradient(closest-side,#eef3ff,transparent);animation:drift3 52s var(--ease-in-out) infinite alternate}
@keyframes drift1{to{transform:translate3d(10vw,8vh,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-8vw,10vh,0) scale(.94)}}
@keyframes drift3{to{transform:translate3d(-6vw,-8vh,0) scale(1.1)}}

/* header — translucent material, content scrolls beneath */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:transform .6s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);opacity:0;transition:opacity var(--dur) var(--ease)}
.is-scrolled .site-header::before{opacity:1}
.site-header::before{transition:opacity var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.head-dark .site-header::before{background:rgba(1,20,45,.55)}
.head-dark .brand,.head-dark .nav-list>li>a,.head-dark .sub-toggle,.head-dark .lang-toggle{color:#fff}
.head-dark .nav-list a[aria-current="page"]{color:#8fb3ff}
.head-dark .brand img{filter:invert(1)}
.head-dark .lang-toggle{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.head-dark .menu-btn span{background:#fff}
.brand,.nav-list>li>a,.sub-toggle,.lang-toggle{transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.brand img{transition:filter var(--dur) var(--ease)}
.is-hidden-head .site-header{transform:translateY(-100%)}
.bar{position:relative;display:flex;align-items:center;gap:28px;height:var(--head-h);padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.brand{display:flex;align-items:center;padding:6px;margin:-6px auto -6px -6px;border-radius:10px;text-decoration:none;color:var(--ink)}
.brand img{width:28px;height:28px}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-list>li>a,.sub-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:999px;font:500 .9rem/1 var(--f-head);color:var(--ink);text-decoration:none;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nav-list>li>a:hover,.sub-toggle:hover,.has-sub:focus-within .sub-toggle{background:rgba(24,27,49,.06)}
.nav-list a[aria-current="page"]{color:var(--blue)}
.sub-toggle svg{transition:transform var(--dur) var(--ease)}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 8px);left:50%;min-width:270px;padding:8px;border-radius:16px;background:rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 50px -12px rgba(1,35,75,.22),0 0 0 1px rgba(24,27,49,.06);transform-origin:top center;transform:translateX(-50%) translateY(-6px) scale(.96);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .35s}
.has-sub:hover .sub,.has-sub.is-open .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s}
.has-sub:hover .sub-toggle svg,.has-sub.is-open .sub-toggle svg{transform:rotate(180deg)}
.sub a{display:block;padding:10px 14px;border-radius:10px;font:500 .9rem/1.3 var(--f-head);color:var(--ink);text-decoration:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.sub a:hover{background:rgba(46,111,242,.08);color:var(--blue)}
.lang{position:relative}
.lang-toggle{width:40px;height:40px;border-radius:50%;font:600 .78rem/1 var(--f-head);letter-spacing:.02em;color:var(--ink);box-shadow:0 0 0 1px rgba(24,27,49,.14) inset;transition:box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.lang-toggle:hover{background:rgba(24,27,49,.05)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);padding:6px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 50px -12px rgba(1,35,75,.22),0 0 0 1px rgba(24,27,49,.06);transform-origin:top right;transform:scale(.92);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s .3s}
.lang.is-open .lang-list{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s}
.lang-list a{display:block;padding:8px 14px;border-radius:8px;font:600 .8rem/1 var(--f-head);color:var(--ink);text-decoration:none}
.lang-list a:hover,.lang-list a[aria-current]{color:var(--blue);background:rgba(46,111,242,.08)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease)}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:absolute;top:calc(var(--head-h) - 6px);right:var(--gutter);left:var(--gutter);padding:14px;border-radius:22px;background:rgba(255,255,255,.9);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:0 30px 70px -20px rgba(1,35,75,.3),0 0 0 1px rgba(24,27,49,.06);transform-origin:top right}
.mobile-menu a{display:block;padding:12px 14px;border-radius:12px;font:500 1.05rem/1.3 var(--f-head);color:var(--ink);text-decoration:none}
.mobile-menu a:active{background:rgba(46,111,242,.08)}
.mm-langs{display:flex;gap:4px;padding:10px 6px 2px;border-top:1px solid rgba(24,27,49,.08);margin-top:8px}
.mm-langs a{font-size:.85rem;font-weight:600;padding:10px 12px}

.side-mail{position:fixed;left:18px;top:50%;z-index:40;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:500 .72rem/1 var(--f-head);letter-spacing:.06em;color:var(--ink);text-decoration:none;opacity:.7;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
.side-mail:hover{opacity:1;color:var(--blue)}
.is-past-hero .side-mail{opacity:0;pointer-events:none}

/* hero */
.hero{position:relative;padding:calc(var(--head-h) + clamp(56px,10vh,130px)) 0 clamp(48px,7vh,90px);text-align:center}
.hero-text{width:min(100% - 2*var(--gutter),1340px)}
.hero .eyebrow{margin-bottom:clamp(14px,2vw,22px)}
.scroll-cue{position:absolute;right:28px;bottom:0;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 .68rem/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.scroll-cue span{writing-mode:vertical-rl}
.scroll-cue i{width:1px;height:56px;background:rgba(24,27,49,.18);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 2.6s var(--ease-in-out) infinite}
@keyframes cue{to{top:100%}}

/* services grid with differential parallax */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:start}
.col{display:grid;gap:clamp(34px,4.5vw,64px)}
.col-b{margin-top:clamp(60px,9vw,140px)}
.card{display:block;text-decoration:none;color:var(--ink)}
.card-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--soft);isolation:isolate}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(47,101,208,.28));opacity:0;transition:opacity .7s var(--ease)}
.pic{display:block;width:100%;height:100%;background-size:cover;background-position:center}
.pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--ease)}
.card:hover .pic img,.card:focus-visible .pic img{transform:scale(1.045)}
.card:hover .card-media::after,.card:focus-visible .card-media::after{opacity:1}
.card:active .card-media{transform:scale(.985);transition:transform .12s ease-out}
.card-cap{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;padding:18px 4px 0}
.card-title{font:500 clamp(1.05rem,1rem + .35vw,1.3rem)/1.3 var(--f-head);letter-spacing:-.015em}
.card-cat{grid-row:2;font-size:.86rem;color:var(--muted)}
.card-arrow{grid-row:1/3;grid-column:2;align-self:center;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px rgba(24,27,49,.14) inset;position:relative;overflow:hidden;transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card-arrow::before,.card-arrow::after{content:"";position:absolute;inset:0;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='%23181B31' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .6s var(--ease)}
.card-arrow::after{transform:translateX(-100%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.card:hover .card-arrow,.card:focus-visible .card-arrow{background:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.card:hover .card-arrow::before,.card:focus-visible .card-arrow::before{transform:translateX(100%)}
.card:hover .card-arrow::after,.card:focus-visible .card-arrow::after{transform:none}

.statement{max-width:980px;text-align:center;padding:clamp(90px,14vw,190px) 0 clamp(20px,3vw,40px)}
.statement .eyebrow{margin-bottom:26px}
.statement-text{font:400 clamp(1.5rem,1.05rem + 2vw,2.7rem)/1.32 var(--f-head);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.statement-text b{font-weight:600}
.js .statement-text .wd{opacity:.16;transition:none}

/* contact */
.contact{position:relative;padding:clamp(80px,10vw,140px) 0;background:linear-gradient(180deg,rgba(238,243,255,0) 0%,#EEF3FF 22%,#E6EEFE 62%,rgba(238,243,255,0) 100%)}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 85% 45%,rgba(46,111,242,.10),transparent 70%),radial-gradient(45% 50% at 10% 60%,rgba(46,111,242,.06),transparent 70%)}
.contact .wrap{position:relative}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,96px);align-items:center}
.contact-intro .h2{margin-bottom:22px}
.contact-intro .lead{margin-bottom:10px}
.contact-lines{margin-top:30px;display:grid;gap:10px}
.contact-lines a{display:inline-flex;align-items:center;gap:12px;font:500 1rem/1.3 var(--f-head);color:var(--ink);text-decoration:none;transition:color var(--dur) var(--ease)}
.contact-lines a:hover{color:var(--blue)}
.ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft-2);color:var(--muted);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.contact-lines a:hover .ico{background:var(--blue);color:#fff}
.form{display:grid;gap:14px;padding:clamp(20px,3vw,36px);border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(24,27,49,.06),0 30px 80px -40px rgba(1,35,75,.28)}
.field{display:grid;gap:8px}
.field span{font:500 .84rem/1 var(--f-head);color:var(--ink);padding-left:4px}
.field input,.field textarea{width:100%;font:400 1rem/1.5 var(--f-body);color:var(--ink);background:var(--field);border:1px solid transparent;border-radius:14px;padding:14px 16px;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);resize:vertical}
.field input:hover,.field textarea:hover{background:#f1f3f4}
.field input:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,111,242,.14)}
.field [aria-invalid="true"]{border-color:#d34a4a;box-shadow:0 0 0 4px rgba(211,74,74,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.4em;font-size:.92rem;color:var(--ink)}
.form-status.is-ok{color:#1f7a4a}.form-status.is-err{color:#b23b3b}

.btn{--bg:var(--blue);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 26px;border-radius:999px;background:var(--bg);color:var(--fg);font:500 .98rem/1 var(--f-head);letter-spacing:-.005em;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{box-shadow:0 14px 30px -14px rgba(1,35,75,.5)}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn svg{transition:transform .6s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-block{width:100%;margin-top:6px}
.btn-lg{padding:20px 32px;font-size:1.05rem}
.btn-light{--bg:#fff;--fg:var(--navy)}
.btn-light::before{background:var(--blue)}
.btn-light:hover{--fg:#fff;color:#fff}
.btn[disabled]{opacity:.6;pointer-events:none}

/* accordion */
.why{padding:clamp(60px,8vw,110px) 0}
.acc{max-width:900px;margin-inline:auto;border-top:1px solid #000}
.acc-item{border-bottom:1px solid #000}
.acc h3{font:inherit}
.acc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:28px 2px;text-align:left;font:500 clamp(1.08rem,1rem + .4vw,1.3rem)/1.45 var(--f-head);letter-spacing:-.012em;color:#000;transition:color var(--dur) var(--ease)}
.acc-btn:hover{color:var(--blue)}
.acc-btn i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;transition:transform .6s var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.acc-btn i::before,.acc-btn i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .6s var(--ease)}
.acc-btn i::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-btn[aria-expanded="true"] i{transform:rotate(180deg);background:var(--ink);box-shadow:none;color:#fff}
.acc-btn[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc-panel>div{overflow:hidden}
.acc-panel p{padding:0 60px 30px 2px;color:#000;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr}
.acc-item.is-open .acc-panel p{opacity:1;transform:none;transition-delay:.08s}
.no-js .acc-panel,.acc-panel:target{grid-template-rows:1fr}

/* testimonials — featured quote + client switcher */
.quotes{background:var(--soft);padding:clamp(70px,9vw,130px) 0}
.quotes-head{display:flex;align-items:end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,54px)}
.q-controls{display:flex;align-items:center;gap:8px}
.q-count{font:500 .85rem/1 var(--f-head);color:var(--muted);margin-right:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.q-count b{color:var(--ink);font-weight:600}
.q-nav{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--ink);background:#fff;box-shadow:0 0 0 1px rgba(24,27,49,.1) inset;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .5s var(--ease)}
.q-nav:hover{background:var(--ink);color:#fff}
.q-nav:active{transform:scale(.94);transition-duration:.1s}
.q-play .i-play,.q-play[aria-pressed="true"] .i-pause{display:none}
.q-play[aria-pressed="true"] .i-play{display:block}
.q-stage{position:relative;border-radius:28px;background:#fff;padding:clamp(28px,5vw,72px) clamp(24px,6vw,96px);box-shadow:0 0 0 1px rgba(24,27,49,.04),0 30px 80px -50px rgba(1,35,75,.35)}
.q-stage::before{content:"\201C";position:absolute;top:clamp(6px,1.5vw,18px);left:clamp(14px,2.5vw,34px);font:500 clamp(5rem,9vw,8rem)/1 var(--f-head);color:var(--blue);opacity:.14;pointer-events:none}
.js .q-stage{display:grid}
.js .q-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s .6s}
.js .q-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .08s,transform .9s var(--ease) .08s,visibility 0s}
.q-panel+.q-panel{margin-top:40px}
.js .q-panel+.q-panel{margin-top:0}
.q-text{font:400 clamp(1.2rem,1rem + 1.15vw,1.95rem)/1.45 var(--f-head);letter-spacing:-.018em;color:#000;text-wrap:pretty}
.js .q-text p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.js .q-panel.is-expanded .q-text p{-webkit-line-clamp:unset;line-clamp:unset;display:block}
.q-more{margin-top:14px;font:500 .9rem/1 var(--f-head);color:var(--blue);display:inline-flex;align-items:center;gap:8px;padding:8px 0;justify-self:start;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--dur) var(--ease)}
.q-more:hover{text-decoration-color:currentColor}
.q-more::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--ease)}
.q-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.q-panel{display:flex;flex-direction:column}
.q-who{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.q-name{font:600 .8rem/1.3 var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.q-co{font:500 .8rem/1.3 var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.q-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:18px}
.q-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 14px 18px;border-radius:16px;text-align:left;overflow:hidden;min-width:0;transition:background-color var(--dur) var(--ease)}
.q-tab .q-name,.q-tab .q-co{font-size:.68rem;letter-spacing:.08em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.q-tab .q-name{opacity:.55}
.q-tab .q-co{color:var(--muted)}
.q-tab:hover{background:rgba(255,255,255,.7)}
.q-tab[aria-selected="true"]{background:#fff}
.q-tab[aria-selected="true"] .q-name{opacity:1}
.q-tab[aria-selected="true"] .q-co{color:var(--blue)}
.q-bar{position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:rgba(24,27,49,.08);overflow:hidden}
.q-bar::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}
.q-tab[aria-selected="true"] .q-bar::after{animation:qfill var(--q-dur,3s) linear forwards}
.quotes.is-paused .q-tab[aria-selected="true"] .q-bar::after{animation-play-state:paused}
.quotes.is-stopped .q-tab[aria-selected="true"] .q-bar::after{animation:none;transform:scaleX(1)}
@keyframes qfill{to{transform:scaleX(1)}}

/* clients */
.clients{padding:clamp(80px,10vw,140px) 0 clamp(40px,5vw,70px);text-align:center}
.clients .h3{color:#000;margin-bottom:clamp(30px,4vw,50px)}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:24px;overflow:hidden;background:var(--soft-2);gap:1px;box-shadow:0 0 0 1px #DBDBDB inset}
.logos li{display:grid;place-items:center;background:var(--soft-2);aspect-ratio:16/10;padding:10px;box-shadow:0 0 0 .5px #DBDBDB}
.logos img{width:min(120px,70%);height:auto;opacity:.75;filter:grayscale(1);transition:opacity var(--dur) var(--ease),transform .7s var(--ease),filter var(--dur) var(--ease)}
.logos li:hover img{opacity:1;filter:none;transform:scale(1.06)}

/* process */
.process{padding:clamp(60px,8vw,120px) 0 clamp(80px,10vw,150px)}
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.step-no{display:block;font:500 .95rem/1 var(--f-head);color:var(--blue);margin-bottom:18px;letter-spacing:.04em}
.step .h3{margin-bottom:18px}
.step .muted{color:#565656}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tags li{font:500 .8rem/1 var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:#181B31;padding:11px 16px;border-radius:999px;box-shadow:0 0 0 1px rgba(24,27,49,.14) inset;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tags li:has(a):hover{background:var(--blue);color:#fff;box-shadow:none}
.tags a{text-decoration:none}

/* CTA — light blue panel, so it reads apart from the blue footer */
.cta{padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,120px)}
.cta-panel{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(22px,3vw,36px);padding:clamp(40px,7vw,100px) clamp(24px,6vw,90px);background:linear-gradient(135deg,#F4F7FF 0%,#E4EDFF 55%,#D3E1FE 100%);box-shadow:0 0 0 1px rgba(46,111,242,.10) inset}
.cta-panel::before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;right:-18%;top:-55%;border-radius:50%;background:radial-gradient(closest-side,rgba(46,111,242,.22),transparent)}
.cta-panel::after{content:"";position:absolute;z-index:-1;width:45%;aspect-ratio:1;left:-12%;bottom:-60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent)}
.cta-grid{display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
.cta .h2{color:var(--ink)}
.cta .h2 b{color:var(--blue);font-weight:600}

/* footer — brand blue at the top easing into deep navy */
.site-footer{background:linear-gradient(0deg,#011A3A 0%,#01234B 30%,#0B3A86 75%,#1A4FBF 100%);color:rgba(255,255,255,.78);padding:clamp(70px,9vw,120px) 0 36px}
.foot-lead{font:500 clamp(1.6rem,1.1rem + 2.2vw,2.9rem)/1.15 var(--f-head);letter-spacing:-.025em;max-width:820px}
.foot-lead b{color:#fff;font-weight:500}
.foot-row{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:end;margin-top:clamp(50px,7vw,90px);padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.foot-label{display:block;font-size:.85rem;margin-bottom:10px}
.foot-big{font:500 clamp(1.1rem,1rem + .6vw,1.5rem)/1.2 var(--f-head);color:#fff;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.foot-big:hover{background-size:100% 1px}
.social{display:flex;gap:18px}
.social a{font:500 1rem/1 var(--f-head);color:#fff;text-decoration:none;opacity:.8;transition:opacity var(--dur) var(--ease)}
.social a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot-legal{margin-top:60px;font-size:.8rem;color:rgba(255,255,255,.75)}

/* ── motion initial states (only when JS + GSAP is running) ── */
.wd{display:inline-block}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .12em;margin:-.08em -.02em -.12em}
.wi{display:inline-block;will-change:transform}
.js:not(.anim-ready):not(.anim-fallback) [data-split],
.js:not(.anim-ready):not(.anim-fallback) .hero-in{opacity:0}
.anim-fallback [data-split],.anim-fallback .hero-in,.anim-fallback [data-reveal]{opacity:1!important;transform:none!important}

/* ── responsive ── */
@media (max-width:1100px){
  .nav,.lang{display:none}
  .menu-btn{display:block}
  .side-mail{display:none}
  .scroll-cue{display:none}
}
@media (max-width:1100px){
  .q-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .q-tabs::-webkit-scrollbar{display:none}
  .q-tab{flex:none;width:auto;max-width:72vw;scroll-snap-align:start}
  .q-tab .q-name,.q-tab .q-co{font-size:.7rem}
  .js .q-text p{-webkit-line-clamp:6;line-clamp:6}
}
@media (max-width:860px){
  .hero{padding-top:calc(var(--head-h) + 22px)}
  .hero .eyebrow{margin-bottom:12px}
  .work-grid{grid-template-columns:1fr}
  .col-b{margin-top:0}
  .work-grid .col{gap:40px}
  .work-grid{gap:40px}
  .contact-grid,.process-grid,.cta-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-row{grid-template-columns:1fr}
  .q-count{display:none}
  .acc-panel p{padding-right:10px}
}

@media (hover:none){.card:hover .pic img{transform:none}}

@media (prefers-reduced-motion:reduce){
  .blob,.scroll-cue i::after{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .acc-panel,.acc-panel p,.sub,.lang-list,.btn::before,.card-media::after,.js .q-panel{transition-duration:.2s!important}
  .js .q-panel{transform:none!important}
  .js .statement-text .wd{opacity:1}
}
@media (prefers-reduced-transparency:reduce){
  .site-header::before,.sub,.lang-list,.mobile-menu{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* typesetting helpers (inserted by the build): keep the last words of a line together */
/* .nw keeps the last words of a heading together; on phones it becomes an inline block capped at the column
   width, so a pair that can't fit at all wraps inside instead of making the page scroll sideways */
.nw{white-space:nowrap}
@media (max-width:600px){.nw{display:inline-block;max-width:100%;white-space:normal}}
/* long single words (German compounds) never push a layout wider than the screen */
.card-cap>*,.process-grid>*,.step>*,.two-col>*,.post-head>*,.intro-grid>*,.type-head>*,.svc-hero-grid>*,.contact-grid>*,.about-grid>*,.feature>*{min-width:0}
h1,h2,h3,.display,.h2,.h3,.card-title,.lead,.lead-lg,.acc-t{overflow-wrap:break-word}
:lang(de) :is(h1,h2,h3,.display,.h2,.h3,.card-title,.acc-t){-webkit-hyphens:auto;hyphens:auto}
.acc-t{flex:1;min-width:0}
.seg{display:inline-block;max-width:100%}

/* ═════════ service pages ═════════ */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 .8rem/1.4 var(--f-head);color:var(--muted);margin-bottom:clamp(18px,3vw,34px)}
.crumbs a{color:var(--ink);text-decoration:none;transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--blue)}
.svc-hero{padding:calc(var(--head-h) + clamp(30px,6vh,80px)) 0 clamp(40px,6vw,80px)}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);align-items:end}
.svc-hero .display{font-size:clamp(2.4rem,1.2rem + 5vw,5.6rem);line-height:1.02}
.svc-hero-side{display:grid;gap:22px;justify-items:start;padding-bottom:.6em}
.svc-hero-media{width:min(100% - 2*var(--gutter),1440px);margin:clamp(30px,5vw,64px) auto 0}
/* the hero photo is a plain static image at its own proportions (no scroll effect) */
.svc-hero-img{border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.svc-hero-img .pic{display:block}
.svc-hero-img img{display:block;width:100%;height:auto;max-height:min(90vh,980px);object-fit:cover}

.svc-intro{padding:clamp(70px,9vw,130px) 0 clamp(40px,5vw,70px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:start;margin-bottom:clamp(40px,5vw,70px)}
.intro-text{display:grid;gap:18px;padding-top:.4em}
.lead-lg{font:400 clamp(1.15rem,1rem + .55vw,1.45rem)/1.5 var(--f-head);letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.ink{color:var(--ink);font-weight:700}
.muted{text-wrap:pretty}

.gallery{display:grid;gap:clamp(10px,1.4vw,18px)}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-item{display:block;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:1/1;isolation:isolate;cursor:zoom-in}
.g-4 .g-item{aspect-ratio:4/5}
.g-item .pic,.g-item .vid{display:block;width:100%;height:100%}
.g-item img,.g-item .vid{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--ease)}
.g-item::after{content:"";position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.88) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7' fill='none' stroke='%23181B31' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:scale(.85);transition:opacity .4s var(--ease),transform .6s var(--ease)}
.g-item:hover img,.g-item:hover .vid,.g-item:focus-visible img{transform:scale(1.04)}
.g-item:hover::after,.g-item:focus-visible::after{opacity:1;transform:none}
.g-item:active{transform:scale(.985);transition:transform .12s ease-out}

.svc-text{padding:clamp(50px,7vw,110px) 0}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px)}
.two-col article,.two-col>div{display:grid;gap:18px;align-content:start}
.checks{display:grid;gap:10px;margin:2px 0 4px}
.checks li{position:relative;padding-left:32px;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:rgba(46,111,242,.1) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232E6FF2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.band{padding:clamp(20px,3vw,40px) 0;overflow:hidden}
.band-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(10px,1.4vw,18px);width:min(100% - 2*var(--gutter),1440px);margin-inline:auto}
.band-img{border-radius:var(--radius);overflow:hidden;height:clamp(240px,30vw,520px);background:var(--soft)}
.band-img .pic{height:100%}.band-img img{width:100%;height:110%;object-fit:cover}

.svc-types{padding:clamp(70px,9vw,130px) 0 clamp(30px,4vw,60px)}
.types-title{max-width:880px;margin-bottom:clamp(40px,6vw,90px)}
.type{display:grid;gap:clamp(26px,3vw,40px)}
.type+.type{margin-top:clamp(70px,9vw,130px)}
.type-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,6vw,96px);align-items:start}
.type-head>div{display:grid;gap:12px}
.svc-types-2{padding-top:clamp(40px,6vw,90px)}
.type-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,6vw,96px)}
.type-split .type-head{grid-template-columns:1fr;gap:18px}
.type-flip .type-head{order:2}
.spin,.post-img{border-radius:var(--radius);overflow:hidden;background:#fff;aspect-ratio:1/1;box-shadow:0 0 0 1px rgba(24,27,49,.05)}
.spin .vid,.post-img .pic,.post-img img{display:block;width:100%;height:100%;object-fit:cover}
.cta-mid{padding-top:clamp(60px,8vw,110px)}
.cta-sub{margin-top:16px;color:var(--text);max-width:640px}

/* variants for the other service pages: landscape tiles, 1 large + 4 small, client caption,
   two photos beside a text, a contained (uncropped) band, three process steps per row */
.g-land .g-item{aspect-ratio:3/2}
.g-bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-bento li:first-child{grid-column:span 2;grid-row:span 2}
.g-bento li:first-child .g-item{aspect-ratio:auto;height:100%}
.g-cap{margin-top:12px;font-size:.88rem;color:var(--muted)}
.post-img.is-land{aspect-ratio:3/2}
.post-img.is-tall{aspect-ratio:4/5}
.post-pair.is-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.post-pair.is-two .g-item{aspect-ratio:4/5}
.process .gallery{margin-top:clamp(50px,7vw,100px)}
/* static photo panel: a portrait shown whole on a dark panel matching its background, no scroll effect */
.photo-static{padding:clamp(30px,5vw,70px) 0}
.photo-static-frame{width:min(100% - 2*var(--gutter),1440px);height:min(90vh,900px);margin-inline:auto;border-radius:var(--radius);overflow:hidden;background:#101010}
.photo-static-frame .pic{display:block;height:100%;background-image:none!important}
.photo-static-frame img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:860px){.photo-static-frame,.photo-static-frame .pic{height:auto}.photo-static-frame img{height:auto}}
.process-head{margin-bottom:clamp(40px,6vw,80px);max-width:880px}
.process-3{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(40px,6vw,80px)}
/* feature rows: a single photo shown large and uncropped (~2/3 of the wide container),
   text beside it aligned to the normal content column; alternate with .feature-flip */
.svc-features{padding:clamp(70px,9vw,130px) 0 clamp(30px,4vw,60px)}
.features{--edge:calc((min(100vw - 2*var(--gutter),1440px) - min(100vw - 2*var(--gutter),var(--wrap))) / 2);
  width:min(100% - 2*var(--gutter),1440px);margin-inline:auto;display:grid;gap:clamp(80px,10vw,150px)}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(30px,5vw,80px);align-items:center}
.feature-text{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;padding-left:var(--edge)}
.feature-flip{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.feature-flip .feature-text{order:2;padding-left:0;padding-right:var(--edge)}
.feature-media .g-item{aspect-ratio:auto}
.feature-media .g-item img,.feature-media .g-item .vid{height:auto}
.feature-text .h3:not(:first-child){margin-top:18px}
.features-more{width:min(100% - 2*var(--gutter),1440px);margin:clamp(14px,2vw,24px) auto 0}
@media (max-width:860px){
  .feature,.feature-flip{grid-template-columns:1fr}
  .feature-flip .feature-text{order:0}
  .feature-text{padding:0}
  .process-3{grid-template-columns:1fr}
  .g-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-bento li:first-child{grid-row:auto}
  .g-bento li:first-child .g-item{aspect-ratio:4/3;height:auto}
}

.svc-together{padding:clamp(60px,8vw,120px) 0 0}
.statement-sm{padding:clamp(60px,8vw,110px) 0 clamp(50px,7vw,100px)}
.svc-expect{padding:clamp(40px,5vw,70px) 0 clamp(60px,8vw,110px)}
.expect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(30px,4vw,50px)}
.expect li{display:grid;gap:12px;align-content:start;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--soft-2)}
.expect h3{font:600 1.1rem/1.3 var(--f-head);letter-spacing:-.012em;color:var(--ink)}
.expect p{color:var(--text)}
.expect-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--blue);box-shadow:0 0 0 1px rgba(46,111,242,.12)}
.cta .gallery{margin-top:clamp(14px,2vw,24px)}
.faq-title{max-width:900px;margin:0 auto clamp(30px,4vw,50px);text-align:center}
.related{padding:clamp(40px,6vw,90px) 0 clamp(80px,10vw,140px)}
.related .h3{margin-bottom:clamp(24px,3vw,40px)}
.related-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.card-sm .card-title{font-size:.98rem}
.card-sm .card-arrow{width:36px;height:36px}
.card-sm .card-cap{padding-top:12px}

/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#070B17;color:#fff;overflow:hidden}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;grid-template-rows:1fr auto}
.lb-stage{position:relative;display:grid;place-items:center;padding:clamp(60px,8vh,90px) clamp(16px,7vw,110px) 10px;touch-action:pan-y;min-height:0}
.lb-frame{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0}
.lb-frame img,.lb-frame video{display:block;max-width:min(100%,1600px);max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;border-radius:12px;user-select:none;-webkit-user-drag:none}
.lb-caption{padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px));text-align:center;font:400 .9rem/1.4 var(--f-body);color:rgba(255,255,255,.75)}
.lb-count{position:absolute;left:clamp(16px,3vw,28px);top:clamp(16px,3vw,24px);font:500 .85rem/44px var(--f-head);letter-spacing:.06em;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background-color var(--dur) var(--ease),transform .4s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn:active{transform:scale(.92);transition-duration:.1s}
.lb-close{right:clamp(16px,3vw,28px);top:clamp(16px,3vw,24px)}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:clamp(10px,2vw,28px)}.lb-next{right:clamp(10px,2vw,28px)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.lb-lock{overflow:hidden}

@media (max-width:1100px){
  .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .svc-hero{padding-top:calc(var(--head-h) + 14px)}
  .svc-hero-grid,.intro-grid,.two-col,.type-head,.type-split{grid-template-columns:1fr}
  .type-flip .type-head{order:0}
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3 li:first-child{grid-column:1/-1}
  .g-3 li:first-child .g-item{aspect-ratio:4/3}
  .g-item::after{opacity:1;transform:none;width:32px;height:32px;right:8px;bottom:8px}
  .band-inner{grid-template-columns:1fr}
  .band-img:last-child{display:none}
  .expect{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-prev,.lb-next{display:none}
  .lb-stage{padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){.vid{animation:none}}

/* full-width photo break: starts as a rounded card inside the margins, opens to the full screen on scroll */
.band-reveal{padding:clamp(30px,5vw,70px) 0;overflow:hidden}
.band-frame{--inset:max(var(--gutter),calc((100vw - var(--wrap)) / 2));--r:var(--radius);position:relative;width:100%;height:min(78vh,820px);overflow:hidden;background:#111;will-change:clip-path}
.js .band-frame{clip-path:inset(0 var(--inset) round var(--r))}
.band-media{position:absolute;inset:-8% 0;will-change:transform}
.band-media .pic{display:block;width:100%;height:100%}
.band-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .band-reveal{padding:20px 0}
  .band-frame{height:auto;aspect-ratio:4/3}
  .js .band-frame{clip-path:none}
  .band-media{inset:0}
}
@media (prefers-reduced-motion:reduce){.js .band-frame{clip-path:none}.band-media{inset:0}}

/* ═════════ blog: article pages + list ═════════ */
.post-head{display:grid;gap:14px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;font:500 .85rem/1.4 var(--f-head);color:var(--muted)}
.post-title{max-width:1000px;font-size:clamp(2.1rem,1.3rem + 3.2vw,4.2rem);line-height:1.08}
/* readable text column; figures, galleries and panels may run wider */
.prose{--col:760px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--col)) minmax(0,1fr);row-gap:22px;padding:clamp(50px,7vw,100px) 0 clamp(60px,8vw,110px)}
.prose>*{grid-column:2}
.prose>.post-gallery,.prose>.post-figure,.prose>.post-cta,.prose>.compare,.prose>.calc-wrap{grid-column:1/-1;margin-block:clamp(14px,2.5vw,34px)}
.prose h2{font:500 clamp(1.45rem,1.15rem + 1.2vw,2.1rem)/1.2 var(--f-head);letter-spacing:-.018em;color:var(--ink);margin-top:clamp(18px,3vw,36px);text-wrap:balance}
.prose h3,.prose h4{font:500 clamp(1.15rem,1.05rem + .45vw,1.4rem)/1.3 var(--f-head);letter-spacing:-.012em;color:var(--ink);margin-top:10px}
.prose p,.prose li{text-wrap:pretty}
.prose a:not(.btn):not(.g-item):not(.yt-item){color:var(--ink);text-decoration-color:rgba(46,111,242,.45);text-underline-offset:3px;transition:color var(--dur) var(--ease)}
.prose a:not(.btn):not(.g-item):not(.yt-item):hover{color:var(--blue)}
.post-figure .g-item,.post-figure .yt-item{aspect-ratio:auto}
.post-figure .g-item img,.post-figure .g-item .vid,.post-figure .yt-item img{height:auto}
.post-figure{max-width:1170px;width:100%;justify-self:center}
.post-gallery{max-width:1170px;width:100%;justify-self:center}
.post-cta{padding:clamp(28px,4vw,52px)}
.post-acc{margin-top:6px}
/* YouTube thumbnail: opens the video on YouTube */
.yt-item{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:1/1}
.post-gallery .yt-item .pic,.post-gallery .yt-item img{display:block;width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.92) center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%232E6FF2'/%3E%3C/svg%3E");box-shadow:0 8px 30px rgba(0,0,0,.18);transition:transform .4s var(--ease)}
.yt-item:hover .yt-play,.yt-item:focus-visible .yt-play{transform:scale(1.08)}
/* before / after slider */
.compare{position:relative;max-width:1170px;width:100%;justify-self:center;border-radius:var(--radius);overflow:hidden;background:var(--soft);--pos:50%}
.compare-img .pic,.compare-img img{display:block;width:100%;height:auto}
.compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.compare-after img{height:100%;object-fit:cover}
.compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.compare-label{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.88);font:500 .78rem/1 var(--f-head);color:var(--ink);pointer-events:none}
.compare-label-after{left:auto;right:14px}
.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare-range:focus-visible+*{outline:none}
.compare:has(.compare-range:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
/* previous / next */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);padding:0 0 clamp(40px,6vw,80px)}
.post-nav a{display:grid;gap:6px;padding:clamp(18px,2.4vw,28px);border-radius:var(--radius);background:var(--soft-2);color:var(--ink);text-decoration:none;font:500 1.02rem/1.35 var(--f-head);transition:background-color var(--dur) var(--ease)}
.post-nav a span{font-size:.8rem;color:var(--muted)}
.post-nav a:hover{background:#E9EEFB}
.post-nav-next{text-align:right}
.post-related{grid-template-columns:repeat(3,minmax(0,1fr))}
/* blog list */
.blog-hero{padding-bottom:0}
.blog-band{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,26px);padding:clamp(32px,6vw,90px);border-radius:clamp(20px,2.4vw,30px);background:linear-gradient(135deg,#1A4FBF 0%,#0B3A86 45%,#01234B 100%);color:#fff}
.blog-band .display{color:#fff;font-size:clamp(2rem,1.1rem + 3.4vw,4.4rem);max-width:1000px}
.blog-band .display b{color:#fff}
.blog-band .lead{color:rgba(255,255,255,.82);max-width:640px}
@media (max-width:600px){.blog-band{padding:28px 20px}.blog-band .nw{white-space:normal}}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(16px,2.2vw,30px);padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,130px)}
.blog-grid .card-media{aspect-ratio:4/3}
.blog-grid .card-cat{grid-row:3}
.card-date{grid-row:1;grid-column:1/-1;font:500 .8rem/1.4 var(--f-head);color:var(--muted);margin-bottom:6px}
.blog-grid .card-title{grid-row:2}
.blog-grid .card-arrow{grid-row:2/4}
.calc-wrap{max-width:1000px;width:100%;justify-self:center}
@media (max-width:860px){
  .post-nav,.post-related,.blog-grid{grid-template-columns:1fr}
  .post-nav-next{text-align:left}
}

/* ═════════ O meni + Kontakt ═════════ */
.about-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,6vw,96px);align-items:end}
/* O meni heading: three fixed lines (Sem / Andraž Jenkole, / inženir fotografije.) */
.about-title .ln{display:block}
@media (min-width:861px){.about-title .ln{white-space:nowrap}}
.about-title{font-size:clamp(2rem,1.1rem + 3.6vw,4.6rem)}
.about-portrait{border-radius:var(--radius);overflow:hidden;background:var(--soft);max-width:480px;justify-self:end;width:100%}
.about-portrait .pic,.about-portrait img{display:block;width:100%;height:auto}
.about-services{padding-top:clamp(20px,3vw,40px)}
.about-cards{padding:0}
.about-cards .card-media{aspect-ratio:1/1}
.contact-page{padding-bottom:clamp(40px,6vw,80px)}
.contact-page .contact-grid{align-items:start}
.contact-page .display{margin-bottom:24px;font-size:clamp(2.2rem,1.3rem + 2.4vw,3.6rem)}  /* fits the column next to the form */
.contact-page .contact-lines li{display:grid;gap:6px;justify-items:start}  /* "Pokličite me na:" above the number */
.contact-label{font:500 .9rem/1.3 var(--f-head);color:var(--muted);margin-right:4px}
.contact-social{margin-top:26px}
.contact-social a{color:var(--ink);opacity:1}
.contact-social a:hover{color:var(--blue)}
.contact-form-card .h3{margin-bottom:16px}
.contact-map{padding:0 0 clamp(70px,9vw,130px)}
.contact-map-frame{width:min(100% - 2*var(--gutter),1440px);margin-inline:auto;border-radius:var(--radius);overflow:hidden;background:var(--soft);height:clamp(320px,45vw,520px)}
.contact-map-frame iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-portrait{justify-self:start}
}

/* ═════════ Fotografske storitve, Grafično oblikovanje, Fotografski tečaj ═════════ */
.hero-gradient img{max-height:min(46vh,440px)}
/* a hero title too long for the two-column hero: title full width, subtitle + button below */
.svc-hero-grid.is-stacked{grid-template-columns:1fr;align-items:start}
.svc-hero-grid.is-stacked .svc-hero-side{padding-bottom:0;max-width:640px}
/* a feature photo that leads to a service page (not the lightbox) */
.feature-link{display:block;border-radius:var(--radius);overflow:hidden;background:var(--soft);isolation:isolate}
.feature-link .pic,.feature-link img{display:block;width:100%;height:auto;transition:transform 1.1s var(--ease)}
.feature-link:hover img{transform:scale(1.03)}
.feature-text .h3 a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .6s var(--ease),color var(--dur) var(--ease)}
.feature-text .h3 a:hover{color:var(--blue);background-size:100% 2px}
.feature-text .eyebrow{margin-bottom:-6px}
/* "Za koga NI": crosses instead of checks */
.crosses li::before{background:rgba(24,27,49,.07) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23181B31' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* tečaj cards hold lists: card styling only on the cards themselves */
.course-cards>li{align-content:start}
.course-cards .checks{margin-top:4px}
.course-cards .checks li{display:block;padding:0 0 0 32px;border-radius:0;background:none;color:var(--ink)}
.course-cards .checks li::before{top:.28em}
.cta-panel .checks{margin-top:14px}

/* ═════════ chat button: the visitor picks WhatsApp, Viber, Messenger, Instagram, call or e-mail ═════════ */
.chat{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:grid;justify-items:end;gap:12px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.is-scrolled .chat{opacity:1;transform:none;pointer-events:auto}
.chat.is-hidden:not(.is-open){opacity:0;transform:translateY(12px);pointer-events:none}
.chat-btn{display:grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(46,111,242,.55),0 2px 6px rgba(1,35,75,.18);transition:transform .3s var(--ease),background-color var(--dur) var(--ease)}
.chat-btn:hover{transform:scale(1.06);background:var(--blue-deep)}
.chat-btn .chat-close,.chat.is-open .chat-btn .chat-open{display:none}
.chat.is-open .chat-btn .chat-close{display:block}
.chat-panel{width:min(280px,calc(100vw - 32px));padding:14px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(24,27,49,.06),0 30px 70px -30px rgba(1,35,75,.45);transform-origin:bottom right;animation:chat-in .35s var(--ease)}
.chat-panel[hidden]{display:none}
@keyframes chat-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.chat-title{font:600 .95rem/1.3 var(--f-head);color:var(--ink);padding:4px 8px 10px}
.chat-list{display:grid;gap:2px}
.chat-link{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;color:var(--ink);text-decoration:none;font:500 .95rem/1.2 var(--f-head);transition:background-color var(--dur) var(--ease)}
.chat-link:hover,.chat-link:focus-visible{background:var(--soft-2)}
.chat-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;flex:none}
.chat-wa{background:#25D366}.chat-vb{background:#7360F2}.chat-ms{background:#0A7CFF}
.chat-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.chat-tel,.chat-mail{background:var(--soft-2);color:var(--blue)}
@media (prefers-reduced-motion:reduce){.chat,.chat-panel{transition:none;animation:none}}