/* ==========================================================================
   Ladom — design system agency
   Hand-coded rebuild of ladom.co (Framer). Values measured from the live site
   at 1440px viewport.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#EFE9DD;
  --paper:#F8F4ED;
  --ink:rgb(28,26,9);
  --ink-88:rgba(28,26,9,.88);
  --ink-56:rgba(28,26,9,.56);
  --ink-32:rgba(28,26,9,.32);
  --ink-24:rgba(0,0,0,.24);
  --ink-10:rgba(28,26,9,.1);
  --ink-08:rgba(46,42,15,.08);
  --line-20:rgba(46,42,15,.2);
  --card-fade:rgb(224,218,205);
  --frame:#FAFAFA;
  --sol-hover:rgb(248,244,237);
  --dark:rgb(26,23,17);
  --w-96:rgba(255,255,255,.96);
  --w-88:rgba(255,255,255,.88);
  --w-64:rgba(255,255,255,.64);
  --w-40:rgba(255,255,255,.4);
  --w-24:rgba(255,255,255,.24);
  --w-12:rgba(255,255,255,.12);
  --w-08:rgba(255,255,255,.08);
  --orange:rgb(255,169,77);
  --rust:rgb(217,72,15);
  --sand:rgb(255,216,168);

  --inter:"Inter", "Helvetica Neue", Arial, sans-serif;
  --jakarta:"Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter:40px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring-fast:linear(0, .3 12.5%, .7 25%, .92 37.5%, 1 50%, 1.03 62.5%, 1.02 75%, 1.01 87.5%, 1);
  --btn:rgb(28,26,9);                 /* buttons stay dark in both themes */
  --glass-88:rgba(255,255,255,.88);
  --glass-60:rgba(255,255,255,.6);
  --menu-bg:#fff;                     /* mobile menu panel */
  --btn-shadow:inset 0 -1px 1px rgba(255,255,255,.8), 0 1px 8px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08), inset 0 -1px 8px rgba(255,255,255,.4), inset 0 -1px 0 #000;
}

/* ---------- dark theme: follows the OS setting automatically ----------
   Values are the dark-mode tokens of the live Framer site (ladom.co). */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0f0d08;
    --paper:#26221b;
    --ink:#fff;
    --ink-88:rgba(255,255,255,.88);
    --ink-56:rgba(255,255,255,.48);
    --ink-32:rgba(255,255,255,.32);
    --ink-24:rgba(255,255,255,.24);
    --ink-10:rgba(255,255,255,.1);
    --ink-08:rgba(255,255,255,.08);
    --line-20:rgba(255,255,255,.2);
    --card-fade:#26221b;
    --frame:rgba(255,255,255,.06);
    --sol-hover:rgba(255,255,255,.05);
    --dark:#17140e;
    --glass-88:rgba(15,13,8,.88);
    --glass-60:rgba(0,0,0,.6);
    --menu-bg:#0a0901;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink-88); font-family:var(--inter); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,h4,h5,h6,p{margin:0}
ul{list-style:none; margin:0; padding:0}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:8px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* "Inter Display" = Inter at its largest optical size */
.id{font-variation-settings:"opsz" 32}

/* ---------- shared type ---------- */
.eyebrow{font:500 14px/21px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-56)}
.grad-text{-webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow.rust{background-image:linear-gradient(90deg,var(--rust),var(--ink-56)); -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow.sand{background-image:linear-gradient(90deg,var(--sand),var(--w-64)); -webkit-background-clip:text; background-clip:text; color:transparent}
.h-xl{font:800 58px/1.2 var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.h-lg{font:800 48px/1.2 var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.h-xxl{font:800 77px/1.2 var(--jakarta); color:var(--ink-88)}
.lead{font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}
.meta-i{font:italic 400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:1000px; background:var(--btn); color:var(--w-96); font:500 16px/1.7 var(--jakarta); letter-spacing:.02em; text-transform:uppercase; box-shadow:var(--btn-shadow); transition:transform .25s var(--ease), box-shadow .25s}
/* label flips in on X when the button scrolls into view (live: rotateX 90deg -> 360deg).
   The label wrapper is added by main.js; without JS the label is simply static. */
.btn-label{display:inline-block; perspective-origin:center; backface-visibility:visible}
.js .btn .btn-label{transform:rotateX(90deg)}
.js .btn.flip .btn-label{animation:btn-flip 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes btn-flip{from{transform:rotateX(90deg)} to{transform:rotateX(360deg)}}
/* hover: grows slightly. `scale` (not transform) so it never fights the reveal transition */
.btn, .js .btn[data-reveal]{transition:opacity .8s var(--ease), transform .8s var(--ease), scale .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
@media (hover:hover){ .btn:hover{scale:1.05} }
.btn:active{scale:.98}
.btn-lg{height:67px; padding:0 40px}
.btn-md{height:56px; padding:0 32px; font-size:14px}

.chip{display:inline-block; font:500 14px/20px var(--inter); color:var(--ink-88); background:var(--ink-08); border-radius:8px; padding:6px 12px}

/* key-cap (the "UI" / "Soon" texture tiles) */
.keycap{position:relative; display:inline-grid; place-items:center; border-radius:4px 12px; overflow:hidden; -webkit-backdrop-filter:blur(34px); backdrop-filter:blur(34px); background:url(../img/key-texture.png) center/100% 100% no-repeat; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(28,26,9,.14); vertical-align:middle}
.keycap img{width:46%; height:auto}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed; z-index:100; inset:0 0 auto; display:flex; justify-content:center; pointer-events:none}
.nav-inner{pointer-events:auto; position:relative; width:100%; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); margin-top:40px; border-radius:0; transition:width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), padding .6s var(--ease), border-radius .6s var(--ease), background .4s}
.nav-inner::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(var(--glass-60),rgba(255,255,255,0)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .4s; z-index:-1}
.nav.scrolled .nav-inner{width:min(753px, calc(100% - 32px)); height:84px; margin-top:8px; padding:0 40px; border-radius:100px}
.nav.scrolled .nav-inner::before{opacity:1}

.nav-logo{position:relative; width:48px; height:48px; flex:none}
.nav-logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .3s}
.nav-logo .on-dark{opacity:0}

.nav-links{display:flex; align-items:center; gap:0}
.nav-links > li > a{display:flex; align-items:center; padding:0 22px; font:500 16px/25.6px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:-.01em; color:var(--ink-88); transition:color .3s, opacity .2s}
.nav-links > li:last-child > a{padding-right:0}
.nav-links > li > a{position:relative}
.nav-links > li > a::after{content:""; position:absolute; left:22px; right:22px; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav-links > li:last-child > a::after{right:0}
.nav.scrolled .nav-links > li > a::after{left:20px; right:20px}
.nav.scrolled .nav-links > li:last-child > a::after{right:0}
.nav-links > li > a:hover::after,.nav-links > li > a:focus-visible::after{transform:scaleX(1)}
.nav-links > li.nav-lang{margin-left:2px}
.nav-links > li.nav-lang > a,.nav.scrolled .nav-links > li.nav-lang > a{height:24px; padding:0 8px; font:500 11px/22px var(--inter); letter-spacing:.06em; color:var(--ink-56); border:1px solid var(--ink-32); border-radius:20px; transition:color .3s, border-color .3s, background-color .3s}
.nav-links > li.nav-lang > a::after{display:none}
.nav-links > li.nav-lang > a:hover{color:var(--ink-88); border-color:var(--ink-56)}
.nav.on-dark .nav-links > li.nav-lang > a{color:var(--w-64); border-color:var(--w-40)}
.nav.on-dark .nav-links > li.nav-lang > a:hover{color:var(--w-96); border-color:var(--w-64)}
.nav-ui{display:inline-flex; align-items:center; gap:6px; margin-left:8px}
.nav-ui .keycap{width:30px; height:28px}
.ver{display:inline-block; font:500 10px/20px var(--inter); letter-spacing:-.02em; color:var(--ink-56); border:1px solid var(--ink-32); border-radius:20px; padding:0 6px; transition:color .3s, border-color .3s}
.nav.scrolled .nav-links > li > a{padding:0 20px}

/* over dark surfaces */
.nav.on-dark .nav-links > li > a{color:var(--w-96)}
.nav.on-dark .ver{color:var(--w-64); border-color:var(--w-40)}
.nav.on-dark .nav-inner::before{background:linear-gradient(rgba(26,23,17,.7),rgba(26,23,17,0))}
.nav.on-dark .nav-logo .on-light{opacity:0}
.nav.on-dark .nav-logo .on-dark{opacity:1}
.nav.on-dark .nav-burger span{background:var(--w-64)}
.nav.on-dark .nav-ui .keycap img{filter:invert(1)}   /* letters SVG is dark; light on dark surfaces */
.nav.on-dark.open .nav-burger span{background:var(--w-88)}
.nav.on-dark.open .nav-burger{background:var(--w-08)}

.nav-burger{display:none; position:relative; width:48px; height:48px; border-radius:40px; transition:background .3s}
.nav-burger span{position:absolute; left:14px; width:20px; height:2px; border-radius:10px; background:var(--ink-56); transition:transform .4s var(--ease), top .4s var(--ease), background .3s}
.nav-burger span:first-child{top:17px}
.nav-burger span:last-child{top:29px}
.nav.open .nav-burger{background:var(--ink-08)}
.nav.open .nav-burger span{top:23px; background:var(--ink-88)}
.nav.open .nav-burger span:first-child{transform:rotate(45deg)}
.nav.open .nav-burger span:last-child{transform:rotate(-45deg)}
.nav-links .nav-mobile{display:none}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
/* shorter than the viewport on purpose: the top of "Latest work" peeks in, so it's clear the page scrolls */
.hero{position:relative; height:max(560px,calc(100vh - 200px)); height:max(560px,calc(100svh - 200px)); display:grid; place-items:center; text-align:center; overflow:hidden; isolation:isolate}
/* approximation of the Framer shader canvas: soft silk folds */
.hero-bg{position:absolute; left:0; right:0; top:0; height:max(100%, 100vh); z-index:-2; overflow:hidden}   /* live renders the shader viewport-tall, the hero clips it */
.hero-bg i{position:absolute; display:block; filter:blur(28px); will-change:transform}
.hero-bg .f1{left:26%; top:-30%; width:18%; height:170%; transform:rotate(-24deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75) 55%,rgba(255,255,255,0)); animation:fold 14s ease-in-out infinite alternate}
.hero-bg .f2{left:50%; top:-30%; width:14%; height:170%; transform:rotate(-24deg); background:linear-gradient(90deg,rgba(203,190,166,0),rgba(203,190,166,.75) 60%,rgba(203,190,166,0)); animation:fold 16s ease-in-out -4s infinite alternate}
.hero-bg .f3{left:58%; top:-30%; width:9%; height:170%; transform:rotate(-24deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0)); filter:blur(18px); animation:fold 12s ease-in-out -2s infinite alternate}
.hero-bg .f4{left:70%; top:-30%; width:22%; height:170%; transform:rotate(-24deg); background:linear-gradient(90deg,rgba(214,202,178,0),rgba(214,202,178,.6),rgba(214,202,178,0)); animation:fold 18s ease-in-out -8s infinite alternate}
.hero-bg .f5{left:-10%; top:-20%; width:40%; height:80%; transform:rotate(-58deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0)); animation:fold 20s ease-in-out -6s infinite alternate}
@keyframes fold{to{translate:40px 0}}
.hero-shader{width:100%; height:100%} /* Paper Shaders sets position:relative on its mount */
/* On narrow screens the shader, drawn at the screen's own size, keeps its rays off to the side.
   Draw it at desktop size (1440×1350) and scale it down, centred, so the prism shows here too. */
