/* MadArtSoft — implemented from Figma "Madartsoft" / Web - start (Wersja 2). Single light theme by design. */
:root{
  --ink:#050505;
  --ink-2:#2d2d2d;
  --ink-3:#5a5852;
  --ink-4:#666666;
  --ink-5:#888888;
  --muted:#aaaaaa;
  --title:#1a1815;
  --nav-ink:#14141a;
  --bg:#ffffff;
  --pill:#f8f8f8;
  --chip:#f9f9f9;
  --chip-ink:#696969;
  --btn-soft:#f2f2f2;
  --line:#e6e6e6;
  --night:#050505;
  --night-card:#08090a;
  --accent:#de7928;
  --violet:#3a0a99;
  --green:#21a275;
  --sand:#e4d899;
  --yellow:#ffdb4c;
  --font-head:"Google Sans Flex","Google Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --font-logo:"Poppins","Segoe UI",system-ui,sans-serif;
  --wrap:1166px;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font-head);-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:500;line-height:1.12;text-wrap:balance;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.02em}
.eyebrow{font:400 14px/1.4 var(--font-mono);text-transform:uppercase;color:var(--ink-2)}
.center{text-align:center}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:96px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font:600 21.5px/1 var(--font-logo)}
.brand img,.brand .brand-mark{width:47px;height:47px;flex:none}
.brand-mark{display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff}
.nav{display:flex;gap:36px;padding:24px 32px;border-radius:12px;background:var(--pill);font:500 14px/1 var(--font-head);color:var(--nav-ink)}
.nav a{text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.head-contact{justify-self:end;font:500 14px/1 var(--font-head);color:var(--nav-ink);text-underline-offset:4px}
.menu-btn{display:none}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;border-radius:56px;background:var(--ink);color:#fff;font:500 20px/1 var(--font-head);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#262626}
.btn-sm{font-size:16px;padding:14px 22px}
.btn-ghost{background:var(--btn-soft);color:var(--ink)}
.btn-ghost:hover{background:#e7e7e7}
.chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chip{display:inline-flex;align-items:center;padding:12px 16px;border-radius:40px;background:var(--chip);color:var(--chip-ink);font:600 14px/1 var(--font-head);white-space:nowrap}
.chip.soft{color:#a2a2a2}
.chips.tilt .chip:nth-child(6n+2){transform:rotate(11.5deg)}
.chips.tilt .chip:nth-child(6n+3){transform:rotate(-6deg)}
.chips.tilt .chip:nth-child(6n+4){transform:rotate(5.6deg)}
.chips.tilt .chip:nth-child(6n+6){transform:rotate(8.7deg)}
.arrow-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;border:0;cursor:pointer;transition:transform .2s}
.arrow-btn svg{width:16px;height:16px}
.arrow-btn:hover{transform:translateX(3px)}
.round-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--btn-soft);border:0;cursor:pointer;color:var(--ink)}
.round-btn svg{width:16px;height:16px}
.round-btn.prev svg{transform:scaleX(-1)}
.round-btn:disabled{opacity:.4;cursor:default}

