/* =========================================================
   Safdar Hamza — portfolio
   Colours live in the variables below; change them here.
   ========================================================= */
/* Original brand colours: black, white, grey and orange. */
:root{
   --bg: #080808;
   --ink: #FFFFFF;
   --ink-soft: #8C8C8C;
   --line: rgba(255, 255, 255, .14);
   --accent: #FF2E00;
   --on-accent: #FFFFFF;
   --footer-bg: #FF2E00;
   --footer-ink: #FFFFFF;
   --gutter: clamp(16px, 5vw, 80px);
   --pad: clamp(12px, 1.2vw, 20px);
   --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="light"]{
   --bg: #F2F0EC;
   --ink: #080808;
   --ink-soft: #6B6B6B;
   --line: rgba(8, 8, 8, .16);
}

*,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   transition: background-color .5s ease, color .5s ease;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--accent); color: var(--on-accent); }

.label, .heading__lead{
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
}

/* ---------- layout frame (side gutters with rules) ---------- */
.wrap{
   margin: 0 var(--gutter);
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
}

/* ---------- header ---------- */
.topbar{
   position: fixed; inset: 0 0 auto 0;
   z-index: 50;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   height: 64px;
   background: var(--bg);
   border-bottom: 1px solid var(--line);
   transition: background-color .5s ease;
}
.topbar > *{ display: flex; align-items: center; }
.topbar__logo{
   padding: 0 var(--pad);
   font-size: 30px; font-weight: 700; letter-spacing: -.05em;
}
.topbar__logo span, .heading__title span{ color: var(--accent); }
.footer__word span{ color: inherit; }
.topbar__clocks{
   overflow: hidden;
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
   margin: 0 8%;
}
.ticker{ width: 100%; overflow: hidden; }
.ticker__track{
   display: flex; gap: 32px; width: max-content;
   font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
   animation: scroll-x 40s linear infinite;
}
.ticker__track span{ white-space: nowrap; }
.ticker__track em{ font-style: normal; opacity: .55; margin-left: 6px; }
.topbar__theme{
   gap: 10px; padding: 0 var(--pad);
   font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.topbar__theme i{ width: 10px; height: 10px; border: 1px solid currentColor; }
:root[data-theme="light"] .topbar__theme i{ background: currentColor; }
.topbar__menu{
   width: 64px; flex-direction: column; justify-content: center; gap: 7px;
   border-left: 1px solid var(--line);
}
.topbar__menu span{ width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.topbar__menu[aria-expanded="true"] span:first-child{ transform: translateY(4.25px) rotate(45deg); }
.topbar__menu[aria-expanded="true"] span:last-child{ transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- overlay menu ---------- */
.menu{
   position: fixed; inset: 64px 0 0 0; z-index: 40;
   display: flex; flex-direction: column; justify-content: space-between;
   padding: 40px var(--gutter);
   background: var(--footer-bg); color: var(--footer-ink);
   clip-path: inset(0 0 100% 0);
   transition: clip-path .6s var(--ease);
}
.menu.is-open{ clip-path: inset(0 0 0 0); }
.menu ul li{ border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 25%, transparent); }
.menu ul a{
   display: flex; align-items: baseline; gap: 20px;
   padding: 14px 0;
   font-size: clamp(44px, 8vw, 110px); font-weight: 700; letter-spacing: -.05em; line-height: 1;
   transition: padding-left .35s var(--ease);
}
.menu ul a:hover{ padding-left: 24px; }
.menu small{ font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.menu__mail{ font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- hero (original design) ---------- */
@font-face{ font-family: 'NeutralFace'; src: url('../Fonts/NeutralFace.otf'); font-display: swap; }
@font-face{ font-family: 'IBM-Plex-Mono-400'; src: url('../Fonts/IBMPlexMono-Regular.ttf'); font-display: swap; }

.home{
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100vh;
   height: 100svh;
   min-height: 540px;
   padding: calc(64px + 4vh) 0 4vh;
}
.home__slashes, .home__info li, .home__talk{
   font-family: 'IBM-Plex-Mono-400', monospace;
   font-size: 10px;
   font-weight: 400;
   letter-spacing: 0;
   text-transform: uppercase;
}
.home__slashes{ padding-left: 40px; position: relative; z-index: 2; }
.home__photo{
   position: absolute;
   left: 0; right: 0; top: 64px; bottom: 0;
   height: min(66vh, 600px);
   width: auto;
   aspect-ratio: 3 / 4;
   margin: auto;
   object-fit: cover;
   object-position: center 88%; /* crops the empty wall above the head */
   z-index: 1;
   animation: home-zoom 1.2s var(--ease) both;
}
@keyframes home-zoom{ from{ opacity: 0; transform: scale(1.15); } }
.home__marquee{
   display: inline-block;
   white-space: nowrap;
   font-family: 'NeutralFace', var(--font);
   align-self: flex-start;
   font-size: clamp(110px, 30vh, 280px);
   font-weight: 400;
   letter-spacing: 0;
   line-height: 1;
   text-transform: uppercase;
   animation: scroll-x 20s linear infinite;
}
.home__bottom{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   row-gap: 30px;
   padding: 0 40px;
   position: relative;
   z-index: 2;
}
.home__info{ display: flex; align-items: center; column-gap: 44px; text-align: center; }
.home__talk{
   padding: 10px 22px;
   border: 1px solid var(--ink);
   border-radius: 89px;
   transition: all .3s ease-in-out;
}
.home__talk:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- section headings ---------- */
.block{ padding-top: clamp(80px, 12vw, 180px); }
.heading{
   padding: 0 var(--pad) 6px;
   border-bottom: 1px solid var(--line);
}
.heading__lead{ margin-bottom: 4px; }
.heading__title{
   font-size: clamp(56px, 7.5vw, 130px);
   font-weight: 700; letter-spacing: -.06em; line-height: .95;
}

/* ---------- split (text + image) ---------- */
.split{
   display: grid;
   grid-template-columns: 1fr 1.5fr;
}
.split__text{
   display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
   padding: 48px var(--pad);
}
.body-lg{ font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; color: var(--ink); max-width: 520px; }
.split__img{
   border-left: 1px solid var(--line);
   overflow: hidden; background: #e9e9e9;
   aspect-ratio: 4 / 3;
}
.split__img img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.05); transition: transform 1.2s var(--ease); }
.split__img--wide img{ filter: none; object-position: center top; }
.split__img:hover img{ transform: scale(1.04); }

.btn{
   display: inline-block;
   padding: 10px 18px;
   border: 1px solid var(--ink);
   font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
   transition: background-color .3s ease, color .3s ease;
}
.btn:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-group{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- about intro ---------- */
.intro{
   display: grid;
   grid-template-columns: 1.5fr 1fr;
}
.intro__statement{
   padding: 48px var(--pad) 56px;
   display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.intro__label{ color: var(--ink-soft); }
.intro__big{
   font-size: clamp(34px, 4.2vw, 76px);
   font-weight: 500;
   letter-spacing: -.045em;
   line-height: 1.02;
   max-width: 20ch;
   text-wrap: balance;
}
.intro__big em{ font-style: normal; color: var(--accent); }
.intro__side{
   border-left: 1px solid var(--line);
   padding: 48px var(--pad) 56px;
   display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.intro__bio{ font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 460px; }
.intro__skills{ width: 100%; border-top: 1px solid var(--line); }
.intro__skills > div{
   display: grid; grid-template-columns: 110px 1fr; gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
}
.intro__skills dt{ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.intro__skills dd{ font-size: 14px; line-height: 1.5; }

/* ---------- stats ---------- */
.stats{
   display: grid; grid-template-columns: repeat(3, 1fr);
   border-top: 1px solid var(--line);
}
.stat{
   display: flex; flex-direction: column; gap: 10px;
   padding: 36px var(--pad);
}
.stat + .stat{ border-left: 1px solid var(--line); }
.stat strong{ font-size: clamp(36px, 4vw, 68px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.stat span{ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- rows (experience / live sites) ---------- */
.rows{ border-top: 1px solid var(--line); }
.rows__label{ padding: 20px var(--pad) 0; }
.row{
   position: relative;
   display: grid;
   grid-template-columns: 180px 1fr 1fr 40px;
   gap: 24px; align-items: start;
   padding: 30px var(--pad);
   border-bottom: 1px solid var(--line);
   transition: background-color .3s ease, color .3s ease;
}
.rows:not(.rows--links) .row{ grid-template-columns: 180px 1fr 1fr; }
.rows--links{ border-top: 0; }
.rows--links .row:hover{ background: var(--accent); color: var(--on-accent); }
.row__num{ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding-top: 8px; color: var(--ink-soft); }
.rows--links .row:hover .row__num{ color: inherit; }
.row__title{ font-size: clamp(22px, 2vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.row__title small{ display: block; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.row__desc{ font-size: 15px; line-height: 1.6; max-width: 460px; }
.row__arrow{ font-size: 24px; justify-self: end; transition: transform .3s var(--ease); }
.row:hover .row__arrow{ transform: translate(3px, -3px); }

/* ---------- works slider ---------- */
.slider{
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
}
.slider__img{
   aspect-ratio: 1890 / 868;
   overflow: hidden;
   background: #111;
   border-right: 1px solid var(--line);
}
.slider__img img{ width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .35s ease, transform .6s var(--ease); }
.slider__img img.is-switching{ opacity: 0; transform: scale(1.02); }
.slider__panel{ display: flex; flex-direction: column; justify-content: space-between; }
.slider__top{
   display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
   padding: 28px var(--pad) 24px;
}
.slider__count{ font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.slider__title{ font-size: clamp(26px, 2.4vw, 42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.tags{ display: flex; flex-wrap: wrap; gap: 6px; }
.tags li{
   padding: 5px 9px; border: 1px solid currentColor;
   font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.slider__top .tags{ color: var(--ink-soft); }
.slider__desc{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 36ch; }
.slider__link{
   margin-top: 4px;
   padding: 10px 16px;
   border: 1px solid var(--ink);
   font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
   transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.slider__link:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); text-decoration: none; }
.slider__link[hidden]{ display: none; }
.slider__nav{ display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.slider__nav button{ padding: 24px; font-size: 22px; transition: background-color .3s ease, color .3s ease; }
.slider__nav button + button{ border-left: 1px solid var(--line); }
.slider__nav button:hover{ background: var(--accent); color: var(--on-accent); }
.slider__thumbs{
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   border-top: 1px solid var(--line);
}
.slider__thumbs button{
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   opacity: .4;
   transition: opacity .3s ease;
}
.slider__thumbs button + button{ border-left: 1px solid var(--line); }
.slider__thumbs button::after{
   content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
   background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.slider__thumbs button.is-active, .slider__thumbs button:hover{ opacity: 1; }
.slider__thumbs button.is-active::after{ transform: scaleX(1); }
.slider__thumbs img{ width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- marquee ---------- */
.marquee{
   overflow: hidden;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   padding: 16px 0;
}
.marquee__track{
   display: flex; gap: 28px; width: max-content;
   font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
   animation: scroll-x 30s linear infinite;
}
.marquee--reverse .marquee__track{ animation-direction: reverse; }
.marquee__track span{ white-space: nowrap; }
@keyframes scroll-x{ to{ transform: translateX(-50%); } }

/* ---------- view-all strip ---------- */
.marquee--link{ display: block; border-top: 0; transition: background-color .3s ease, color .3s ease; }
.marquee--link:hover{ background: var(--accent); color: var(--on-accent); }
.marquee--link:hover .marquee__track{ animation-duration: 12s; }

/* ---------- works page ---------- */
.page-works{ padding-top: 64px; }
.works-grid{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--line);
   border-bottom: 1px solid var(--line);
}
.work-card{ background: var(--bg); display: flex; flex-direction: column; }
.work-card__img{ aspect-ratio: 1890 / 868; overflow: hidden; background: #111; }
.work-card__img img{ width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.work-card:hover .work-card__img img{ transform: scale(1.04); }
.work-card--cta{
   justify-content: space-between; gap: 32px;
   padding: 28px var(--pad) 30px;
   background: var(--accent); color: var(--on-accent);
}
.work-card--cta .work-card__num{ color: inherit; opacity: .8; }
.work-card--cta p{ font-size: clamp(26px, 2.6vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; max-width: 14ch; }
.work-card--cta .btn{ align-self: flex-start; border-color: currentColor; }
.work-card--cta .btn:hover{ background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.work-card__info{
   display: grid; grid-template-columns: 40px 1fr; gap: 6px 12px; align-items: baseline;
   padding: 20px var(--pad) 26px;
}
.work-card__num{ font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--ink-soft); }
.work-card__title{ font-size: clamp(22px, 2vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.work-card:hover .work-card__title{ color: var(--accent); }
.work-card .tags{ grid-column: 2; margin-top: 8px; color: var(--ink-soft); }
.work-card__link{ grid-column: 2; justify-self: start; margin-top: 12px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.work-card__link:hover{ text-decoration: underline; }
.works-back{
   display: block; padding: 26px var(--pad);
   font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
   transition: background-color .3s ease, color .3s ease;
}
.works-back:hover{ background: var(--accent); color: var(--on-accent); }

/* ---------- technologies ---------- */
.tech-grid{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--line);
   border-bottom: 1px solid var(--line);
}
.tech{
   position: relative;
   display: flex; flex-direction: column; justify-content: space-between;
   min-height: 190px;
   padding: 20px var(--pad) 22px;
   background: var(--bg);
   transition: background-color .3s ease, color .3s ease;
}
.tech__num{ font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--ink-soft); }
.tech__name{
   margin-top: 40px;
   font-size: clamp(22px, 2vw, 34px);
   font-weight: 600; letter-spacing: -.035em; line-height: 1.05;
}
.tech__cat{ margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tech:hover{ background: var(--accent); color: var(--on-accent); }
.tech:hover .tech__num, .tech:hover .tech__cat{ color: inherit; }

/* ---------- contact ---------- */
.contact{ display: grid; grid-template-columns: 1.2fr 1fr; }
.contact__lead{
   display: flex; flex-direction: column; align-items: flex-start; gap: 36px;
   padding: 48px var(--pad) 56px;
}
.contact__label{ color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px; }
.contact__dot{ width: 8px; height: 8px; border-radius: 50%; background: #2BD46B; box-shadow: 0 0 0 0 rgba(43, 212, 107, .6); animation: pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow: 0 0 0 8px rgba(43, 212, 107, 0); } 100%{ box-shadow: 0 0 0 0 rgba(43, 212, 107, 0); } }
.contact__sub{ font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 480px; margin-top: -12px; }
.contact__big{
   font-size: clamp(30px, 3.4vw, 60px);
   font-weight: 500; letter-spacing: -.04em; line-height: 1.05;
   max-width: 18ch; text-wrap: balance;
}
.contact__big em{ font-style: normal; color: var(--accent); }
.contact__cta{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.contact__cta:hover{ background: transparent; color: var(--ink); border-color: var(--ink); }
.contact__list{ border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.contact__list li{ flex: 1; border-bottom: 1px solid var(--line); }
.contact__list li:last-child{ border-bottom: 0; }
.contact__list a, .contact__list li > div{
   height: 100%;
   display: grid; grid-template-columns: 100px 1fr 24px; align-items: center; gap: 16px;
   padding: 28px var(--pad);
   transition: background-color .3s ease, color .3s ease, padding-left .3s var(--ease);
}
.contact__list a:hover{ background: var(--accent); color: var(--on-accent); padding-left: calc(var(--pad) + 10px); }
.contact__key{ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.contact__list a:hover .contact__key{ color: inherit; }
.contact__val{ font-size: clamp(16px, 1.4vw, 22px); font-weight: 500; letter-spacing: -.02em; word-break: break-word; }
.contact__arrow{ font-size: 20px; justify-self: end; transition: transform .3s var(--ease); }
.contact__list a:hover .contact__arrow{ transform: translate(3px, -3px); }

/* ---------- footer ---------- */
.footer{
   margin-top: clamp(80px, 12vw, 180px);
   background: var(--footer-bg); color: var(--footer-ink);
   overflow: hidden;
   --line: color-mix(in srgb, var(--footer-ink) 25%, transparent);
}
.footer__nav{ display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.footer__nav a{
   padding: 34px 10px; text-align: center;
   font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
   transition: background-color .3s ease, color .3s ease;
}
.footer__nav a + a{ border-left: 1px solid var(--line); }
.footer__nav a:hover{ background: var(--footer-ink); color: var(--footer-bg); }
.footer__grid{ display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1px solid var(--line); }
.footer__grid > div{ padding: 30px var(--pad) 36px; display: flex; flex-direction: column; gap: 22px; }
.footer__grid > div + div{ border-left: 1px solid var(--line); justify-content: flex-end; }
.footer__links a{ display: inline-flex; gap: 10px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; }
.footer__links a span{ transition: transform .3s var(--ease); }
.footer__links a:hover span{ transform: translateX(6px); }
.footer__small{ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.8; }
.footer__word{
   text-align: center;
   font-size: clamp(90px, 22vw, 400px); font-weight: 700; letter-spacing: -.08em; line-height: .8;
   padding-top: 20px;
   margin-bottom: -.12em;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
   .reveal{ opacity: 1; transform: none; transition: none; }
   .ticker__track, .marquee__track, .home__marquee{ animation: none; }
   .home__photo{ animation: none; }
   html{ scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
   .slider{ grid-template-columns: 1fr; }
   .slider__img{ border-right: 0; border-bottom: 1px solid var(--line); }
   .slider__thumbs{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 140px; overflow-x: auto; scrollbar-width: none; }
   .slider__thumbs::-webkit-scrollbar{ display: none; }
   .contact{ grid-template-columns: 1fr; }
   .contact__list{ border-left: 0; border-top: 1px solid var(--line); }
   .tech-grid{ grid-template-columns: repeat(2, 1fr); }
   .intro{ grid-template-columns: 1fr; }
   .intro__side{ border-left: 0; border-top: 1px solid var(--line); }
   .intro__big{ max-width: 18ch; }
   .row, .rows:not(.rows--links) .row{ grid-template-columns: 1fr; gap: 10px; }
   .row__arrow{ position: absolute; top: 28px; right: var(--pad); }
}

@media (max-width: 700px){
   .contact__list a, .contact__list li > div{ grid-template-columns: 80px 1fr 20px; padding: 22px var(--pad); }
   .works-grid{ grid-template-columns: 1fr; }
   .page-works{ padding-top: 56px; }
   .tech{ min-height: 140px; }
   .tech__name{ margin-top: 24px; }
   .stats{ grid-template-columns: 1fr; }
   .stat + .stat{ border-left: 0; border-top: 1px solid var(--line); }
   .home{ padding-top: calc(56px + 3vh); }
   .home__slashes{ padding-left: 16px; }
   .home__photo{ top: 56px; z-index: 0; height: min(56vh, 460px); }
   .home__marquee{ font-size: clamp(90px, 22vh, 180px); }
   .home__bottom{ justify-content: center; padding: 0 16px; }
   .home__info{ justify-content: center; column-gap: 22px; }
   .home__info li{ font-size: 8px; }
   .topbar{ height: 56px; grid-template-columns: auto 1fr auto 56px; }
   .topbar__menu{ width: 56px; }
   .topbar__clocks{ margin: 0 10px; }
   .topbar__logo{ font-size: 24px; }
   .menu{ inset: 56px 0 0 0; }
   .split{ grid-template-columns: 1fr; }
   .split__img{ border-left: 0; border-top: 1px solid var(--line); }
   .footer__grid{ grid-template-columns: 1fr; }
   .footer__grid > div + div{ border-left: 0; border-top: 1px solid var(--line); }
   .footer__nav a{ padding: 24px 6px; font-size: 12px; }
}