@media (max-width:1199px){ .hero-shader{position:absolute !important; left:calc(50% - 612px); top:0; width:1440px; height:1350px; transform:scale(.85); transform-origin:0 0} }
@media (max-width:767px){ .hero-shader{left:calc(50% - 432px); transform:scale(.6)} }
.hero-bg.gl i{display:none}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:450px; z-index:-1; background:linear-gradient(rgba(240,233,221,0),var(--bg))}
.hero-inner{padding:0 var(--gutter); display:flex; flex-direction:column; align-items:center}
.hero h1{margin:32px 0 32px}
.hero .lead{max-width:852px; margin-bottom:40px}

/* ==========================================================================
   FOLDER (latest work + works list)
   ========================================================================== */
.folder{position:relative; display:block}
.folder-body,.figure{display:block}
/* folder silhouette = the live site's SVG mask (1384x890). Boxes keep that ratio at the
   measured sizes; 100% 100% (instead of cover) avoids clipping corners in between. */
.folder-body{position:relative; background:var(--paper); -webkit-mask:url(../img/svg/folder-mask.svg) center/100% 100% no-repeat; mask:url(../img/svg/folder-mask.svg) center/100% 100% no-repeat; padding:92px 16px 14px}
.folder-body::before{content:""; position:absolute; left:0; right:0; top:138px; height:1px; background:var(--ink-08)}
.figure{position:relative; background:var(--glass-88); border-radius:24px; padding:24px; box-shadow:0 -4px 16px rgba(0,0,0,.04)}
.figure img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:16px; outline:.5px solid rgba(0,0,0,.08); outline-offset:-.5px}
.figure::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 .5px rgba(46,42,15,.2); pointer-events:none}

/* ==========================================================================
   LATEST WORK
   ========================================================================== */
.latest{position:relative; margin-top:-64px; padding:48px 0 111px}
.work-head{width:min(1136px, 100% - 2*var(--gutter)); margin:0 auto 67px; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.work-head h2{margin:16px 0 24px}
.services-l{font:500 14px/20px var(--inter); color:var(--ink-32); text-transform:uppercase}
.services .chips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px}
.latest .folder{width:calc(100% - 2*var(--gutter)); margin:0 auto}

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */
.solutions{padding:104px 0 112px}
.sec-title{text-align:center; margin-bottom:120px; padding:0 var(--gutter)}
.sec-title h2{margin-top:16px}
.s-grid{display:grid; grid-template-columns:1fr 1fr; padding:0 var(--gutter)}
.s-col{display:flex; flex-direction:column}
.s-row{display:grid; grid-template-columns:repeat(3,1fr); padding:40px var(--gutter) 0}
.sol{display:flex; flex-direction:column; padding:23px 24px 24px; border-radius:32px}
.sol-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.sol-head h3{font:500 24px/32px var(--inter); color:var(--ink-88)}
.tag{font:500 14px/21px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; background-image:linear-gradient(90deg,var(--rust),var(--ink-56)); -webkit-background-clip:text; background-clip:text; color:transparent}
.dots{display:flex; flex-wrap:wrap; margin:8px 0 41px}
.dots li{font:italic 400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}
.dots li:not(:last-child)::after{content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ink-32); margin:0 10px; vertical-align:middle}
.card{position:relative; overflow:hidden; border-radius:16px; background:var(--ink-08); flex:none}
.card::after{content:""; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(rgba(255,255,255,0),var(--card-fade)); pointer-events:none}
.card.tall{height:732px}
.card.mid{height:290px}
.card.sm{height:268px}
a.sol, .js a.sol[data-reveal]{transition:opacity .8s var(--ease), transform .8s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease)}
@media (hover:hover){ a.sol:hover{background:var(--sol-hover); box-shadow:0 .36px .36px -.83px rgba(0,0,0,.08), 0 1.37px 1.37px -1.67px rgba(0,0,0,.08), 0 6px 6px -2.5px rgba(0,0,0,.08)} }

/* consulting: iso token cards */
.for{position:absolute; top:56px; left:48px; display:flex; align-items:flex-start; gap:10px; z-index:2}
.for > span{margin-top:6px}
.for > span{font:italic 400 16px/24px var(--inter); color:var(--ink-56)}
.ticker{height:32px; overflow:hidden}
.ticker ul{transition:transform .6s var(--ease)}
.ticker li{height:32px; font:italic 600 24px/32px var(--inter); color:var(--ink-88)}
/* the whole scene is laid out flat (742x255, live values) and tilted by one transform.
   It grows in when the card is revealed, like the live appear animation. */
.iso{position:absolute; left:11px; top:277px; width:742px; height:255px; transform:scale(.9) rotate(82deg) skewX(20deg) skewY(-38deg); transition:transform .6s cubic-bezier(.34,1.4,.64,1) .1s}
.js .sol[data-reveal]:not(.in) .iso{transform:translateY(50px) scale(.45) rotate(82deg) skewX(20deg) skewY(-38deg)}
.iso > *{position:absolute}
.iso-card{width:200px; height:201px; border-radius:12px; background:var(--ink-08); box-shadow:4px 4px 0 rgba(46,42,15,.2), 6px 6px .75px rgba(28,26,9,.04), 3px 3px 4px rgba(28,26,9,.16), 24px 24px 12px rgba(28,26,9,.04)}
.iso-card.token::before{content:""; position:absolute; left:1px; top:1px; width:199px; height:200px; border-radius:12px; background:linear-gradient(rgba(28,26,9,.24) 22.1354%, rgba(255,255,255,0) 30.849%, rgba(28,26,9,.24) 53.6849%)}
.dots-grid{position:absolute; left:16px; top:16px; display:grid; grid-template-columns:repeat(5,24px); gap:12px}
.iso .d{position:relative; display:block; width:24px; height:24px; border-radius:100px; background:rgba(255,255,255,.88)}
.iso .d::after{content:""; position:absolute; left:5px; top:5px; width:14px; height:14px; border-radius:50%; background:rgb(171,169,160)}
.iso .d.c1::after{background:rgb(210,172,166)}
.iso .d.c2::after{background:rgb(175,196,169)}
.iso .d.c4::after{background:rgb(174,194,225)}
.iso .d.c5{background:rgba(255,255,255,.64)}
.iso .d.c5::after{background:rgba(203,60,196,.32)}
.iso .d.big{position:absolute; scale:2; box-shadow:.33px .3px .04px rgba(28,26,9,0), 1.26px 1.14px .17px rgba(28,26,9,.02), 5.5px 5px .74px rgba(28,26,9,.08), 4px 4px 2px -1px rgba(0,0,0,.25)}
.iso .d.raw::after{background:rgba(28,26,9,.56)}
.iso .in-label{position:absolute; left:32px; top:58px; font:500 14px/19.6px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-88)}
.iso .in-field{position:absolute; left:32px; top:90px; width:189px; height:52px; border-radius:6px; background:var(--ink-08); padding:13px 0 0 18px; font:400 19px/26.6px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-32)}
.iso-pill{padding:4px 8px; border-radius:32px; background:var(--ink-08); font:500 8px/9.6px var(--inter); font-variation-settings:"opsz" 32; text-transform:uppercase; color:var(--ink-56); white-space:nowrap}
.iso-lbl{font:500 10px/12px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-56); white-space:nowrap}

/* UI design: browser + phone */
/* desktop + mobile view as one group; scaled down on phones so both stay in the card.
   On reveal the browser rises in and the phone slides in from the right. */