/* ---------- hero ---------- */
.hero{padding-block:72px 120px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-mark{width:159px;height:159px;display:grid;place-items:center}
.hero-mark img{width:138px;height:auto}
.mark-fallback{width:120px;height:130px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(circle at 50% 60%,#fff6d8 0 8%,#f3a247 22%,#6b3a1c 55%,#1b1410 80%)}
.hero .eyebrow{margin-top:80px;font-size:16px}
.hero h1{margin-top:20px;font-size:clamp(34px,4.6vw,52px);max-width:none}
.hero-lede{margin-top:20px;max-width:560px;color:var(--ink-4);font-size:16px;line-height:1.6}
.hero-lede strong{color:var(--ink);font-weight:600}
.hero .btn{margin-top:36px}

/* ---------- what we do (carousel) ---------- */
.what{padding-block:24px 120px;overflow:hidden}
.what-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.what-head h2{font-size:clamp(34px,4.6vw,56px)}
.what-head p{max-width:372px;color:var(--ink-4);font-size:14px}
.cards{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--gutter);margin-right:calc(-1 * var(--gutter))}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 min(466px,86vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:46px}
.card-media{position:relative;height:266px;border-radius:24px;overflow:hidden;background:var(--night)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media.violet{background:var(--violet)}
.card-media.green{background:var(--green)}
.card-media.night{background:var(--night)}
.card-media.warm{background:linear-gradient(135deg,#2b1206,#de7928 70%,#f3c27d)}
.card-media .arrow-btn{right:16px;bottom:16px}
.card-media .glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.9);font:500 15px/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.card-text{padding-left:36px;padding-right:clamp(24px,12vw,160px);display:flex;flex-direction:column;gap:12px}
.card-text h3{font-size:16px;font-weight:600;color:var(--title);letter-spacing:0}
.card-text p{font-size:12px;line-height:20px;color:var(--ink-3)}
.carousel-ctrl{display:flex;align-items:center;gap:27px;margin-top:92px}
.dots{display:flex;gap:6px}
.dots span{width:8px;height:8px;border-radius:99px;background:#d9d9d9;transition:width .2s,background .2s}
.dots span.on{width:24px;background:var(--ink)}
.carousel-ctrl .pair{display:flex;gap:6px}

/* ---------- how we work ---------- */
.how{padding-block:80px 140px}
.how-head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.how-head h2{font-size:clamp(40px,5.8vw,72px);margin-top:12px}
.how-head p{max-width:372px;color:var(--ink-4);font-size:14px}
.steps{list-style:none;margin:176px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.step{position:relative;display:flex;flex-direction:column;gap:52px}
.step-icon{width:40px;height:40px;display:grid;place-items:center}
.step-icon img{width:40px;height:40px}
.step-icon .fb{width:34px;height:34px;border-radius:10px;background:var(--ink)}
.step:not(:last-child)::after{content:"";position:absolute;left:68px;right:0;top:19px;height:0;border-top:2px dashed #d0d0d0}
.step h3{font-size:16px;font-weight:600;color:var(--title);letter-spacing:0}
.step p{margin-top:12px;font-size:12px;color:var(--ink-3);max-width:172px}

/* ---------- why us (bento) ---------- */
.why{padding-block:40px 120px}
.bento{display:grid;grid-template-columns:699fr 455fr;grid-auto-rows:387px;gap:12px}
.bento .row2{display:contents}
.tile{position:relative;border-radius:24px;overflow:hidden;background:var(--night-card);color:#fff}
.tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img.art{position:absolute;left:7%;top:50%;transform:translateY(-50%);width:275px;max-width:42%;height:auto}
.tile .arrow-btn{right:24px;top:24px}
.tile .txt{position:absolute;display:flex;flex-direction:column;gap:12px;left:52%;bottom:72px;max-width:44%}
.tile.photo .txt,.tile.warm .txt{left:67px;max-width:70%;bottom:60px}
.tile h3{font-size:16px;font-weight:600;letter-spacing:0}
.tile p{font-size:12px;opacity:.9}
.tile.photo{background:#1b1b1b}
.tile.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(rgba(8,9,10,0),rgba(8,9,10,.9));backdrop-filter:blur(6px);-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
.tile.photo .txt{z-index:1}
.tile.warm{background:linear-gradient(160deg,#1a0e08 0%,#b4531b 45%,#f0a860 70%,#e4d899 100%)}
.tile .flag{position:absolute;left:67px;bottom:150px;width:56px;height:56px}
.bento .t1{grid-column:1}
.bento .t2{grid-column:2}
.bento .t3{grid-column:1;grid-row:2}
.bento .t4{grid-column:2;grid-row:2}
.bento.flip{grid-template-columns:466fr 688fr}
.line-art{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:235px;max-width:38%;aspect-ratio:235/271;opacity:.55}

/* ---------- statement ---------- */
.statement{padding-block:120px;display:flex;flex-direction:column;align-items:center;gap:80px;text-align:center}
.stars{display:flex;gap:18px;font-size:44px;line-height:1;color:var(--ink)}
.stars img{height:56px;width:auto}
.statement .copy{display:flex;flex-direction:column;gap:36px;max-width:629px}
.statement .mono{font-size:16px;color:var(--ink-2)}
.statement h2{font-size:clamp(32px,4.6vw,52px)}

/* ---------- projects ---------- */
.projects{padding-block:80px 120px}
.projects-label{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:#0d0d0d}
.projects-rule{height:1px;background:var(--line);margin-top:56px}
.projects-grid{display:grid;grid-template-columns:minmax(180px,1fr) 700px;gap:48px;margin-top:120px}
.proj-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:72px;position:sticky;top:140px;align-self:start}
.proj-index button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:12px}
.proj-index .cat{font:400 12px/1.3 var(--font-mono);text-transform:uppercase;color:var(--muted)}
.proj-index .nm{font:600 16px/1.2 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.proj-index button[aria-current="true"] .nm,.proj-index button:hover .nm{text-decoration:underline;text-underline-offset:4px}
.proj-list{display:flex;flex-direction:column}
.proj{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:120px;border-top:1px solid var(--line)}
.proj:first-child{border-top:0;padding-top:0}
.proj-main{display:flex;gap:80px;align-items:flex-start}
.proj-icon{flex:none;width:120px;height:120px;display:grid;place-items:center}
.proj-icon img{width:120px;height:120px}
.proj-icon.green{background:#1fc27b}.proj-icon.violet{background:#7c3aed}.proj-icon.yellow{background:var(--yellow)}.proj-icon.orange{background:var(--accent)}
.proj-icon span{font:600 40px/1 var(--font-head);color:rgba(5,5,5,.85)}
.proj-body{display:flex;flex-direction:column;gap:28px;max-width:340px}
.proj-body .num{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--ink-2)}
.proj-body h3{font-size:28px;font-weight:600;margin-top:20px;letter-spacing:-.01em}
.proj-body .desc{font:300 12px/18px var(--font-head);color:var(--ink-5)}
.proj .arrow-btn{position:static;flex:none;box-shadow:0 0 0 1px var(--line)}

/* project drawer (Figma "Web - subpage") */
.drawer{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-overlay{position:absolute;inset:0;background:rgba(5,5,5,.55)}
.drawer-panel{position:relative;width:min(949px,100%);height:100%;overflow-y:auto;background:#fff;padding:clamp(24px,6vw,96px) clamp(20px,6vw,104px);padding-top:calc(env(safe-area-inset-top,0px) + clamp(24px,6vw,96px));display:flex;flex-direction:column;gap:40px;animation:slide .35s ease}
@keyframes slide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.drawer-close{position:absolute;right:24px;top:calc(env(safe-area-inset-top,0px) + 24px)}
.drawer-panel .num{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--ink-2)}
.drawer-panel h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.drawer-panel .lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.drawer-panel h4{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.drawer-panel .body{font-size:15px;line-height:1.65;color:var(--ink-3);max-width:62ch}
.drawer-panel ul{margin:0;padding-left:18px;color:var(--ink-3);font-size:15px;line-height:1.7}

/* ---------- technologies ---------- */
.tech{padding-block:60px 140px}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.tech-grid h3{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:0;margin-bottom:38px}

/* ---------- who trusts us ---------- */
.trust{padding-block:40px 140px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.logo-tile{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:190px;padding:28px;border-radius:24px;background:var(--chip);text-decoration:none;color:var(--ink);transition:background .2s}
a.logo-tile:hover{background:#f0f0f0}
.logo-tile .wm{font:600 30px/1 var(--font-head);letter-spacing:-.02em}
.logo-tile .wm.lex b{color:var(--accent);font-weight:600}
.logo-tile .wm.enn{font-weight:700;text-transform:lowercase;letter-spacing:-.04em}
.logo-tile .wm.marc span{font-weight:400;color:var(--ink-4)}
.logo-tile .sub{font:400 12px/1.4 var(--font-mono);text-transform:uppercase;color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:#fff;overflow:hidden;padding-top:143px}
.foot-mark{display:grid;place-items:center}
.foot-mark img{width:122px;height:auto}
.foot-cta{margin-top:120px;text-align:center;font:500 14px/1 var(--font-mono);text-transform:uppercase;opacity:.4}
.marquee{margin-top:40px;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:60px;padding-right:60px;animation:marq 38s linear infinite;font:600 clamp(34px,4vw,60px)/1.25 var(--font-head);letter-spacing:-.01em}
.marquee-track svg{width:.95em;height:.95em;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
.foot-main{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap;margin-top:200px}
.foot-main .lead{font:600 clamp(26px,3vw,40px)/1.2 var(--font-head);max-width:552px}
.hello{display:flex;flex-direction:column;gap:56px;min-width:264px}
.hello .mono{font-size:14px;opacity:.4}
.hello .big{font:600 clamp(44px,4.5vw,60px)/1 var(--font-head);margin-top:21px;color:#fff;text-decoration:none;display:inline-block}
.hello .bars{display:flex;gap:19px;margin-top:14px}
.hello .bars i{display:block;height:5px;background:var(--accent)}
.hello .bars i:first-child{width:62px}.hello .bars i:last-child{width:182px}
.hello .contact-lines{font:600 12px/1.5 var(--font-head);opacity:.6;display:grid;gap:8px}
.hello .contact-lines a{text-decoration:none}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:120px;padding-bottom:64px}
.foot-bottom .brand{color:#fff;font-size:15.5px;gap:10px}
.foot-bottom .brand .brand-mark{width:27px;height:27px;background:#fff;color:var(--ink)}
.foot-bottom .brand img{width:27px;height:27px}
.foot-bottom .copy{font:400 12px/1.4 var(--font-mono);text-transform:uppercase;opacity:.4}
.foot-links{display:flex;gap:27px;font:600 12px/1 var(--font-head)}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-strip{height:243px;background:radial-gradient(ellipse at 50% 120%,rgba(222,121,40,.9),rgba(222,121,40,.25) 45%,transparent 70%),var(--night)}
.foot-strip img{width:100%;height:100%;object-fit:cover}

/* ---------- inner pages ---------- */
.page-hero{padding-block:72px 96px}
.page-hero h1{font-size:clamp(38px,5.6vw,72px);margin-top:16px;max-width:15ch}
.page-hero .lede{margin-top:28px;max-width:560px;color:var(--ink-4);font-size:16px}
.svc-row{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;padding-block:72px;border-top:1px solid var(--line)}
.svc-row .num{font:400 12px/1 var(--font-mono);color:var(--muted)}
.svc-row h2{font-size:clamp(28px,3vw,40px);margin-top:16px}
.svc-row .lead{color:var(--ink-3);font-size:15px;line-height:1.65}
.svc-row .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px}
.svc-row h4{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.svc-row ul{margin:0;padding-left:18px;color:var(--ink-3);font-size:14px;line-height:1.75}
.svc-row .proof{margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:400 12px/1.5 var(--font-mono);color:var(--ink-2);text-transform:uppercase}
.svc-row .proof::before{content:"";width:24px;height:5px;background:var(--accent);flex:none}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fact{background:var(--chip);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px;min-height:150px;justify-content:space-between}
.fact .k{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--muted)}
.fact .v{font:600 18px/1.3 var(--font-head)}
.story{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;padding-block:96px}
.story .prose{display:grid;gap:20px;font-size:17px;line-height:1.7;color:var(--ink-3)}
.story .prose strong{color:var(--ink);font-weight:600}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-block:40px;border-top:1px solid var(--line)}
.timeline .yr{font:400 14px/1.4 var(--font-mono);color:var(--ink-2)}
.timeline h3{font-size:24px;font-weight:600}
.timeline p{margin-top:10px;color:var(--ink-3);font-size:15px;line-height:1.65;max-width:60ch}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:860px){.principles[style]{grid-template-columns:1fr!important}}
.principle{border-radius:24px;background:var(--night-card);color:#fff;padding:36px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.principle h3{font-size:20px;font-weight:600}
.principle p{font-size:14px;opacity:.75;line-height:1.6}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;padding-bottom:140px}
form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--ink-5)}
input,textarea,select{font:500 16px/1.4 var(--font-head);color:var(--ink);background:var(--chip);border:1px solid transparent;border-radius:16px;padding:16px 18px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none}
textarea{min-height:170px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{font-size:14px;padding:16px 18px;border-radius:16px;background:#fff4ea;color:var(--ink)}
.form-note.is-error{background:#fde8e4}
.btn[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px}
.captcha-preview{display:flex;align-items:center;min-height:65px;padding:0 18px;border:1px dashed #cfcfcf;border-radius:16px;font:400 12px/1.4 var(--font-mono);text-transform:uppercase;color:var(--ink-5)}
.contact-card{background:var(--night);color:#fff;border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:36px}
.contact-card .mono{font-size:12px;opacity:.5}
.contact-card .big{font:600 clamp(36px,3.6vw,48px)/1 var(--font-head);margin-top:14px}
.email-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font:500 17px/1.4 var(--font-mono)}
.copy-btn{font:400 11px/1 var(--font-mono);text-transform:uppercase;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 12px;cursor:pointer}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;font-size:14px}
.kv dt{font:400 11px/1.8 var(--font-mono);text-transform:uppercase;opacity:.5}
.kv dd{margin:0}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav{gap:24px;padding:18px 24px}
  .projects-grid{grid-template-columns:1fr}
  .proj-index{display:none}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:64px;margin-top:96px}
  .step:nth-child(3)::after{display:none}
  .tech-grid,.trust-grid,.facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .site-head .wrap{grid-template-columns:1fr auto;min-height:64px;row-gap:10px;padding-block:10px 12px}
  .nav{grid-column:1/-1;grid-row:2;gap:22px;padding:14px 18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .head-contact{grid-column:2;grid-row:1}
  .bento,.bento.flip{grid-template-columns:1fr;grid-auto-rows:340px}
  .bento .t1,.bento .t2,.bento .t3,.bento .t4{grid-column:1;grid-row:auto}
  .svc-row,.story,.contact-grid{grid-template-columns:1fr}
  .proj-main{gap:28px}
  .hero .eyebrow{margin-top:48px}
}
@media (max-width: 600px){
  .nav{gap:14px;padding:12px 14px;font-size:13px;justify-content:space-between}
  .steps{grid-template-columns:1fr 1fr}
  .step::after{display:none}
  .tech-grid,.trust-grid,.facts,.principles,.row2,.svc-row .cols{grid-template-columns:1fr}
  .proj{flex-direction:column;align-items:flex-start;padding-block:64px}
  .proj-main{flex-direction:column}
  .timeline li{grid-template-columns:1fr}
  .tile .txt{left:24px;max-width:80%;bottom:32px}
  .tile img.art,.line-art{left:50%;top:38%;transform:translate(-50%,-50%);max-width:48%}
  .card-text{padding-left:12px}
  .foot-main{margin-top:120px}
  .hero .eyebrow{font-size:12px}
}
section[id]{scroll-margin-top:120px}