.mock-ui{position:absolute; left:94px; top:68px; width:426px; height:321px; transform-origin:0 0}
.mock-browser{position:absolute; left:0; top:0; width:371px; height:254px; border-radius:11px; background:var(--bg); box-shadow:0 10.8px 25.2px rgba(0,2,38,.04), inset 0 1.8px 1.8px rgba(255,255,255,.25)}
.mb-bar{display:flex; align-items:center; gap:4px; height:28px; padding:0 10px}
.mb-bar i{width:5px; height:5px; border-radius:50%; background:#E2665E}
.mb-bar i:nth-child(2){background:#E8B84A}.mb-bar i:nth-child(3){background:#6CBF5C}
.mb-bar em{margin-left:60px; height:10px; width:150px; border-radius:10px; background:var(--ink-08); font:normal 400 6.3px/10px var(--inter); color:var(--ink-88); padding-left:14px}
.mb-nav{display:flex; gap:8px; padding:8px 16px}
.mb-nav b{display:block; height:8px; width:24px; border-radius:4px; background:var(--ink-08)}
.mb-nav b:first-child{width:16px; height:16px; border-radius:50%; margin-right:12px}
.mb-hero{position:absolute; left:16px; right:16px; top:70px; height:129px; border-radius:6px; background:var(--ink-08)}
.mb-hero::after{content:""; position:absolute; left:8px; right:8px; top:43px; bottom:-35px; border-radius:6px; background:var(--ink-08)}
.mock-phone{position:absolute; left:277px; top:35px; width:149px; height:286px; border-radius:18px; background:var(--bg); box-shadow:-10px 4px 28px rgba(46,42,15,.16), 0 0 0 .5px var(--ink-08), inset 0 1.8px 1.8px rgba(255,255,255,.25); padding:22px 10px 14px}
.mp-notch{position:absolute; left:50%; top:7px; width:36px; height:7px; margin-left:-18px; border-radius:7px; background:var(--ink-08)}
.mock-browser,.mock-phone{transition:opacity .7s var(--ease), translate .9s var(--ease)}
.mock-phone{transition-delay:.25s}
.js .sol:not(.in) .mock-browser{opacity:0; translate:-32px 24px}
.js .sol:not(.in) .mock-phone{opacity:0; translate:64px 0}
.mock-phone b{display:block; height:8px; border-radius:4px; background:var(--ink-08); margin-bottom:8px}
.mock-phone b:nth-of-type(1){width:40px}
.mock-phone b:nth-of-type(3){height:110px}
.mock-phone b:nth-of-type(4){height:40px; width:70%}

/* framer & webflow */
.fw-browser{position:absolute; left:33px; top:40px; width:1226px; height:736px; border-radius:24px; background:rgba(255,255,255,.12); box-shadow:0 24px 56px rgba(0,2,38,.04), inset 0 4px 4px rgba(255,255,255,.25)}
.fw-controls{display:flex; align-items:center; height:56px; padding:0 24px; border-radius:22px 22px 0 0; background:rgba(255,255,255,.03); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 3px 0 rgba(255,255,255,.12)}
.fw-controls i{width:12px; height:12px; border-radius:50%; background:#E2665E; margin-right:8px}
.fw-controls i:nth-child(2){background:#E8B84A}.fw-controls i:nth-child(3){background:#6CBF5C; margin-right:28px}
.fw-controls svg{width:20px; height:20px; margin-right:6px; stroke:var(--ink-56); fill:none; stroke-width:1.5}
.fw-url{margin-left:24px; display:flex; align-items:center; gap:8px; height:36px; padding:0 18px; border-radius:20px; background:var(--ink-08); font:400 14px/24px var(--inter); color:rgba(0,0,0,.72)}
.fw-url b{font-weight:400; color:#000}
/* "You" cursor that replaces the pointer over the Framer & Webflow card (live: ≥1512 only; here on
   every desktop width). The tip of the arrow sits on the pointer. */
@media (hover:hover) and (pointer:fine){ .fw-card{cursor:none} }
.you-cursor{position:fixed; left:0; top:0; z-index:40; pointer-events:none; width:70px; height:44px; opacity:0; transition:opacity .15s}
.you-cursor.on{opacity:1}
.you-cursor svg{position:absolute; left:-1px; top:-1px; width:20px; height:19px; overflow:visible}
.you-cursor span{position:absolute; left:19px; top:11px; padding:6px 12px; border-radius:100px; background:#B59E73; box-shadow:0 1px 0 rgba(255,255,255,.48), 0 -1px 0 rgba(0,0,0,.4); font:500 14px/19.6px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; color:rgba(255,255,255,.96); white-space:nowrap}
/* Halil's photo under the pointer (live: 210×127, centred 70px to the right). It opens from a
   small circle into the rounded frame with a spring. */
@media (hover:hover) and (pointer:fine){ .consult h2, .consult .sub, .latest .folder{cursor:none} }
.photo-cursor,.view-cursor{position:fixed; left:0; top:0; z-index:40; pointer-events:none}
.photo-cursor > span{position:absolute; left:calc(70px - 105px); top:4px; width:210px; height:127px}
.photo-cursor img{position:absolute; left:76.5px; top:94px; width:57px; height:57px; object-fit:cover; border-radius:48px; opacity:0; box-sizing:border-box;
  transition:left .5s, top .5s, width .5s, height .5s, border-radius .5s, opacity .2s; transition-timing-function:linear(0, .21 7%, .6 17%, .87 27%, 1.01 37%, 1.05 45%, 1.04 55%, 1.01 67%, 1)}
.photo-cursor.on img{left:0; top:0; width:210px; height:127px; border-radius:24px; opacity:1; border:4px solid rgba(255,255,255,.24);
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 .75px .75px -.625px rgba(0,0,0,.18), 0 1.93px 1.93px -1.25px rgba(0,0,0,.18), 0 3.86px 3.86px -1.875px rgba(0,0,0,.17), 0 7.32px 7.32px -2.5px rgba(0,0,0,.16), 0 14.56px 14.56px -3.125px rgba(0,0,0,.13), 0 32px 32px -3.75px rgba(0,0,0,.06)}
/* "View work" button centred on the pointer; its letters flip one after another. */
.view-cursor > span{position:absolute; left:0; top:0; translate:-50% -50%; display:flex; height:56px; padding:0 32px; align-items:center; border-radius:1000px; background:var(--btn); box-shadow:var(--btn-shadow);
  font:500 14px/1.7 var(--jakarta); letter-spacing:.02em; text-transform:uppercase; color:var(--w-96); white-space:nowrap; perspective:400px;
  opacity:0; scale:.5; transition:opacity .2s, scale .45s linear(0, .21 7%, .6 17%, .87 27%, 1.01 37%, 1.05 45%, 1.04 55%, 1.01 67%, 1)}
.view-cursor.on > span{opacity:1; scale:1}
.view-cursor i{display:inline-block; font-style:normal}
.view-cursor.on i{animation:letter-flip 3s cubic-bezier(.5,0,.2,1) calc(var(--i) * 45ms + .15s) infinite}
@keyframes letter-flip{0%{transform:rotateX(0)} 25%,100%{transform:rotateX(-360deg)}}
@media (prefers-reduced-motion:reduce){ .view-cursor.on i{animation:none} .photo-cursor img,.view-cursor > span{transition:opacity .2s} }
.cursor{position:absolute; left:120px; top:92px; animation:drift 7s ease-in-out infinite}
.cursor svg{width:20px; height:19px}
.cursor span{display:inline-block; margin:2px 0 0 16px; padding:4px 14px; border-radius:20px; background:var(--btn); color:var(--w-96); font:500 14px/19.6px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em}
@keyframes drift{50%{transform:translate(336px,6px)}}

/* branding */
/* branding: same layers as the live site — two 7-column line grids, a circle with the two
   Ladom shapes and a 61° construction line. On hover the circle group turns 10°. */
.brand-art{position:absolute; inset:0}
.b-grid{position:absolute; left:calc(50% - 140.5px); width:280px; display:flex; scale:.7; opacity:.2}
.b-grid.v{top:-26px; height:322px}
.b-grid.h{top:-20px; height:310px; rotate:90deg}
.b-grid i{flex:none; width:40px; background:rgba(0,0,0,.02); box-shadow:inset 0 0 0 .5px rgba(28,26,9,.88)}
.b-mark{position:absolute; left:calc(50% - 141.5px); top:-5px; width:281px; height:281px; scale:.7; transition:translate .5s cubic-bezier(.34,1.4,.64,1), scale .5s cubic-bezier(.34,1.4,.64,1), rotate .5s cubic-bezier(.34,1.4,.64,1)}
.b-mark > *{position:absolute}
.b-circle{left:0; top:0; width:280px; height:280px; border-radius:100%; background:rgba(28,26,9,.1)}
.b-mark .bl1{left:86px; top:160px; width:114px; height:41px}
.b-mark .bl2{left:80px; top:81px; width:41px; height:110px}
.b-mark::after{content:""; position:absolute; left:120px; top:101px; width:13px; height:141px; rotate:61deg; border:solid rgba(28,26,9,.24); border-width:0 .5px}
.b-mark .f4{fill:rgba(28,26,9,.04)} .b-mark .f10{fill:rgba(28,26,9,.1)}
.b-mark .s1, .b-mark .s2{fill:none; stroke-width:.5; stroke-miterlimit:10}
.b-mark .s1{stroke:rgba(28,26,9,.1)} .b-mark .s2{stroke:rgba(28,26,9,.2)}
@media (hover:hover){ .sol:hover .b-mark{translate:0 3px; scale:.71; rotate:10deg} }

/* social media: logo balls that fall in and can be thrown (physics in main.js).
   --x/--y is the resting pile from the live site, used until the script takes over. */
.social-pit .ball{position:absolute; left:var(--x); top:var(--y); width:96px; height:96px; display:grid; place-items:center; border-radius:96px; background:rgba(255,255,255,.12); box-shadow:0 24px 56px rgba(0,2,38,.04), inset 0 4px 4px rgba(255,255,255,.25); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.social-pit.live .ball{left:0; top:0; will-change:transform}
.social-pit .ball.grab{cursor:grabbing; z-index:2}
.social-pit .ball img{pointer-events:none}

/* development: stacked code windows */
.code-win{position:absolute; width:787px; height:242px; border-radius:24px; background:linear-gradient(rgba(255,255,255,.12) 0%,var(--bg) 19.6%,rgba(255,255,255,.24) 100%); box-shadow:0 24px 56px rgba(0,2,38,.04), inset 0 4px 4px rgba(255,255,255,.25)}
.code-win.w3{left:156px; top:37px}
.code-win.w2{left:130px; top:52px}
.code-win.w1{left:103px; top:69px; padding:24px 0 0 18px}
.code-win ol{margin:0; padding:0; list-style:none; counter-reset:ln}
.code-win li{counter-increment:ln; font:400 14px/22px var(--inter); color:var(--ink-88); white-space:pre}
.code-win li::before{content:counter(ln); display:inline-block; width:24px; font-weight:300; letter-spacing:.1em}
.code-win .k{color:var(--ink-56)}
.code-win .c{color:var(--ink-32)}
.code-win .caret{display:inline-block; width:1.5px; height:17px; margin-left:1px; vertical-align:-3px; background:var(--ink-88); animation:caret-blink 1s steps(1) infinite paused}
.code-win .caret.idle{animation-play-state:running}
@keyframes caret-blink{50%{opacity:0}}

/* social */

/* ==========================================================================
   DARK PANEL — LadomUI + consultancy
   ========================================================================== */
.ladomui{padding:48px 16px}
.dark{background:var(--dark); border-radius:48px; color:var(--w-88); padding:168px 0 169px}
.dark-in{width:min(1126px, 100% - 2*var(--gutter)); margin:0 auto}
.prod,.really{max-width:1114px; margin-left:auto; margin-right:auto}
.prod{display:grid; grid-template-columns:498px 1fr; gap:20px}
.prod h2{margin-top:16px; font:800 48px/57.6px var(--jakarta); letter-spacing:-.02em; color:var(--w-88)}
.prod h2 .keycap{width:112px; height:88px; border-radius:4px 24px; margin:0 0 0 20px; vertical-align:-6px}
.prod h2 .keycap img{width:64px; filter:invert(1); opacity:.88}
.prod h2 .keycap,.really h3 .keycap{box-shadow:0 4px 8px rgba(0,0,0,.08), inset 0 -4px 4px rgba(255,255,255,.8), 0 4px 32px rgba(28,26,9,.12), 0 16px 24px rgba(28,26,9,.08), inset 0 -4px 32px rgba(255,255,255,.4), inset 0 -4px 0 rgba(28,26,9,.33)}
.prod p:not(.eyebrow){font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-88); margin-bottom:40px}
.soon-btns{display:flex; flex-wrap:wrap; gap:21px 19px}
.soon{position:relative; display:inline-flex; align-items:center; gap:24px; height:56px; padding:0 32px; border-radius:1000px; box-shadow:inset 0 0 0 1px var(--w-08); font:600 14px/23.8px var(--inter); color:var(--w-40)}
.soon svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6}
.soon:first-child svg{width:16px; height:16px}
.soon small{position:absolute; top:-8px; right:8px; font:500 10px/20px var(--inter); letter-spacing:-.02em; color:var(--w-64); background:var(--dark); border:1px solid var(--w-24); border-radius:20px; padding:0 7px}

.really{margin-top:112px}
.really h3{display:flex; align-items:center; gap:22px; margin:12px 0; font:600 32px/38.4px var(--jakarta); color:var(--w-88)}
.really h3 .keycap{width:114px; height:56px; padding-bottom:6px; border-radius:4px 24px; color:var(--w-96); font:inherit}
.prod .eyebrow.sand,.really .eyebrow.sand{width:fit-content}   /* live: the gradient spans the words only */
.really h3 .really-w,.really h3 .keycap span{position:relative; background:linear-gradient(90deg,var(--sand),var(--w-64)); -webkit-background-clip:text; background-clip:text; color:transparent}
:lang(tr) .really h3 .keycap{width:auto; padding:0 16px 6px}   /* “Yakında” is longer than “Soon” */
.really > p:not(.eyebrow){font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-64)}
.opts{display:flex; flex-wrap:wrap; gap:20px; margin-top:108px; border:0; padding:0; pointer-events:none; user-select:none}
.opts fieldset{border:0; margin:0; padding:0; min-width:0}
.opts .row{display:flex; gap:8px}
.opts legend{display:block; padding:0; margin-bottom:12px; font:500 14px/21px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; color:var(--w-64)}
.opt{display:inline-flex; align-items:center; gap:16px; height:40px; padding:0 16px 0 8px; border-radius:48px; background:rgb(34,30,23); color:var(--w-64); font:300 16px/19.2px var(--inter); transition:color .2s, background .2s}
.opt input{appearance:none; -webkit-appearance:none; margin:0; width:24px; height:24px; border-radius:50%; background:rgb(26,23,17); cursor:pointer; transition:background .2s}
.opt input:checked{background:radial-gradient(circle closest-side,transparent 7px,rgb(26,23,17) 7.5px),linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.08)) center/14px 14px no-repeat,rgb(26,23,17)}
.opt:hover{color:var(--w-88)}
.opt input:focus-visible{outline:2px solid var(--sand); outline-offset:2px}

.consult{text-align:center; margin-top:142px}
.consult .sub{font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-64); margin:24px 0 34px}
.consult h2{font:800 77px/92.4px var(--jakarta); color:var(--w-88)}
.consult .big-p{font:300 32px/38.4px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-64); max-width:1126px; margin:64px auto 64px}
.pills{display:flex; justify-content:center; gap:16px; flex-wrap:wrap}
.pill{font:400 16px/24px var(--inter); color:var(--w-88); background:var(--w-08); padding:8px 16px; border-radius:40px; transition:background .2s}
.pill:hover{background:var(--w-12)}
.clients{margin-top:88px}
.client-ticker{margin-top:64px}
.client-grid{display:grid; grid-template-columns:repeat(3,240px); gap:10px; justify-content:center}
.client-grid img{display:block; width:240px; height:64px}
.client-grid .dup{display:none}   /* second copy only feeds the ticker */
/* below 1200px the logos become a ticker, like the live site. Order, crop width (--w) and logo
   offset (--x) per item are measured values; the list holds two copies so the loop is seamless
   (padding-right = one gap, so -50% is exactly one set). */
@media (max-width:1199px){
  .client-ticker{padding:24px; overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent 2%,#000 16%,#000 84%,transparent 98%); mask-image:linear-gradient(to right,transparent 2%,#000 16%,#000 84%,transparent 98%)}
  .client-grid{display:flex; align-items:center; gap:24px; padding-right:24px; width:max-content; height:24px; animation:client-ticker 33.1s linear infinite}   /* same speed as live; HUBX box trimmed to its logo (live: 240px, leaves a gap) */
  .client-grid li, .client-grid .dup{display:block; flex:none; order:var(--o); width:var(--w); height:64px; overflow:hidden}
  .client-grid .dup{order:calc(var(--o) + 6)}
  .client-grid img{margin-left:var(--x); max-width:none}
}
@keyframes client-ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .client-grid{animation:none} }

/* ==========================================================================
   CTA + THROW IT
   ========================================================================== */
.cta{position:relative; padding:224px var(--gutter) 97px; text-align:center}
.cta h2{font:800 77px/92.4px var(--jakarta); background-image:linear-gradient(90deg,var(--orange),var(--ink-32)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block}
/* the button and the two Ladom symbols behind its frosted glass (positions from the live site) */
.cta-stage{position:relative; width:min(659px,100%); margin:96px auto 0}
.book{position:relative; z-index:1; display:grid; place-items:center; width:100%; height:220px; padding-bottom:16px; border-radius:4000px; overflow:hidden;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 4px 8px rgba(0,0,0,.08), inset 0 -4px 4px rgba(255,255,255,.8), 0 4px 32px rgba(28,26,9,.12), 0 16px 24px rgba(28,26,9,.08), inset 0 -4px 32px rgba(255,255,255,.4), inset 0 -4px 0 rgba(28,26,9,.33);
  transition:transform .4s var(--ease); animation:book-pulse 6.1s infinite}
.book::before{content:""; position:absolute; inset:0; background:url(../img/book-a-call.png) center/100% 100% no-repeat; transition:transform .8s var(--ease)}
.book span{position:relative; z-index:1; font:800 77px/92.4px var(--jakarta); color:var(--ink-88); transition:color .5s}
.book:hover{transform:scale(1.02)}
/* (timing functions are written out: var() is ignored inside @keyframes)
   "breathing" loop: grows, waits, shrinks, waits — each move on a soft spring */
@keyframes book-pulse{
  0%{scale:1; animation-timing-function:linear(0, .3 12.5%, .7 25%, .92 37.5%, 1 50%, 1.03 62.5%, 1.02 75%, 1.01 87.5%, 1)}
  13%{scale:1.1}
  50%{scale:1.1; animation-timing-function:linear(0, .3 12.5%, .7 25%, .92 37.5%, 1 50%, 1.03 62.5%, 1.02 75%, 1.01 87.5%, 1)}
  63%{scale:1}
  100%{scale:1}
}
.sym{position:absolute; z-index:0; width:156px; height:156px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.sym:active{cursor:grabbing}
.sym img{display:block; width:100%; height:100%; pointer-events:none; animation:sym-spin 10.16s infinite}
.sym.s1{left:648px; top:-37px}
.sym.s2{left:-103px; top:88px}
.sym.s2 img{animation-delay:1.1s}
/* full turn + slight shrink, pause, turn back + grow, pause (spring with a small overshoot) */
@keyframes sym-spin{
  0%{rotate:0deg; scale:1.1; animation-timing-function:linear(0, .21 6.8%, .46 13.6%, .68 20.8%, .84 27.8%, .94 34.8%, 1 41.6%, 1.023 48.4%, 1.028 55.4%, 1.018 69.3%, 1.008 80%, 1.002 90%, 1)}
  43.3%{rotate:-360deg; scale:1}
  50%{rotate:-360deg; scale:1; animation-timing-function:linear(0, .21 6.8%, .46 13.6%, .68 20.8%, .84 27.8%, .94 34.8%, 1 41.6%, 1.023 48.4%, 1.028 55.4%, 1.018 69.3%, 1.008 80%, 1.002 90%, 1)}
  93.3%{rotate:0deg; scale:1.1}
  100%{rotate:0deg; scale:1.1}
}
.throw-hint{position:absolute; left:127px; top:126px; width:133px; height:63px; pointer-events:none; opacity:0; scale:0; transition:opacity .4s, scale .6s var(--spring-fast)}
.cta-stage.in .throw-hint{opacity:1; scale:.6; transition-delay:2.4s}
.throw-hint.gone{opacity:0 !important; scale:0 !important; transition-delay:0s !important}
.throw-arrow{position:absolute; left:0; top:-1px; width:70px; height:53px; fill:var(--ink-24)}
.throw-hint > span{position:absolute; left:49px; top:42px; white-space:pre; font:400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}
@media (prefers-reduced-motion:reduce){ .book,.sym img{animation:none} .btn:hover,.btn:active{scale:none} }
/* below 1200px the live site switches to its phone layout: small button, symbols pinned to the frame edges */
@media (max-width:1199px){
  .cta{padding:56px 40px 97px}
  .cta h2{font-size:38px; line-height:45.6px}
  .cta-stage{width:auto}
  .book{width:279px; height:98px; margin:0 auto; padding-bottom:4px}
  .book span{font-size:38px; line-height:45.6px}
  .cta{overflow-x:clip}                 /* a turning symbol must never widen the page */
  .sym{width:78px; height:78px}         /* live: the symbols shrink to half size */
  .sym.s1{left:auto; right:-23.5px; top:-35.5px}
  .sym.s2{left:-32px; top:57px}
  .throw-hint{display:none}
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{position:relative; padding:112px var(--gutter) 101px; overflow:hidden}
.f-cols{display:grid; grid-template-columns:repeat(3,270px); justify-content:center; gap:20px; text-align:center}
.f-cols h4{font:300 31px/43.4px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56); margin-bottom:24px}
.f-cols ul{display:grid; gap:9.6px}
.f-cols li{font:500 14px/22.4px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink-56)}
.f-cols a{transition:color .2s}
.f-cols a:hover{color:var(--ink)}
.f-cols .dim{color:var(--ink-32)}
.badge{display:inline-block; margin-left:8px; font:500 10px/16px var(--inter); letter-spacing:-.02em; color:var(--ink-56); border:1px solid var(--ink-32); border-radius:6px; padding:0 5px; vertical-align:1px}
.f-bottom{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:104px; font:500 14px/21px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-32)}
.f-bottom i{font:normal 500 12px/16px var(--inter); display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid var(--ink-32); border-radius:5px; letter-spacing:0}
.f-bottom small{font:500 9px/13.5px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em}
.f-mark{width:70px; height:70px; margin:52px auto 0}

.scrollup{position:fixed; right:24px; bottom:14px; z-index:90; font:500 9px/12.6px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; color:var(--ink-56); background:var(--ink-08); padding:4px 9px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .3s}
.scrollup.show{opacity:1; pointer-events:auto}

/* ==========================================================================
   WORKS PAGE
   ========================================================================== */
.page-title{padding:168px var(--gutter) 0; text-align:center}
.page-title h1{display:inline-block; font:800 58px/69.6px var(--jakarta); letter-spacing:-.02em; background-image:linear-gradient(90deg,var(--orange),var(--ink-32)); -webkit-background-clip:text; background-clip:text; color:transparent}
.page-title.rust h1{background-image:linear-gradient(90deg,var(--rust),var(--ink-32))}
.works-list{padding:0 var(--gutter)}
.work{display:grid; grid-template-columns:656px 1fr; gap:32px; align-items:center; padding-top:112px}
.work-info{display:grid; grid-template-columns:306px 330px; gap:20px; align-items:start}
.work:first-child{padding-top:170px}
.works-list{padding-bottom:9px}
.work h2{font:800 48px/57.6px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.work .meta-i{margin-top:24px}
.work time{display:block; margin-top:16px; font:400 12px/20px var(--inter); color:var(--ink-56)}
.work .services{padding-left:24px}
.work .chip.more{display:none}
.work .services-l{margin-top:4px}
.work-info > div:first-child{padding-bottom:24px}
.work .folder{width:672px; max-width:100%; justify-self:end; padding-top:30px}
.work .folder-body{padding:40px 8px 8px}
.work .folder-body::before{top:68px}
.work .figure{border-radius:16px; padding:16px}
.work .figure img{border-radius:8px}

/* ==========================================================================
   CONTACT PAGE (dark)
   ========================================================================== */
body.page-dark{background:#000; color:var(--w-88)}
.contact{min-height:100vh; display:grid; grid-template-columns:1fr 1fr; gap:48px; width:min(1168px, 100% - 2*var(--gutter)); margin:0 auto; padding:338px 0 97px}
.contact .eyebrow{color:var(--w-64)}
.contact h1{display:inline-block; margin-top:28px; font:800 58px/75px var(--jakarta); letter-spacing:-.02em}
/* e-mail heading: reversed in the DOM, flipped back here; "@" drawn by CSS (see main.js) */
.mail-vis{unicode-bidi:bidi-override; direction:rtl; -webkit-user-select:none; user-select:none}
.mail-vis .at{font-style:normal}
.mail-vis .at::before{content:"\40"}
.contact h1 .mail-vis,.contact h1 .mail-cta,.mail-ns{display:inline-block; background-image:linear-gradient(90deg,var(--orange),var(--rust)); -webkit-background-clip:text; background-clip:text; color:transparent}
.copy-mail{position:relative; display:inline-block; font:inherit; letter-spacing:inherit; cursor:copy; transition:background .2s}
.copy-mail:hover,.copy-mail:focus-visible,.copy-mail.copied{background:rgba(255,255,255,.12)}
.copy-mail:focus-visible{outline:none}
/* "Get in touch" by default; hovering (or copying) rolls it up and reveals the address. */
.mail-swap{display:inline-grid; overflow:hidden; vertical-align:top}
.mail-swap > span{grid-area:1/1; text-align:left; transition:translate .45s cubic-bezier(.65,0,.35,1), opacity .45s}
.mail-swap .mail-vis{translate:0 100%; opacity:0}
.copy-mail:hover .mail-cta,.copy-mail:focus-visible .mail-cta,.copy-mail.copied .mail-cta{translate:0 -100%; opacity:0}
.copy-mail:hover .mail-vis,.copy-mail:focus-visible .mail-vis,.copy-mail.copied .mail-vis{translate:0 0; opacity:1}
@media (prefers-reduced-motion:reduce){ .mail-swap > span{transition:opacity .2s; translate:none !important} }
.copy-tip{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,4px); padding:6px 12px; border-radius:6px; background:#222; color:#fff; font:400 16px/1.4 var(--inter); letter-spacing:0; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.copy-mail:hover .copy-tip,.copy-mail:focus-visible .copy-tip,.copy-mail.copied .copy-tip{opacity:1; transform:translate(-50%,0)}
.cal-btn{display:inline-flex; align-items:center; margin:48px 0 0 -13px; height:104px; padding:0 59px; border-radius:1000px; background:linear-gradient(180deg,#2b2822,#141210); box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 6px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.6); transition:transform .3s var(--ease)}
.cal-btn b{font:600 32px/46px var(--jakarta); background-image:linear-gradient(90deg,#fff,var(--rust)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cal-btn em{max-width:0; overflow:hidden; white-space:nowrap; font:normal 300 22.4px/31px var(--inter); font-variation-settings:"opsz" 32; background-image:linear-gradient(90deg,var(--w-64),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; transition:max-width .5s var(--ease)}
.cal-btn:hover{transform:translateY(-2px)}
.cal-btn:hover em{max-width:160px}
.c-block{margin-top:56px}
.c-block.first{margin-top:51px}
.c-block p:not(.eyebrow){margin-top:32px; font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-88)}
.c-social{display:flex; gap:10px; margin-top:32px}
.c-social a{width:64px; height:64px; display:grid; place-items:center; color:var(--w-88); transition:opacity .2s}
.c-social a:hover{opacity:.6}
.c-social svg{width:24px; height:24px; fill:currentColor}
.form .eyebrow{color:var(--w-88); padding-left:24px}
.form form{display:grid; gap:32px; margin-top:32px}
.field label{display:block; margin:0 0 10px 24px; font:500 12px/14px var(--inter); color:#888}
.field input,.field textarea,.field select{width:100%; font:400 16px/24px var(--inter); color:#fff; background:#141414; border:1px solid transparent; border-radius:24px; padding:19px 24px; outline:none; transition:border-color .2s, background .2s; appearance:none; -webkit-appearance:none}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.28)}
.field textarea{min-height:74px; resize:vertical}
.field select{font-size:14px; color:#999; padding-right:48px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 24px center}
.field select:valid{color:#fff}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(58,110,210,.8); background-color:#181818}
.submit{justify-self:end; display:inline-flex; align-items:center; gap:14px; height:56px; padding:0 12px 0 28px; margin-top:12px; border-radius:1000px; background:#1d1b16; color:var(--w-96); font:500 14px/24px var(--jakarta); letter-spacing:.02em; text-transform:uppercase; box-shadow:inset 0 1px 1px rgba(255,255,255,.3), 0 8px 20px rgba(0,0,0,.5); transition:transform .25s var(--ease)}
.submit i{width:32px; height:32px; border-radius:50%; background:var(--w-24); display:grid; place-items:center}
.submit svg{width:14px; stroke:#fff; fill:none; stroke-width:1.8}
.submit:hover{transform:translateY(-2px)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{min-height:20px; font:400 14px/20px var(--inter); color:var(--w-64); text-align:right}
.contact-foot{padding:0 0 140px}
.contact-foot .f-bottom{color:var(--w-24); margin-top:0}
.contact-foot .f-bottom i{border-color:var(--w-24)}

/* ==========================================================================
   PRIVACY PAGE
   ========================================================================== */
.p-hero{position:relative; height:716px; background:linear-gradient(transparent 116px, var(--glass-88) 116px)}
.p-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:207px; background:linear-gradient(rgba(255,255,255,0),var(--bg))}
.p-hero-in{position:relative; z-index:1; width:min(1098px, 100% - 2*var(--gutter)); margin:0 auto; padding-top:237px; display:grid; grid-template-columns:1fr 416px; gap:20px; align-items:start}
.p-hero .txt{padding-top:85px}
.p-hero h1{margin-top:16px; font:800 68px/81.4px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.p-hero .updated{margin-top:32px; font:300 32px/38.4px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-32)}
.p-hero img{width:416px; height:359px}
.policy{padding:112px 16px 121px}
.policy-card{padding:112px 160px}
.policy-in{font:400 16px/32px var(--jakarta); letter-spacing:-.01em; color:var(--ink-88)}
.policy-in p + p,.policy-in ul + p{margin-top:20px}
.policy-in h3{font:400 16px/32px var(--jakarta); margin-top:25px}
.policy-in h3 + p{margin-top:20px}
.policy-in > p:first-child + h3{margin-top:20px}
.policy-in h4{font:500 24px/28.8px var(--inter); margin:24px 0}
.policy-in ul{padding:0 0 20px 24px; margin:0; list-style:disc}
.policy-in h4 + ul{padding-bottom:0}
.policy-in a{text-decoration:underline; text-underline-offset:3px}

/* ==========================================================================
   Reveal on scroll (progressive: content is visible without JS)
   ========================================================================== */
.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}
.js [data-words] .w{display:inline-block}
.js [data-words] :is(.w,.wt){opacity:0; translate:0 10px; transition:opacity .4s ease-out, translate .4s cubic-bezier(.22,.9,.3,1); transition-delay:calc(var(--i) * 75ms)}
.js [data-words].in :is(.w,.wt){opacity:1; translate:none}
.js [data-appear]{opacity:0; transition:opacity .4s ease-out, translate .4s cubic-bezier(.3,1.3,.6,1), scale .4s cubic-bezier(.3,1.3,.6,1)}
.js [data-appear="rise"]{translate:0 150px}
.js [data-appear="pop"]{translate:0 50px; scale:.5}
.js [data-appear].in{opacity:1; translate:none; scale:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .page-title{padding-top:177px}
  .page-title h1{font-size:38px; line-height:45.6px}
  /* phone + tablet header: 64px bar, burger left, logo right, drop-down panel */
  .nav-inner,.nav.scrolled .nav-inner{width:100%; height:56px; margin-top:4px; padding:0 16px; border-radius:0; transition:margin .45s var(--ease)}
  .nav-inner::before,.nav.scrolled .nav-inner::before{inset:-4px 0; opacity:1; border-radius:0; background:none}
  .nav.open .nav-inner{margin-top:24px}
  .nav-burger{display:block; order:-1}
  .nav-logo{margin-left:auto}   /* the <nav> wrapper is 0-wide but still a flex item */
  .nav-links{position:fixed; left:0; right:0; top:0; z-index:-1; flex-direction:column; align-items:flex-start; gap:13.2px; padding:100px 32px 25px; background:var(--menu-bg); opacity:0; visibility:hidden; transform:translateY(-16px); transition:opacity .3s, transform .45s var(--ease), visibility .3s}
  .nav.open .nav-links{opacity:1; visibility:visible; transform:none}
  .nav.on-dark .nav-links{background:#0a0901}
  .nav-links .nav-mobile{display:list-item}
  .nav-links > li > a,.nav.scrolled .nav-links > li > a,.nav-links > li:last-child > a{position:relative; height:38.4px; padding:0; font:500 24px/38.4px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:-.01em}
  .nav-links > li > a::after,.nav.scrolled .nav-links > li > a::after{left:0; right:0}
  .nav-links > li.nav-lang{margin:12px 0 0}
  .nav-links > li.nav-lang > a,.nav.scrolled .nav-links > li.nav-lang > a{height:32px; padding:0 14px; font:500 13px/30px var(--inter); letter-spacing:.06em}

  .h-xxl,.consult h2{font-size:60px; line-height:1.2}
  .s-row{grid-template-columns:1fr 1fr}
  .work{grid-template-columns:1fr; gap:32px; padding-top:96px}
  .work .folder{justify-self:stretch; width:100%}
}
@media (max-width:1023px){
  :root{--gutter:24px}
  .work-head,.prod{grid-template-columns:1fr}
  .s-grid{grid-template-columns:1fr}
  .sol{padding:23px 0 24px}
  .s-row{padding-top:16px; grid-template-columns:1fr}
  .card.tall, .card.mid, .card.sm{height:280px}
  .b-mark{left:calc(50% - 146.5px); top:6px; scale:.8}
  .b-grid.v{top:-20px} .b-grid.h{top:-13px}
  .b-grid{left:calc(50% - 139.5px)}
  @media (hover:hover){ .sol:hover .b-mark{scale:.81} }
  /* live: same scene at half size, anchored to the right edge */
  .for{left:auto; right:14px; top:23px; scale:.7; transform-origin:100% 0}
  .iso{left:auto; right:-178px; top:20px; width:723px; transform:scale(.5) rotate(82deg) skewX(20deg) skewY(-38deg)}
  .js .sol[data-reveal]:not(.in) .iso{transform:translateY(50px) scale(.25) rotate(82deg) skewX(20deg) skewY(-38deg)}
  .dark{padding:120px 0 140px; border-radius:32px}
  .ladomui{padding:32px 8px}
  /* live: only "Follow us" below 1200px; spacing measured at 390px */
  .footer{padding-top:38px; padding-bottom:103px}
  .f-cols{grid-template-columns:1fr}
  .f-cols > div:not(:last-child){display:none}
  .f-cols h4{margin-bottom:33px}
  .f-cols ul{gap:8.6px}
  .f-bottom{margin-top:40px}
  .f-mark{width:68px; height:68px; margin-top:55px}
  .contact{grid-template-columns:1fr; padding-top:180px}
  .p-hero-in{grid-template-columns:1fr; padding-top:140px}
  .p-hero .txt{padding-top:0}
  .p-hero img{width:260px; height:auto; order:-1}
  .p-hero{height:auto; padding-bottom:120px}
  .policy-card{padding:80px 24px}
}
@media (max-width:767px){
  .h-xl,.hero h1{font-size:44px; line-height:1.15}
  .h-lg,.prod h2,.work h2{font-size:36px; line-height:1.2}
  .h-xxl,.consult h2{font-size:44px; line-height:1.2}
  .lead,.consult .sub{font-size:18px; line-height:26px}
  .consult .big-p{font-size:22px; line-height:30px; margin:40px auto}
  .hero{height:max(580px,calc(100svh - 200px))}
  .hero .lead{font-size:18px}
  .hero .btn-lg{width:100%; max-width:400px}
  .latest{padding:32px 0 80px}
  .latest .folder{width:calc(100% - 32px)}
  .folder-body,.work .folder-body{padding:22px 4px 4px}
  .folder-body::before,.work .folder-body::before{top:36px}
  .figure,.work .figure{padding:8px; border-radius:8px}
  .figure img,.work .figure img{border-radius:6px}
  .solutions{padding:64px 0}
  .sec-title{margin-bottom:48px}
  .dots{margin-bottom:24px}
  .really{margin-top:120px}
  .opts{margin-top:60px; gap:32px}
  .opts .row{flex-wrap:wrap}
  .consult{margin-top:140px}
  .page-title{padding-top:88px; text-align:left}   /* phones: left-aligned, half the top space */
  /* LadomUI panel on phones (live at 390px) */
  .dark{padding-top:84px}
  .dark-in{width:calc(100% - 74px)}
  .prod h2{font-size:32px; line-height:38.4px}
  .prod h2 .keycap{width:72px; height:52px; margin:0 0 0 12px; vertical-align:-1px}
  .prod h2 .keycap img{width:38px}
  .prod p:not(.eyebrow){font-size:18px; line-height:25.2px}
  .soon-btns{flex-direction:column; align-items:flex-start; gap:20px}
  .really{margin-top:58px}
  .really h3{align-items:flex-start; margin:18px 0 12px; font-size:24px; line-height:28.8px}
  .really h3 .keycap{width:93px; height:47px; margin-top:-6px}
  :lang(tr) .really h3 .keycap{width:auto; padding:0 12px 6px}
  .really > p:not(.eyebrow){font-size:18px; line-height:25.2px}
  .work{padding-top:72px; gap:20px}   /* tighter inside a work; the 72px between works stays */
  .work-info{grid-template-columns:1fr; gap:20px}
  .work-info > div:first-child{padding-bottom:0}
  .work .folder{padding-top:4px}
  .work .services{padding-left:0; display:flex; align-items:center; justify-content:space-between; gap:12px}
  /* phones: "View work" left, services right — first service + "+N" for the others */
  .work .services-l{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .work .services .btn{order:1; flex:none}
  .work .services .chips{order:2; margin:0; flex-wrap:nowrap; min-width:0; justify-content:flex-end}
  .work .chip{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .work .chip:not(:first-child):not(.more){display:none}
  .work .chip.more{display:inline-block; flex:none}
  .work:first-child{padding-top:48px}
  .contact{padding-top:88px}   /* "Contact us" at the page-title height */
  .contact h1{font-size:min(44px, 11vw); line-height:1.3}
  .cal-btn{height:76px; padding:0 32px}
  .cal-btn b{font-size:26px}
  .p-hero h1{font-size:44px; line-height:1.2}
  .p-hero .updated{font-size:22px; line-height:30px}
  .policy{padding-top:48px}
  .policy-card{padding:48px 8px}
  .f-bottom{flex-wrap:wrap}
  .f-bottom small{flex-basis:100%; text-align:center}        /* "Founded in 2024" on its own line */
  .scrollup{right:auto; left:50%; translate:-50% 0}           /* centred on phones */
  .mock-ui{left:calc(50% - 140px); top:44px; scale:.66}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1; transform:none}
  .js [data-words] :is(.w,.wt), .js [data-appear]{opacity:1; translate:none; scale:none}
  .js .btn .btn-label{transform:none}
}

/* ==========================================================================
   SOLUTION: DESIGN SYSTEM CONSULTING
   ========================================================================== */
.dsc-hero{height:672px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:245px var(--gutter) 0}
.dsc-hero h1{margin-top:57px; font:800 77px/92.4px var(--jakarta); color:var(--ink-88)}
.dsc-hero .dsc-lead{margin-top:63px; max-width:900px; font:300 32px/38.4px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}

.dsc-panel .dark{padding:168px 0 166px}
.dsc-panel .dark-in{width:min(1138px, 100% - 2*var(--gutter))}
.pkg-head{text-align:center}
.pkg-head h2{display:inline-block; margin:16px 0; font:600 40px/48px var(--jakarta); background-image:linear-gradient(90deg,var(--sand),var(--w-64)); -webkit-background-clip:text; background-clip:text; color:transparent}
.pkg-head p{font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--w-64)}
.pkg-grid{display:grid; grid-template-columns:repeat(2,minmax(0,541px)); gap:56px; justify-content:center; margin-top:97px}
.pkg{position:relative; display:flex; flex-direction:column; min-height:532px; padding:51px 64px 56px; border-radius:24px; background:var(--bg); color:var(--ink-88); transition:transform .4s var(--ease)}
.pkg:hover{transform:translateY(-4px)}
.pkg-num{position:absolute; left:-24px; top:-24px; width:105px; height:102px; border-radius:4px 24px; font:600 58px/69.6px var(--inter); color:var(--w-88); box-shadow:0 4px 8px rgba(0,0,0,.08), inset 0 -4px 4px rgba(255,255,255,.8), 0 4px 32px rgba(28,26,9,.12), 0 16px 24px rgba(28,26,9,.08), inset 0 -4px 32px rgba(255,255,255,.4), inset 0 -4px 0 rgba(28,26,9,.33); transition:transform .5s var(--ease)}
.pkg:hover .pkg-num,.pkg:focus-visible .pkg-num{transform:rotateX(25.4deg) rotateY(12.2deg) rotateZ(-19.2deg)}
.pkg h3{margin-top:auto}
.pkg-desc{margin-top:16px; font:300 24px/33.6px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-88)}
.opt-note{display:inline-block; margin-top:16px; font:300 16px/22.4px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}
.pkg-actions{display:flex; align-items:center; gap:8px; margin-top:40px}
.pkg-yes,.pkg-more{display:inline-flex; align-items:center; height:56px; padding:0 32px; border-radius:1000px; font:600 14px/23.8px var(--inter)}
.pkg-yes{background:rgb(34,30,23); color:var(--w-88)}
.pkg-more{color:var(--ink-88); padding:0 24px}
.pkg:hover .pkg-yes{background:var(--btn)}
.dsc-panel .clients{margin-top:138px; text-align:center}
.client-grid.two{grid-template-columns:repeat(2,240px)}

.syllabus{display:grid; grid-template-columns:repeat(2,minmax(0,513px)); gap:112px; justify-content:center; padding:242px var(--gutter) 0}
.syl-side{position:sticky; top:116px; align-self:start}
.syl-side h2{margin-top:16px; font:800 48px/57.6px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.syl-side p:not(.eyebrow){margin-top:73px; font:300 24px/33.6px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}
.syl-side .syl-time{margin-top:24px}
.syl-bar{position:sticky; top:82px; z-index:2; height:53px; margin:0; background:var(--bg)}
.syl-group + .syl-group{margin-top:72px}
.phase{padding-top:38px}
.phase + .phase{margin-top:16px}
.phase h4{display:inline-block; font:600 32px/38.4px var(--jakarta); background-image:linear-gradient(90deg,var(--rust),var(--ink-56)); -webkit-background-clip:text; background-clip:text; color:transparent}
.phase-sub{margin-top:10px; font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}
.phase ul{margin-top:24px}
.session + .session{margin-top:24px}
.session h5{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font:500 24px/28.8px var(--inter); color:var(--ink-88)}
.session .dur{font:500 14px/21px var(--inter); font-variation-settings:"opsz" 32; letter-spacing:.1em; text-transform:uppercase; background-image:linear-gradient(90deg,var(--ink-32),var(--ink-56)); -webkit-background-clip:text; background-clip:text; color:transparent}
.session p{margin-top:8px; font:italic 400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}

.faq{padding:264px var(--gutter) 0}
.faq-head{text-align:center}
.faq-head h2{margin-top:16px; font:800 56px/67.2px var(--jakarta); color:var(--ink-88)}
.faq-head p{max-width:852px; margin:16px auto 0; font:300 24px/33.6px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56)}
.faq-list{max-width:1280px; margin:110px auto 0; border-radius:20px; background:var(--ink-08); overflow:hidden}
.faq-item summary{position:relative; list-style:none; cursor:pointer; padding:20px 96px 21px 60px; font:400 16px/24px var(--inter); color:var(--ink-56); transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; position:absolute; right:40px; top:50%; width:12px; height:12px; margin-top:-6px; background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat; transition:transform .3s var(--ease)}
.faq-item[open] summary{color:var(--ink-88)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--ink-88)}
.faq-item p{padding:0 96px 21px 60px; font:400 16px/24px var(--inter); color:var(--ink-88)}

.cta-dsc{position:relative; padding:224px var(--gutter) 101px}
.cta-dsc h2{font-size:48px; line-height:57.6px}
.cta-dsc .cta-stage{margin-top:85px}

@media (max-width:1023px){
  .pkg-grid{grid-template-columns:1fr; gap:24px; margin-top:64px}
  .pkg{min-height:0; padding:120px 32px 40px}
  .pkg-num{left:-12px; top:-12px; width:84px; height:82px; font-size:46px}
  .syllabus{grid-template-columns:1fr; gap:64px; padding-top:160px}
  .syl-side{position:static}
  .syl-side p:not(.eyebrow){margin-top:32px}
  .syl-bar{top:80px}
  .faq{padding-top:160px}
}
@media (max-width:767px){
  .dsc-hero{height:auto; padding:180px var(--gutter) 96px}
  .dsc-hero h1{margin-top:32px; font-size:44px; line-height:1.2}
  .dsc-hero .dsc-lead{margin-top:32px; font-size:22px; line-height:30px}
  .dsc-panel .dark{padding:96px 0 112px}
  .pkg-head h2{font-size:30px; line-height:38px}
  .pkg-desc{font-size:20px; line-height:28px}
  .pkg-actions{flex-wrap:wrap}
  /* consulting page ticker: no padding, 32px gap, 50px/s (period 1054px) */
  .dsc-panel .client-ticker{padding:0}
  .client-grid.two{gap:32px; padding-right:32px; height:64px; animation-duration:21.08s}
  .syl-side h2{font-size:36px; line-height:1.2}
  .phase h4{font-size:26px; line-height:1.25}
  .session h5{font-size:20px; line-height:26px}
  .faq-head h2{font-size:36px; line-height:1.2}
  .faq-head p{font-size:18px; line-height:26px}
  .faq-list{margin-top:48px}
  .faq-item summary{padding:20px 56px 20px 24px}
  .faq-item summary::after{right:24px}
  .faq-item p{padding:0 24px 20px}
  .cta-dsc{padding-top:140px}
  .cta-dsc h2{font-size:30px; line-height:38px}
}

/* ==========================================================================
   404
   ========================================================================== */
.nf{background:#000}
.nf-stage{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden}
/* live: 2040x1360 at (-300,-230) in a 1440x900 viewport */
.nf-spline{position:absolute; left:-20.83%; top:-25.56%; width:141.67%; height:151.11%; border:0; display:block}
.nf-content{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 var(--gutter) 20px; text-align:center; pointer-events:none}
.nf-content > *{pointer-events:auto}
.nf h1{font:400 clamp(40px,6vw,86px)/1.3 "Golos Text", var(--inter); letter-spacing:-.06em; white-space:nowrap; background-image:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 50%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; pointer-events:none}
.nf-home{margin-top:98px; padding:0 32px; font-size:14px}
.nf-social{display:flex; gap:20px; margin-top:20px}
.nf-social a{width:32px; height:32px; display:grid; place-items:center; color:var(--w-88); transition:opacity .2s}
.nf-social a:hover{opacity:.6}
.nf-social svg{width:18px; height:18px; fill:currentColor}
.nf-copy{margin-top:20px; font:400 12px/18px var(--inter); color:var(--w-40)}
@media (max-width:767px){ .nf h1{white-space:normal} .nf-home{margin-top:48px} }

/* ==========================================================================
   DARK THEME — component overrides (tokens are swapped at the top)
   ========================================================================== */
@media (prefers-color-scheme: dark){
  .nav-logo .on-light{opacity:0}
  .nav-logo .on-dark{opacity:1}
  .nav-ui .keycap img{filter:invert(1)}
  .iso-card{box-shadow:4px 4px 0 rgba(255,255,255,.2), 6px 6px .75px rgba(255,255,255,.04), 3px 3px 4px rgba(0,0,0,.3), 24px 24px 12px rgba(0,0,0,.2)}
  .b-grid i{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.88)}
  .b-circle{background:rgba(255,255,255,.1)}
  .b-mark .f4{fill:rgba(255,255,255,.04)} .b-mark .f10{fill:rgba(255,255,255,.1)}
  .b-mark .s1{stroke:rgba(255,255,255,.1)} .b-mark .s2{stroke:rgba(255,255,255,.2)}
  .b-mark::after{border-color:rgba(255,255,255,.24)}
  .social-pit .ball img{filter:invert(1)}
  .code-win{background:linear-gradient(rgba(0,0,0,.12) 0%,var(--bg) 19.6%,rgba(255,255,255,.24) 100%)}
  .f-mark{filter:invert(1)}   /* the SVG's stroke colour is baked in */
}

/* ==========================================================================
   WORK DETAIL (generated by the CMS — cms/render/work.js)
   Measured on ladom.co/works/* at 1440px.
   ========================================================================== */
.wd-hero{padding:227px 96px 0}
.wd-back{margin:-12px 0}   /* 48px icon; keeps the text line where the old 16px arrow was */
.wd-head{display:grid; grid-template-columns:190px 442px 1fr; align-items:start; margin:41px 0 0 59px}
.wd-info{margin-left:67px}
.wd-info time{display:block}
.wd-info h1{margin-top:16px; font:800 58px/69.6px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.wd-info .meta-i{margin-top:24px}
.wd-head .services{margin:4px 0 0 112px}
.wd-head .services .chips{margin-top:24px}

/* the folder illustration (same for every work; only the two images change).
   Hover opens it: the front flap tips back on its bottom edge, the images lift and fan out. */
/* Work folder: the live Framer component's layers and both states. Closed on load; main.js adds
   .open a second later (front flap tips back, the two images rise), a click closes it again. */
.wd-folder{--sp:.7s cubic-bezier(.22,1,.36,1); position:relative; margin:-4px 0 0 5px; width:190px; height:152px; perspective:2500px; transform-style:preserve-3d}
.wd-folder.open{cursor:pointer}
.wd-folder .back{position:absolute; inset:0; border-radius:18px; background:linear-gradient(176deg,#a3aab0 0%,#2c3133 21.66%); -webkit-mask:url(../img/svg/folder-back.svg) center/cover no-repeat; mask:url(../img/svg/folder-back.svg) center/cover no-repeat}
.wd-folder.open .back{background:linear-gradient(180deg,#a8b1b6 0%,#313638 87%)}
.wd-folder .light{position:absolute; left:-29px; top:31px; width:248px; height:105px; z-index:1; clip-path:polygon(0 0,100% 0,85.08% 100%,14.52% 100%); background:linear-gradient(180deg,rgba(254,254,254,.01) -70%,rgba(255,255,255,0) 0%,#6b7073 108%); opacity:0; transition:opacity .3s}
.wd-folder.open .light{opacity:.5}
.wd-folder .pic{position:absolute; z-index:1; width:90px; height:116px; overflow:hidden; border-radius:10px; transition:left var(--sp), top var(--sp), height var(--sp), rotate var(--sp), box-shadow var(--sp)}
.wd-folder .pic img{width:100%; height:100%; object-fit:cover; display:block}
.wd-folder .pic.p1{left:17px; top:24px; rotate:-1deg; box-shadow:4px 0 8px rgba(0,0,0,.25)}
.wd-folder .pic.p2{left:82px; top:23px; rotate:4deg}
.wd-folder.open .pic.p1{left:13px; top:-6px; height:90px; rotate:-8deg; box-shadow:none}
.wd-folder.open .pic.p2{left:88px; top:-6px; height:90px; rotate:8deg}
.wd-folder .front{position:absolute; left:0; right:0; bottom:0; height:120px; z-index:2; overflow:hidden; border-radius:12px; background:linear-gradient(129deg,#b2babf 0%,#272c2e 100%); transform-origin:50% 100%; transform:perspective(2500px) rotateX(0); transition:transform var(--sp)}
.wd-folder.open .front{transform:perspective(2500px) rotateX(-65deg)}
.wd-folder .logo{position:absolute; left:48.5px; top:13.5px; width:93px; height:93px; overflow:hidden; background:#222426; -webkit-mask:url(../img/svg/ladom-mark.svg) center/cover no-repeat; mask:url(../img/svg/ladom-mark.svg) center/cover no-repeat}
.wd-folder .shine{position:absolute; left:34px; top:27px; width:61px; height:61px; border-radius:112px; opacity:.8; rotate:-10deg; background:linear-gradient(148deg,#fcfcfc 0%,#272b2d 80%); transition:left var(--sp), top var(--sp), width var(--sp), height var(--sp), rotate var(--sp)}
.wd-folder.open .shine{left:17px; top:16px; width:63px; height:63px; rotate:-11deg; background:linear-gradient(157deg,#fcfcfc 26.78%,#272b2d 72%)}
@media (prefers-reduced-motion:reduce){ .wd-folder *{transition:none !important} }

/* body blocks */
.wd-body{display:flow-root; padding:128px 0 0}
.wd-body > *{width:min(1105px, 100% - 2*var(--gutter)); margin-left:auto; margin-right:auto}
.wd-body > .b-image{position:relative; width:min(1261px, 100% - 2*var(--gutter)); padding:24px; border-radius:32px; background:var(--frame); box-shadow:0 -4px 16px rgba(0,0,0,.04)}
.wd-body > .b-image::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); pointer-events:none}
.wd-body > .b-video{width:100%}                                                    /* full-bleed */
/* vertical rhythm — measured on ladom.co/works/sahibinden-design-system */
.wd-body > * + *{margin-top:20px}                                                   /* text → text */
.wd-body > * + .b-h3, .wd-body > * + .b-h4{margin-top:144px}                        /* text → heading */
.wd-body > * + .b-h5{margin-top:40px}
.wd-body > * + .b-image{margin-top:64px}
.wd-body > * + .b-video{margin-top:88px}                   /* text → media */
.wd-body > .b-image + *{margin-top:88px}                                            /* media → text */
.wd-body > .b-image:first-child{margin-top:-4px}                                    /* live: first frame starts 4px into the body padding */
.wd-body > .b-image + .b-image{margin-top:64px}
.wd-body > .b-image + .b-video{margin-top:108px}
.wd-body > .b-image + .b-h3, .wd-body > .b-image + .b-h4, .wd-body > .b-image + .b-h5{margin-top:144px}
.wd-body > .b-video + *{margin-top:137px}
.wd-body > .b-h3 + *, .wd-body > .b-h4 + *, .wd-body > .b-h5 + *{margin-top:20px}   /* heading → its text */
/* the text that follows a video (its "case" notes) runs a little wider */
.wd-body > .b-video ~ :not(.b-image):not(.b-video){width:min(1185px, 100% - 2*var(--gutter))}
.wd-body .b-h3{font:600 32px/38.4px var(--jakarta); color:var(--ink-88)}
.wd-body .b-h4{font:500 24px/28.8px var(--inter); color:var(--ink-88)}
.wd-body .b-h5{font:700 18px/25.2px var(--inter); letter-spacing:-.04em; color:var(--ink-88)}
.wd-body .b-p, .wd-body .b-list{font:italic 400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}
.wd-body .b-p a, .ad-body a{text-decoration:underline; text-underline-offset:3px}
.wd-body .b-list{padding-left:22px; list-style:disc}
.wd-body .b-list li + li{margin-top:6px}
.wd-body .b-quote{padding-left:22px; font:italic 400 16px/28.8px var(--inter); color:#999}
.wd-body .b-image img{display:block; width:100%; height:auto; border-radius:16px; outline:.5px solid rgba(0,0,0,.08); outline-offset:-.5px}
.wd-body .b-video video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--ink-08)}
.wd-body figcaption{margin-top:16px; font:italic 400 16px/24px var(--inter); letter-spacing:-.01em; color:var(--ink-56)}

/* previous / next */
.wd-body > :last-child{margin-bottom:0}
.wd-nav{display:grid; grid-template-columns:1fr 1fr; margin:132px 0 0}
.wd-nav > div{display:flex; justify-content:center; padding:0 24px}
/* text link with a round 48px arrow icon (prev/next, back to articles) */
.arrow-link{display:inline-flex; align-items:center; gap:8px; min-height:48px; font:500 14px/23.8px var(--jakarta); letter-spacing:.02em; text-transform:uppercase; color:var(--ink-56); transition:color .2s}
.arrow-link b{font-weight:500; color:var(--ink-32); transition:color .2s}
.arrow-link .ico{flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:1000px; transition:background-color .25s var(--ease), box-shadow .25s var(--ease)}
.arrow-link .ico::before{content:""; width:24px; height:24px; background:var(--ink-24); transition:background-color .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.arrow-link.next .ico::before{transform:scaleX(-1)}
/* hover: the arrow sits in a dark button circle */
.arrow-link:hover .ico{background:var(--btn); box-shadow:var(--btn-shadow)}
/* the text moves 8px away from the icon on hover (live: gap 8 → 16) */
.arrow-link .t{display:inline-flex; align-items:baseline; gap:8px; transition:translate .3s var(--ease), gap .3s var(--ease)}
.arrow-link:hover .t{gap:16px}
.arrow-link:hover .t{translate:8px 0}
.arrow-link.next:hover .t{translate:-8px 0}
/* "Back to …": flips over vertically, waits 3s, flips back, waits 3s (live loop, mirror) */
.arrow-link .t.flip{animation:back-flip 8s 1s infinite}
@keyframes back-flip{
  0%{transform:rotateX(0); animation-timing-function:linear(0, .21 7%, .6 17%, .87 27%, 1.01 37%, 1.05 45%, 1.04 55%, 1.01 67%, 1)}
  12.5%,50%{transform:rotateX(-360deg)}
  50%{animation-timing-function:linear(0, .21 7%, .6 17%, .87 27%, 1.01 37%, 1.05 45%, 1.04 55%, 1.01 67%, 1)}
  62.5%,100%{transform:rotateX(0)}
}
@media (prefers-reduced-motion:reduce){ .arrow-link .t{transition:none} .arrow-link .t.flip{animation:none} }
.arrow-link:hover .ico::before{background:var(--w-96)}

@media (max-width:1199px){
  .wd-hero{padding:140px var(--gutter) 0}
  .wd-head{grid-template-columns:190px 1fr; row-gap:40px; margin:40px 0 0}
  .wd-info{margin-left:40px}
  .wd-head .services{grid-column:1 / -1; margin:0}
}
@media (max-width:767px){
  .wd-head{grid-template-columns:1fr}
  .wd-info{margin-left:0}
  .wd-info h1{font-size:44px; line-height:1.2}
  .wd-body{padding-top:96px}
  .wd-body > * + .b-h3, .wd-body > * + .b-h4, .wd-body > * + .b-image, .wd-body > * + .b-video, .wd-body > .b-image + *, .wd-body > .b-video + *, .wd-body > .b-image + .b-h3, .wd-body > .b-image + .b-h4, .wd-body > .b-image + .b-h5{margin-top:64px}
  .wd-body .b-h3{font-size:26px; line-height:1.25}
  .wd-body .b-image img{border-radius:8px}
  /* live (390px): smaller frame, 40px between text, images and videos */
  .wd-body > .b-image{width:calc(100% - 40px); padding:8px; border-radius:12px}
  .wd-body > * + .b-image, .wd-body > .b-image + .b-image, .wd-body > .b-image + .b-video{margin-top:40px}
  .wd-nav{margin-top:96px; grid-template-columns:1fr; gap:8px}
}

/* ==========================================================================
   ARTICLES — list (/article) and detail (/article/<slug>)
   ========================================================================== */
/* white card with a hairline border, used for article images */
.al-figure,.ar-cover{position:relative; background:var(--glass-88); border-radius:16px; padding:16px; box-shadow:0 -4px 16px rgba(0,0,0,.04)}
.al-figure::after,.ar-cover::after{content:""; position:absolute; inset:0; border:.5px solid var(--line-20); border-radius:inherit; pointer-events:none}
.al-img,.ar-cover img{position:relative; z-index:1; display:block; border-radius:8px; overflow:hidden; box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.al-img img,.ar-cover img{width:100%; height:100%; object-fit:cover}

/* list */
.al-list{display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:58.4px; padding-bottom:20px}
@media (max-width:1199px){ .al-list{margin-top:61px} }
.al-card{display:flex; flex-direction:column; align-items:center; gap:48px; width:100%; max-width:1024px; padding:112px 40px 0; overflow:hidden; text-align:center}
.al-head{display:flex; flex-direction:column; align-items:center; gap:24px; width:100%}
.al-head h2{font:800 48px/57.6px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.al-figure{width:60%}
.al-img{aspect-ratio:1.77718}
.al-index{position:absolute; z-index:0; top:50%; left:-257px; white-space:pre; transform:translateY(-50%) rotate(-50deg) rotateX(-40deg) rotateY(-40deg);
  font:italic 500 128.96px/1.2 var(--jakarta); letter-spacing:-.02em;
  background-image:linear-gradient(0deg,var(--ink-08),var(--bg)); -webkit-background-clip:text; background-clip:text; color:transparent; pointer-events:none}
.al-body{display:flex; flex-direction:column; align-items:center; gap:32px; width:100%}
.al-excerpt p{font:400 16px/32px var(--jakarta); letter-spacing:-.01em; color:var(--ink-88)}
.al-excerpt p + p{margin-top:20px}
/* phones: article titles, dates and summaries left-aligned (list and detail), in line with the page title */
@media (max-width:767px){
  .al-list .al-card{text-align:left; align-items:stretch; padding-left:24px; padding-right:24px}
  .al-head,.al-body{align-items:flex-start}
}

/* detail */
.ar{padding-top:204px}
.ar-back{margin-left:24px; color:var(--ink-56)}
.ar-title{max-width:700px; margin:50px auto 0; padding:0 24px; text-align:center}
.ar-title h1{font:800 58px/69.6px var(--jakarta); letter-spacing:-.02em; background-image:linear-gradient(90deg,var(--rust),var(--ink-32)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ar-title .eyebrow{display:block; margin-top:32px}
.ar-cover{width:min(1000px, 100% - 32px); margin:50px auto 0}
.ar-cover img{aspect-ratio:3/2; height:auto}
.ar-main{max-width:700px; margin:0 auto; padding:82px 24px 0}
.ar-summary,.ar-body{max-width:600px; margin:0 auto}
.ar-summary p{font:300 20px/28px var(--inter); font-variation-settings:"opsz" 32; color:var(--ink-56); text-align:center}
@media (max-width:767px){ .ar-title,.ar-summary p{text-align:left} }
.ar-summary strong{font-weight:400}
.ar-summary p + p{margin-top:20px}
.ar-body{margin-top:40px}
.ar-body > *{margin-top:24px}
.ar-body > :first-child{margin-top:0}
.ar-body > .b-h3,.ar-body > .b-h4,.ar-body > .b-h5{margin-top:40px}
.ar-body > .b-list{margin-top:32px}
.ar-body > .b-quote{margin-top:20px}
.ar-body .b-p,.ar-body .b-list{font:400 18px/28.8px var(--jakarta); letter-spacing:-.02em; color:var(--ink-88)}
.ar-body .b-p a,.ar-body .b-list a{text-decoration:underline; text-underline-offset:3px}
.ar-body strong{font-weight:700}
.ar-body .b-h3{font:600 32px/38.4px var(--jakarta); color:var(--ink-88)}
.ar-body .b-h4{font:500 24px/28.8px var(--inter); color:var(--ink-88)}
.ar-body .b-h5{font:700 18px/25.2px var(--inter); letter-spacing:-.04em; color:var(--ink-88)}
.ar-body .b-quote{margin-left:0; margin-right:0; padding-left:22px; font:italic 400 16px/28.8px var(--inter); color:#999}
.ar-body .b-list{list-style:none; padding:0}
.ar-body .b-list li{position:relative; padding-left:26.352px}
.ar-body ul.b-list li::before{content:"•"; position:absolute; left:0; top:0}
.ar-body ol.b-list{counter-reset:li}
.ar-body ol.b-list li{counter-increment:li}
.ar-body ol.b-list li::before{content:counter(li) "."; position:absolute; left:0; top:0}
.ar-body .b-image,.ar-body .b-video{margin-left:0; margin-right:0}
.ar-body .b-image img{width:100%; height:auto; border-radius:8px}
.ar-nav{margin-top:34px}

@media (max-width:1199px){

  .al-card{padding:88px 40px 0}
  .al-head{gap:16px}
  .al-head h2{font-size:32px; line-height:38.4px}
  .al-figure{width:100%}
  .al-index{display:none}
  .al-body{gap:24px}
  .ar{padding-top:64px}
  .ar-back{margin-left:16px}
  .ar-title h1{font-size:38px; line-height:45.6px}
  .ar-cover{padding:8px; margin-top:42px}
  .ar-main{padding-top:42px}
  .ar-summary p{font-size:18px; line-height:25.2px}
  .ar-body .b-h3{font-size:24px; line-height:28.8px}
  .ar-nav{grid-template-columns:1fr; gap:8px}
}